jquery之Document元素选择器篇
jQuery 元素 选择器 Document
2023-06-13 09:14:01 时间
1.从$开始
对于熟悉prototype的朋友,$符号应该很熟悉,
prototype: var element = $("eleId")
jquery: var element = $("#eleId")
DOM: var element = document.getElementById("eleId")
以上三种选择方式是等价的,相比prototype来说jquery多了个#号
例:
$("#j1′).html()
<div id=“j1“>Hello, jQuery!</content>
2.通过xpath+css来获取你想要的…
1).
在这段例子中我们需要用到的HTML代码
<div class=”contentToChange”>
<p class=”alert”>警告!警告!警告!警告!</p>
<p class=”firstParagraph”>我是第一段</p>
<p class=”secondParagraph”>第二段,哎,火箭输球了 0比33!火箭替补钉上耻辱柱 <em>姚麦</em>身边再无可用之人频繁失误成姚明致命毒药 板凳消失是火箭落后主因</p>
</div>
jquery代码:
//获取div.contentToChange下p标记数组长度
alert($("div.contentToChange p").size())
//通过调整高度来显示/隐藏所有匹配的元素,这里的匹配元素是p.firstParagraph
$("div.contentToChange p.firstParagraph").slideToggle("slow");
//找到匹配所有div.contentToChange下所有css不为alert的p元素,并在其后面添加文字
$("div.contentToChange p:not(.alert)").append("<strong class=“addText“>这是新加的文字</strong>‘);
//找到所有为strong元素且css为addText的元素,然后删除
$("strong.addText").remove();
//找到P标记下css为secondParagraph的元素,然后渐隐
$("div.contentToChange p.secondParagraph").hide("slow");
//找到div.contentToChange下所有em元素,然后通过jquery中的css方法改变它们的颜色和字体
$("div.contentToChange em").css({color:“#993300“,fontWeight:“bold“});
//添加css样式
$("div.contentToChange p.secondParagraph").addClass("new‘)
//删除css样式
$("div.contentToChange p.secondParagraph").removeClass("new‘);
2).
在这段例子中我们需要用到的HTML代码:
<div id=”jqdt” style=”width: 400px; padding: 1em; border: 1px solid #000″>
<p class=”goofy”> 这个 <em>段落</em> 包括了一些css属性为”groof”的 <strong>文本</strong>, 它还具有一个 <a href=”http://www.englishrules.com” class=”external text” title=”http://www.englishrules.com”>外部连接</a>, 一些 <code>$(代码)</code>, 和一个超连接属性是以 <a href=”#dt-link3_same-page_link” title=”">#打头的超连接</a>. </p>
<ol>
<li>list item 1 with dummy link to <a href=”/action/edit/Silly.pdf” class=”new” title=”Silly.pdf”>silly.pdf</a></li>
<li class=”groof”><em>list <strong>item</strong> 2</em> with class=”<strong>groof</strong>“</li>
<li>list item 3<span style=”display: none;”> SURPRISE!</span></li>
<li><strong>list item 4</strong> with silly link to <a href=”/action/edit/Silly.pdf_silly.pdf” class=”new” title=”Silly.pdf silly.pdf”>silly.pdf silly.pdf</a></li>
<li><a href=”contains.php”>支持火箭</a>,支持MM!</li>
</ol>
</div>
jquery代码
//获取第一个list item
$("#jqdt ol li:eq(0)")
//等价于
$("#jqdt").find("li:eq(0)") //以下同
//获取所有偶数行的list item
$("#jqdt ol li:even")
//获取索引小于3的list item
$("#jqdt ol li:lt(3)")
//获取所有li中css不为groof的list item
$("#jqdt ol li:not(.groof)")
//获取P标记下所有超连接属性值以"#"打头的元素
$("p a[@href*=#]")
//获取所有code元素和css为groof的li元素的集合
$("#jqdt code, li.groof")
//先获取ol下css属性为groof的A, 然后找到节点A下的一级子节点strong元素
$("#jqdt ol .groof > strong")
//首先找到所有以list item作为自己的前一节点的list item元素(所以不会选择到第一个list item,因为它的前面没有list item节点了).然后在这些元素中找到超连接属性值以为"pdf"结尾的一级子节点
$("#jqdt ol li + li > a[@href$=pdf]")
//找到所有已隐藏的span元素
$("span:visible")
//找到超连接中包含火箭字样的元素
$("li a:contains(“火箭“)")
注:
$("#jqdt ol.groof > strong") 其中的>代表只访问下一级子节点中包含strong的元素,
如果改为 $("#jqdt ol.groof strong") 则访问所有下级子节点中的strong元素,包括子节点的子节点等。
3).
常用的自定义选择器
:eq(0) 选择索引等于0也就是第一个元素
:gt(4) 选择所有索引大于4的元素
:lt(4) 选择所有索引小于4的元素
:first 等价于 :eq(0)
:last 选择最后一个元素
:parent 选择所有含有子节点的元素 (including text).
:contains("test") 选择含有指定文本的元素
:visible 选择所有可见元素(包含:display:block|inline,或者visibility为visible的元素,但是不包括表单元素(type hidden)
:hidden 选择所有隐藏元素(包含:display:none,或者visibility为hidden的元素,包括表单元素(type hidden)
例:
$("p:first").css("fontWeight","bold")
$("div:hidden").show();
$(“div:contains("test")“).hide();
$("input[@name=bar]").val() //获取名字为bar的input表单的值
$("select[@name=slt]").val() //获取名为slt的下拉菜单的选择中值
$("input[@type=radio][@checked]") //获取所有被选中的radio表单
表单选择器
:input Selects all form elements (input, select, textarea, button).
:text Selects all text fields (type=”text”).
:password Selects all password fields (type=”password”).
:radio Selects all radio fields (type=”radio”).
:checkbox Selects all checkbox fields (type=”checkbox”).
:submit Selects all submit buttons (type=”submit”).
:image Selects all form images (type=”image”).
:reset Selects all reset buttons (type=”reset”).
:button Selects all other buttons (type=”button”).
例:
$("myForm:input")
$("input:radio",myForm)
//:radio等价于[@type=radio]
对于熟悉prototype的朋友,$符号应该很熟悉,
prototype: var element = $("eleId")
jquery: var element = $("#eleId")
DOM: var element = document.getElementById("eleId")
以上三种选择方式是等价的,相比prototype来说jquery多了个#号
例:
$("#j1′).html()
<div id=“j1“>Hello, jQuery!</content>
2.通过xpath+css来获取你想要的…
1).
在这段例子中我们需要用到的HTML代码
<div class=”contentToChange”>
<p class=”alert”>警告!警告!警告!警告!</p>
<p class=”firstParagraph”>我是第一段</p>
<p class=”secondParagraph”>第二段,哎,火箭输球了 0比33!火箭替补钉上耻辱柱 <em>姚麦</em>身边再无可用之人频繁失误成姚明致命毒药 板凳消失是火箭落后主因</p>
</div>
jquery代码:
//获取div.contentToChange下p标记数组长度
alert($("div.contentToChange p").size())
//通过调整高度来显示/隐藏所有匹配的元素,这里的匹配元素是p.firstParagraph
$("div.contentToChange p.firstParagraph").slideToggle("slow");
//找到匹配所有div.contentToChange下所有css不为alert的p元素,并在其后面添加文字
$("div.contentToChange p:not(.alert)").append("<strong class=“addText“>这是新加的文字</strong>‘);
//找到所有为strong元素且css为addText的元素,然后删除
$("strong.addText").remove();
//找到P标记下css为secondParagraph的元素,然后渐隐
$("div.contentToChange p.secondParagraph").hide("slow");
//找到div.contentToChange下所有em元素,然后通过jquery中的css方法改变它们的颜色和字体
$("div.contentToChange em").css({color:“#993300“,fontWeight:“bold“});
//添加css样式
$("div.contentToChange p.secondParagraph").addClass("new‘)
//删除css样式
$("div.contentToChange p.secondParagraph").removeClass("new‘);
2).
在这段例子中我们需要用到的HTML代码:
<div id=”jqdt” style=”width: 400px; padding: 1em; border: 1px solid #000″>
<p class=”goofy”> 这个 <em>段落</em> 包括了一些css属性为”groof”的 <strong>文本</strong>, 它还具有一个 <a href=”http://www.englishrules.com” class=”external text” title=”http://www.englishrules.com”>外部连接</a>, 一些 <code>$(代码)</code>, 和一个超连接属性是以 <a href=”#dt-link3_same-page_link” title=”">#打头的超连接</a>. </p>
<ol>
<li>list item 1 with dummy link to <a href=”/action/edit/Silly.pdf” class=”new” title=”Silly.pdf”>silly.pdf</a></li>
<li class=”groof”><em>list <strong>item</strong> 2</em> with class=”<strong>groof</strong>“</li>
<li>list item 3<span style=”display: none;”> SURPRISE!</span></li>
<li><strong>list item 4</strong> with silly link to <a href=”/action/edit/Silly.pdf_silly.pdf” class=”new” title=”Silly.pdf silly.pdf”>silly.pdf silly.pdf</a></li>
<li><a href=”contains.php”>支持火箭</a>,支持MM!</li>
</ol>
</div>
jquery代码
//获取第一个list item
$("#jqdt ol li:eq(0)")
//等价于
$("#jqdt").find("li:eq(0)") //以下同
//获取所有偶数行的list item
$("#jqdt ol li:even")
//获取索引小于3的list item
$("#jqdt ol li:lt(3)")
//获取所有li中css不为groof的list item
$("#jqdt ol li:not(.groof)")
//获取P标记下所有超连接属性值以"#"打头的元素
$("p a[@href*=#]")
//获取所有code元素和css为groof的li元素的集合
$("#jqdt code, li.groof")
//先获取ol下css属性为groof的A, 然后找到节点A下的一级子节点strong元素
$("#jqdt ol .groof > strong")
//首先找到所有以list item作为自己的前一节点的list item元素(所以不会选择到第一个list item,因为它的前面没有list item节点了).然后在这些元素中找到超连接属性值以为"pdf"结尾的一级子节点
$("#jqdt ol li + li > a[@href$=pdf]")
//找到所有已隐藏的span元素
$("span:visible")
//找到超连接中包含火箭字样的元素
$("li a:contains(“火箭“)")
注:
$("#jqdt ol.groof > strong") 其中的>代表只访问下一级子节点中包含strong的元素,
如果改为 $("#jqdt ol.groof strong") 则访问所有下级子节点中的strong元素,包括子节点的子节点等。
3).
常用的自定义选择器
:eq(0) 选择索引等于0也就是第一个元素
:gt(4) 选择所有索引大于4的元素
:lt(4) 选择所有索引小于4的元素
:first 等价于 :eq(0)
:last 选择最后一个元素
:parent 选择所有含有子节点的元素 (including text).
:contains("test") 选择含有指定文本的元素
:visible 选择所有可见元素(包含:display:block|inline,或者visibility为visible的元素,但是不包括表单元素(type hidden)
:hidden 选择所有隐藏元素(包含:display:none,或者visibility为hidden的元素,包括表单元素(type hidden)
例:
$("p:first").css("fontWeight","bold")
$("div:hidden").show();
$(“div:contains("test")“).hide();
$("input[@name=bar]").val() //获取名字为bar的input表单的值
$("select[@name=slt]").val() //获取名为slt的下拉菜单的选择中值
$("input[@type=radio][@checked]") //获取所有被选中的radio表单
表单选择器
:input Selects all form elements (input, select, textarea, button).
:text Selects all text fields (type=”text”).
:password Selects all password fields (type=”password”).
:radio Selects all radio fields (type=”radio”).
:checkbox Selects all checkbox fields (type=”checkbox”).
:submit Selects all submit buttons (type=”submit”).
:image Selects all form images (type=”image”).
:reset Selects all reset buttons (type=”reset”).
:button Selects all other buttons (type=”button”).
例:
$("myForm:input")
$("input:radio",myForm)
//:radio等价于[@type=radio]
相关文章
- jquery 用于操作动态元素的delegate/on方法
- Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法详解数据库
- jQuery 选择器基本使用方法大全详解编程语言
- jQuery获取动态生成的元素详解编程语言
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js详解编程语言
- jquery查找新建元素代码
- Jquery中删除元素的实现代码
- JQuery中根据属性或属性值获得元素(6种情况获取方法)
- jQuery基本选择器选择元素使用介绍
- jquery滚动条事件简单实例
- jquery设置元素的readonly和disabled的写法
- 基于jquery插件实现常见的幻灯片效果
- jQuery之过滤元素操作小结
- 随鼠标上下滚动的jquery代码
- jquery遍历select元素(实例讲解)
- jquery将一个表单序列化为一个对象的方法
- jquery选择器排除某个DOM元素的方法(实例演示)
- jquery动态添加元素事件失效问题解决方法
- JQuery给元素绑定click事件多次执行的解决方法
- jquery中push()的用法(数组添加元素)
- jquery操作checkbox示例分享
- jQuery淡入淡出元素让其效果更为生动