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

jQuery学习-dom与jquery包装集概念 /zhangziqiu/tag/jQuery/?/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）、父子直接节点选择，$(“.myListli”)，即类名为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结束，与正则表达式的结束一样?$(“