专栏首页技术小屋-未分类JavaWeb——JQuery之五种选择器的应用及实践案例总结(基本选择器、层级选择器、属性选择器、过滤选择器、表单过滤选择器)

JavaWeb——JQuery之五种选择器的应用及实践案例总结(基本选择器、层级选择器、属性选择器、过滤选择器、表单过滤选择器)


选择器,就是用来筛选具有相似特征的元素(标签)。

1 JQuery基本语法入门

1)事件绑定:$("#元素id").click(function () {});

2)入口函数:(function () {});       注意:window.onload 和(function () 的区别, 前者只能定义一次,定义多次,后面的会将前面的覆盖,后者可以定义多次

3)样式控制:(function () { ("#元素id").css("backgroundColor","green"); });

【举例】:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>
        //JQuery的入口函数(dom文档加载完成后执行该函数中的代码)
        $(function () {
            //1、获取b1按钮
            $("#b1").click(function () {
                alert("点我了");
            })
        });

        //CSS样式
        $(function () {
            // $("#div1").css("background-color","red");
            $("#div1").css("backgroundColor","green");
        });

    </script>

</head>
<body>
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>
    <input type="button" id="b1" value="点我">

</body>
</html>

2 JQuery选择器分类

2.1 基本选择器

基本选择器包括三类:

  • 1)标签选择器:$("html标签名"),获得所有匹配标签名称的元素;
  • 2)id选择器:$("#id的属性值"),获得与指定id属性值匹配的元素;
  • 3)类选择器:$(".class的属性值"),获得与指定的class属性值匹配的元素;
  • 4)并集选择器:$("选择器1,选择器2"),获取多个选择器选中的所有元素。

【练习案例】:根据不同按键,控制选择器选中的元素背景色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <script src="../js/jquery-3.3.1.min.js"></script>

    <style type="text/css">
        div,span{
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float:left;
            font-size: 17px;
            font-family:Roman;
        }

        div .mini{
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family:Roman;
        }

        div .mini01{
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family:Roman;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            $("#b1").click(function () {
                $("#one").css("backgroundColor","pink");
            });

            $("#b2").click(function () {
                $("div").css("backgroundColor","pink");
            });

            $("#b3").click(function () {
                $(".mini").css("backgroundColor","pink");
            });

            $("#b4").click(function () {
                $("span,#two").css("backgroundColor","pink");
            });
        });

    </script>
</head>

<body>
    <input type="button" value="保存"  class="mini" name="ok"/>
    <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
    <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
    <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
    <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>

    <div id="one">
        id为one
    </div>

    <div id="two" class="mini" >
        id为two   class是 mini
        <div  class="mini" >class是 mini</div>
    </div>

    <div class="one" >
        class是 one
        <div  class="mini" >class是 mini</div>
        <div  class="mini" >class是 mini</div>
    </div>
    <div class="one" >
        class是 one
        <div  class="mini01" >class是 mini01</div>
        <div  class="mini" >class是 mini</div>
    </div>


    <span class="spanone">class为spanone的span元素</span>
    <span class="mini">class为mini的span元素</span>


    <input type="text" value="zhang" id="username" name="username">
</body>

</html>

2.2 层级选择器

层级选择器包括两类:

  • 1)后代选择器:$("A B "),选择A元素内部的所有B元素;
  • 2)子选择器:$("A>B"),选择A元素内部的所有B子元素;

【练习案例】:在2.1程序基础上,添加两个button;

            $("#b5").click(function () {
                $("body div").css("backgroundColor","pink");
            });
            $("#b6").click(function () {
                $("body > div").css("backgroundColor","pink");
            });

2.3 属性选择器

属性选择器包括三类:

  • 1)属性名称选择器:$("A[属性名]"),包含指定属性的选择器
  • 2)属性选择器:$("A[属性名= ‘值’]"),包含指定属性等于指定值的选择器
  • 3)复合属性选择器:$("A[属性名= ‘值’][]..."),包含多个属性条件的选择器

【练习案例】:主要看<script>标签中的内容,注意各种条件的写法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script  src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        div,span{
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float:left;
            font-size: 17px;
            font-family:Roman;
        }

        div .mini{
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family:Roman;
        }

        div .mini01{
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family:Roman;
        }


        div.visible{
            display:none;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            // <input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
            $("#b1").click(function () {
                $("div[title]").css("backgroundColor","pink");
            });
            // <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
            $("#b2").click(function () {
                $("div[title='test']").css("backgroundColor","pink");
            });
            // <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
            $("#b3").click(function () {
                $("div[title!='test']").css("backgroundColor","pink");
            });
            // <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
            $("#b4").click(function () {
                $("div[title^='te']").css("backgroundColor","pink");
            });
            // <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
            $("#b5").click(function () {
                $("div[title$='est']").css("backgroundColor","pink");
            });
            // <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
            $("#b6").click(function () {
                $("div[title*='es']").css("backgroundColor","pink");
            });
            // <input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
            $("#b7").click(function () {
                $("div[id][title*='es']").css("backgroundColor","pink");
            });

        });
    </script>

</head>

<body>

    <input type="button" value="保存"  class="mini" name="ok"/>
    <input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
    <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
    <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
    <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
    <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
    <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
    <input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
    <div id="one">
        id为one   div
    </div>

    <div id="two" class="mini"  title="test">
        id为two   class是 mini  div  title="test"
        <div  class="mini" >class是 mini</div>
    </div>

    <div class="visible" >
        class是 one
        <div  class="mini" >class是 mini</div>
        <div  class="mini" >class是 mini</div>
    </div>
    <div class="one" title="test02">
        class是 one    title="test02"
        <div  class="mini01" >class是 mini01</div>
        <div  class="mini" style="margin-top:0px;">class是 mini</div>
    </div>

    <div class="visible" >
        这是隐藏的
    </div>

    <div class="one">

    </div>

    <div id="mover" >
        动画
    </div>

    <input type="text" value="zhang" id="username" name="username">
</body>
</html>

2.4 过滤选择器

过滤选择器包含9类:

  • 1)首元素选择器:  :first ,获得选择的元素中的第一个元素
  • 2)尾元素选择器:  :last ,获得选择的元素中的最后一个元素
  • 3)非元素选择器:  :not(selector) ,不包括指定内容的元素
  • 4)偶数选择器:     :even 偶数,从 0 开始计数
  • 5)奇数选择器 :    :odd 奇数,从 0 开始计数
  • 6)等于索引选择器 :eq(index) 指定索引元素
  • 7)大于索引选择器 :gt(index) 大于指定索引元素
  • 8)小于索引选择器 :lt(index) 小于指定索引元素
  • 9)标题选择器        :header 获得标题(h1~h6)元素,固定写法

【练习案例】:主要看<script>标签中的内容,注意各种条件的写法

2.5 表单过滤选择器

表单过滤选择器包括4类:

1)可用元素选择器::enabled,获得可用元素;

2)不可用元素选择器::disabled,获得不可用元素;

3)选中选择器::checked,获得单选/复选框选中的元素;

4)选中选择器::selected获得下拉框选中的元素;

【练习案例】:主要看<script>标签中的内容,注意各种条件的写法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>表单属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="../js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			#job{
				margin: 20px;
			}
			#edu{
				margin-top:-70px;
			}
			
	 </style>
    <script type="text/javascript">
	
		$(function () {
			// 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值
			$("#b1").click(function () {
				$("input[type='text']:enabled").val("aaa");
            });
			// 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值
            $("#b2").click(function () {
                $("input[type='text']:disabled").val("aaa");
            });
			//利用 jQuery 对象的 length 属性获取复选框选中的个数
            $("#b3").click(function () {
                alert($("input[type='checkbox']:checked").length);
            });
			//利用 jQuery 对象的 length 属性获取下拉框选中的个数
            $("#b4").click(function () {
                alert($("#job > option:selected").length);
            });

        });

	</script>
	</head>

	<body>
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
		 <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
		 <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/>
		 <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
 
 		<br><br>
 		
         <input type="text" value="不可用值1" disabled="disabled"> 
		 <input type="text" value="可用值1" >
		 <input type="text" value="不可用值2" disabled="disabled">
		 <input type="text" value="可用值2" >
		 
		 <br><br>
		 <input type="checkbox" name="items" value="美容" >美容
		 <input type="checkbox" name="items" value="IT" >IT
		 <input type="checkbox" name="items" value="金融" >金融
		 <input type="checkbox" name="items" value="管理" >管理
		 
		 <br><br>
		 
		  <input type="radio" name="sex" value="男" >男
		  <input type="radio" name="sex" value="女" >女
		  
         <br><br>
		 
		  <select name="job" id="job" multiple="multiple" size=4>
          	<option>程序员</option>
			<option>中级程序员</option>
			<option>高级程序员</option>
			<option>系统分析师</option>
          </select>
		    
          <select name="edu" id="edu">
          	<option>本科</option>
			<option>博士</option>
			<option>硕士</option>
			<option>大专</option>
          </select>
	  	<br/>
	  		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini  div
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
	</body>
</html>

———————————————————————————————————————

本文为博主原创文章,转载请注明出处!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaWeb——一文快速入门BootStrap(栅格系统、全局CSS样式、组件、插件、基于BootStrap的官网案例实战)

    BootStrap是一个前端开发的框架,Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CS...

    Winter_world
  • JavaWeb——JQuery之DOM操作应用及实践案例总结(DOM内容操作、DOM属性操作、CRUD操作)

    【注意】:prop和attr的区别,如果操作的是元素的固有属性(非自定义的),建议使用prop;若是自定义属性,建议用attr。

    Winter_world
  • JavaWeb——JQuery之基本概述与快速入门实践总结(JQuery各版本区别、JQuery对象和JS对象的区别与转换)

    JQuery实际是JavaScript的一个框架,可以用来简化JS的开发。截取下百度百科给出的概念:

    Winter_world
  • HTML编码规范建议

    解释: 对于非 HTML 标签之间的缩进,比如 script 或 style 标签内容缩进,与 script 或 style 标签的缩进同级。 示例:

    Clearlove
  • tf.estimator

    于小勇
  • Jmockdata随机模拟 Java 数据插件

         Jmockdta是一款实现模拟JAVA类型或对象的实例化并随机初始化对象的数据的工具框架。

    wuweixiang
  • Java .class文件是什么?

    java class 文件是对Java程序二进制文件格式的精确定义。每一个Java class文件都对一个Java类或者Java接口做出了全面描述。一个cla...

    MickyInvQ
  • Objective-C的hook方案/ Method Swizzling

    Method Swizzling是改变一个selector的实际实现的技术。通过这一技术,我们可以在运行时通过修改类的分发表中selector对应的函数,来修改...

    freesan44
  • JQuery选择器(上)

    HTML5学堂:jQuery的选择器可以让我们很方便的操作获取元素,那么本文介绍的是jQuery选择器的几种选择器,希望对大家有帮助!谢谢! 1.基本选择器(3...

    HTML5学堂
  • python3中多重继承的问题

    本来以为多重继承很简单,但是多看了一些资料后发现还是挺复杂的。 如果继承情况简单就还比较好理解,但是如果继承的情况太过于复杂的话,python3 ...

    py3study

扫码关注云+社区

领取腾讯云代金券