您的位置:首页 > Web前端 > JQuery

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

2010-10-18 14:14 513 查看
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”)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: