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

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

2009-11-05 22:58 441 查看
http://www.cnblogs.com/zhangziqiu/tag/jQuery/
/article/4677255.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”)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: