（jquery选择器）jquery基本筛选器详解

最新推荐文章于 2021-01-31 15:32:20 发布

俟河之清

最新推荐文章于 2021-01-31 15:32:20 发布

阅读量894

点赞数 2

分类专栏： jquery browser DOM 文章标签： jquery

本文链接：https://blog.csdn.net/qq_21653855/article/details/102981034

版权

jquery 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

browser DOM

2 篇文章 0 订阅

订阅专栏

前言

jQuery 中所有选择器都以美元符号开头：$()。
选择器与遍历方法有点类似，但又完全不同。

id选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：
$("#test")

例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>id选择器</title> 
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>
</html>

演示效果：
在这里插入图片描述
点击效果：

类选择器（.class选择器）

jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：
$(".test")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>类选择器（.class选择器）</title> 
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>
<h2 class="test">这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>

演示效果：
在这里插入图片描述
点击效果：

元素选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元素选择器</title> 
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h2").css("border","1px solid red");
  });
});
</script>
</head>
<body>

<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>

演示效果：
在这里插入图片描述
点击效果：

全选择器

*号代表全部选择
js语法：document.getElementsByTagName("*");
jquery语法：$("*");

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery全选择器</title>
    <style>
        div {
            width: 100px;
            height: 90px;
            float: left;
            padding: 5px;
            margin: 5px;
            background-color: #EEEEEE;
        }
    </style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="first">
    <p>class="first"</p>
    <p>选中</p>
</div>
<div class="second">
    <p>class="second"</p>
    <p>选中</p>
</div>
<div class="third">
    <p>class="third"</p>
    <p>选中</p>
</div>
<script type="text/javascript">
    <!--js原生方式-->
    //获取页面中所有的元素
    var elements1 = document.getElementsByTagName('*');
</script>
<script type="text/javascript">
    <!--jQuery方式-->
    //获取页面中所有的元素
    var elements2 = $('*');
    //原生与jQuery方法比较
    //===表示数据和类型都相等
    if(elements2.length === elements1.length){
        elements2.css("border","3px solid red");
    }
</script>
</body>
</html>

演示效果：
在这里插入图片描述

由于是全选，所有元素被选中，包括body元素，而上图的一条粗线就是body元素，由于没有定义body元素的width和height，所以呈现的是一条线段；

添加css：
body{
		width:400px;
	    height:200px;
		}

演示效果：
在这里插入图片描述

层级选择器

$( “parent > child” )
子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。
$(“ancestor descendant”)
后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等
$(“prev + next”)
相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素
$(“prev ~ siblings”)
一般兄弟选择器：匹配“prev”元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器
相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下!同一个父元素下!同一个父元素下!
层级选择器都有一个参考节点！

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery层级选择器</title>
   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<h2>子选择器与后代选择器</h2>
<div class="left">
    <div class="aaron">
        <p>div下的第一个p元素</p>
    </div>
    <div class="aaron">
        <p>div下的第一个p元素</p>
    </div>
</div>
<div class="right">
    <div class="imooc">
        <article>
            <p>div下的article下的p元素</p>
        </article>
    </div>
    <div class="imooc">
        <article>
            <p>div下的article下的p元素</p>
        </article>
    </div>
</div>
<script type="text/javascript">
    //子选择器
    //$('div > p') 选择所有div元素里面的子元素P
    $('div>p').css("border", "5px solid green");
</script>

<script type="text/javascript">
    //后代选择器
    //$('div  p') 选择所有div元素里面的p元素
    $('div article').css("border", "5px solid red");
</script>
<h2>相邻兄弟选择器与一般兄弟选择器</h2>
<div class="bottom">
    <div>兄弟节点div, +~选择器不能向前选择</div>
    <span class="prev">选择器span元素</span>
    <div>span后第一个兄弟节点div</div>
    <div>兄弟节点div
        <div class="small">子元素div</div>
    </div>
    <span>兄弟节点span,不可选</span>
    <div>兄弟节点div</div>
</div>
<script type="text/javascript">
    //相邻兄弟选择器
    //选取prev后面的第一个的div兄弟节点
    $('.prev+div').css("border", "3px solid blue");
</script>
<script type="text/javascript">
    //一般相邻选择器
    //选取prev后面的所有的div兄弟节点
    $('.prev~span').css("border", "3px solid yellow");
</script>
</body>
</html>

演示效果：
在这里插入图片描述

筛选选择器

很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素，
为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。
筛选选择器很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器

普通筛选器

:first选择器，语法：$("#id:first")、$(".class:first")或$("div:first")
作用:选中需要选择的id、class、元素的第一个；
:last选择器，语法：$("#id:last")、$(".class:last")或$("div:last")
作用：选中需要选择的id、class、元素的最后一个
:even选择器，语法：$("#id:event")、$(".class:even")或$("div:even")
作用：选中需要选择的id、class、元素的偶数个；
:odd选择器，语法：$("#id:odd")、$(".class:odd")或$("div:odd")
作用：选中需要选择的id、class、元素的奇数个

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery基本筛选选择器</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<h2>基本筛选器</h2>
    <div class="div">第一个div
        <p>第一个p（奇数的p）</p>
        <p>第二个p（偶数的p也是最后的p）</p>
    </div>
    <div>最后的div
		<p>第三个p（奇数的p）</p>
		<p>第四个p（偶数的p）</p>
	</div>
	<script>
		$("div:first").css("border","3px solid black");
		$("div:last").css("border","3px solid yellow");
		$("p:odd").css("border","3px solid red");
		$("p:even").css("border","3px solid green");
	</script>
</body>
</html>

演示效果：
在这里插入图片描述

后代相邻选择器

选取的节点都只在后不在前
子选择器，语法：$("#id>p")、$(".class>p")或$("div>p")；>符号后id、class、元素三者都可使用。
作用:选中需要选择的id、class、元素中的子代；
例：$("div>p")选中所有div元素下的所有子元素p。

后代选择器，语法：$("#id p")、$(".class p")或$("div p")；空格符后id、class、元素三者都可使用。
作用：选中需要选择的id、class、元素的后代；
例：$("div  p") 选择所有div元素里面的p元素。
（不只是子代，孙及曾孙都涵盖了）

相邻兄弟选择器，语法：$("#id+p")、$(".class+p")或$("div+p");+符号后id、class、元素三者都可使用。
作用：选中需要选择的id、class、元素后的元素的第一个兄弟节点；
例：$("div+p")选取div后面的第一个的p兄弟节点。

一般相邻选择器，语法：$("#id~p")、$(".class~p")或$("div~p")；~符号后id、class、元素三者都可使用。
作用：选中需要选择的id、class、元素后的某一个元素的所有兄弟节点；
例：$("div~p")选取div后面的所有的p兄弟节点。

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery基本筛选选择器</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<h2>基本筛选器</h2>
    <div id="div">第一个div
		<h2>第一个h2子代</h2>
		<h2>第二个h2子代</h2>
		<span>第一个span子代</span>
		<span>第二个span子代</span>
    </div>
    <div id="div">相邻的第一个div
		<div>
			<h2>第一个h2孙代</h2>
			<h2>第二个h2孙代</h2>
			<span>第一个span孙代</span>
			<span>第二个span孙代</span>
		</div>
	</div>
	<p>div相邻的第一个p</p>
	<p>div相邻的第二个p</p>
	<span>div、p相邻的第一个span</span>
	<span>div、p相邻的第二个span</span>
	<script>
		$("#div>h2").css("border","3px solid yellow");
		$("div span").css("border","3px solid red");
		$("div+p").css("border","3px solid black");
		$("div~span").css("border","3px solid green");
	</script>
</body>
</html>

演示效果：
在这里插入图片描述

内容筛选选择器

语法：$("div:contains(content)")；$("div:has(span)")
:contains与:has都有查找的意思：
contains查找包含“指定文本”的元素(不包含属性以及标签)；
has查找包含"标签、id、class"的元素。
如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。（包含几层就有几层的属性效果）

语法：$("a:parent");$("a:empty")
:parent选择所有包含子元素或者文本的元素（只要包含了内容就行如<a>1</a>或<a><span></span></a>）
:empty选择所有没有包含子元素或者文本的元素（不包含内容，如<a></a>）
:parent与:empty是相反的，两者所涉及的子元素，包括文本节点。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery基本筛选选择器</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<h2>基本筛选器</h2>
    <div>第一个div
		<h2>第一个h2子代</h2>
		<h2>第二个h2子代</h2>
    </div>
    <div>
		<div>子代div</div>
		<input type="button" value="h2">
	</div>
	<div>
		<div>
			<p>h2</p>
		</div>
	</div>
	<div>
		<h2>h标签的span</h2>
	</div>
	<span>相邻的span</span>
	<div>
		<span>子代span</span>
	</div>
	<div>
		<p>span<p>
		<span>子代span</span>
	</div>
	<div>
		<p id="span">span</p>
	</div>
	<script>
		$("div:contains(h2)").css("border","3px solid yellow");
		$("div:has(span)").css("border","3px solid red")
		$("div:has(#span)").css("border","3px solid green")
	</script>
</body>
</html>

演示效果：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery基本筛选选择器</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<h3>:parent/:empty</h3>
<div>
    <div>
        <a>:parent</a>
    </div>
    <div>
		<div>
			345
			<span>123</span>
        <a>:parent</a>
		</div>
    </div>
	<br>
	<a><span></span></a><br><br>
	<a>212</a>
	<a href="#"><span>252727</span></a>
	<a></a>
    <div>
        <a></a>
    </div>
</div>
<script type="text/javascript">
    //选择所有包含子元素或者文本的a元素
    //增加一个蓝色的边框
    $('a:parent').css("border", "3px solid blue");
	</script>
<script type="text/javascript">
    //找到a元素下面的所有空节点
    //增加一段文本与边框
    $('a:empty').text(":empty").css("border", "3px solid red");
</script>
</body>
</html>

演示效果：
在这里插入图片描述

可见性筛选选择器

隐藏一个元素的方式：
1，CSS display属性的值为none。
2，type="hidden"的表单元素。
3，宽度和高度都显式设置为0。
4，一个祖先元素是隐藏的，该元素是不会在页面上显示的。
5，CSS visibility的值是hidden。(依旧影响布局，且长度不变)
6，CSS opacity的值是0。

语法：$("div:visible"),$("div:hidden")
:visible选择器效果：可见的元素
:hidden选择器效果：隐藏的元素

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery基本筛选选择器</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<h2>可见性筛选选择器</h2>
<h3>:visible/:hidden</h3>
<div class="left">
    <div class="div">
        <a>display</a>
        <p id="div1" style="display:none;">display</p>
    </div>
    <div class="div">
        <a>width</a>
        <a>height</a>
        <p id="div2" style="width:0;height:0">width/height</p>
    </div>
    <div class="div">
        <a>visibility</a>
        <a>opacity</a>
        <p id="div3" style="visibility:hidden;opacity:0">visibility</p>
    </div>
    <p id="show"></p>
    <script type="text/javascript">
		//此处请打开浏览器f12，进入console查看
        function show(ele){
            if(ele instanceof jQuery){
                console.log('元素的长度：'+ ele.length)
            }else{
                alert(ele+' 不是jQuery对象')
            }
        }
    </script>
    <script type="text/javascript">
        show($('#div1:visible'));
    </script>
    <script type="text/javascript">
        show($('#div2:visible'));
    </script>
    <script type="text/javascript">
        show($('#div3:visible'));//visibility属性不可见
        //visible依旧存在，依旧影响布局且长度不变，console.log为1
    </script>
    <script type="text/javascript">
        show($('#div1:hidden'));//隐藏的#div1，console.log为1
    </script>
    <script type="text/javascript">
        show($('#div2:hidden'));//隐藏的#div2，console.log为1
    </script>
    <script type="text/javascript">
        show($('#div3:hidden'));
    </script>
</div>
</body>
</html>

演示效果：
在这里插入图片描述

属性筛选选择器

最外层单双引号都可以,但包含内容引号必须不同，如：$('div[name|="-"]')和$(”div[name|='-']")

$("div[name=p1]")
查找所有div中，属性name=p1的div元素

$("div[p2]")
查找所有div中，有属性p2的div元素

$('div[name|="-"]')
查找所有div中，有属性name中的值只包含一个连字符“-”的div元素

$('div[name^="xiao"]')
查找所有div中，属性name的值是用xiao开头的

$('div[name$="xiao"]')
查找所有div中，属性name的值是用xiao结尾的

$('div[name*="test"]')
查找所有div中，有属性name中的值包含一个test字符串的div元素

$('div[testattr!="true"]')
查找所有div中，有属性testattr中的值没有包含"true"的div

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery属性筛选选择器</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<h2>属性筛选选择器</h2>
<h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>
<div class="left" testattr="true" >
    <div class="div" testattr="true" name='p1'>
        <a>[att=val]</a>
    </div>
    <div class="div" testattr="true" p2>
        <a>[att]</a>
    </div>
    <div class="div" testattr="true" name="-">
        <a>[att|=val]</a>
    </div>
    <div class="div" testattr="true" name="a b">
        <a>[att~=val]</a>
    </div>
</div>
<script type="text/javascript">
    //查找所有div中，属性name=p1的div元素
    $("div[name=p1]").css("border", "3px groove red");
</script>
<script type="text/javascript">
    //查找所有div中，有属性p2的div元素
    $('div[p2]').css("border", "3px groove blue");
</script>
<script type="text/javascript">
    //查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
    $('div[name|="-"]').css("border", "3px groove #00FF00");
</script>
<script type="text/javascript">
    //查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素
    $('div[name~="a"]').css("border", "3px groove #668B8B");
</script>
<h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
<div class="left" testattr="true" >
    <div class="div" testattr="true"  name='xiao-shitou'>
        <a>[att^=val]</a>
    </div>
    <div class="div" testattr="true"  name='shitou-xiao'>
        <a>[att$=val]</a>
    </div>
    <div class="div" testattr="true"  name="attr-test-selector">
        <a>[att*=val]</a>
    </div>
    <div class="div" name="a b">
        <a>[att!=val]</a>
    </div>
</div>
<script type="text/javascript">
    //查找所有div中，属性name的值是用xiao开头的
    $('div[name^="xiao"]').css("border", "3px groove red");
</script>
<script type="text/javascript">
    //查找所有div中，属性name的值是用xiao结尾的
    $('div[name$="xiao"]').css("border", "3px groove blue");
</script>
<script type="text/javascript">
    //查找所有div中，有属性name中的值包含一个test字符串的div元素
    $('div[name*="test"]').css("border", "3px groove #00FF00");
</script>
<script type="text/javascript">
    //查找所有div中，有属性testattr中的值没有包含"true"的div
    $('div[testattr!="true"]').css("border", "3px groove #668B8B");
</script>
</body>
</html>

演示效果：
在这里插入图片描述

子元素筛选选择器

$(’.first-div a:first-child’)
查找class="first-div"下的第一个a元素，针对所有父级下的第一个

$(’.first-div a:last-child’)
查找class="first-div"下的最后一个a元素，针对所有父级下的最后一个，如果只有一个元素的话，last也是第一个元素

$(’.first-div a:only-child’)
查找class="first-div"下的只有一个子元素的a元素

$(’.last-div a:nth-child(2)’)
查找class="last-div"下的第二个a元素

$(’.last-div a:nth-last-child(2)’)
查找class="last-div"下的倒数第二个a元素

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery子元素筛选选择器</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<h2>子元素筛选选择器</h2>
<h3>:first-child、:last-child、:only-child</h3>
<div class="left first-div">
    <div class="div">
        <a>:first-child</a>
        <a>第二个元素</a>
        <a>:last-child</a>
    </div>
    <div class="div">
        <a>:first-child</a>
    </div>
    <div class="div">
        <a>:first-child</a>
        <a>第二个元素</a>
        <a>:last-child</a>
    </div>
</div>
<script type="text/javascript">
    //查找class="first-div"下的第一个a元素
    //针对所有父级下的第一个
    $('.first-div a:first-child').css("color", "#CD00CD");
</script>
<script type="text/javascript">
    //查找class="first-div"下的最后一个a元素
    //针对所有父级下的最后一个
    //如果只有一个元素的话，last也是第一个元素
    $('.first-div a:last-child').css("color", "red");
</script>
<script type="text/javascript">
    //查找class="first-div"下的只有一个子元素的a元素
    $('.first-div a:only-child').css("color", "blue");
</script>
<h3>:nth-child、:nth-last-child</h3>
<div class="left last-div">
    <div class="div">
        <a>:first-child</a>
        <a>第二个元素</a>
        <a>第三个元素</a>
        <a>:last-child</a>
    </div>
    <div class="div">
        <a>:first-child</a>
        <a>第二个元素</a>
    </div>
    <div class="div">
        <a>:first-child</a>
        <a>第二个元素</a>
        <a>第三个元素</a>
        <a>:last-child</a>
    </div>
</div>
<script type="text/javascript">
    //查找class="last-div"下的第二个a元素
    $('.last-div a:nth-child(2)').css("color", "#CD00CD");
</script>

<script type="text/javascript">
    //查找class="last-div"下的倒数第二个a元素
    $('.last-div a:nth-last-child(2)').css("color", "red");
</script>
</body>
</html>

演示效果：
在这里插入图片描述

表单元素选择器

$(’:input’)
查找所有 input, textarea, select 和 button 元素
:input 选择器基本上选择所有表单控件

$(‘input:text’)
匹配所有input元素中类型为text的input元素

$(‘input:password’)
匹配所有input元素中类型为password的input元素

$(‘input:radio’)
匹配所有input元素中的单选按钮,并选中

$(‘input:checkbox’)
匹配所有input元素中的复选按钮,并选中

$(‘input:submit’)
匹配所有input元素中的提交的按钮

$(‘input:image’)
匹配所有input元素中的图像类型的元素

$(‘input:button’)
匹配所有input元素中类型为按钮的元素

$(‘input:file’)
匹配所有input元素中类型为file的元素

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery表单元素筛选选择器</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<h2>表单元素筛选选择器</h2>
<h3>input、text、password、radio、checkbox</h3>
<h3>submit、image、reset、button、file</h3>
<div class="left first-div">
    <form>
        <input type="text" value="text类型"/>
        <input type="password" value="password"/>
        <input type="radio"/>
        <input type="checkbox"/>
        <input type="submit" />
        <input type="image" />
        <input type="reset" />
        <input type="button" value="Button" />
        <input type="file" />
    </form>
</div>

<script type="text/javascript">
    //查找所有 input, textarea, select 和 button 元素
    //:input 选择器基本上选择所有表单控件
    $(':input').css("border", "1px groove red");
</script>

<script type="text/javascript">
    //匹配所有input元素中类型为text的input元素
    $('input:text').css("background", "#A2CD5A");
</script>

<script type="text/javascript">
    //匹配所有input元素中类型为password的input元素
    $('input:password').css("background", "yellow");
</script>

<script type="text/javascript">
    //匹配所有input元素中的单选按钮,并选中
    $('input:radio').attr('checked','true');
</script>

<script type="text/javascript">
    //匹配所有input元素中的复选按钮,并选中
    $('input:checkbox').attr('checked','true');
</script>

<script type="text/javascript">
    //匹配所有input元素中的提交的按钮,修改背景颜色
    $('input:submit').css("background", "#C6E2FF");
</script>

<script type="text/javascript">
    //匹配所有input元素中的图像类型的元素,修改背景颜色
    $('input:image').css("background", "#F4A460");
</script>

<script type="text/javascript">
    //匹配所有input元素中类型为按钮的元素
    $('input:button').css("background", "red");
</script>

<script type="text/javascript">
    //匹配所有input元素中类型为file的元素
    $('input:file').css("background", "#CD1076");
</script>
</body>
</html>

演示效果：
在这里插入图片描述

表单对象选择器

$(‘input:enabled’)
查找所有input所有可用的（未被禁用的元素）input元素。

$(‘input:disabled’)
查找所有input所有不可用的（被禁用的元素）input元素。

$(‘input:checked’).removeAttr(‘checked’)
查找所有input所有勾选的元素(单选框,复选框),移除input的checked属性

$(‘option:selected’).removeAttr(‘selected’)
查找所有option元素中,有selected属性被选中的选项,移除option的selected属性

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery表单对象选择器</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<h2>选择器</h2>
<h3>enabled、disabled</h3>
<form>
    <input type="text" value="未设置disabled" />
    <input type="text" value="设置disabled" disabled="disabled" />
    <input type="text" value="未设置disabled" />
</form>

<script type="text/javascript">
    //查找所有input所有可用的（未被禁用的元素）input元素。
    $('input:enabled').css("border", "2px groove red");
</script>

<script type="text/javascript">
    //查找所有input所有不可用的（被禁用的元素）input元素。
    $('input:disabled').css("border", "2px groove blue");
</script>

<h3>checked、selected</h3>
<form>
    <input type="checkbox" checked="checked">
    <input type="checkbox">
    <input type="radio" checked>
    <input type="radio">
    <select name="garden" multiple="multiple">
        <option>码农</option>
        <option selected="selected">前端之乐</option>
        <option>活生生的生活</option>
        <option selected="selected">博客园</option>
    </select>
</form>
<script type="text/javascript">
    //查找所有input所有勾选的元素(单选框,复选框)
    //移除input的checked属性
    $('input:checked').removeAttr('checked')
</script>

<script type="text/javascript">
    //查找所有option元素中,有selected属性被选中的选项
    //移除option的selected属性
    $('option:selected').removeAttr('selected')
</script>
</body>
</html>

演示效果：
在这里插入图片描述

控制表单元素： 
文本框，文本区域：$("#txt").attr("value",'');//清空内容 
$("#txt").attr("value",'11');//填充内容 
多选框checkbox： $("#chk1").attr("checked",'');//不打勾 
$("#chk2").attr("checked",true);//打勾 
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 
单选组 radio：    $("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 
下拉框 select：   $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option 
$("#sel").empty()；//清空下拉框

特殊选择器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery特殊选择器</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h2>特殊选择器this</h2>
<p id="test1">click test：通过原生DOM处理</p>
<p id="test2">click test：通过原生jQuery处理</p>
	<input type="button" value="第一个" id="first">
	<input type="button" value="第二个" id="second">
<script type="text/javascript">
    var p1 = document.getElementById('test1')
    p1.addEventListener('click',function(){
        //直接通过dom的方法改变颜色
        this.style.color = "red";
    },false);
</script>

<script type="text/javascript">
    $('#test2').click(function(){
        //通过包装成jQuery对象改变颜色
        $(this).css('color','blue');
    })
</script>
	//下面的两个方法等效于上面
<script>
	$("#first").click(function(){
		$("#test1").css("color","red");
	});	
</script>
	<script>
	$("#second").click(function(){
		$("#test2").css("color","blue");
	});	
</script>
</body>
</html>

点击演示效果：
在这里插入图片描述

俟河之清

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
（jquery选择器）jquery基本筛选器详解

前言jQuery 中所有选择器都以美元符号开头：$()。id选择器jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。通过 id 选取元素语法如下：$("#test")例：<!DOCTYPE html><html><head>...
复制链接

扫一扫

专栏目录