javascript代码实例教程-JavaScript开发教程之JQuery选择器使用技巧

发布时间:2018-12-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript开发教程之JQuery选择器使用技巧脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

JavaScript开发教程之jquery选择器使用技巧。

什么是选择器:

  当我们在写前台的页面时,会涉及到对Dom节元素的操作,包括元素的调用或者更改样式,这些操作的前提是我们要准确的找到该元素,在强大的JQuery库中,选择器机制在此给我们提供了极大的方便。相比传统JS的获取操作jQuery选择器代码更简单,检测机制也更完善。jQuery选择器继承了css的部分语法,用过css选择器的,对于jQuery选择器都会比较容易上手。

选择器的分类:

 


JavaScript开发教程之JQuery选择器使用技巧

 


基本选择器:

ID选择器: $(“#myId”) 选择ID值等于myId的元素,id值不能重复在文档中,只能有一个id值是myId,所以得到的是唯一的元素。 标签选择器: $(“p”) 选择所的p标签元素,返回p元素节点的数组。 选择文档中所有使用MyC1ass样式的元素。 c1ass选择器:$(“.myClass”) $(“*”): 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$(“#myId,p,.myclass”)

层次选择器:

$(“form input”) 选择所有的form元素中的input元素。 $(“#main > *”) 选择id值为main的所有的子元素。 $(“label + input”) 选择所有的label元素的下一个input元素节点,经测试选择器返回的是labe1标签后面直接限一个input标签的所有input标签元素 $(“#prev~p”) 同胞选择器,该选择器返回的为id为PRev的标签元素的所有的属于同一个父元素的p标签

表单元素选择器:

$(” :text” ) 选择所有的text input元表。 $(“:password”) 选择所有的password input元素。 $(“:radio”) 选择所有的radio input元毒。 $(” :checkbox”) 选择所有的checkbox input元素。 $(” :submIT”) 选择所有的submit input元素。 $(“:image”) 选择所有的image input元素。 $(“:reset”) 选择所有的reset input元表。 $(“:button”) 选择所有的button input元素。 $ (” :file” ) 选择所有的fi le input元表。 $(” :hidden” )选择所有类型为hidden的input元素或表单的隐藏域。

过滤选择器

基本过滤选择器:

$(“tr:First”)选择所有tr阮元素的第一个。 $(“tr:last”)选择所有tr 阮素的最后一个。 $(“input :not( :checked) + span”) 过滤掉:checked的选择器的所有的input元素。 $(“tr:even”) 选择所有的tr阮素的第0,2,4……个元素(注意: 因为所选择的多个元素时为数组,所以序号是从0开始)。 $(“tr:odd”) 选择所有的tr元素的第1,3,5……个元素。 $(“td:eq(2)”) 选择所有的td元素中序号为2的那个td元素。

内容过滤选择器:

$(“p:contains(‘John’ )”) 选择所有p中含有John文本的元素。 $(“‘td :empty”) 选择所有的为空(也不包括文本节点) 的td元素的数组。 $(“p:has(p)”) 选择所有含有p标签的p元素。 $(“td:parent”) 选择所有的以td为父节点的元表数组。

可视化过滤选择器:

$(“p:hidden”) 选择所有的被hidden的p元素。 $(“p:visible”) 选择所有的可视化的p元素。

属性过滤选择器:

$(“p[id]”) 选择所有含有id属性的p元素, $(“input[name=’newsletter” ]”) 选择所有的name属性等于newsletter的input元素。 $(“input[name!=’newsletter’ ]”) 选择所有的name属性不等于’newsletter’的input元素。 $(“input[name^=”news” ]”) 选择所有的name属性以”news’开头的input元表. $(“input[name$=’news’ ]”) 选择所有的name属性以’news’结尾的input元素。 $(“input[name*=”man” ]”) 选择所有的name属性包含’news’的input元素。 $(“input[id][name$=”man”]”)
可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素。
子元素过虑选择器: $(“p span:first-child”) 返回所有的p元素的第一个子节点的数组。 $(“p span:last-child”) 返回所有的p元素的最后一个节点的数组。 $(“p button:only-child”)返回所有的p中只有唯一一个子节点的所有子节点的数组。

表单元素过滤选择器:

$(“:enabled”) 选择所有的可操作的表单元素。 $(” :disabled”) 选择所有的不可操作的表单元素。 $(“:checked”) 选择所有的被checked的表单元素。 $(“select option: selected”) 选择所有的select 的子元素中被selected的元素。

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript开发教程之JQuery选择器使用技巧全部内容,希望文章能够帮你解决javascript代码实例教程-JavaScript开发教程之JQuery选择器使用技巧所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。