jQuery学习-dom与jquery包装集概念

http://www.cnblogs.com/zhangziqiu/tag/jQuery/
http://www.cnblogs.com/zhangziqiu/archive/2009/05/03/jQuery-Learn-2.html

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”)