初学前端开发
关注
分享
扫一扫
在百度前段技术学院学习
RealRecall
这个作者很懒，什么都没留下…
展开
-
day34-36 一种使用innerHTML增加内容的方法
代码如下：outerHTML这个属性和innerHTML差不多，前者还额外设置（或获取）对象的标签。原创 2020-12-17 20:13:05 · 423 阅读 · 0 评论 -
day34-36属性选择器
当元素里没有id和class，且不能通过元素直接找到怎么办？用属性选择器！示例代码：<!DOCTYPE html><html><head><style>a[target=_blank]{background-color:yellow;}</style></head><body><p>target="_blank" 的链接会得到黄色背景：</p><a href="原创 2020-12-17 18:56:38 · 109 阅读 · 0 评论 -
day34-36 善用字符串拼接
我第一次看到这个代码还以为是写错了，是因为我有思维定式代码如下：qiu.style.transform = "translate("+x+"px,"+y+"px)";我的思维定式是，使用style.属性后，内容要被引号包围，但实际上并不是这样的，使用引号只是为了录入字符串，当需要录入变量时，用字符串的拼接即可。我把等号后面的引号的逻辑关系看错了，以为第一个括号和最后一个括号是一对。...原创 2020-12-17 17:05:43 · 120 阅读 · 0 评论 -
day34-36在XML中的五个实体引用
如果把字符 “<” 放在 XML 元素中，会发生错误，这是因为解析器会把它当作新元素的开始：<message>if salary < 1000 then</message>为了避免这个错误，要用实体引用来代替 “<” 字符：<message>if salary < 1000 then</message> 在 XML 中，有 5 个预定义的实体引用：< <> >&a原创 2020-12-16 14:59:18 · 119 阅读 · 0 评论 -
day31-33 对于e.target的使用要小心
对于onclick事件，每一次的e.target所获得的对象取决于onclick的地方。与变量不同。实例代码：<html> <body> <div id="region-radio-wrapper"></div> <div id="product-radio-wrapper"></div> <div id="table-wrapper"></div> <script&原创 2020-12-15 17:42:40 · 314 阅读 · 0 评论 -
day31-33阻止默认事件的方法
代码如下： var input = document.querySelector("input"); input.onclick = function (e) { if (input.checked == false) { e.preventDefault(); } };这样的话，checkbox就无法取消了。因为当checked的值想要变成false时，input的默认事件，即“改变checkbox的状态”这个默认原创 2020-12-14 18:16:33 · 495 阅读 · 0 评论 -
day31-33 关于点击事件内的判断语句
如果点击了一个checkbox，判断语句的判断是根据点击后的情况判断的：举个例子： if (input.checked == true) { console.log("123"); }在这里，当按钮按下后，如果是选中状态，则输出123...原创 2020-12-14 17:45:55 · 247 阅读 · 0 评论 -
day31-33 :nth-child和:nth-of-type的区别
区别不大。以为p为子元素为例。p:nth-child(n) p的父元素的第n个子元素p:nth-of-type p的父元素的第n个p元素原创 2020-12-14 17:07:43 · 122 阅读 · 0 评论 -
day31-33关于parentNode,parentElement,childNodes,children
找节点和找元素是不同的。childNodes和children区别在于，childNodes可能会找到文本节点，而children只会找到元素节点。parentNode和parentElement区别在于，存在document的节点，而不存在document元素。原创 2020-12-14 17:00:44 · 163 阅读 · 0 评论 -
day31-33关于自定义属性和修改属性
以input标签为例子input = document.querySelector("input");input.type = "checkbox";//在DOM中，也在标签中。input.hhhhhhh = "xxxxxx";//在DOM中，不在标签中，因为他不是内建属性。input.setAttribute("zzzzz","checkbox");//不管是否是内建属性，都会出现在标签中。所以，在修改内建属性时，为了方便，直接用点语法就行。在创建和修改自定义属性时，用setAttribut原创 2020-12-14 16:09:00 · 159 阅读 · 0 评论 -
day22-24 二叉树
放一个二叉树的例子<html> <body> <script> var tree = { id: 0, name: "root", left: { id: 1, name: "Simon", left: { id: 3, name: "Carl", left: {原创 2020-12-13 18:45:32 · 119 阅读 · 0 评论 -
day28-30使用querySelectorAll和for遍历
代码如下： for (i = 0; i < tips.length; i++) { var li = document.querySelectorAll("li"); }另外提一下，使用for循环的死后，第二个参数中若存在变量，可能会由于for循环的改变而改变，无法达到预期。因此最好不要直接在第二个变量里写参数，而是要在第一个参数里定义一个新变量，再把新变量写到第二个参数里，以保证for循环执行条件不变。...原创 2020-12-12 19:26:20 · 392 阅读 · 0 评论 -
day28-30（focus、select、children、keycode）
document.querySelector(“input”).focus();焦点作用于某对象document.querySelector(“input”).select();全选输入框中的内容ul.children.length ul的子节点的个数i = i.replace(/\s+/g, “”);去掉空格input.oninput = function (e) {e != 40 && e.keyCode != 13) { //如果按的不是上下及回车，重置选中状态原创 2020-12-12 19:11:50 · 136 阅读 · 0 评论 -
day28-30 复习事件代理
很简单的啦，我把代码放在这里啦：ul.onclick = function (e) { if (e.target.nodeName.toLowerCase() == "li") { hideTips(); var source = e.target; var liContent = source.textContent; input.value = liContent; }};原创 2020-12-11 10:57:57 · 108 阅读 · 0 评论 -
day28-30复习关系选择器
关系选择器是指根据与其他元素的关系选择元素的选择器，常见的符号有空格、>、~，还 有+等，这些都是非常常用的选择器。后代选择器：选择所有合乎规则的后代元素。空格连接。相邻后代选择器：仅仅选择合乎规则的儿子元素，孙子、重孙元素忽略，因此又称“子选择器”。>连接。适用于 IE7 以上版本。兄弟选择器：选择当前元素后面的所有合乎规则的兄弟元素。~连接。适用于 IE7 以上 版本。相邻兄弟选择器：仅仅选择当前元素相邻的那个合乎规则的兄弟元素。+连接。适用于 IE7 以上版本。...原创 2020-12-09 10:48:58 · 120 阅读 · 0 评论 -
day28-30 关于addEventListener
有的事件要用addEventListener添加，比如keypress。如果用.keypress可能不行。原创 2020-12-08 08:28:58 · 116 阅读 · 0 评论 -
day25-27完成了两个时钟
学习时间：3h尽量利用了函数的封装<html> <body> <div></div> <div class="second"></div> <script> var div1 = document.querySelector("div"); var today = new Date(); var day = today.getDay(); fun原创 2020-12-06 10:42:10 · 129 阅读 · 0 评论 -
day25-27 递归和setTimeout
递归程序调用自身的编程技巧称为递归（ recursion）。递归做为一种算法在程序设计语言中广泛应用。 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法，它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解，递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算，大大地减少了程序的代码量。递归的能力在于用有限的语句来定义对象的无限集合。一般来说，递归需要有边界条件、递归前进段和递归返回段。当边界条件不满足时，递归前进；当边界条件满足时，递归返回。使用setTime原创 2020-12-05 11:07:30 · 455 阅读 · 0 评论 -
day25-27 数组的一种构造方法
<html> <body> <script type="text/javascript"> var d = new Date(); var weekday = new Array(7); weekday[0] = "星期日"; weekday[1] = "星期一"; weekday[2] = "星期二"; weekday[3] = "星期三"; weekday[4] = "星期原创 2020-12-05 10:11:54 · 114 阅读 · 0 评论 -
day22-24 又犯了个错
找了半天才找到这个错误所以发上来公开处刑一下吧。<html> <body> <script> //对象到数组 var scoreObject = { Tony: { Math: 95, English: 79, Music: 68, }, Simon: { Math: 100, Engl原创 2020-12-04 11:04:40 · 110 阅读 · 0 评论 -
day22-24 对非 ASCII 字符排序
对非 ASCII 字符排序当排序非 ASCII 字符的字符串（如包含类似 e, é, è, a, ä 等字符的字符串）。一些非英语语言的字符串需要使用 String.localeCompare。这个函数可以将函数排序到正确的顺序。var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];items.sort(function (a, b) { return a.localeCompare(b);});原创 2020-12-04 10:09:39 · 112 阅读 · 0 评论 -
day22-24 初见函数的中的=＞
var numbers = [4, 2, 5, 1, 3];numbers.sort(function(a, b) { return a - b;});console.log(numbers);也可以写成：var numbers = [4, 2, 5, 1, 3]; numbers.sort((a, b) => a - b); console.log(numbers);也就是说numbers.sort(function(a, b) { return a - b;});原创 2020-12-04 10:04:23 · 114 阅读 · 0 评论 -
day22-24 sort()方法
语法：arr.sort([compareFunction])如果指明了 compareFunction ，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素：如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。备注： ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；原创 2020-12-04 09:53:32 · 167 阅读 · 0 评论 -
day22-24 对象、属性和方法
对象、属性和方法。对于如下对象：var person = { firstName: "Bill", lastName : "Gates", id : 678, fullName : function() { return this.firstName + " " + this.lastName; }};冒号前时属性名，冒号后是属性值方法是作为属性来存储的函数。访问对象属性两种方法：1.objectName.propertyName2.objec原创 2020-12-03 14:34:51 · 146 阅读 · 0 评论 -
day22-24 一些方法和算法的笔记（关于正则表达式）
判断按钮是否被选中：lab1.checked == true判断内容是否为数字： if (parseFloat(int1.value).toString() == "NaN") { p.textContent = "不是数字"; } else { p.textContent = "是数字"; }...原创 2020-12-02 10:55:29 · 105 阅读 · 0 评论 -
Number对象和Math对象
他们都有属性和方法。使用方法时，用法不同。对于Number对象：要对Number对象的变量使用方法（注意number首字母大写）创建 Number 对象有三种办法：var x = 1;//直接定义变量，并用数值类型赋值var myNum = new Number(value);//通过Number方法强制类型转换，可以是字符串或数字var myNum = Number(value);//通过new关键字创建Number类型的实例第一种多方便呜呜呜。例如：let x = 1;x.toS原创 2020-12-02 10:03:27 · 211 阅读 · 0 评论 -
day22-24 八进制和十六进制
如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 “x”，则解释为十六进制数。var y=0377;//255var z=0xFF;//255原创 2020-12-02 09:24:03 · 264 阅读 · 0 评论 -
day22-24 var和let的区别
var可以变量提升：即先写一个变量再声明也可以重复声明：同一个变量声明多次都不会报错，但这么做代码会看起来很乱。let避免了这个问题，所以建议使用let声明变量原创 2020-12-02 09:19:34 · 126 阅读 · 0 评论 -
day22-24一些笔记
科学计数法的用法：var y = 123e5; // 12300000var z = 123e-5; // 0.00123JS对象有点向python里的字典。var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};对于Undefinedvar person; // 值是 undefined，类型是 undefined对于空值v.原创 2020-12-01 17:48:27 · 109 阅读 · 0 评论 -
day20-21浅谈CSS Sprite
什么是css sprite？将图标、背景、按钮背景等图片合并成一张图，然后通过坐标来定位背景。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。简而言之：一背景图图多用。具体看这个：https://blog.youkuaiyun.com/u011349149/article/details/24181675可以用sprite实现圆角但我不想这么做，太麻烦了，用css3新增的属性radius多方便。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTM原创 2020-11-29 20:05:08 · 112 阅读 · 0 评论 -
day20-21使用opacity制作渐变
对于淡入有两种方法：一、利用法<html> <body> <div id="fade-obj" style="width: 300px; height: 300px; background: #000" ></div> <button id="fade-btn">淡出</button> <script> let div = document.quer原创 2020-11-29 16:35:27 · 380 阅读 · 0 评论 -
day20-21方法setInterval与setTimeout
JS中setTimeout()的用法详解原创 2020-11-29 09:51:37 · 168 阅读 · 0 评论 -
day20-21让你和页面对话
学习时间：1小时复习，让你和页面对话W3School 事件onload 和 onunload 事件（进入和离开页面）onchange 事件（与输入字段验证结合使用）onmouseover 和 onmouseout 事件（当用户将鼠标移至 HTML 元素上或移出时触发某个函数）onmousedown, onmouseup 以及 onclick 事件（点击）以上几个事件的详细解释见 这里MDN 事件《day17-18进一步学习JS第二部分》已看。略。HTML DOM Text 对象ht原创 2020-11-28 09:47:08 · 243 阅读 · 3 评论 -
day19找到那个DOM
学习时间DOM当网页被加载时，浏览器会创建页面的文档对象模型（DOM）（Document Object Model）。DOM 定义了访问文档的标准。“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”W3C DOM 标准被分为 3 个不同的部分：Core DOM - 所有文档类型的标准模型XML DOM - XML 文档的标准模型HTML DOM - HTML 文档的标准模型HTML DOM 是关于如何获取、更改、添原创 2020-11-26 15:08:14 · 140 阅读 · 0 评论 -
day17-18开始完成IEF中的练习
阅度完编码1：强化计算器input标签在未设置type时，输入的内容为string类型。编码2：原创 2020-11-25 08:50:11 · 164 阅读 · 0 评论 -
day17-18进一步学习JS第二部分
笔记（学习时间：）二、MDN 阅读完JavaScript第一步及JavaScript基础要件JS第一步事前准备写在下篇文章。JavaScript 初体验练习时，可以使用开发者工具 JavaScript 控制台，即chrome浏览器中按f12，点击console，换行是shift+enter。ctrl+l：清屏浅谈对象（Object）通过 focus() 方法让光标在页面加载完毕时自动放置于 输入框内，这意味着玩家可以马上开始第一次猜测，而无需点击输入框。 这只是一个小的改进，却提高了可用原创 2020-11-20 10:30:19 · 266 阅读 · 0 评论 -
day17-18进一步学习JS第一部分
今日笔记（学习时间：）一、W3School 从if-else看到异常使用if-else和外部JS<!DOCTYPE html><html><body><p>单击按钮以显示基于时间的问候语：</p><button id="wyc">试一试</button><p id="demo"></p><script>function myFunction() { var原创 2020-11-18 20:49:52 · 186 阅读 · 0 评论 -
day16开始学习js
经过前些天的复习，前两天得以快速完成了day12-15的任务，于是html和css的学习暂时告于段落。JS笔记API：应用程序接口（Application Programming Interfaces）API分两种浏览器 API文档对象模型 API（DOM（Document Object Model）API） 能通过创建、移除和修改 HTML，为页面动态应用新样式等手段来操作 HTML 和 CSS。比如当某个页面出现了一个弹窗，或者显示了一些新内容（像上文小 demo 中看到那样），这就是 DO原创 2020-11-17 08:40:42 · 208 阅读 · 0 评论 -
复习一下HTML和CSS
html和css还差最后一个作业，做倒数第二个作业用了太长时间，我对于知识掌握不牢。我今天开始复习了day1到day8的自学内容。时间有限，只复习了选择器，列表。原创 2020-11-01 22:14:38 · 910 阅读 · 2 评论 -
day9-11学习规范并且制作漂亮的网站
2020年10月19日晚-21日第九天到第十一天：来做一个漂亮的网站学习总用时：先学习规范：HTML1.在 HTML5 中, 空的 HTML 元素也不一定要关闭。在 XHTML 和 XML 中斜线 (/) 是必须的。如果你期望 XML 软件使用你的页面，使用这种风格是非常好的。2.虽然html5中可以不添加关闭标签，但建议加上。3.用小写命名标签。4.在开头声明文档类型“<!doctype html>”。5.属性值使用引号。6.图片通常使用 alt 属性。在图片不能显示时，原创 2020-10-24 10:11:48 · 166 阅读 · 0 评论