当前位置:首页 > 资讯 > 热门博客 > 正文

JQ选择器实现一些小结

发表于: 2012-10-25   作者:andytest   来源:转载   浏览次数:
摘要: $(“*”),表示获取所有的对象$(“#element”)等同于document.getElementById(“element”);$(“.abc”)表示获得HTML中所有使用了abc这个样式的元素$(“div”)表示获得HTML中所有的div元素$(“#a,.b,p”)表示获得ID是a的元素和使用了类样式b的元素以及所有的p元素$(“#a.bp”)表示获得了ID是a的元素所包含的使用了类样式的

$(“*”),表示获取所有的对象

$(“#element”)等同于document.getElementById(“element”);

$(“.abc”)表示获得HTML中所有使用了abc这个样式的元素

$(“div”)表示获得HTML中所有的div元素

$(“#a,.b,p”)表示获得ID是a的元素和使用了类样式b的元素以及所有的p元素

$(“#a .b p”)表示获得了ID是a的元素所包含的使用了类样式的b元素中的所有的p元素

 

$(“Element1 Element2 Element3 Element…”)css定义层级元素方式一样,只需要不同的元素之间有空格表示,前者父级后者子级以此类推。

$(“div > input”)表示获取div下所有的input

$(“div + p”)表示匹配紧跟在 div 元素后的 p 一个元素

$(“div ~ p”)表示匹配跟在 div 元素后的所有 p 元素

$(“Element:first”)获得在HTML页面中某种元素的第一个,比如$(“div:first”)表示获得第一个div

$(“Element:last”)获得在HTML页面中某种元素的最后一个,比如$(“div:last”)表示获得最后一个div

$(“Element:not(selector)”)去除所有与给定选择器匹配的元素,比如$(“input:not(:checked)”) 表示选择所有没有选中的复选框

$(“Element:even”)获得偶数行,从0开始计数

$(“Element:odd”)获得奇数行,从0开始计数

$(“Element:eq(index)”)匹配一个给定索引值的元素,从0开始计数,比如$(“div:eq(3)”)表示获得HTML中的第4个div

$(“Element:gt(index)”)匹配所有大于给定索引值的元素,从0开始计数,比如$(“p:gt(3)”)表示获得比索引3也就是第4个p开始,之[后]所有的p

$(“Element:lt(index)”)匹配所有小于给定索引值的元素,从0开始计数,比如$(“p:lt(3)”)表示获得比索引3也就是第3个p开始,之【前】所有的p

$(“:header”)匹配h1,h2,h3…标题之类的元素

$(“Element:animated”)匹配所有没有在执行动画效果中的元素(关于动画效果,在后面会讲到,在此只是一提,不必要在意,看不懂不要紧)

$(“Element:contains(text)”)匹配元素对象中的文本是否包含某个字母或者某个字符串(符串或串(String)是由零个或多个字符组成的有限序列。)

$(“Element:empty”)获得对象元素不包含文本或子元素

$(“Element:parent”)以上面相反,获得对象元素包含文本或子元素

$(“Element:has(selector)”)匹配含有某个元素是否包含某个元素 比如$(“p:has(span)”)表示所有包含span元素的p元素

$(“Element:hidden”)匹配所有不可见元素,包括display:none以及input的属性是hidden都可以匹配得到。

$(“Element:visible”)与上面相反,匹配所有可见元素

$(“Element[id]“)获得所有带有ID属性的元素

$(“Element[attribute=KwooShung]“)获得所有某个属性为KwooShung的元素

$(“Element[attribute!=KwooShung]“)获得所有某个属性不为KwooShung的元素,我想如果学过C#和java的人都明白”!”在程序中表示非

$(“Element[attribute^=Kwoo]“)获得所有某个属性值是以Kwoo开头的元素

$(“Element[attribute$=Kwoo]“)获得所有某个属性值是以Kwoo结尾的元素

$(“Element[attribute*=Kwoo]“)获得所有某个属性值包含Kwoo的元素

$(“Element[selector1][selector2][....]“)符合属性选择器,比如$(“input[id][name][value=kwooshung]“)表示获得带有ID、Name以及value是KwooShung的input元素。

$(“Element:nth-child(index)”)选择父级下的第N个子级元素,索引从1开始,而eq函数(eq函数会在后面学习到)从0开始。

┣━:nth-child(even)偶数
┣━:nth-child(odd)奇数
┣━:nth-child(3n)表达式
┣━:nth-child(2)索引
┣━:nth-child(3n+1)表达式
┗━:nth-child(3n+2)表达式

$(“Element:first-child”)匹配父级下的第一个子级元素

$(“Element:last-child”)匹配父级下的最后一个子级元素

$(“Element:only-child”)匹配父级下的唯一的一个子级元素,例如dt在dl列表中唯一,那么将选择dt

$(:input)只能匹配Input元素类型为input button select textarea

$(:text)匹配所有的单行文本框

$(:password)匹配所有的密码框

$(:radio)匹配所有的单选按钮

$(:checkbox)匹配所有的复选框

$(:submit)匹配所有的提交按钮

$(:image)匹配所有的图像域,例如<input type=”image” />

$(:reset)匹配所有的重置按钮

$(:button)匹配所有的按钮

$(:file)匹配所有的文件上传

$(:hidden)匹配所有的不可见元素或者type为hidden的元素

$(:enabled)匹配所有可用的input元素,比如radio:enabled表示匹配所有可用的单选按钮

$(:disabled)匹配所有的不可用input元素,作用与上相反

$(:checked)匹配所有选中的复选框元素

$(:selected)匹配所有的下拉列表

$(“Element”).attr(name)取得第一个匹配元素的属性值,比如$(“img”).attr(“src”)

$(“Element”).attr({key:value,key,value,….})表示为某一个元素一次性设置多个属性

$(“Element”).attr(key,value)为某一个元素设置属性

$(“Element”).attr(key,function)为所有匹配的元素设置一个计算的属性值。

$(“Element”).removeAttr(name)移除某一个属性

JQ选择器实现一些小结

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。 下图是在android中的
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。 下图是在android中的
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。 下图是在android中的
这段时间忙中偷闲学了下CSS3,在此想给自己的学习小小地总结下,首先还是总结下CSS3的选择器吧。 CS
图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,
Implementation Pattern 作者:Kent Beck,极限编程、测试驱动开发的推动者 软件业中最具创新力、最
转载请注明出处:http://blog.csdn.net/qinjuning 今天给大家分享下文件选择器的作用 , 具体就是获
chooserdialog.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android
Jquery实现颜色选择器插件是一款很实用的功能插件,可以灵活设置undefined(不传参数时)、字符串、
转载请注明出处:http://blog.csdn.net/qinjuning 今天给大家分享下文件选择器的作用 , 具体就是获
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号