jQuery选择器

基本选择器

基本选择器说明
* 选择所有元素
element标签选择器
idid选择器
class类选择器
[selector1,selector2,selectorN]并集选择器

样例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--  引入jQuery文档-->
        <script src="../../js/jquery.min.js"></script>
        <script>

            $(function(){
                // 1 * 选择所有元素
                console.log($('*'));

                //2 标签选择器
                console.log('div: '+($('div').length))
                console.log('div: '+($('div').size()))
				
				//3 id选择器
				console.log('id: '+($('#d1').size()))

                //4 类选择器
                $('.dd').css("color","red");
                console.log('class: '+($('.dd').size()))

                //5 并集选择器
                $('.d2,#d1').css('color','green')

            })

        </script>
    </head>
    <body>

        <div>div1</div>
        <div>div2</div>

        <div class="dd" >div3</div>
        <div class="dd" >div4</div>

        <div id="d1" >div5</div>
        <div class="d2" >div6</div>

    </body>
</html>

效果截图:
在这里插入图片描述

层级选择器

根据层级关系选择:
ancestor descendant 查找所有子元素,包括间接的子元素
parent > child 直接子元素 ,不包括间接子元素
prev + next 查找与prev同级的第一个元素,是兄弟关系
prev ~ siblings 找与prev同级的所有元素,是兄弟关系

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!--  引入jQuery文档-->
		<script src="../../js/jquery.min.js"></script>
		<title></title>
	</head>
	<body>
		<script>
		    $(function(){
		        //ancestor descendant 所有子元素,包括间接的子元素
		        console.log($('.container div').get())
		        //parent > child 直接子元素 ,不包括间接子元素
		        console.log($('.container>div').get())
				
				//prev + next 查找与prev同级的第一个元素,是兄弟关系
				console.log($('.container+div').get())
				//prev ~ siblings 找与prev同级的所有元素,是兄弟关系
				console.log($('.container~div').get())
		})
		</script>
		<div class="container">
		
		    <div class="head" >
		        head
		    </div>
		
		    <div class="content" >
		        <div > content1</div>
		        <div > content2</div>
		        <div > content3</div>
		    </div>
		</div>
		<div class="container1">container1</div>
		<div class="container2">container2</div>
		<div class="container3">container3</div>
	</body>
</html>


效果截图:
在这里插入图片描述

基本筛选器

each方法

each方法用于迭代

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../js/jquery.min.js"></script>
		<title></title>
	</head>
	<body>
		<ul>
		            <li>第1行</li>
		            <li>第2行</li>
		            <li>第3行</li>
		            <li>第4行</li>
		            <li>第5行</li>
		            <li>第6行</li>
		            <li>第7行</li>
		            <li>第8行</li>
		            <li>第9行</li>
		            <li>第10行</li>
		        </ul>
		<script>
		//each方法用于迭代
		$('li').each(function(i,el){
		    //i 代表遍历的 序号,
		    //el 代表上下文对象(每一个匹配的元素)
		    //this 此处this 是DOM原生对象
		    console.log(i,el,$(this).text())
		
		})
		</script>
	</body>
</html>

效果截图:
在这里插入图片描述

基本筛选器的使用

基本筛选器说明
:first获取第一个元素
:not(selector)去除所有与给定选择器匹配的元素
:even匹配所有索引值为偶数的元素,从 0 开始计数
:odd匹配所有索引值为奇数的元素,从 0 开始计数
:eq(index)匹配一个给定索引值的元素
:gt(index)匹配所有大于给定索引值的元素
:lang选择指定语言的所有元素
:last获取最后个元素
:lt(index)匹配所有小于给定索引值的元素
:header匹配如 h1, h2, h3之类的标题元素
:animated匹配所有正在执行动画效果的元素
:focus匹配当前获取焦点的元素
:root选择该文档的根元素
:target选择由文档URI的格式化识别码表示的目标元素

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--  引入jQuery文档-->
		<script src="../../js/jquery.min.js"></script>
		<script>
			$(function() {


				//li:first 第一个元素
				console.log('li:first', $('li:first').text())

				//li:last 最后一个
				console.log('li:last', $('li:last').text())

				//li:eq(5) eq 获取索引所在的元素
				console.log('li:eq(5)', $('li:eq(5)').text())
				
				//:even :odd 代表偶数和奇数
				console.log('li:even', $('li:even').text())
				console.log('li:odd', $('li:odd').text())

				//:gt :lt 
				// 匹配所有大于索引值4的元素
				console.log('li:gt(4)', $('li:gt(4)').text())
				// 匹配所有小于索引值4的元素
				console.log('lt(4)', $('li:lt(4)').text())

			})
		</script>
	</head>
	<body>

		<ul>
			<li>第0行</li>
			<li>第1行</li>
			<li>第2行</li>
			<li>第3行</li>
			<li>第4行</li>
			<li>第5行</li>
			<li>第6行</li>
			<li>第7行</li>
			<li>第8行</li>
			<li>第9行</li>
			
		</ul>

	</body>
</html>

效果截图:
在这里插入图片描述

注意:下标是0开始算的

内容选择器

内容选择器说明
:contains(text)匹配包含给定文本的元素
:empty匹配所有不包含子元素或者文本的空元素
:has(selector)匹配含有选择器所匹配的元素的元素
:parent匹配含有子元素或者文本的元素

样例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--  引入jQuery文档-->
        <script src="../../js/jquery.min.js"></script>
        <script>

            $(function(){
                //contains 包含文字
                console.log($('div:contains("Keafmd")')[0].outerHTML)
                console.log($('div:contains("Keafmd")')[0].innerHTML)
				console.log($('td:contains("Keafmd")')[0].outerHTML)
				console.log($('td:contains("Keafmd")')[0].innerHTML)

                //:empty
                $('p:empty').each(function(i,el){
                    console.log(el.outerHTML)
                })

                //匹配    含有选择器所匹配的元素(子元素) 的元素
                console.log($('div:has(.mysapn)')[0].outerHTML)


                //:parent 查找包含子元素的 元素
                console.log('size',$("td:parent").length);
                console.log('html',$("td:parent").html());
                console.log('text',$("td:parent").text());

            })

        </script>
    </head>
    <body>

        <div>哈哈哈</div>
        <div>Keafmd</div>
        <div >div1
            <span class="mysapn"></span>
        </div>

        <p></p>


        <table>
          <tr><td>Keafmd</td><td></td></tr>
          <tr><td>牛哄哄的柯南</td><td></td></tr>
        </table>

    </body>
</html>

效果截图:
在这里插入图片描述

可见性选择器

可见性选择器说明
:hidden匹配所有不可见元素,或者type为hidden的元素
:visible匹配所有的可见元素

样例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                background-color: aliceblue;
                margin: 5px;
            }
        </style>
		<!--  引入jQuery文档-->
        <script src="../../js/jquery.min.js"></script>
        <script>
            $(function(){
                //不可见的元素
                console.log($(":hidden").length);
                console.log($("input:hidden")[0].outerHTML);
                console.log($("div:hidden")[0].outerHTML);

                //visible 可见的元素
                console.log($("div:visible").text());

            })
        </script>
    </head>
    <body>
        <input type="hidden" />
		<input  />
        <div style="display: none;">d1</div>
        <div>d2</div>
        <div>d3</div>

    </body>
</html>

效果截图:
在这里插入图片描述

属性选择器

属性选择器说明
[attribute]匹配包含给定属性的元素
[attribute=value]匹配给定的属性是某个特定值的元素
[attribute!=value]匹配所有不含有指定的属性,或者属性不等于特定值的元素。
[attribute^=value]匹配给定的属性是以某些值开始的元素
[attribute$=value]匹配给定的属性是以某些值结尾的元素
[attribute*=value]匹配给定的属性是以包含某些值的元素
[attrSel1] [attrSel2] [attrSelN]复合属性选择器,需要同时满足多个条件时使用

样例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--  引入jQuery文档-->
        <script src="../../js/jquery.min.js"></script>
        <script>

            $(function(){
                console.log($('[type=password]').val());        

                //查找是否包含属性为class的元素
                $('[class]').css({
                    'color':'red'
                })

                // $('input[type!=password]').css({
                //     'color':'red'
                // })

                //查找name属性以a开头
                // $('input[name^=a]').css({
                //     'color':'red'
                // })    
                //查找name属性以a结束
                $('input[name$=name]').css({
                    'color':'red'
                })

                //查找name属性包含a
                // $('input[name*=a]').css({
                //     'color':'red'
                // })

            })

        </script>
    </head>
    <body>

        用户名: <input type="text"  name="username" /> <br/>
        昵称: <input type="text" name="nickname"/><br/>
        密码: <input type="password" name="password" value="123456" /><br/>
        地址:<input type="text" name="address"/><br/>
        <input type="text" name="gender"/><br/>

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

    </body>
</html>

效果截图:
在这里插入图片描述
看完如果对你有帮助,感谢点赞支持!
如果你是电脑端,看到右下角的 “一键三连” 了吗,没错点它[哈哈]

在这里插入图片描述
加油!

共同努力!

Keafmd

相关推荐
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页