锋利的jQuery（第二版）初读笔记

window.onload(): 必须等待网页中所有的内容加载完毕后（包括图片）才能执行。

$(document).ready(): 网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完。

1.4.2 jQuery对象和DOM对象的相互转换

　　在讨论jQuery对象和DOM对象的相互转换之前，先约定好定义变量的风格。如果获取的对象是jQuery对象，那么在变量前面加上$，例如

var $variable = jQuery对象;

　　如果获取的是DOM对象，则定义如下：

var variable = DOM对象

　　1. jQuery对象转换成DOM对象

　　jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get(index).

　　(1) jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象.

　　jQuery代码如下：

var $cr = $("#cr");          // jQuery对象
var cr  = $cr[0];            // DOM对象
alert(cr.checked)            // 检测这个checkbox是否被选中了

　　（2）另一种方法是jQuery 本身提供的，通过get(index)方法得到相应的DOM对象.

　　jQuery代码如下：

var $cr = $("#cr");               // jQuery对象
var cr   = $cr.get(0);            // DOM对象
alert(cr.checked)                 //  检测这个checkbox是否被选中

　　2. DOM对象转换成jQuery对象

　　对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为$(DOM对象)。

　　jQuery代码如下：

var cr = document.getElementById("cr");      // DOM对象
var $cr = $(cr);                             // jQuery对象

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

2.3.1 基本选择器

$("#id")
$(".class")
$("element")
$("*")
$("selector, selector2 ...... selectorN")

2.3.2 层次选择器

$("ancestor descendant")
$("parent > child")
$("prev + next")：选取一个同辈元素
$("prev ~ siblings")：选取所有同辈元素

　　可以使用next()方法来代替$("prev + next")选择器。 $(".one + div") == $(".one").next("div");

　　可以使用nextAll()方法来代替$("prev ~ siblings")选择器。 $("#prev ~ div") == $("#prev").nextAll("div");

　　siblings()方法与前后位置无关，只要是同辈节点都能匹配。

2.3.3 过滤选择器

　　过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号（：）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器；

　　1. 基本过滤选择器

:first 选取第一个元素
:last 选取最后一个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 选取索引是偶数的所有元素
:odd 选取索引是奇数的所有元素
:eq(index) 选取索引等于index的元素
:gt(index) 选取索引大于index的元素
:lt(index) 选取索引小于index的元素
:header 选取所有的标题元素
:animated 选取当前正在执行动画的所有元素
:focus 选取当前获得焦点的元素

　　2. 内容过滤选择器

:contains(text) 选取含有文本内容为"text"的元素
:empty 选取不包含子元素或者文本的空元素　　
:has(selector) 选取含有选择器所匹配的元素的元素
:parent 选取含有子元素或者文本的元素

　　3. 可见性过滤选择器

hidden 选取所有不可见的元素
visible 选取所有可见的元素

在可见性选择器中，需要注意选择器:hidden，它不仅包括样式属性display为"none"的元素，也包括文本隐藏域（<input type="hidden" />）和visibility:hidden之类的元素

　　4. 属性过滤选择器

[attribute] 选取拥有此属性的元素
[attribute=value] 选取属性的值为value的元素
[attribute!=value] 选取属性的值不等于value的元素
[attribute^=value] 选取属性的值以value开头的元素
[attribute$=value] 选取属性的值含有value的元素
[attribute*=value] 选取属性的值含有value的元素
[attribute|=value] 选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-”）的元素
[attribute~=value] 选取属性用空格分隔的值中包含一个给定值的元素
[attribute1][attribute2][attributeN] 用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围

　　5. 子元素过滤选择器

:first-child 选取每个父元素的第一个子元素
:last-child 选取每个父元素的最后一个子元素
:only-child 如果那个元素是它父元素中唯一的子元素，那么将会被匹配
:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素（index从1算起）

　　:nth-child()选择器是很常用的子元素过滤选择器，详细功能如下：

　　（1）:nth-child(even) 能选取每个父元素下的索引值是偶数的元素

　　（2）:nth-child(odd) 能选取每个父元素下的索引值是奇数的元素

　　（3）:nth-child(2) 能选取每个父元素下的索引值等于2的元素

　　（4）:nth-child(3n) 能选取每个父元素下的索引值是3的倍数的元素（n从1开始）

　　（5）:nth-child(3n+1) 能选取每个父元素下的索引值是(3n+1)的元素（n从1开始）

　　6. 表单对象属性过滤选择器

:enabled 选取所有可用元素
:disabled 选取所有不可用元素
:checked 选取所有被选中的元素（单选框，复选框）
:selected 选取所有被选中的选项元素（下拉列表）

2.3.4 表单选择器

:input 选取所有的<input>、<textarea>、<select>和<button>元素
:text 选取所有的单行文本框
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 选取所有的图像按钮
:reset 选取所有的重置按钮
:button 选取所有的按钮
:file 选取所有的上传域
:hidden 选取所有的不可见元素

几个jQuery方法：

show()：显示隐藏的匹配元素
css(name, value)：给元素设置样式
text(string)：设置所有匹配元素的文本内容
addClass(class)：为匹配的元素添加指定的类名
filter(expr)：筛选出与指定表达式匹配的元素集合

用jQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点，然后可以用attr()方法来获取元素的各种属性值。

1. 创建元素节点

　　用$(html)方法创建元素节点。

2. 插入节点

append()：向每个匹配的元素内部追加内容
prepend()：向每个匹配的元素内部前置内容
after()：在每个匹配的元素之后插入内容
before()：在每个匹配的元素之前插入内容

3. 删除节点

remove()
detach()
empty()

4. 复制节点

　　clone()方法。如果需要复制元素的同时复制元素中所绑定的事件，则需要传递一个参数true;

5. 替换节点

　　replaceWith()方法.

6. 包裹节点

　　如果要将某个节点用其他标记包裹起来，jQuery提供了wrap()方法。

3.2.8 属性操作

　　1. 获取属性和设置属性

　　使用attr()方法，传入一个参数可以获取属性，传入两个参数或一个对象可以设置属性。

　　2. 删除属性

　　使用removeAttr()方法

3.2.9 样式操作

addClass()、removeClass();
toggleClass()控制样式上的重复切换;
hasClass()判断元素中是否含有某个class;

3.2.10 设置和获取HTML、文本和值

　　1. html()方法：类似于JavaScript中的innerHTML属性，用来读取或者设置某个元素中的HTML内容

　　2. text()方法：类似于JavaScript中的innerText属性，用来读取或者设置某个元素中的文本内容。

　　3. val()方法：类似于JavaScript中的value属性，可以用来设置和获取元素的值。无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。

focus()方法相当于JavaScript中的onfocus()方法，作用是处理获得焦点时的事件。

blur()方法相当于JavaScript中的onblur()方法，作用是处理出去焦点时的事件。

3.2.11 遍历节点

　　1. children()方法：取得匹配元素的子元素集合，只考虑子元素而不考虑后代元素。

　　2. next()方法：用于取得匹配元素后面紧邻的同辈元素。

　　3. prev()方法：用于取得匹配元素前面紧邻的同辈元素。

　　4. siblings()方法：用于取得匹配元素前后所有的同辈元素。

　　5. closest()方法：用于取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

　　6. parent()方法：

　　7. parents()方法：

3.2.12 CSS-DOM操作

可以直接利用css()方法获取和设置元素的样式属性.

　　1. offset()方法：它的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。

　　2. position()方法：它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，它返回的对象也包括两个属性，即top和left。

　　3. scropTop()方法和scropLeft()方法：这两个方法的作用分别是获取元素的滚动条相对于顶端和左侧的距离。

4.1.1 加载DOM

　　window.onload()方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即JavaScript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法可以在DOM载入就绪时就对其进行操纵并调用执行它所绑定的函数。

　　另外，需要注意一点，由于在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕，并且已经解析为DOM树了，但很可能图片还未加载完，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用jQuery的load()方法。

4.1.3 合成事件

　　1. hover()方法

　　hover()方法的语法结构为： hover(enter, leave);

　　hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数（enter）；当鼠标移出这个元素时，会触发指定的第二个函数（leave）。

　　2. toggle()方法

　　toggle()方法的语法结构为： toggle(fn1, fn2, ... , fnN);

　　toggle()方法用于模拟鼠标连续单击事件。第一次单击元素，触发指定的第一个函数(fn1)；当再次单击同一元素时，则触发指定的第2个函数(fn2)；如果有更多函数，则依次触发，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。

4.1.4 事件冒泡

事件对象：在事件处理函数上增加参数event；
停止事件冒泡：stopPropagation();
阻止默认行为：preventDefault();

如果想同时对事件对象停止冒泡和默认行为，可以在时间处理函数中返回false。

4.1.5 事件对象的属性

　　（1）event.type：获取到事件的类型;

　　（2）event.preventDefault()方法;

　　（3）event.stopPropagation()方法;

　　（4）event.target：获取到触发事件的元素;

　　（5）event.pageX和event.pageY：获取到光标相对于页面的x坐标和y坐标;

　　（6）event.which：在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键。

4.1.6 移除事件

　　unbind()方法：unbind(type, fn);

　　第1个参数是事件类型，第2个参数是将要移除的函数。

　　（1）如果没有参数，则删除所有绑定的事件。

　　（2）如果提供了事件类型作为参数，则只删除该类型的绑定事件。

　　（3）如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。

　　如果只需要触发之后，随即就要立即解除绑定的情况，可以使用one()方法；

　　one()方法：one(type, fn);

1. show()方法和hide()方法：会改变“内容”的高度、宽度和不透明度。

2. fadeIn()方法和fadeOut()方法：只会改变元素的不透明度。

3. slideUp()方法和slideDown()方法：只会改变元素的高度。

4.2.4 自定义动画方法animate()

　　语法结构：animate(params, speed, callback);

　　（1）params：一个包含样式属性及值的映射

　　（2）speed：速度参数，可选

　　（3）callback：在动画完成时执行的函数，可选

4.2.6 停止动画和判断是否处于动画状态

　　1. 停止元素的动画：stop()方法

　　语法结构：stop(clearQueue, gotoEnd);

　　参数clearQueue和gotoEnd都是可选的参数，为Boolean值（true或false）。 clearQueue代表是否清空未执行完的动画队列，gotoEnd代表是否直接将正在进行的动画跳转到末状态。

　　2. 判断元素是否处于动画状态：is(":animated");

　　3. 延迟动画：delay()方法　　

4.2.7 其他动画方法　　

toggle(speed, callback)
slideToggle(speed, easing, callback)
fadeTo(speed, opacity, callback)
fadeToggle(speed, easing, callback)

　　1. toggle()方法：切换元素的可见状态 ;

　　2. slideToggle()方法：通过高度变化来切换匹配元素的可见性 ;

　　3. fadeTo()方法：可以把元素的不透明度以渐进方式调整到指定的值 ;

　　4. fadeToggle()：通过不透明度变化来切换匹配元素的可见性 ;

attr()和prop()

如果是设置disabled和checked这些属性，应使用prop()方法，而不是使用attr()方法.

trigger()和triggerHandler()

trigger()和triggerHandler()都用于触发被选元素的指定事件类型。但triggerHandler()不会执行浏览器的默认行为，也不会产生事件冒泡。

6.5 jQuery中的Ajax

在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。

6.5.1 load()方法

　　1. 载入HTML文档

　　load()方法能载入远程HTML代码并插入DOM中，它的结构为load(url [data] [callback]);

　　url为请求HTML页面的的URL地址；data(可选)为发送至服务器的key/value数据；callback(可选)为请求完成时的回调函数，无论请求成功或失败。

　　2. 筛选载入的HTML文档

　　通过为URL参数指定选择符，就可以很方便地从加载过来的HTML文档里筛选出所需要的内容。语法结构为："url selector"；

　　3. 回调函数

　　该函数有3个参数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象。

6.5.2 $.get()方法

　　结构：$.get(url [data] [callback] [type])

　　url为请求的HTML页的URL地址；

　　data(可选)为发送至服务器的key/value数据，会作为QueryString附加到请求URL中；

　　callback(可选)为载入成功时的回调函数（只有当Response的返回状态是success才调用该方法）自动将请求结果和状态传递给该方法；

　　type(可选)为服务器端返回内容的格式，包括xml、html、script、json、text和_default；

6.5.3 $.getScript()方法和$.getJson()方法

　　1. $.getScript()：不需要在页面初次加载时就取得所需的全部JavaScript文件，需要的时候，动态加载.js文件；

9.4.2 构建HTML模板

　　1.对于移动Web应用程序，一个常见的设置是：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalabe=no" />

　　2. 在<head>中按顺下加入框架的引用，注意加载的顺序：

<link rel="stylesheet" href="jquery.mobile.css" />
<script src="jquery.js"></script>
<!-- 这里加入项目中其他的JavaScript -->
<script src="jquery.mobile.js"></script>

11.1 jQuery性能优化

　　1. 使用最新版本的jQuery类库;

　　2. 使用合适的选择器（id > tag > 属性 > 伪选择器）;

　　3. 缓存对象;

　　4. 循环时的DOM操作;

　　检查jQuery对象是否存在的正确方式为检查其长度：

var $content = $("#content");
if ($content) {  // 总是true
    // Do something
}
if ($content.length) {  // 拥有元素才返回true
    // Do something
}

posted @ 2015-04-24 21:56 林大勇阅读(234) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

林大勇

锋利的jQuery（第二版） 初读笔记

1.4.2 jQuery对象和DOM对象的相互转换

2.3.1 基本选择器

2.3.2 层次选择器

2.3.3 过滤选择器

2.3.4 表单选择器

1. 创建元素节点

3.2.8 属性操作

3.2.9 样式操作

3.2.10 设置和获取HTML、文本和值

3.2.11 遍历节点

3.2.12 CSS-DOM操作

4.1.1 加载DOM

4.1.3 合成事件

4.1.4 事件冒泡

4.1.5 事件对象的属性

4.1.6 移除事件

4.2.4 自定义动画方法animate()

4.2.6 停止动画和判断是否处于动画状态

4.2.7 其他动画方法

attr()和prop()

trigger()和triggerHandler()

6.5 jQuery中的Ajax

6.5.1 load()方法

6.5.2 $.get()方法

6.5.3 $.getScript()方法和$.getJson()方法

9.4.2 构建HTML模板

11.1 jQuery性能优化

公告

锋利的jQuery（第二版）初读笔记

4.2.7 其他动画方法　　