jQuery  学习笔记 （一）


一、选择器

1. DOM对象

获取DOM对象  举例：
var div=document.getElementById("testDiv");
var div=document.getElementByTagName("div");



2.jQuery包装集

获取jQuery包装集 举例：
var jQueryObject=$("#testDiv");



3.DOM对象与jQuery对象的转换

DOM 转jQuery包装集：
var domToJQueryObject=$(div);

用索引器访问其中一个元素(jQuery转DOM)：
var domObject=$("#testDiv")[0];

通过索引器返回的不是jQuery包装集，而是一个DOM对象！
each()遍历方法中this也是DOM元素：
$("#testDiv").each(function(){alert(this)})
使用jQuery方法操作DOM对象：
$("#testDiv").each(function(){$(this).html("修改内容")})

jQuery选择器
就是一个便是特殊语义的字符串.只要把选择器字符串传入上面的方法中就能选择不同的dom对象，并且以jQuery包装集方式返回。

基础选择器：
#id                        $("divId")选择ID为divId的元素
element                 $("a")选择所有<a>元素
.class                    $(".bgRed")选择所有CSS类为bgRed的元素
*                          $("*")选择页面所有元素

层次选择器 Hierarchy：
ancestor descendant              $(".bgRed div") 选择CSS类为bgRed的元素中的所有<div>元素。
parent>child                          $(".myList>li")选择CSS类为myList元素中的直接子节点<li>对象。
prev+next                             $("#hibius+img")选在id为hibiscus元素后面的img对象。
prev~siblings                        $("#someDiv~[title]")选择id为someDiv的对象后面所有带有title属性的元素。

基本过滤器 Basic Filters
:first                                    查找表格的第一行：:$("tr:first")
:last                                    查找表格的最后一行:$("tr:last")
:not(selector)                      查找所有为选中的input元素：$("input:not(:checked):)
:even                                  查找表格的2 4 6 行: $("tr:even")
:odd                                   查找表格的1 3 6行：$("tr:odd")
:eq(index)                           查找第二行：$("tr:eq(1)")
:gt(index)                            查找第二第三行，即索引值是1和2，也就是比0大：$(tr:gt(0)")
:lt(index)                             查找第一第二行，即索引值是0和1，也就是比2小：$("tr:lt(2)")
:header                               给页面所有标题加上背景色：$(":header").css("background","#eee");
:annimated                          匹配所有正在执行动画效果的元素。只有对不在执行效果的元素执行一个动画特效：
                                          $("#run").click(function(){$("div:not(:animated)").animate({left:"+=20"},1000);});

内容过滤器　Content Filters
:contains(tesxt)                    查找所有包含"John"的div元素：$("div:contains('John')")
:empty                                查找所有不包含子元素或者文本的空元素：$("td:empty")
:has(selector)                      给所有包含p元素的div元素添加一个test类：$("div:has(p)".addClass("test");
:parent                                查找所有含有子元素或者文本的td元素：$("td:parent")

可见性过滤器 Visibility Filters
:hidden                                查找所有看不见的tr元素：$("tr:hidden")
:visible                                 查找所有可见的tr元素：$("tr:visible")

属性过滤器 Attribute Filters
[attribute]                             查找所有含有id属性的div元素：$("div[id]")
[attribute=value]                   查找所有name属性石newletter的input元素：
                                            $("input[name='newsletter']").attr("checked",true);
[attribute$=value]                 查找所有name以'letter'结尾的input元素：$("input[name$='letter']")
[attribute*=value]                 查找所有name包含'man'的input元素：$("input[name*='man']")
[attribute^=value]                 查找所有name以news开头的input元素：$("input[name^='news']")
[attributeFilter][attribute Filter2]            查找所有含有id属性，并且它的name属性是以man结尾的：
                                                            $("input[id][name$='man']")

子元素过滤器 Child Filters
:nth-child(index/even/odd/equation)        在每个ul查找2个li：$("ul li:nth-child(2)")
:first-child                                               匹配第一个子元素
:last-child                                                匹配最后一个子元素
:only-child                                               如果某个元素是父元素中唯一的元素就匹配

表单选择器 Forms Selectors
:input                                                      查找所有的input元素：$(":input")
:text                                                        查找所有文本框：$("text")
:password                                               查找所有密码框：$(":password")
:radio                                                      查找所有单选按钮：$(":radio")
:checkbox                                               查找所有复选框：$(":checkbox")
:submit                                                    查找所有提交按钮：$(":submit")
:p_w_picpath                                                     查找所有图像域：$(":p_w_picpath")
:reset                                                      查找所有重置按钮：$(":reset")
:button                                                    查找所有按钮：$(":button")
:file                                                         查找所有文件域：$(":file")

表单过滤器 Form Filters
:enabled                                                查找所有可用的input元素：$("input:enabled")
:disabled                                                查找所有不可用的input元素：$("input:disabled")
:checked                                                查找所有选中的复选框元素：$("input:checked")
:selected                                                 查找素有选中的选项元素：$("select option:selected")