本文共 2844 字，大约阅读时间需要 9 分钟。

DOM对象与JQuery包装集

通过 document.getElementById()、document.getElementsByName() 等方法获取的都是 DOM 对象或 DOM 对象集合。

• document.getElementById("text11") 返回与 id 为 "text11" 的唯一 DOM 对象。
• document.getElementsByName("text11")[0] 返回 id 为 "text11" 的 DOM 对象（如果存在）。
• document.all.text11 可以通过 name 或 id 值获取 DOM 对象。
• document.all[10] 根据索引获取 DOM 对象。

JQuery 包装集的使用

JQuery 包装集通过 $() 方法构造，返回的对象可以调用 JQuery 方法。

• 使用 JQuery 包装集：$("#text11")。
• 将 DOM 对象转换为 JQuery 包装集：$(text11_dom)。
• JQuery 包装集支持部分 DOM 方法，如 .length，但某些属性方法需要通过索引访问，如 $("#text11")[0]。

JQuery 核心方法

JQuery 的核心方法包括：

JQuery 选择器

1. 基础选择器

• 根据标签名选择：$("input")。
• 根据 id 选择：$("#text11")。
• 根据 class 选择：$(".text11")。
• 同时选择多个元素：$("#text11,.text12")。
• 选择所有元素：$("*")。

2. 层次选择器

• 从所有 tr 标签中获取下方所有 id 为 "text11" 的元素：$("tr #text11")。
• 获取所有 td 标签下的直接 input 子元素：$("td > input")。
• 获取 id 为 "text11" 的元素后面的 class 为 "button11" 的元素：$("#text11 + .button11")。
• 获取 id 为 "text11" 的元素后面的所有 class 为 "button11" 的元素：$("#text11 ~ .button11")。

3. 过滤器

• 获取第一个 input 元素：$("input:first")。
• 获取最后一个 input 元素：$("input:last")。
• 获取未被选中的 input 元素：$("input:not(:checked)")。
• 获取奇数索引的 input 元素：$("input:even")。
• 获取偶数索引的 input 元素：$("input:odd")。
• 获取索引为 1 的 input 元素：$("input:eq(1)")。
• 获取索引大于 0 的 input 元素：$("input:gt(0)")。
• 获取索引小于 2 的 input 元素：$("input:lt(2)")。
• 获取所有 <h> 标签：$(":header")。
• 获取正在执行动画的元素：$(":animated")。

4. 内容过滤器

• 查找包含 "你好世界！" 的 <h1> 元素：$("h1:contains('你好世界！')")。
• 获取不含子标签或 HTML 内容为空的 <td> 元素：$("td:empty")。
• 获取含有 input 子元素的 <td> 元素：$("td:has(input)")。
• 获取含有子标签或有 HTML 内容的 <td> 元素：$("td:parent")。

5. 可见性过滤器

• 隐藏的 input 元素：$("input:hidden")。
• 可见的 input 元素：$("input:visible")。

6. 属性过滤器

• 获取含有 id 属性的 input 元素：$("input[id]")。
• 获取 name 属性值为 "text11" 的 input 元素：$("input[name='text11']")。
• 获取 name 属性值不等于 "text11" 的 input 元素：$("input[name!='text11']")。
• 获取 name 属性值以 "text" 开头的 input 元素：$("input[name^='text']")。
• 获取 name 属性值以 "11" 结尾的 input 元素：$("input[name$='11']")。
• 获取 name 属性值中含有 "ext" 的 input 元素：$("input[name*='ext']")。
• 获取含有 id 属性且 name 值中含有 "ext" 的 input 元素：$("input[id][name*='ext']")。

7. 子元素过滤器

• 获取父元素的第 2 个子元素：$("input:nth-child(2)")。
• 获取父元素的第一个子元素：$("input:first-child")。
• 获取父元素的最后一个子元素：$("input:last-child")。
• 获取父元素的唯一子元素：$("input:only-child")。

8. 表单选择器

• 获取所有 input 元素：$(":input")。
• 获取所有文本框元素：$(":text")。
• 获取所有密码框元素：$(":password")。
• 获取所有复选框：$(":checkbox")。
• 获取所有提交按钮：$(":submit")。
• 获取所有图像域元素：$(":image")。
• 获取所有重置按钮：$(":reset")。
• 获取所有按钮元素：$(":button")。
• 获取所有文件域元素：$(":file")。

9. 表单过滤器

• 获取所有可用的 input 元素：$("input:enabled")。
• 获取所有不可用的 input 元素：$("input:disabled")。
• 获取所有选中的单选复选框：$("input:checked")。
• 获取所有选中的下拉框：$("option:selected")。

其他常见使用

• 多条件选择：$('#td1,#td2,p').css('color','red');
• 不满足特定条件的选择：$('tbody td[attr1!="a1"]')。
• 组合选择：$('[attr1="a1"][attr2="a2"]')。

转载地址：http://qnjmz.baihongyu.com/