jQuery学习笔记

jQuery大部分功能需要根据文档的DOM模型来工作，首先需要正确地解析到整个文档的DOM模型结构。使用jQuery需要在整个文档被浏览器完全加载后才开始进行。

$(document).ready(function () {
        alert("Hello World!");
        $("p").click(function (event) {
            alert("Thanks for visiting!");
        })
    });

$是在jQuery中使用的变量名，可以使用 jQuery.noConflict()避免冲突，它的返回值就是jQuery对象。

jQuery.noConflict();
    $j = jQuery.noConflict();

jQuery对象与DOM对象之间的转换

使用 $()得到的是一个jQuery对象。它封装了很多 DOM 对象的操作，但是它和 DOM 对象之间是不同的。只有当 obj是一个DOM对象时才能使用 obj.innerHTML；相应地，如果是jQuery对象应该使用 obj.html() 。

• 从 DOM 对象转到 jQuery 对象： $(obj)
• 从 jQuery 对象转到 DOM 对象： obj[0]

比较正规地从 jQuery 对象到 DOM 的转换，是使用 jQuery 对象的 get() 方法：

$(function () {
        $("li").get();
        $("li").get(0);
        $("li").get(-1);
    });

jQuery选择器

1. 常规选择器

• $("*") 选择所有节点
• $("#id") ID选择器，注意其中的一些特殊字符，如 .
• $(".class") 类选择器
• $("tag") 标签选择器
• $("子元素")
• $("直接子元素")
• :focus 获取焦点元素
• :first-child/:last-child 选择第一个/最后一个元素
• :first/:last 截取第一个/最后一个符合条件的元素
• ("pre+next") 直接兄弟元素
• ("pre~siblings") 兄弟元素
• :nth-child() 索引选择，索引从1开始
  • :nth-child(odd)
  • :nth-child(even)
  • :nth-child(4n)

2. 属性选择器

• [name~="value"] 属性中包括某单词
• [name="value"] 属性完全等于指定值
• [name!="value"] 属性不等于指定值
• [name] 包括有指定属性的元素

3. 控件选择器

• :checked 选择所有被选中的元素
• :selected 被选择的元素
• :disabled/:enabled 选择被禁用/未禁用的元素
• :hidden 隐藏元素，不仅是 [type="hidden"]，还有 displa:none
• :visible 可见控件， visibility:hidden和 opacity:0同样被认为是可见
• :input:button:checkbox:file:image:password:radio:reset:submit:text 具体控件，图像控件是 [type="image"]

4. 其他选择器

• [name="value"][name2="value2"] 多个AND条件
• ("selector1, selector2, selectorN") 多个OR条件
• :not() 否定选择
• (':contains("text")') 包含有指定内容的元素
• :eq():lt():gt():even:odd 列表索引选择（不支持负数）
• (':has(selector)') 符合条件的再次过滤
• :header 选择 h1,h2,h3...标题元素
• :only-child 仅有一个子元素的元素
• :empty 空元素，即无内容也无元素
• :parent 非空元素

节点漫游

1. 调用链处理

• .add() 向已有的节点序列中添加新的对象
• .andSelf() 在调用链中，随时加入原始序列
• .eq() 指定索引选取节点，支持负数
• .filter().is().not().find().first().last().has() 序列选择
• .end() 节点回溯

$(function () {
    $('ul.first').find('.foo').css('background-color', 'red')
        .end().find('.bar').css('background-color', 'green');
});

2. 子节点

.children() 所有的子节点，可加入过滤条件， .children(selector)

3. 兄弟节点

.siblings().next().nextAll().nextUntil().prevAll().prevUntil().closet() 选择兄弟节点

4. 父节点

.parent().parents().parentUntil() 父节点选择