三、jQuery的API （一）- 选择器模块

最新推荐文章于 2024-03-19 18:52:19 发布
最新推荐文章于 2024-03-19 18:52:19 发布
阅读量230 收藏
点赞数
分类专栏： WEB基础-jQuery 文章标签： jquery css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45602227/article/details/119980510
版权

一、$作为工具类

	
	$.each() 遍历数组或对象中的数据
	$.trim() 取出首位空格
	$.type() 得到数据的类型
	$.isArray() 判断是否为数组
	$.isFunction() 判断是否为函数
	$.parseJSON(str)  解析json字符串为json对象或json数组
		


<script>


    //1、$.each() 遍历对象或数组
    //遍历数组
    $.each([1,2,3,4],function(index,data){
        console.log("index:"+index+" ;data:"+data);
    })
    //遍历对象
    $.each({"name":"hh","age":12},function(key,value){
        console.log("key:"+key+" ;value:"+value);
    })

    //2、$.trim()取出首尾空格
    console.log($.trim("  xxxx xxx  "))

    //3、$.type(obj) 得到对象的数据类型
    console.log($.type(window));
    console.log($.type($))

    //4.$.isArray(obj) 判断是否为数组
    console.log($.isArray($))
    console.log($.isArray(new Array(2)))


    //5、$.isFunction 判断是否为函数
    console.log($.isFunction(Date))
    console.log($.isFunction($))

    //6、$.parseJSON(str) 将字符串转化为对象
    //json字符串 --> json对象
    var $obj=$.parseJSON('{"name":"12","age":12}')
    console.log($obj.name)
    //json字符串 --> json数组
    var $arr=$.parseJSON('[{"name":"12","age":12},122,3434]')
    console.log($arr[1])


</script>

在这里插入图片描述

>>>>>> 多TAB页案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <style>
        .box-wrapper{
            width:500px;
            height:300px;
            margin:200px auto;
            position: relative;
        }

        .tab-wrapper{
            list-style: none;
            float: left;
            z-index: 900;
            position: absolute;
            margin:0px;
            padding:0px;
            text-align: center;
            top:-50px;
        }

        .tab-wrapper li{
            display: inline-block;
            width:100px;
            height:50px;
            background-color: rgba(228,231,235,.8);
            line-height: 50px;;
        }

        .tab-wrapper li.btn-click{
            background-color: rgb(228,231,235);
        }

        .box{
            width:100%;
            height:100%;
            position: absolute;
        }

        .box:nth-of-type(1){
            background-color: red;
        }
        .box:nth-of-type(2){
            background-color: blue;
            display: none;
        }
        .box:nth-of-type(3){
            background-color: black;
            display: none;
        }


     

    </style>
    
    <script>
            $(function(){
                    $(".tab-wrapper li").click(function(){
                            
                            $(".tab-wrapper li").removeClass("btn-click");
                            $(this).addClass("btn-click");

                            //方式一:原生
                            // var index=$(".tab-wrapper li").index(this);
                            // $(".box").each(function(){
                            //         this.style.display="none";
                            // })
                            // $(".box")[index].style.display="inline-block";
                            
                            //方式二：jQuery的API
                            var index=$(this).index();
                            $(".box").css("display","none");
                            
                            $($(".box")[index]).css("display","block")
                    })
            })
    </script>
</head>

<body>  
    
    <div class="box-wrapper">
        <ul class="tab-wrapper">
            <li>tab1</li>
            <li>tab2</li>
            <li>tab3</li>
        </ul>
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

</body>


</html>

在这里插入图片描述

二、选择器模块

		
	$(selector)
			1) 选择器就是有特定语法规则的字符串 （css选择器的语法规则）

			2) 根据选择器规则查找所有匹配的DOM元素，并封装为jQuery伪数组对象。
			
			3) 它完全支持css的选择器语法。同时也在css选择器基础之上进行了拓展。
				 	
				 		所以jQuery不仅支持css选择器规则，
				 		也进行了一部分拓展。
			
				 	
	

	
	jQuery支持选择器
		 	1) jQuery完全支持css选择器规则。
					
					基础选择器、交集选择器、并集选择器、伪类选择器、
					关系选择器、属性选择器等。
	
			2) jQuery拓展了选择器规则
					a、过滤选择器		
								在css中的伪类选择器基础之上拓展了过滤选择器
								
					b、表单选择器

在这里插入图片描述

2.1 基础选择器、交集选择器、并集选择器（css选择器）

	<body>
	    
	    
	    <div id="b1"  class="box">测试一</div>
	    <div class="box">测试二</div>
	    <span class="box">测试三</span>
	    <span>测试四</span>
	
	</body>
	
	<script type="text/javascript"   src="js/jquery-1.12.4.js"></script>
	<script>
	
	   /** 1、选择所有DIV元素*/
	    $("div").css({"color":"red"});
	
	    /** 2、选择ID为b1的元素*/
	    $("#b1").css({"color":"blue"});
	
	    /** 3、选择class为box的元素*/
	    $(".box").css({"color":"yellow"});
	
	    /** 4、选择所有div和span*/
	    $("div,span").css({"color":"pink"});
	
	    /** 5、选择所有class属性为box的div*/
	    $("div.box").css({"color":"green"});
	</script>
2.2 关系选择器（css选择器）
<body>
    
   <ul>
       <li>AAAA</li>
       <li class="box">BBBB</li>
       <li title="box"><span>CCCC</span></li>
       <li title="box"><span>DDDD</span></li>
       <span>EEEE</span>
   </ul>

</body>

<script type="text/javascript"   src="js/jquery-1.12.4.js"></script>
<script>

   /** 1、后代选择器: 选择ul下所有span*/
    $("ul span").css({"color":"red"});

   /** 2、子类选择器: 选择ul下所有子类span*/
   $("ul > span").css({"color":"blue"});

    /** 3、兄弟选择器: 选择class为box的下一个li标签*/
    $(".box+li").css({"color":"yellow"});


    /** 4、兄弟选择器: 选择ul下class为box后面的所有兄弟元素*/
    $("ul .box~*").css({"color":"green"});

</script>
2.3 属性选择器（css选择器）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
</head>

<body>  
    <ul>
        <li class="abc">111</li>
        <li class="ab">222</li>
        <li title="a">333</li>
        <li>444</li>
        <li class="ab">555</li>
    </ul>

</body>

<script>

    //1、获取含有title属性的li标签
    $("li[title]").css("background-color","red");

    //2、class为ab的li标签
    $("li[class=ab]").css("background-color","blue");



</script>

</html>

在这里插入图片描述

2.4 伪类选择器（css选择器）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
</head>

<body>  
    <ul>
        <li class="abc">111</li>
        <li class="ab">222</li>
        <li title="a">333</li>
        <li>444</li>
        <li class="ab">555</li>
    </ul>

</body>

<script>

    $("li:first-of-type").css("background-color","red");

    $("li:last-of-type").css("background-color","blue");



</script>

</html>

在这里插入图片描述

>>>>>> 案例：表格的隔行变色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>

    table{
        width:600px;
        margin:20px auto;
        text-align: center;
        border-collapse:collapse            
    }

    td{
        padding:5px  10px;
    }

    table tr:first-of-type{
        background-color: blue;
        color:white;
    }

    /* table tr:nth-of-type(2n){
        background-color: rgba(19, 64, 146, 0.5);
    }

    table tr:hover{
        background-color: rgba(16, 73, 230, 0.5)
    }

    #dj{
        background-color: rgba(16, 73, 230, 0.5)
    } */

    
</style>

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>

<script>


        
    $(function(){

        $("table>tbody>tr:nth-of-type(2n)").css({"background-color":"red"})


     })



</script>


<body>

    <input type="text">

    <table border="1">
        <tr>
            <td>标签</td>
            <td>标签2</td>
            <td>标签3</td>
            <td>标签4</td>
            <td>标签5</td>
        </tr>

        <tr>
            <td>1</td>
            <td>11</td>
            <td>111</td>
            <td>1111</td>
            <td>1111</td>
        </tr>
        <tr>
            <td>1</td>
            <td>11</td>
            <td>111</td>
            <td>1111</td>
            <td>1111</td>
        </tr>
        <tr>
            <td>1</td>
            <td>11</td>
            <td>111</td>
            <td>1111</td>
            <td>1111</td>
        </tr>
        <tr>
            <td>1</td>
            <td>11</td>
            <td>111</td>
            <td>1111</td>
            <td>1111</td>
        </tr>
        <tr>
            <td>1</td>
            <td>11</td>
            <td>111</td>
            <td>1111</td>
            <td>1111</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

2.5 过滤选择器（jQuery拓展选择器）
	
	jQuery在css中的伪类选择器基础之上拓展了过滤器选择器。
	
	使用方式: 过滤选择器在原有选择器基础之上过滤。
	

					
	过滤器选择器(jQuery拓展选择器规则)：
			
			1) 基本
					:first 		 获取第一个元素
					:last 		 获取最后一个元素
					
					:even 		 查找索引值为奇数元素
					:odd 		 查找索引值为偶数元素
					
					:eq(index)   匹配索引值对应的元素
					:gt(index)   匹配所有大于索引值的元素
					:lt(index)   匹配所有小于索引值的元素

					:not(selector)	排除
			
			2) 内容
					:contains(text) 匹配包含给定文本的元素
					:empty 			匹配所有不包含子元素或者文本的空元素
					:has(selector)  匹配含有某个元素的元素

			3) 可见性
					:hidden 	 匹配所有不可见元素，或者type为hidden的元素
					:visible     匹配所有的可见元素
1）索引值查找

<body> 
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li></li>
        <li class="box">4444</li>
        <li class="box">4444eeee</li>
    </ul>
</body>
<script>

    $(function(){

        //1.获取第一个元素
        $("li:first").css("color","blue")
        //2.获取最后个元素
        $(".box:last").css("color","blue")

        //3、获取奇数元素
        $("li:even").css("background-color","yellow")
        //4、获取偶数元素
        $("li:odd").css("background-color","pink")

        //5、排除class不是box的li元素
        $("li:not(.box)").css("color","red")

    })
</script>
>>>>>> 获取第二个与第三个元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
</head>

<body>  
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>

</body>

<script>

        //1、选择第二个，第三个元素
        //注意：索引值从0开始
        $("li:eq(1),li:eq(2)").css({"color":"red"});


        //2、选择第二个，第三个元素
        //注意:多个过滤选择器是依次执行，不是同时执行的。
        // 	    即过滤索引值>0后，在此基础之上在过滤索引值<2。就相当于取第二个，第三个元素
        $("li:gt(0):lt(2)").css({"background-color":"pink"});


</script>

</html>

在这里插入图片描述

2）根据内容查找

<body> 
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li></li>
        <li class="box"><span>4444</span></li>
        <li class="box">4444eeee</li>
    </ul>
</body>
<script>

    $(function(){

        //1.获取内容含有eeee的li元素
        $("li:contains('eeee')").css("color","blue")
        
        //2.获取没有子元素的元素
        $(":empty").css("background-color","blue")

        //3.获取含有span子元素的li
        $("li:has(span)").css("color","red")

    })
</script>
3）可见性（控制元素的显示与隐藏）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
</head>

<script>

        var i=0;
        function dd(){

            if(i%2==0){
                console.log("隐藏");

                $("div:visible").css({"display":"none"});
                i+=1;
            }else{
                console.log("显示");

                $("div:hidden").css({"display":"block"});
                i+=1;
            }
        }

</script>
<body> 

    <button onclick="dd()">控制显示与隐藏</button>
    
    <div style="width:100px;height:100px;background-color: red;margin-top:20px;"></div>
</body>

</html>

在这里插入图片描述

2.6 表单选择器（jQuery拓展选择器）
	
	jQuery拓展了表单选择器
		
		1) 表单
				:input 
				:text 
				:password 
				:radio 
				:checkbox 
				:submit 
				:image 
				:reset 
				:button 
				:file 
				:hidden 
				
		2) 表单对象属性
				:enabled 
				:disabled 
				:checked 
				:selected 
		
		【表单类、表单对象类都可以直接选中元素，也可以结合使用】
1) 表单选择器分为两类，都可以直接使用选中元素，也可以结合使用

<body>

    用户名:<input type="text" readonly disabled><br/><br/>
    密码:<input type="password" ><br/><br/>
    性别:<input type="radio" name="sex" checked="true" >男 <input type="radio" name="sex" >女<br/><br/>
    爱好:<input type="checkbox" checked>篮球 &nbsp;<input type="checkbox" checked>乒乓球 &nbsp;<input type="checkbox">黑球<br/><br/>
    下选矿:<select>
                <option value="1" selected>上海</option>
                <option value="2">南京</option>
                <option value="3">背景</option>
                <option value="4">徐州</option>
           </select>
           <br/><br/>
        <input type="submit" value="提交">
    
</body>


<script>

    //选中单行文本，设置初始值
    $(":text").val("ttt")
    //选中password,设置初始值
    $(":password").val("11111")
    

    //读取被选中的个数
    console.log($(":checked").length)
    //读取被选中复选框的个数
    console.log($(":checkbox:checked").length)


</script>

在这里插入图片描述

2) 表单选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    
<body>

    用户名:<input type="text" readonly disabled><br/><br/>
    密码:<input type="password" ><br/><br/>
    性别:<input type="radio" name="sex" checkd="true" >男 <input type="radio" name="sex" >女<br/><br/>
    爱好:<input type="checkbox" checked>篮球 &nbsp;<input type="checkbox" checked>乒乓球 &nbsp;<input type="checkbox">黑球<br/><br/>
    下选矿:<select>
                <option value="1" selected>上海</option>
                <option value="2">南京</option>
                <option value="3">背景</option>
                <option value="4">徐州</option>
           </select>
           <br/><br/>
        <input type="submit" value="提交">
    
</body>


<script>


    $(":submit").click(function(){
            
            //1、给文本框赋值
            $(":text").val("123")

            //2、给密码框赋值
            $(":password").val("123123")

            //3、选择不可用的文本框
            $(":disabled").css("background-color","red");

            //4、选中select,设置默认选中南京
            $("select").val("2")


            //5、输出下拉框选中的内容
            console.log($("select>option:selected").html())

            //5、输出radio选中的个数
            console.log($(":radio:checked").length)

            //5、获取checkbox被选中的个数
            console.log($(":checkbox:checked").length)

    })

</script>
</html>

在这里插入图片描述

二旬、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery api中文网址
kms123456的专栏
05-21 468
http://www.w3school.com.cn/jquery/ajax_getjson.asp
jQuery常用的API
m0_67388537的博客
07-07 436
jQuery常用API
WWWWWWWWWWWWWWWW
热门推荐
asp知识
05-08 3万+
WEEEEEEEEEEEEEEEEEEEE
jQuery 常用API
最新发布
weixin_50643611的博客
03-19 1526
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值。（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值。三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
jQuery——常用API
@一只躺平的猪@的博客
08-01 881
JavaScript 库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。 ......
jquery-ui-1.8.2.custom.min.js,jquery-ui-1.8.4.custom.css
11-20
1.8.2是这个版本的发布编号，表示它是在2010年左右发布的，当时jQuery UI已经包含了大量的组件，如对话框（Dialog）、拖放（Draggable）、可排序（Sortable）、日期选择器（Datepicker）等。 接下来，`jquery-ui-...
JQuery API 1.6-8
10-29
- jQuery的选择器：这是jQuery的核心功能之一，它支持CSS1到CSS3的选择器，如`$("#id")`用于选取ID为"id"的元素，`$(".class")`用于选取所有类名为"class"的元素。 - DOM操作：jQuery提供了方便的方法来创建、修改...
jQuery商品价格选择器
11-11
本文将深入探讨如何利用jQuery实现一个商品价格选择器，以提升用户体验并优化购物过程。 首先，我们要理解jQuery选择器的核心概念。jQuery选择器是用于选取HTML元素的工具，它基于CSS选择器，同时添加了一些扩展，...
jdk api 1.8、jQuery3.1-api、jQuery3.3.1-api、jqueryapi2.2
06-25
这个版本可能包括对动画、选择器、事件处理等方面的详细说明，帮助开发者更好地利用jQuery的功能。 这些CHM文件（MicrosoftCompiled HTML Help）是离线文档格式，便于程序员在没有网络连接的情况下查阅。它们通常...
jquery-ui-1.12.1.custom.zip
06-03
jQuery UI 是一个基于 jQuery JavaScript 库的交互式用户界面组件集合，它提供了丰富的功能，包括拖放、日期选择器、对话框、滑块、排序等，大大简化了网页的交互设计。在本次分享的“jquery-ui-1.12.1.custom.zip”...
jqueryApi版本集合
01-09
jquery中文版集合jquery中文版集合jquery中文版集合jquery中文版集合jquery中文版集合
JQuery中文帮助文档
04-11
JQuery中文帮助文档！！！！！！！！！！！！！！！！！！！！！
jQuery1.12.4+jQuery中文手册.rar
05-17
本压缩包内包含以下文件： jquery-1.12.4.js jquery-1.12.4.min.js jQuery1.11.0_20140330.chm jQueryAPI_CHM.CHM
Linux系统中文本文件按列合并（转）
ipcas_oasis的博客
07-14 581
我想把文本文件file1 和文本文件 file2按照相应的行合并成一个文件 file3。如下所示： 原始文件 file1： aaaa bbbb cccc dddd eeee 原始文件 file2： 1111 2222 3333 4444 5555 合并后的文件 file3： aaaa 1111 bbbb 2222 cccc 3333 dddd 4444 eeee 5555 最开始我按照 V...
JQuery JavaScript常用API整理(前端入门必学)
Lifelong learning
07-07 3238
现在MVVM框架逐渐占据了主要市场，很多老项目也逐渐的从jQuery转向了MVVM架构！JQuery还有必要学吗？ 我的答案是jQuery必须学！ JavaScript是基础，JQuery能让DOM操作更方便，哪怕用vue react当操作dom的时候 还是离不开的，只是说可以不用学的那么深。下面就整理一下我之前工作中用到的一些API 以这个html为例 2、判断元素是否包含某个样式 3、判断元素是否是某个标签 4、jquery find end 5、Math函数 6、.click和.on的区别
IPV4及IPV6正则表达式详解
qq_36801966的博客
12-05 9281
IPV4及IPV6正则表达式详解一、 背景二、实际应用情况2.1 IPv42.1.1 IPv4说明2.1.2 IPv4地址解析2.1.3 IPv4正则表达式2.3 正则表达式特殊字符说明 一、 背景 多个市场要求无线4G网管全面支持IPv6，在开发过程中，遇到大量需要做IPv6校验的地方，本文通过正则表达式解决IP校验问题，来介绍正则表达式最基本的用法。 2012年6月6日，全球范围内的IPv6网...
jQuery在线API手册
一切从零开始
12-29 343
http://jquery.cuishifeng.cn/index.html
linux 常用 文本 命令
学习 探索 求生
08-21 435
grep grep 工具的工作方式是对文件的每一行搜索给定字符串的首次出现。如果找到了这个字符串，就打印该行的内容；否则就不对该行进行打印。下面这个文件我称之为 “memo”，阐述了 grep 的用法和结果。 To: All EmployeesFrom: Human ResourcesIn order to better serve the needs of our mass market ...
jQuery 二 属性操作， 数据缓存data() ，内容文本值，元素遍历、创建、添加和删除操作，尺寸、位置操作，
m0_55170432的博客
03-23 325
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。 1. 获取属性语法 2. 设置属性语法 element.prop("属性名") 1.获取元素固有的属性值 console.log($("a").prop("href")); element.prop("属性名",
JQuery API详解与EasyLoader使用指南
此外，JQuery与其他库的兼容性、插件系统、选择器语法、链式调用等也是JQuery API的重要组成部分。学习并熟练掌握JQuery API能极大地提高前端开发效率，简化代码，同时确保项目具有良好的可维护性和扩展性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值