锋利的jQuery 笔记整理一

一、认识jQuery

1 javascript自身存在的三个弊端

复杂的文档对象模型、不一致的浏览器实现、便捷的开发、调试工具的缺乏。

2 javascript常见的库

Prototype	对javascript内置对象做了大量扩展，也组合了很多有用的javascript方法
Dojo	提供了很多独有功能：比如离线存储的API，生成图标的组件，基于SVG/VML的矢量图形和Comet支持等（适合企业级应用）
YUI	封装了许多有用的功能，例如DOM操作，和Ajax应用等，同时包含了几个核心的CSS文件
Ext Js	原本是YUI的扩展，现在可以利用包括jQuery在内的多种javascript框架作为基础库 但因侧重于页面，其代码比较臃肿
MooTools	轻量、简洁、模块化、面向对象、具有更好的扩展性，兼容性。模块化思想非常优秀，核心代码只有8kb
jQuery	轻量级，拥有强大的选择器，出色的DOM操作，可靠的事件处理、完善的兼容性和链式操作等功能

jQuery的优势：（1）轻量级 (2) 强大的选择器(3)出色的DOM操作（4）可靠的事件处理 （5）完善的ajax （6）不污染顶级变量（7）出色的浏览器兼容性 （8）链式操作方式（9）隐式迭代（10）行为层和结构层的分离（11）丰富的插件支持（12）完善的文档（13）开源

3对比

	window.onload	$(document).ready()
执行时机	必须等网页所有内容加载完毕	网页中所有DOM结构绘制完毕后执行
编写个数	不能同时编写多个，只会执行最后一个	能同时执行多个，每个都有输出

$是jQuery的简写形式。举例:     

$("#f")等价于jQuery("#f")    $.ajax等价于jQuery.ajax

4 链式操作风格

$(".level1>a).click(function(){
    $(this).addClass("current") //给当前元素添加样式
     .next().show()         //下一个元素显示
     .parent.siblings()children("a").removeClass("current")   //父元素的同辈元素的子元素<a>移除样式
.next().hide();     //他们的下一个元素隐藏
return false;
});

5 jquery对象和DOM对象

（1）DOM对象，每一份DOM都可以表示成一棵树，可以通过javascript里面的getElementById或者getElementByTagName来获取元素节点，像这样得到的DOM元素就是DOM对象。

（2）jquery对象，通过jquery包装DOM对象后产生的对象

$("#f").html 等价于 document.getElementById("f").innerHTML;

在jquery对象中无法使用DOM对象里的任何方法。在DOM对象中无法使用jQuery对象里的任何方法。

错误	正确 （jQuery方法）
$("#id").innerHTML	$("#id").html()
$("#id").checked	$("#id").attr("checked")

6 jquery对象和DOM对象的相互转换

（1） jquery对象转换成DOM对象

方法	例子
[index]	var $cr=$("#cr");    //jquery对象 var cr=$cr[0];      //DOM对象
get(index)	var $cr=$("#cr");    //jquery对象 var cr=$cr.get(0);      //DOM对象

(2）DOM对象转换成jquery对象

对于一个DOM对象，只需要把$()把DOM对象包装起来，就可以得到jQuery对象。

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

var $cr=$("#cr");    //jquery对象

实例研究：

DOM方式	jQuery方式
var $cr=$("#cr");    //jquery对象 var cr=$cr[0];      //DOM对象 if(cr.checked)	var $cr=$("#cr");    //jquery对象 if($cr.is(":checked")）

                                                                           二 jQuery 选择器

 jquery的行为规则都必须在获取到元素之后才能生效

1 jQuery选择器的优势

（1）简洁的写法（2） 支持css1到css3选择器，也有自己独有的选择器 （3）完善的处理机制

用jQuery获取网页中不存在的元素也不会报错

需要注意的是

$("tt")获取的永远是对象，即使网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否存在，不能用以下代码

if ($("tt")){
//do something
}

而是根据获取到的元素的长度来判断 或者转化成DOM对象

if ($("tt").length){
//do something
}

if ($("tt")[0]){
//do something
}

2  jQuery选择器

分为四大类：基本选择器    层次选择器   过滤选择器   表单选择器

（1）基本选择器

选择器	描述	示例
id选择器	根据id选取一个元素
类选择器	根据类名选取一个元素
标签选择器	根据标签名选取一个元素
*（通配符）	匹配所有元素
并集选择器	将每一个选择器匹配到的元素合并后返回	$("div,span,p.myClass)  选取所有的，<div> <span>和class为myClass的<p>标签
交集选择器	将选择器匹配到的元素的交集进行返回	$(h2.current") 选取class为current的h2元素

（2）层次选择器

选择器	描述	示例
后代元素	选取后代所有元素
子元素   >	选取子元素
相邻元素   +	选取下一个同辈元素
同辈元素    ~	选取元素后面所有的同辈元素

$("prev+next")与next()方法等价

$("prev~siblings")与nextAll()方法等价

但是 ，$("prev~siblings")只能选择prev元素后面的同辈元素，而siblings（）方法与前后位置无关，只要是同辈节点都能匹配。

（3）过滤选择器

分类	选择器	描述
基本过滤选择器	:first :last :not(selector) :even :odd :eq(index)  :gt(index) :lt(index) :header :animated :focus	选取第一个/最后一个/非/索引为偶数/奇数 选取索引=index/>index/<index 选取标题元素/正在执行动画的元素/当前获得焦点的元素
内容过滤选择器	:contains(text) :empty :has(selector) :parent	选取含有文本内容为“text”的元素 选取不包含子元素或者文本的空元素 选取含有selector元素的元素 选取含有子元素或者文本的元素
可见性过滤选择器	:hidden :visible	选取可见/不可见元素
属性过滤选择器	[attribute]  [attribute=value] [attribute!=value] [[attribute^=value][attribute$=value][attribute*=value] [attribute|=value] [attribute~=value] [attribute1][attribute2]...[attributeN]	选取拥有此属性，属性等于value ,属性不等于value的元素 选取属性值以value开头、以value结束、含有value值的元素 选取属性值等于给定字符串或者以该字符串为前缀 用空格分割的值中含有一个给定值的元素 复合属性选择器，满足多个属性条件的选择器
子元素过滤选择器	:nth-child(index/even/odd/equation :first-child :last-child :only-child	选取父元素下的第index个子元素或者奇数偶数元素 选取父元素的第一个/最后一个元素 选取只有一个子元素的父元素的子元素
表单对象属性过滤选择器	:enabled   :disabled :checked :selected	选取所有可用/不可用元素 选取所有被选中的元素（复选框、单选框） 选取所有被选中的选项元素（下拉列表）

：nth-child()选择器index从1开始。：eq(index)从0开始。

（4）表单选择器

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

三  jQuery中的DOM操作

1 DOM操作分类

DOM-core	javascript 中的getElementById(),getElementByTagName()都是DOM-core的组成部分
HTML-DOM	提供了简明的记号描述各种HTML元素eg  document.forms  element.src
CSS-DOM	针对CSS的操作 主要作用是获取和设置style对象的的各种属性

2 jQuery中的DOM操作

节点操作

操作	方法	描述
查找节点 查找元素节点                查找属性节点	$("") $selector.attr("")
创建节点 创建元素节点                 创建文本节点                 创建属性节点	$(html) $("<li>文本</li>") $("<li title="1">文本</li>")	传入HTML标记字符串
插入节点 内部插入	$(A).append(B). $(A).appendTo(B). $(A).prepend(B). $(A).prependTo(B).	A B B A B A A B
插入节点  外部插入	$(A).after(B). $(A).insertAfter(B). $(A).before(B). $(A).insertBefore(B).	A B B A B A A B
删除节点	remove() detach() empty()	删除该节点，该节点包含的后代节点也将被删除 删除节点后，其所有绑定的事件，附加的数据会保存下来 清空节点 位置还在
复制节点	clone()	如果传入参数true，则表示连该元素的所绑定的事件也一起复制
替换节点	replaceWith() replaceAll()	将匹配的元素换成指定的元素 颠倒了replaceWith()操作
包裹节点	wrap() wrapAll() wrapInner()	将某个节点用其它标记包裹起来 会将所有匹配的元素用一个标记包裹起来 将每一个匹配的元素的子内容用其它结构化的标记包裹起来

属性操作

attr()	获取和设置元素的属性
removeAttr()	删除元素属性

样式操作

attr(class)	获取和设置样式
addClass()	追加样式，会有样式叠加。如果不同class设置同一样式属性，后者覆盖前者
removeClass()	移除样式 一个或多个均可
toggleClass()	控制样式上的切换 如果类名存在则删除他，如果不存在则添加他
hasClass()	判断元素中是否含有某个Class,返回布尔值

设置和获取HTML、文本、值

html()	相当于javascript中的innerHTML	获取html代码（如果有标签，标签也会输出）
text()	相当于javascript中的innerText	读取或设置某个元素中的文本内容
val()	相当于javascript中的value	用来获取或设置元素的值

javascript中的innerText属性并不能在火狐浏览器中运行，但是jQuery的text()方法支持所有的浏览器

遍历节点

children()	匹配元素的子元素集合
next()	匹配元素后面紧邻的同辈元素
prev()	匹配元素前面紧邻的同辈元素
siblings()	匹配元素前后所有的同辈元素
closest()	该方法取得最近的匹配元素
parent() parents()	获得匹配元素的父元素(返回一个元素节点) 获得匹配元素的父元素一路查找(返回多个元素节点)

3 CSS-DOM操作

简单来说就是读取和设置style对象的各种属性。

$("p").css("color");     //获取元素的样式颜色
$("p").css("color"，"red");     //将元素的样式颜色设置为红色
$("p").css({"backgroundColor":"red","font-size":"30px"});     //设置元素的多个样式

css()  获取和设置元素样式

获取元素的高度	$(element).css(height)
	$(element).height()

height()和width()均可以获取或设置元素的高度/宽度

元素定位操作

offset()	获取元素在当前视窗的相对偏移 返回的对象有两个属性，top 和left
position()	获取元素相对于最近的一个position样式属性为非定位的父节点的相对偏移 返回的对象有两个属性，top 和left
scrollTop()	获取元素的滚动条距顶端的距离
scrollLeft()	获取元素的滚动条距左端的距离

scrollLeft()、scrollTop()如果给定参数，则会控制元素的滚动条滚到指定位置。