Dom对象和jQuery包装集的基本概念

1、选择器区别“DOM对象”还是“jQuery包装集”：

var v=document.getElementById(“header”); //DOM

var vs=document.getElementByTagName(“div”); //DOM

var jqobj=$(“#

header”)

; //jQuery包装集

var jqobj=jQuery(“#
header”)
; //jQuery包装集,为防止与其它js框架的$冲突,不嫌麻烦可多写几个字

2、DOM对象转jQuery包装集：

var domDiv=document.getElementById(“header”); //domDiv是个dom元素

var domToJqueryObj=$(
domDiv)
; //domToJqueryObj是一个jQuery包装集,从domDiv中转来

3、jQuery包装集转Dom对象：

jQuery包装集是一个集合
，通过索引器访问其中第一个元素。通过索引器返回的不再是jQuery包装集，而是一个DOM对象。

var domDiv=jQuery(“#header”)[0];

alert(domDiv.InnerHtml);

//再转回jQuery包装集进行操作：

//$("#testDiv").each(function() { $(this).html("修改内容") })

$(domDiv).html(“Hello”);//设置

4、基础选择器：

$(“#id”)，元素Id，

$(“.class”)，元素css类名

$(“span”)，元素名称，即html标记名称

$(“*”)，选择页面所有元素，

$(“#id,.class,span”)，选择多个，选择器用逗号分开

5、其它复杂选择器和过滤器：

5.1、层次选择：

（1）、祖先子孙选择，$(“.class span”)，空格号，

（2）、父子直接节点选择，$(“.myList>li”)，即类名为myList的元素下的直接子节点li，大于号，

（3）、同级别元素后面的next元素，$(“#dttitle+dd”)，加号，

（4）、prev后面的过滤元素，$(“#someDiv~[title]”)，someDiv后面所有带有title属性的元素，波浪号

5.2、基本过滤器：

（1）、$(“tr:first
”)，查找表格的第一行

（2）、$(“tr:last
”)

（3）、$(“input:not
(:checked)”)，所有未选中的input元素

（4）、$(“tr:even
”)，奇数行

（5）、$(“tr:odd
”)，偶数行

（6）、$(“tr:eq
(1)”)，给定索引值元素，从0开始，本例为第2行

（7）、$(“tr:gt
(1)”)，大于索引值的元素

（8）、$(“tr:lt
(2)”)，小于索引值的元素

（9）、$(“:header
”)，选择h1,h2~h6一类的header标签，$(“:header”).css(“color”,”#ccc”)

（10）、$(“:animated
”)，正在执行动画的元素，

$(“#run”).click(function(){

$(“div:not(:animated)”).animated({left:”+=20”},1000);

});

5.3、内容过滤器

$(“div:contains
(‘包含文本’)”)

$(“td:empty
”)

$(“div:has
(‘p’)”).addClass(“red”);包含p元素的div元素

$(“td:parent
”)，包含子元素或文本的元素，与empty有点相反的感觉（我自己加的）

5.4、可见性过滤器

$(“tr:hidden
”)，不可见

$(“tr:visible
”)，可见元素

5.5、属性过滤器，中括号

$(“div[id]”)，含有id属性的div元素

$(“input[type=
’checkbox’]”).attr(“checked”,true)，

$(“input[type!=
’checkbox’]”).attr(“checked”,true)，

$(“input[name^=’news’]”)，属性名name以news开头，与正则表达式的开头一样

$(“input[name$=’letter’]”)，属性名name以letter结束，与正则表达式的结束一样

$(“input[name*=’girl’]”)，属性名name包含girl

复合属性选择器：$(“input[id][name$=’boy’]”)，包含id属性并且name以boy结束的input标记

5.6、子元素过滤器

$(“ul li:nth-child
(2)”)，在每个 ul 查找第 2 个li；

$(“ul li:first-child
”)，在每个 ul 中查找第一个 li；

$(“ul li:last-child
”)，在每个 ul 中查找最后一个 li；

$(“ul li:only-child
”)，在 ul 中查找是唯一子元素的 li；

5.7、表单选择器

$(“:input”)，所有input元素，有input,textarea,select,button

$(“:text”)，所有文本框

$(“:password”)，所有密码框

$(“:radio”)，所有单选按钮

$(“:checkbox”)，所有复选框

$(“:submit”)，所有提交按钮

$(“:image”)，所有图像域

$(“:reset”)，所有重置按钮

$(“:button”)，所有按钮

$(“:file”)，所有文件域

5.8、表单过滤器

$(“input:enabled”)，可用

$(“input:disabled”)，不可用

$(“input:checked”)，复选框和单选框，不包括select中的option

$(“input:selected”)，所有选中的option元素，$(“select option:selected”)