07 2018 档案
摘要：ready() JavaScript代码放在哪里？ 浏览器在渲染HTML页面时，是从头到尾，一行一行地检查执行的。如果JavaScript代码在前面，HTML元素在后面，遇到JavaScript选择一个还未渲染的HTML元素将会选择失败。因此，通常的做法是将脚本放在页面最后（紧跟在</body>标签
阅读全文
摘要：动画 animate()方法动画原理：改变CSS属性来影响元素行为。目前仅仅能修改属性值为数值的属性，如height weight font-size等，属性值为字符串的属性不能改。 更重要的是：在animate()方法中，属性名采用caml命令，不能使用-，如border-bottom，要写成bo
阅读全文
摘要：特效 jQuery提供一些特效方法来增强web页面人体验。 支持基本特效、淡入淡出特效、滑动特效、自定义特效 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>基本特效</title> <script src="https://aj
阅读全文
摘要：滚动条 出现滚动条通常在以下现况情况中： 1、盒子内容的高度或宽度超出容器被分配的空间大小。 2、文档对象所呈现的当前页面的高度或宽度大于浏览器可视区域的尺寸。 <!DOCTYPE html><html> <head> <title>滚动条</title> <meta charset="UTF-8"
阅读全文
摘要：盒子尺寸 <!DOCTYPE html><html> <head> <title>盒子大小</title> <meta charset="UTF-8"> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
阅读全文
摘要：克隆元素 clone() 创建匹配结果及其后代和文本 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>unwrap</title> <script src="https://ajax.aspnetcdn.com/ajax/jque
阅读全文
摘要：移除元素 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>remove</title> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js
阅读全文
摘要：添加元素 建立元素经历的过程: 1.建立元素 2.为元素添加文本或属性 3.将元素追加到DOM中 添加元素以下几个方法: <!DOCTYPE html><html> <head> <title>append</title> <meta charset="UTF-8"> <script src="ht
阅读全文
摘要：事件委托 事件委托就是利用事件冒泡原理，把处理任务委托给父元素或者祖先元素（通常用父元素），我们通过目标对象来判断事件源，并执行事件处理。 $(el).on( events [, selector ] [, data ], handler(eventObject) ) el是父元素，selector
阅读全文
摘要：事件对象 每个事件处理函数都会获得一个事件对象，该对象中包含和此事件相关的方法及属性。 事件对象在事件触发时自动传入。 事件对象的属性有： type：事件类型，如click、mouseover等 which：被按下的按钮或键 data：当事件发生时传入该函数的一些额外信息 target：发生了这个事
阅读全文
摘要：事件方法on() on()方法用来处理事件。jQuery会处理所有浏览器的兼容性问题。 on()方法可以指定影响哪个事件，相当于JavaScript中的addEventListener()事件监听。 on()方法有两个参数： 第一个参数，是事件，同addEventListener()事件监听的第一个
阅读全文
摘要：each()遍历 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>each()遍历</title> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.
阅读全文
摘要：链接式操作 $("#one").hide().delay(500).fadeIn(1500); 在这条语句中，在同一选择结果的元素上执行了三个方法： 1.hide() 隐藏元素 2.delay() 创建暂停 3.fadeIn() 淡入元素 这种在同一选取结果上处理多个方法的技术，叫做链接式操作。 <
阅读全文
摘要：理解选取更新范围 在jQuery中，当选择器返回了多个元素时，可以使用一个方法来更新所有的元素，不再需要使用循环。 <!DOCTYPE html><html> <head> <title>理解选取更新范围</title> <meta charset="UTF-8"> <script src="htt
阅读全文
摘要：获取过滤点 <!DOCTYPE html><html> <head> <title>过滤节点</title> <meta charset="UTF-8"> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
阅读全文
摘要：获取子节点 <!DOCTYPE html><html> <head> <title>获取子节点</title> <meta charset="UTF-8"> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js
阅读全文
摘要：获取兄弟节点 <!DOCTYPE html><html> <head> <title>选取所有兄弟节点</title> <meta charset="UTF-8"> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.mi
阅读全文
摘要：获取父节点 通过获取父节点，还可以获取父节点的父节点。 有3个常用方法: <!DOCTYPE html><html> <head> <title>获取父节点</title> <meta charset="UTF-8"> <script src="https://ajax.aspnetcdn.com/
阅读全文
摘要：获取元素修改属性 attract（)方法，可以获取修改元素。 获取属性，使用: attract（"属性名") 相当于javaScript中的getAttribute()。 设置属性，使用：attr("属性名","属性值") 相当于JavaScript中的setAttribute()。 删除属性，使用
阅读全文
摘要：获取修改value val() 方法，获取和修改有value属性的元素，有value属性的元素有input、botton、select等。相当于JavaScript中的value。 <!DOCTYPE html><html> <head> <title>TODO supply a title</ti
阅读全文
摘要：获取更新元素文本text() text() 方法，获取元素文本，也可以设置元素的文本值。相当于JavaScript中的textContent。 <!DOCTYPE html><html> <head> <title>TODO supply a title</title> <meta charset=
阅读全文
摘要：选择器 jQuery的选择器相比javaScript更简单明了。 $()是jQuery的元素选择器，各种DOM是这选择的: $()查找元素 基本选择器 ancestor descendant 一个元素是另一个元素的子节点 基本筛选器 内容选择器 可见性选择器 子节点选择器 属性筛选器 表单筛选器
阅读全文
摘要：HTML5事件 <!DOCTYPE html><html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init
阅读全文
摘要：变动事件 变动事件，当用户修改了DOM结构（添加或删除元素节点）后发生。 任何时候当元素被添加到DOM中或从DOM中移除时，DOM的结构就发生了变化，而这种变化就会触动变动事件。 常见的变动事件有： DOMNodeInserted，当一个节点被插入到DOM树中时触发。 DOMNodeRemoved，
阅读全文
摘要：表单事件 表单事件，当用户与表单元素进行交互时发生。 常见的事件有： submit，当表单被提交时，会触发<form>元素节点上的submit事件。 change，当某些表单元素的状态发生变化时触发。 input，<input>或<textarea>元素中的值发生变化时触发。 select，用户在一
阅读全文
摘要：焦点事件 焦点事件，当一个元素（比如链接或表单）得到或失去焦点时发生。 事件有： focus，获得焦点时触发。 blur，失去焦点时触发。 <!DOCTYPE html><html> <head> <title>TODO supply a title</title> <meta charset="U
阅读全文
摘要：键盘事件 键盘事件，当用户操作键盘时发生。 常见的键盘事件有： input，当<input>或<textarea>元素的值发生变化时触发。 keydonw，当用户按下键盘上的任意键时触发。 keypress，当用户按下键盘上一个键并在屏幕上反映一个字符时触发。 keyup，当用户松开键盘上一个键时触
阅读全文
摘要：使用stopPropogation()方法可以阻止事件冒泡。 DOM使用stopPropogation()方法，IE5-IE8使用cancelBubble。 示例: <!DOCTYPE html><html> <head> <title>TODO supply a title</title> <me
阅读全文
摘要：使用事件的preventDefault()方法改变默认行为 事件有属性，还有方法，还有对象。事件本身是个对象。 事件的preventDefault()方法改变默行为，在事件发生前阻止，不让其发生。这样的应用场景有很多,常见表单验证，如必填字段不能为空。 示例1: <!DOCTYPE html><ht
阅读全文
摘要：事件委托 事件委托就是利用事件冒泡原理，把处理任务委托给父元素或祖先元素(通常用父元素)，我们通过目标对象来判断事件源，并执行事件处理。 示例1: <!DOCTYPE html><html> <head> <title>事件委托1</title> <meta charset="UTF-8"> <me
阅读全文
摘要：事件流 事件冒泡:事件从最具体的节点开始向外传播到最宽泛的节点。这是事件流默认类型，被绝代多数浏览器支持。 element.addEventListener('event',function,trun); 事件捕货:时间从最宽泛的节点开始向类传播到最具体的节点。这种方式在IE8和更在的版本的IE中不
阅读全文
摘要：事件触发元素 事件触发元素，也叫事件的目标，也叫事件对象，也就是与用户进行交互的具体元素。 在事件监听器中，事件触发元素会自动传递到监听器的函数中。 <!DOCTYPE html><html> <head> <title>事件触发元素</title> <meta charset="UTF-8"> <
阅读全文
摘要：DOM是事件监听器 DOM事件监听器予许一个事件触发多个方法，在实际工作中应用比较多。 <!DOCTYPE html><html> <head> <title>DOM事件监听器1</title> <meta charset="UTF-8"> <meta name="viewport" content
阅读全文
摘要：HTML事件处理程序 HTML事件处理称序是将事件写在元素的开始标签，当作属性来用，如下面的单击事件: <!DOCTYPE html><html> <head> <title>HTNL事件处理程序</title> <meta charset="UTF-8"> <meta name="viewport
阅读全文
摘要：DOM事件 在JavaScript中常见的事件有： UI事件，当与浏览器UI本身（而不是网页）交互时发生的事件。 鼠标事件，当用户操作鼠标、触控板、或触摸屏幕时发生。 键盘事件，当用户操作键盘时发生。 焦点事件，当一个元素（比如链接或表单）得到或失去焦点时发生。 表单事件，当用户与表单元素进行交互时
阅读全文
摘要：获取修改元素属性 javaScript可以修改DOM节点属性。 操作属性的方法有: 获取属性值 修改属性 <!DOCTYPE html><html> <head> <title>元素属性</title> <meta charset="UTF-8"> <meta name="viewport" con
阅读全文
摘要：动态删除元素 要删除元素，需要经历以下3个步骤: 1.找到要删除的元素，放到临时变量中 2.找到要删除的元素父节点 3.调用父节点的removeChild()方法删除要删除的元素 <!DOCTYPE html><html> <head> <title>删除元素</title> <meta chars
阅读全文
摘要：动态创建元素 使用的DOM动态创建元素，要经历以下3个步骤； 1.创建元素，调用方法createElemnet() 2设置元素，调用方法createTextNode() 3.添加到DOM中，调用方法appendChild() <!DOCTYPE html><html> <head> <title>动
阅读全文
摘要：获取修改元素文本 使用nodrValue获取和修改 noderValue属性可以读节点文字 <!DOCTYPE html><html> <head> <title>使用nodeValue获取和修改</title> <meta charset="UTF-8"> <meta name="viewport
阅读全文
摘要：查询DOM元素 查询单个元素document.getElementById <!DOCTYPE html><html> <head> <title>访问元素</title> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
阅读全文
摘要：循环控制 JavaScript还提供了一些循环控制功能。 break 终止循环break不仅可以在switch中终止，还可以在循环中终止。 <!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>do while 循环<
阅读全文
摘要：dowhile do ... while循环与while循环相似，只是条件检查发生在循环结束处。 这意味着即使条件为假，循环也将始终至少执行一次。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>do whi
阅读全文
摘要：dowhile do ... while循环与while循环相似，只是条件检查发生在循环结束处。 这意味着即使条件为假，循环也将始终至少执行一次。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>do whi
阅读全文
摘要：递归 递归（英语：Recursion），又译为递回，在数学与计算机科学中，是指在函数的定义中使用函数自身的方法。 递归可以将判断、循环两种结构发挥淋漓尽致。 斐波那契数列，又称黄金分割数列，指的是这样一个数列：1、1、2、3、5、8、13、21、……在数学上，斐波纳契数列以如下被以递归的方法定义：F
阅读全文
摘要：whiledo循环 for循环是将计数器在for条件中声明。while do循环是将计数器放到while循环之外声明。 var i=0 while(i<10){ println(i); i++; } function println(a) { document.write(a + '<br>');
阅读全文
摘要：for循环 循环可以做重复的事情。计算机高效的原因之是因为有循环运算。 for循环是最紧凑的循环形式。 它包括以下三个重要部分:1.循环初始化 ，我们将计数器初始化为初始值。 初始化语句在循环开始之前执行。2.测试语句将测试给定的条件是否为真。 如果条件为真，那么在循环内给出的代码将被执行，否则控制
阅读全文
摘要：检测相等和存在 了解常见的真值和假值，可以增强判断能力。在使用if判断时，提升编码速度。 了解常见的检测和存在，一样可以增强判断能力，而且是必须掌握的。 数组和对象被视为真值 var shoppingCart=['','','']; println(Boolean(shoppingCart)); v
阅读全文
摘要：window常见属性和方法 window对象代表当前浏览器窗口或标签。位于浏览器对象模型(BOM)的最顶端。它的属性有方法有以下： 属性 说明 window.innerHeight 浏览器窗口高度(单位:像素)，随着浏览器大小而变 window.innerWidth 浏览器窗口宽度(单位:像素)，随
阅读全文
摘要：短路值 逻辑运算从左到右。逻辑或运算，当左边的条件成立时，后面的条件将不再参与运算。因此在逻辑或运算中，尽量将条件结果为true的放第一位。而在逻辑与运算中，尽量将条件结果为false的放到第一位。 <!DOCTYPE html> <html lang="en"> <head> <meta char
阅读全文
摘要：真值和假值 JavaScript中每个值都可以转换成布尔类型。 假值 真值
阅读全文
摘要：强制类型转换 强制类型转换 类型转换有两种：一种是显式转换，即需要程序员手动写代码转换；另一种是隐匿转换，由JavaScript解释器转换。 JavaScript提供以下函数进行显式转换： 1.转换为数值类型：Number(mix)、parseInt(string,radix)、parseFloat
阅读全文
浙公网安备 33010602011771号