js选择器和jquery选择器

17 篇文章 0 订阅
9 篇文章 0 订阅

1、元素、属性、标签的关系
html文档由嵌套的html元素组成,一个html元素包含开始标签和结束标签。属性是html元素提供的附加信息。下面的例子中定义了一个div元素,id、name、class是元素属性,而div是组成元素的标签。

<div id="test-div-id" name="test-div-name" class="test-div-class"></div>

选择器的作用就是获取满足指定条件的元素。这里的条件可以是元素的id、name、标签名、class名,还可以根据元素的属性来进行选择。

2、js选择器
getElementById()通过元素ID获取元素
getElementsByName()通过元素Name获取元素
getElementsByTagName()通过元素的标签名称获取元素
getElementsByClassName()通过元素的CSS类来获取元素

3、jquery选择器
(1)使用元素id、标签名、class选择元素。

*  $("*")  所有元素
#id  $("#id1") id="id1"的元素
ele $("p") 所有<p>元素
.class   $(".c1")  所有class="c1"的元素
           $(".c1.c2")   所有class="c1"class="c2"的元素
s1,s2,s3    $("th,td,.intro")  所有带有匹配选择的元素

(2)根据元素所处位置进行选择
第一个、最后一个、奇数个、偶数个、等于index、大于index、小于index的元素。

:first  $("p:first")   第一个 <p> 元素
:last  $("p:last")    最后一个 <p> 元素
:even  $("tr:even")     所有偶数 <tr> 元素
:odd   $("tr:odd")  所有奇数 <tr> 元素
:eq(index)   $("ul li:eq(3)")    列表中的第四个元素(index 从 0 开始)
:gt(no) $("ul li:gt(3)")   列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)")   列出 index 小于 3 的元素

(3)选择不满足某条件的元素

:not(selector)  $("input:not(:empty)") 所有不为空的 input 元素

(4)根据元素的属性进行选择
属性(名等于、值(等于、不等于、包含xxx结尾))的元素

[attribute]  $("[href]")   所有带有 href 属性的元素
[attribute=value]   $("[href='#']")    所有 href 属性的值等于 "#" 的元素
[attribute!=value]  $("[href!='#']")   所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")  所有 href 属性的值包含以 ".jpg" 结尾的元素

(5)选择表单元素(输入、文本、密码、单选、提交、重置、图片、标题、文件等)

:input  $(":input")    所有 <input> 元素
:text   $(":text") 所有 type="text" 的 <input> 元素
:password   $(":password") 所有 type="password" 的 <input> 元素
:radio  $(":radio")    所有 type="radio" 的 <input> 元素
:checkbox   $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit")   所有 type="submit" 的 <input> 元素
:reset  $(":reset")    所有 type="reset" 的 <input> 元素
:button $(":button")   所有 type="button" 的 <input> 元素
:image  $(":image")    所有 type="image" 的 <input> 元素
:file   $(":file") 所有 type="file" 的 <input> 元素

:enabled    $(":enabled")  所有激活的 input 元素
:disabled   $(":disabled") 所有禁用的 input 元素
:selected   $(":selected") 所有被选取的 input 元素
:checked    $(":checked")  所有被选中的 input 元素

(6)特殊要求的选择

:header $(":header")   所有标题元素 <h1> - <h6>
:animated  所有动画元素
:contains(text) $(":contains('xxx')")  包含指定字符串的所有元素
:empty  $(":empty")    无子(元素)节点的所有元素
:hidden $("p:hidden")  所有隐藏的 <p> 元素
:visible    $("table:visible") 所有可见的表格
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值