jQuery 的选择器 和 DOM 对象

**************************************************************************************

选择器

$("#div"); // id 选择器
$(".div"); // class 类别选择器
$("div"); // 元素名选择器

size(); length();

通配符 *

群组选择器 用 ,
后代选择器 用 空格

选择器	CSS模	jQuery 模式	描述
1. 元素名	div {}	$('div')	获取所有 div 元素的 DOM 对象
2. ID	#box {}	$('#box')	获取一个 ID 为 box 元素的 DOM 对象
3. 类(class)	.box{}	$('.box')	获取所有class为box的所有DOM对象
4. 群组选择器	span,em,.box {}	$('span,em,.box')	获取多个选择器的 DOM 对象
5. 后代选择器	ul li a {}	$('ul li a')	获取追溯到的多个 DOM 对象
6. 通配选择器	* {}	$('*')	获取所有元素标签的 DOM 对象
7. 后代选择器	ul li a {}	$('ul li a')	获取追溯到的多个 DOM 对象
8. 子选择器	div > p {}	$('div p')	只获取子类节点的多个 DOM 对象
9. next 选择器	div + p {}	$('div + p')	只获取某节点后一个同级DOM对象
10. nextAll 选择器	div ~ p {}	$('div ~ p')	获取某节点后面所有同级DOM对象

**************************************************************************************

延迟加载

$(document).ready(function(){
　　$("#content").css("color", "red").css("font-size", "24px");
});

等价于下面写法

$(function(){
    $("#content").css("color", "red").css("font-size", "24px");
});

**************************************************************************************

DOM

html() 获取元素中 HTML 内容
html(value) 设置元素中 HTML 内容
text() 获取元素中文本内容
text(value) 设置原生中文本内容
val() 获取表单中的文本内容
val(value) 设置表单中的文本内容

attr(key) 获取某个元素 key 属性的属性值
attr(key, value) 设置某个元素 key 属性的属性值
attr({key1:value2, key2:value2...}) 设置某个元素多个 key 属性的属性值
attr(key, function (index, value) {}) 设置某个元素 key 通过 fn 来设置

1. append(content) 向指定元素内部后面插入节点 content
2. append(function (index, html) {}) 使用匿名函数向指定元素内部后面插入节点
3. appendTo(content) 将指定元素移入到指定元素 content 内部后面
4. prepend(content) 向指定元素 content 内部的前面插入节点
5. prepend(function (index, html) {}) 使用匿名函数向指定元素内部的前面插入节点
6. prependTo(content) 将指定元素移入到指定元素 content 内部前面

7. after(content) 向指定元素的外部后面插入节点 content
8. after(function (index, html) {}) 使用匿名函数向指定元素的外部后面插入节点
9. before(content) 向指定元素的外部前面插入节点 content
10. before(function (index, html) {}) 使用匿名函数向指定元素的外部前面插入节点
11. insertAfter(content) 将指定节点移到指定元素 content 外部的后面
12. insertBefore(content) 将指定节点移到指定元素 content 外部的前面

13. wrap(html) 向指定元素包裹一层 html 代码
14. wrap(element) 向指定元素包裹一层 DOM 对象节点
15. wrap(function (index) {}) 使用匿名函数向指定元素包裹一层自定义内容
16. unwrap() 移除一层指定元素包裹的内容
17. wrapAll(html) 用 html 将所有元素包裹到一起
18. wrapAll(element) 用 DOM 对象将所有元素包裹在一起
19. wrapInner(html) 向指定元素的子内容包裹一层 html
20. wrapInner(element) 向指定元素的子内容包裹一层 DOM 对象节点
21. wrapInner(function (index) {}) 用匿名函数向指定元素的子内容包裹一层

jQuery 还提供了一些常规的节点操作方法：复制、替换和删除节点:
$('body').append($('div').clone(true)); //复制一个节点添加到 HTML 中
$('div').remove(); //直接删除 div 元素
$('div').detach(); //保留事件行为的删除
$('div').empty(); //删除掉节点里的内容
$('div').replaceWith('<span>节点</span>'); //将 d iv 替换成 span 元素
$('<span>节点</span>').replaceAll('div'); //同上



**************************************************************************************
CSS样式
1. css(name) 获取某个元素行内的 CSS 样式
2. css([name1, name2, name3]) 获取某个元素行内多个 CSS 样式
3. css(name, value) 设置某个元素行内的 CSS 样式
4 .css(name, function (index, value) ) 设置某个元素行内的 CSS 样式
5 .css({name1 : value1, name2 : value2}) 设置某个元素行内多个 CSS 样式

6. addClass(class) 给某个元素添加一个 CSS 类
7. addClass(class1 class2 class3...) 给某个元素添加多个 CSS 类

8. removeClass(class) 删除某个元素的一个 CSS 类
9. removeClass(class1 class2 class3...) 删除某个元素的多个 CSS 类

10. toggleClass(class) 来回切换默认样式和指定样式
11. toggleClass(class1 class2 class3...) 同上
12. toggleClass(class, switch) 来回切换样式的时候设置切换频率 switch 频率
13. toggleClass(function () {}) 通过匿名函数设置切换的规则
14. toggleClass(function () {}, switch) 在匿名函数设置时也可以设置频率
15. toggleClass(function (i, c, s) {}, switch) 在匿名函数设置时传递三个参数

1. width() 获取某个元素的长度
2. width(value) 设置某个元素的长度
3. width(function (index, width) {}) 通过匿名函数设置某个元素的长度

4. height() 获取某个元素的长度
5. height(value) 设置某个元素的长度
6. height(function (index, width) {}) 通过匿名函数设置某个元素的长度

7. innerWidth() 获取元素宽度，包含内边距 padding
8. innerHeight() 获取元素高度，包含内边距 padding
9. outerWidth() 获取元素宽度，包含边框 border 和内边距 padding
10. outerHeight() 获取元素高度，包含边框 border 和内边距 padding
11. outerWidth(true) 同上，且包含外边距
12. outerHeight(true) 同上，且包含外边距

13. offset() 获取某个元素相对于视口的偏移位置
14. position() 获取某个元素相对于父元素的偏移位置
15. scrollTop() 获取垂直滚动条的值
16. scrollTop(value) 设置垂直滚动条的值
17. scrollLeft() 获取水平滚动条的值
18. scrollLeft(value) 设置水平滚动条的值

**************************************************************************************

表单选择器

1. :input 选取所有 input、textarea、select 和 button 元素
2. :text 选择所有单行文本框，即 type=text
3. :password 选择所有密码框，即 type=password
4. :radio 选择所有单选框，即 type=radio
5. :checkbox 选择所有复选框，即 type=checkbox
6. :submit 选取所有提交按钮，即 type=submit
7. :reset 选取所有重置按钮，即 type=reset
8. :image 选取所有图像按钮，即 type=image
9. :button 选择所有普通按钮，即 button 元素
10. :file 选择所有文件按钮，即 type=file
11. :hidden 选择所有不可见字段，即 type=hidden

12. :enabled 选取所有可用元素
13. :disabled 选取所有不可用元素
14. :checked 选取所有被选中的元素，单选和复选字段
15. :selected 选取所有被选中的元素，下拉列表

注意：
这些选择器都是返回元素集合，如果想获取某一个指定的元素，最好结合一下属性选择器。
比如：
$(':text[name=user]').size(); 获取单行文本框 name=user 的元素

**************************************************************************************