jQuery – 6.选择器

【唐】三三 2024-10-12 15:10:59 原文

1. 属性过滤选择器：

1. $("div[id]")选取有id属性的<div>

2. $("div[title=test]")选取title属性为“test”的<div>，

3. $("div[title!=test]")选取title属性不为“test”的<div>

4. $(“div[id*=div]”)选取给定的属性是以包含某些值的元素还可以选择开头、结束、包含等，条件还可以复合。（*）

2.表单对象选择器（过滤器）：

1. $("#form1:enabled")选取id为form1的表单内所有启用的元素

2. $("#form1:disabled")选取id为form1的表单内所有禁用的元素

3. $("input:checked")选取所有选中的元素（Radio、CheckBox）

4. $("select option:selected")选取所有选中的选项元素（下拉列表）

3.表单选择器

$(":input")选取所有<input>、<textarea>、<select>和<button>元素。

$(":text")选取所有单行文本框，等价于$("input[type=text]")

$(":password")选取所有密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

属性过滤选择器：

<body>

    <input id="t1"  type="text"/><br />

    <input id="t2"  type="text"/><br />

    <input id="t3"  type="text"/><br />

    <input id="t4"  type="text" /><br />

    <input type="text"  /><br />

    <input type="text"  /><br />

    <input id="btn1" type="button" value="click1" /><br />

    <input id="btn2" type="button" value="click2" /><br />

    <input type="button" value="click3" /><br />

    <input type="button" value="click4" /><br />

</body>

1. $("div[id]")选取有id属性的<div>

2. $("div[title=test]")选取title属性为“test”的<div>，JQuery中没有对getElementsByName进行封装，用$("input[name=abc]")

3. $("div[title!=test]")选取title属性不为“test”的<div>

4. $(“div[id*=div]”)选取给定的属性是以包含某些值的元素

还可以选择开头、结束、包含等，条件还可以复合。（*）

表单对象选择器（过滤器）：

1. $("#form1:enabled")选取id为form1的表单内所有启用的元素

2. $("#form1:disabled")选取id为form1的表单内所有禁用的元素

3. $("input:checked")选取所有选中的元素（Radio、CheckBox）

4. $("select option:selected")选取所有选中的选项元素（下拉列表）

也可以写为

////查找所选的checkbox

            $("input[value=checked]").click(function () {

                var $v = $("input[type=checkbox]:checked");

                for (var i = 0; i < $v.length; i++) {

                    var v = $v[i];//转换为dom

                    alert(v.value);

                }

            })

表单选择器

$(":input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样， $("input")只获得<input>
$(":text")选取所有单行文本框，等价于$("input[type=text]")

$(":password")选取所有密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

案例：歌曲选择，实现全选、反选

jQuery – 6.选择器的更多相关文章

jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
HTML 学习笔记 JQuery（选择器）
学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...
jQuery的选择器中的通配符总结
1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...
JQuery 层次选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...
jQuery过滤选择器
//基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...
jquery相对选择器,又叫context选择器，上下文选择器;find()与children()区别
jquery相对选择器有两个参数,jQuery函数的第二个参数可以指定DOM元素的搜索范围(即以第二个参数指定的内容为容器查找指定元素). 第二个参数的不同的类型,对应的用法如下表所示. 类型用法 ...
jQuery之选择器
jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...
关于jquery ID选择器的一点看法
最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2. $( ...
jQuery的选择器中的通配符[id^='code'] 【转】
JQuery 1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='cod ...
jquery下选择器整理
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

随机推荐

leetcode 102. Binary Tree Level Order Traversal
Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...
学习高博SLAM（1）
这几天按照高博的博客做了一起做RGB-D SLAM (1)和(2) ,,其中大部分步骤都没问题开发环境是ubuntu14.04+indigo 有几个问题就是: (1)我的电脑不能加载PPA,原因是: ...
Struts2中的OGNL通配符
<action name="*_*" class="action.{1}Action" method="{2}"> 匹配,第一个 ...
super用法和继承中的构造方法
当new出来一个对象的时候, this是只想对象本身. 在存在继承关系时, 在子类中用super表示引用父类中的东西. 子类的构造过程必须调用父类的构造方法. 子类中包含父类,所以子类中一定要先调用 ...
nginx 下 bootstrap fa 字体异常问题
server { listen 8082; # server_name 192.168.16.88; # root /home/ywt/workspace/kuF/web/statics; # aut ...
django xadmin自定义菜单
1. 自定义菜单 adminx.py class GlobalSetting(object): site_title = u'xxx后台' def kuF_site_menu(self): retur ...
基于用户相似性的协同过滤——Python实现
代码基本来自项亮的<推荐系统实践>,把书上的伪代码具体实现,还参考了https://www.douban.com/note/336280497/ 还可以加入对用户相似性的归一化操作,效果会 ...
Linux Vsftpd 连接超时解决方法
Linux Vsftpd 连接超时解决方法 2013-11-13 10:58:34| 分类: 默认分类|举报|字号订阅解决方法(http://www.lingdus.com/thread ...
Majority Number I & || && |||
Majority Number Given an array of integers, the majority number is the number that occurs more than ...
C++实现VPN工具之常用API函数
RAS是Remote Access Service的缩写,意为:远程访问服务,主要用来配置企业的远程用户对企业内部网络访问,包括拨号访问和vpn方式.微软的所有Windows平台中都有RAS客户机,它 ...