当前位置:380元网站建设 虎网站 > 行业新闻 > 正文

JQUERY选择器常用元素查找方法

发布日期:2013-03-04
$("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是先进的元素

$("p")           选择所有的p标签元素,返回p元素数组

$(".myClass")      选择使用myClass类的css的所有元素

$("*")             选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,p,.myclass")

层叠选择器:

$("form input")         选择所有的form元素中的input元素

$("#main > *")          选择id值为main的所有的子元素

$("label + input")     选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素

$("#prev ~ p")       同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的p标签

基本过滤选择器:

$("tr:first")               选择所有tr元素的先进个

$("tr:last")                选择所有tr元素的较后一个

$("input:not(:checked) + span")

过滤掉:checked的选择器的所有的input元素

$("tr:even")               选择所有的tr元素的第低,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从低开始)

$("tr:odd")                选择所有的tr元素的第1,3,5... ...个元素

$("td:eq(2)")             选择所有的td元素中序号为2的那个td元素

$("td:gt(4)")             选择td元素中序号大于4的所有td元素

$("td:ll(4)")              选择td元素中序号小于4的所有的td元素

$(":header")

$("p:animated")

内容过滤选择器:

$("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结尾的元素

子元素过滤选择器:

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")

$("p span:first-child")          返回所有的p元素的先进个子节点的数组

$("p span:last-child")           返回所有的p元素的较后一个节点的数组

$("p button:only-child")             返回所有的p中只有先进一个子节点的所有子节点的数组

表单元素选择器:

$(":input")                  选择所有的表单输入元素,包括input, textarea, select 和 button

$(":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")                     选择所有的file input元素

$(":hidden")                      选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器:

$(":enabled")            选择所有的可操作的表单元素

$(":disabled")              选择所有的不可操作的表单元素

$(":checked")              选择所有的被checked的表单元素

$("select option:selected")    选择所有的select 的子元素中被selected的元素

选取一个 name 为”S_低3_22″的input text框的上一个td的text值

$(”input[@ name =S_低3_22]“).parent().prev().text()

名字以”S_”开始,并且不是以”_R”结尾的

$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)

一个名为 radio_低1的radio所选的值

$(”input[@ name =radio_低1][@checked]“).val();

$("A B") 查找A元素下面的所有子节点,包括非直接子节点

$("A>B") 查找A元素下面的直接子节点

$("A+B") 查找A元素后面的兄弟节点,包括非直接子节点

$("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点

1. $("A B") 查找A元素下面的所有子节点,包括非直接子节点

例子:找到表单中所有的 input 元素

HTML 代码:

<form>

<label>Name:</label>

<input name="name" />

<fieldset>

<label>Newsletter:</label>

<input name="newsletter" />

</fieldset>

</form>

<input name="none" />

jQuery 代码:

$("form input")

结果:

[ <input name="name" />, <input name="newsletter" /> ]

2. $("A>B") 查找A元素下面的直接子节点

例子:匹配表单中所有的子级input元素。

HTML 代码:

<form>

<label>Name:</label>

<input name="name" />

<fieldset>

<label>Newsletter:</label>

<input name="newsletter" />

</fieldset>

</form>

<input name="none" />

jQuery 代码:

$("form > input")

结果:

[ <input name="name" /> ]

3. $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点

例子:匹配所有跟在 label 后面的 input 元素

HTML 代码:

<form>

<label>Name:</label>

<input name="name" />

<fieldset>

<label>Newsletter:</label>

<input name="newsletter" />

</fieldset>

</form>

<input name="none" />

jQuery 代码:

$("label + input")

结果:

[ <input name="name" />, <input name="newsletter" /> ]

4. $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点

例子:找到所有与表单同辈的 input 元素

HTML 代码:

<form>

<label>Name:</label>

<input name="name" />

<fieldset>

<label>Newsletter:</label>

<input name="newsletter" />

</fieldset>

</form>

<input name="none" />

jQuery 代码:

$("form ~ input")

结果:

[ <input name="none" /> ]

做个人网站与其它种类有什么区别?

    做不同类型网站的方法或许大致一样,然而其中的细节之处则是有区别的,个人网站在做站时或许都只用同样的方法,应该根据网站类型来选择方法,而不是新闻类型的这样做,图片类型的也这样做,那个做个人网站与其它种类有什么区别呢? 做个人网站与其它种类有什么区别?   首先明确个人网站与商业类型网站的区别,确定网站的价值,制定详细的计划。决定是不是要做个人网站,之间的是有区别,商业类的网站主要是为他们自己的业务着...

       中小企业网站如何做到秒开? 有的网站打开非常快,快的甚至连一个呼吸都没有,有的网站打开相当慢,慢的可能你都吃了一根雪糕,依然还在转呀转。前者,自然受访客的喜欢,后者,不好意思,关闭走人。这也怨不得不别人,谁让你的网站打开速度那么慢呢?即使是三五秒才能打开,依然会流失一部分访客,更何况是转呀转,转不开,更留不住。那么,如何才能让企业网站秒开呢?网站制作公司为大家提供几个方法。 简化编程代码 这一点其实很多人都知道,不少站长更...

       乌鲁木齐乌鲁木齐辖中盛天元投资机构和虎网科技签订做网站合同 中盛天元坐落于乌鲁木齐市乌鲁木齐市辖区乌鲁木齐经济开区喀什西路545号。中盛天元是经乌鲁木齐市乌鲁木齐市辖区工商局审核的正规企业,统一社会信用代码:0000。同时经国家工信部和新疆通信管理局审核通过ICP备案;备案号:0000。中盛天元选用虎网站响应式自适应网站案例,此类案例是当今新潮流的网站程序,他除了具备商务型所有功能外,他的特点在于能自动识别互联网和移动网终端设备,既能适用在电脑上浏览同时又...

       深圳宝安雅斯特展览策划同虎网科技签署网站建设协议 雅斯特选用虎网站定制型网站案例,此类网站主要是按客户要求和提供的风格案例或效果图纸来做,这种属于仿制和定制型网站,是根据功能开发的难易度来评估报价的,价格相对较高,适合于大中型企业和有个性风格、个性功能需求的客户选用。雅斯特是经深圳市宝安区工商局审核的正规企业,统一社会信用代码:9144030057769561X7。同时经国家工信部和广东省通信管理局审核通过ICP备案;备案号:粤ICP备13045...

       黄石西塞山陈春华小品和虎网科技签订网站建设条款 陈春华是经黄石市西塞山区工商局审核的有资质公司,统一社会信用代码:办理中。陈春华位于黄石市西塞山区西塞山区。陈春华选用虎网站网络实用型网站案例,此案例比经济型多了些功能,如动漫广告图片、在线客服QQ/MSN等聊天工具、顶部侧部二级分类导航、走马灯等功能。   代写小品、微电影、网络剧、相声、话剧情景剧、双簧剧本。1、代写价格因作品的题材及难易而定,买家先提出自己的写作要求,经双方充分沟通后协商好价...

       广州网站建设企业揭秘网站地图的六大优点 我想大家也知道,地图能指引人们到达的目地的,那么网站中的地图,它有什么作用了,网站地图能使蜘蛛更好的爬行整个网站,蜘蛛通过网站地图能够清楚了解你的整个网站结构,从而更好抓取你的网站内容,增加网站的收录。那么现在广州网站建设企业来讲讲设计网站地图的六个小诀窍。   1.网站地图必须得多些文字内容说明,因为这样能给蜘蛛更多有价值的内容。   2.网站地图最好是放在底部,因为蜘蛛是一行一行从上到下爬行,...

最新模板
少儿英语培训机构网站建设 培训公司网站建设
成人自考网站建设 成人培训网站制作设计版面
智能家居摆设设计网站建设 智能家居装修企业网站建设
铜螺母,铜螺丝,螺栓,螺钉工厂网站建设
废气处理设备,如活性炭吸附箱、RTO蓄热式氧化处理设备、光氧等离子复合设备 低温等离子设备 光氧催化设备等网企业网站建设
图文阅读