《锋利的JQuery》notes

三叶草

Chapter 1    认识jQuery

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

获取jQuery对象：

var $variable = JQuery对象;

获取DOM对象：

var variable = DOM对象;

jQuery对象转换成DOM对象：

var $cr = $("#cr");  //jQuery对象var cr = $cr[0];  //DOM对象

Chapter 2    jQuery选择器
$('#tt')  获取的是对象，即使网页上没有这个元素也不会报错。应该根据获取的元素长度来判断是否存在

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

• 过滤选择器： 以一个冒号（:）开头
  

:first    选取第一个元素
:even    选取索引是偶数的所有元素
:odd     选取索引是奇数的所有元素
:eq（index）    选取索引等于index的元素，从0开始计算（只匹配一个元素）

• 内容过滤选择器
  

:empty     选取不包含子元素或者文本的空元素
:has(selector)    选取含有选择器所匹配的元素的元素

• 属性过滤选择器
  

$("div[id]")     选取拥有属性id的元素

• 子元素过滤选择器
  

：nth-child(index)    选取每个父元素下的第index个子元素

• 表单选择器
  

：input    选取所有的<input>、<textarea>、<select>和button元素
$("form :input").length,  （注意和$("form input")的区别）

• 选择器的注意事项
  

1、    选择器含有特殊符号. 、 [ 等
需要使用转义字符转义
$("#id\\#b")    转义特殊字符“#”，需要两个\\，一个转义用，一个双引号用
2、    选择器含有空格
$('.test :hidden')    带空格的，选取class为"test"的元素里面的隐藏元素
$('.test:hidden')    不带空格，选取隐藏的class为"test"的元素
Chapter 3    jQuery中的DOM操作

• 属性节点attr()
  

查找属性节点：$("p").attr("title");    获取<p>元素的节点属性title
删除节点：removeAttr()

• 插入节点 （<p>我想说</p>）
  

向元素内部追加内容：

$("p").append("<b>你好</b>");    <p>我想说 <b>你好</b></p>

在元素之后插入内容：

$("p").after("<b>你好</b>");    <p>我想说 </p><b>你好</b>

（insertAfter()    则颠倒了操作）

• 删除节点
  

remove()    该节点所包含的所有后代节点将同时被删除，这个方法的返回值的一个指向已被删除的节点的引用。
detach()    也是删除所有匹配的元素，但是和remove()不同的是，所有绑定的事件、附加的数据都会留下来。
empty()    清空节点，只是内容被清空

• 复制节点
  

$("li").click(function() {  $(this).clone().appendTo("ul");};

复制的新元素并不具有任何行为。在clone()方法中传递一个参数true，则复制元素的同时复制元素所绑定的事件。

• 样式
  

addClass()方法：追加class类
removeClass()：移除样式
toggle()：行为的重复切换
toggleClass()：类名的重复切换（类名存在则删除，不存在则添加）

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

html()     读取或设置某个元素的HTML内容 （类似innerHTML）
text()    读取或设置某个元素的文本内容 （jQuery的text()方法支持所有浏览器）（类似innerText）
val()    设置和获取元素的值 （类似value属性）

• 遍历节点
  

children()    取得匹配元素的子元素集合（不考虑其他后代元素）
next()    取得匹配元素后面紧邻的同辈元素
siblings()    取得匹配元素前后所有的同辈元素
Chapter 4    jQuery中的事件和动画
$(document).ready()方法:    在DOM载入就绪时，就能对其进行操纵。每次调用都会在现有行为上追加新的行为。
简写方式

$(function(){...}) 或 $().ready(function(){...});