详解Jquery选择器

1、常见的选择器

id,类,标签选择器。

$("#a1")

$(".myclass")

$("div")

2、组合选择器

$("#a1,#a3,#a4,p,.myclass")

3、继承选择器

$("#d1 .myclass")

找到的对应的html元素为

<div  id='#d1'><a class="myclass">链接</a></div>

 4、按照正则表达式进行选取

$(":checkbox[id^='ssss'][id$='xxxx']").each(function(){
    $(this).attr("checked", checked);
  });
  // 以ssss开头或者以xxxx结束
  $(":checkbox[id^='ssss'],[id$='xxxx']").each(function(){
    $(this).attr("checked", checked);
  });

 5、选取表单元素

radio

$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

 select 

$('select#sel option:selected').val(); 
$('select#sel').find('option:selected').val();

 6、table操作

$(renderTo).find('tr:has("th"):last').nextAll().remove();

 7、表单对象获取

复制代码
$(:input)//查找所有的Input元素,当然也包括下拉列表,文本域,单选框,复选框等。
$(:text)//匹配所有的单行文本框
$(:password)//匹配所有的密码框
$(:radio)//匹配所有的单选按钮
$(:checkbox)//匹配所有的复选框
$(:submit)//匹配所有的提交按钮
$(:image)//匹配所有的图像域,例如<input type="image" />
$(:reset)//匹配所有的重置按钮
$(:button)//匹配所有的按钮
$(:file)//匹配所有的文件上传域
$(:hidden)//匹配所有的不可见元素或者type为hidden的元素
$(:enabled)//匹配所有可用的input元素,比如radio:enabled表示匹配所有可用的单选按钮
$(:disabled)//匹配所有的不可用input元素,作用与上相反
---------------------------------------------------------------------------------------------------------------------------------------------------------------------

下面这两个属于属于二级选择器。跟上面的不是一类,这个属于小类 $(:checked)//匹配所有选中的复选框元素 $(:selected)//匹配所有的下拉列表
复制代码

8、子元素的获取

$("Element:nth-child(index)") '选择父级下面的第n个元素
$("Element:nth-child(even)") '选择父级下面的偶数
$("Element:nth-child(odd)") '选择父级下面的奇数
$("Element:nth-child(3n+1)") '表达式
$("Element:first-child") '选择父级下面的第一个子元素
$("Element:last-child") '选择父级下面的最后一个子元素
$("Element:only-child") '匹配父级下的唯一的一个子级元素,例如dt在dl列表中唯一,那么将选择dt

9、层级元素获取

我们看这一段html代码

复制代码
 <div id="d1">
       <div id="d11">
           <div id="d1111"></div>
       </div>

       <div></div>
       <div></div>

   </div>

    <div id="d2"></div>
    <div id="d3"></div>
复制代码
$("#d1 div div")  '前面父级 后面是子集
$("#d1>div") '获取#d1下面的所有的div元素,只是儿子节点,不包含孙子节点
$("#d1 + div") 'div元素后面的第一个 p元素 d2 同级别的
$("#d1 ~ div") 'div后面的所有的 div元素 d2,d3。同级别的

10、内容对象的获取和对象可见性

$("Element:contains(text)") '元素中是否包含text文本内容
$('Element:empty") '获得元素不包含子元素或文本的
$("Element:partnt") '获得元素包含子元素或文本的
("Element:has(selector)")‘是否包含某个元素,如:

("p:has(span)")表示所有包含span元素的p元素
$("Element:hidden") '选择所有可见元素
$("Element:visible") '选择所有不可见元素

11、jquery 中的非操作

$('#p1').not('p')
$('p[id!='p1']')

 12、end的用法。往d1和d2中添加内容 GoodMoring China!!怎么做?这里必须用到end(),用于返回到根元素上,必须用end()才能返回,因为如果不用end,那么返回的只是当前的元素。

复制代码
<div id="d1">
        <div></div>
        <div></div>
    </div>

<div id="d2">
        <div></div>
        <div></div>
    </div>

jquery代码如下:

$(document).ready(function () {
$("#d1,#d2").find("div:last").html("GoodMoring China!!")
.end()
.find("div:first").html("GoodMoring China!!1")
});

 
复制代码

 

posted on   漫思  阅读(348)  评论(0编辑  收藏  举报

编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示