精华内容
下载资源
问答
  • JQuery选择器

    千次阅读 2014-08-22 16:35:30
    JQuery选择器顾名思义就是通过选择器选中相应的DOM元素执行需要的操作,JQuery选择器的强大之处还在于它支持连缀,也就是说一条语句可以连续使用多个选择器执行多次操作,这样保证了代码的简洁性,更提高了代码的...

    JQuery选择器顾名思义就是通过选择器选中相应的DOM元素执行需要的操作,JQuery选择器的强大之处还在于它支持连缀,也就是说一条语句可以连续使用多个选择器执行多次操作,这样保证了代码的简洁性,更提高了代码的使用效率。

    1. 使用ID选中DOM元素

    代码1

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#div1").addClass("class1");  // 使用ID选中DOM元素
            });
        </script>
        <style type="text/css">
            .class1
            {
                color:red;
            }
        </style>
    </head>
    <body>
        <div id="div1">Welcome to JQuery!</div>
    </body>
    </html>
    2. 使用类选择多个DOM元素

    代码2

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(function () {
                $(".div_changecolor").addClass("class1"); // 使用类选择多个DOM元素
            });
        </script>
        <style type="text/css">
            .class1
            {
                color:red;
            }
        </style>
    </head>
    <body>
        <div id="div1" class="div_changecolor">Welcome to JQuery!</div>
        <div id="div2" class="div_changecolor">Welcome to JQuery!</div>
        <div id="div3" >Welcome to JQuery!</div>
    </body>
    </html>

    显示结果如下图,只有含有class的div才会显示红色

    3. 根据DOM元素类型选择元素

    只需修改代码2中的部分代码为下面的代码即可

    $("div").addClass("class1");

    显示结果如下图,全部div元素的内容都显示红色


    4. 根据层级选择元素

    在div元素中包含有超链接a元素,默认的超链接元素是有下划线的,如下图

    现在希望通过选择器定位到a元素然后将其下划线显示去掉

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#div3 a").addClass("class2");  // 选择的是DOM元素ID为div3下面的所有a标签
            });
        </script>
        <style type="text/css">
            .class1
            {
                color:red;
            }
    
            .class2
            {
                text-decoration:none;
            }
        </style>
    </head>
    <body>
        <div id="div1" class="div_changecolor">Welcome to JQuery!</div>
        <div id="div2" class="div_changecolor">Welcome to JQuery!</div>
        <div id="div3" ><a href="#">Welcome to JQuery!</a></div>
    </body>
    </html>
    经过这样处理后显示结果如下:

    5. 根据位置选择DOM元素

    经常会看到一些报表显示记录的时候奇偶行的底色是相间的,这样看起来让人很舒服,通过选择器就可以做到

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(function () {
                $("tr:odd").css("background-color","#bbffff");
                $("td").addClass("class1");
            });
        </script>
        <style type="text/css">
            .class1
            {
                width:100px;text-align:center
            }
        </style>
     </head>
    <body>
        <table border="1">
            <tr><td>大众</td><td>德国</td></tr>
            <tr><td>别克</td><td>美国</td></tr>
            <tr><td>红旗</td><td>中国</td></tr>
            <tr><td>现代</td><td>韩国</td></tr>
        </table>
    </body>
    </html>
    显示效果:



    展开全文
  • jquery选择器

    千次阅读 2017-08-21 17:07:51
    在js当中选择器有很多,一般的写法为。document.get...用的是文档document的对象来写...下面简单说一下这个jquery选择器jquery的通用写法:$(“element”).action $是jquery的声明,element是选择的元素 action是事件

    在js当中选择器有很多,一般的写法为。document.get...用的是文档document的对象来写,非常长,而且有的时候选择并不是那么好用,并不能直接到自己想要的还要写更多的逻辑代码。那么jquery极大的简化了这个工作。下面简单说一下这个jquery的选择器

    jquery的通用写法:$(“element”).action
    $是jquery的声明,element是选择的元素 action是事件

    1. id选择器
    $("#id").click(function(){
        alert("id选择器");
    });
    1. 类选择器
    $(".class").click(function(){
        alert("类选择器");
    });
    1. 元素选择器
      $(“div”).click(function(){
      alert(“元素选择器”);
      });
    2. 同时选择多个
      $(“#id,.class”).click(function(){
      alert(“多选,元素之间用‘,’隔开”);
      });
    3. 层次选择器
      ①.后代选择器
    $("div p").click(function(){
        alert("选中所有div下面的所有p元素");
    });
       ②.子元素选择器
    
    $("div > p").click(function(){
        alert("选中所有div下面的儿子p元素");
    });
     ③.下一个兄弟元素
    
    $("div + p").click(function(){
        alert("选中所有div的下一个兄弟p");
    });
     ④.下边所有兄弟元素
    
    $("div ~ p").click(function(){
        alert("选中所有div下所有的兄弟p元素");
    });
    1. 过滤选择器
      ①选中第一个(一般用于列表):
    $("ul li:first").css({"color":"red"});
    //选中所有ul的中拍在第一个的li

    ②选中第一个孩子

    $("ul li:first-child").css({"background":"green"});
    //选中每一个ul里面的第一个li

    ③选中下标为奇数的内容

    $("li:even").hide();

    ④选中下标为偶数的内容

     $("li:odd").hide();
    展开全文
  • 知识点:了解jQuery选择器的基本概念及优势、能够使用不同的jQuery选择器选取元素,比如基本选择器、层次选择器、属性选择器、基本过滤选择器、可见性过滤选择器的使用,了解使用jQuery选择器的注意事项。...

    知识点:了解jQuery选择器的基本概念及优势、能够使用不同的jQuery选择器选取元素,比如基本选择器、层次选择器、属性选择器、基本过滤选择器、可见性过滤选择器的使用,了解使用jQuery选择器的注意事项。

     

           页面的任何操作都需要节点的支撑,开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专注业务逻辑的编写。

    1、  jQuery选择器简介

            jQuery 选择器允许您对 HTML 元素组 或 单个元素 进行操作。选择器是 jQuery 的根基,在 jQuery 中,对事件处理、遍历 DOM 和 Ajax 操作都依赖于选择器。熟练地使用选择器,不但能简化代码,而且能够事半功倍。jQuery 选择器可通过CSS 选择器、条件过滤两种方式获取元素。可以通过 CSS 选择器语法规则获取元素的 jQuery 选择器包括基本选择器、层次选择器和属性选择器;可以通过条件过滤选取元素的 jQuery选择器包括基本过滤选择器和可见性过滤选择器。

     

    1.1     jQuery 选择器是什么

           说到选择器,会让人自然地联想到 CSS(Cascading Style Sheets,层叠样式表),在 CSS中,选择器的作用是获取元素,而后为其添加 CSS 样式,美化其外观;而 jQuery 选择器,不仅良好地继承了 CSS 选择器的语法,还继承了其获取页面元素便捷高效的特点,jQuery选择器与 CSS 选择器的不同之处就在于,jQuery 选择器获取元素后,为该元素添加的是行为,使页面交互变得更加丰富多彩。jQuery 中所有选择器都以美元符号开头:$()。

            此外,jQuery 选择器拥有着良好的浏览器兼容性,不用像使用 CSS 选择器那样需要考虑各个浏览器对它的支持情况。学会使用选择器是学习 jQuery 的基础,jQuery 的操作都建立在所获取的元素之上,否则无法输出想要的效果。

     

    1.1     jQuery 选择器的优势

           jQuery 选择器的优势主要体现在以下三个方面:

    1. 简洁的写法

            $()函数在很多 JavaScript 库中都被当作一个选择器函数来使用,在 jQuery 中也不例外。其中,$("#id")用来代替 JavaScript 中的 document.getElementById()函数,即通过ID 获取元素;$("tagName")用来代替 document.getElementsByTagName()函数,即通过标签名来获取 HTML 元素;其他选择器的写法将在后续小节中讲解。

    2. 支持 CSS1.0 CSS3.0 选择器

           jQuery 选择器支持 CSS1.0、CSS2.0 和 CSS3.0 的大多数选择器。同时,它也有少量自定义的选择器。因此对拥有一定 CSS 基础的开发人员来说,学习 jQuery 选择器是一件非常容易的事。使用 CSS 选择器时,开发人员需要考虑主流浏览器是否支持某些选择器。而在 jQuery中,开发人员则可以放心地使用 jQuery 选择器而无须考虑浏览器是否支持这些选择器。

    3. 完善的处理机制

          使用 jQuery 选择器不仅比使用传统的 getElementById()和 getElementsByTagName()函数简洁得多,还能避免某些错误。

     

    2、  使用CSS选择器选取元素

           jQuery 支持大多数 CSS 选择器,其中最常用的有 CSS 中的基本选择器、层次选择器和属性选择器,在 jQuery 中,与它们对应的分别是 jQuery 基本选择器、层次选择器和属性选择器,它们的构成规则与 CSS 选择器完全相同。下面就分别讲解这 3 种选择器的用法。

    2.1   基本选择器

            jQuery 基本选择器与 CSS 基本选择器相同,它继承了 CSS 选择器的语法和功能,主要由元素标签名、class、id 和多个选择器组成,通过基本选择器可以实现大多数页面元素的查找。基本选择器主要包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器。这一类选择器也是 jQuery 中使用频率最高的。

    2.1.1  示例代码

             为了更加直观地展示 jQuery 基本选择器选取的元素及范围,首先使用 HTML+CSS 代码实现如图所示的页面。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			ul { width: 400px;}
    			li { list-style: none; margin-top: 10px; padding: 10px;}
    		</style>
    	</head>
    	<body>
    		<h2>jQuery选择器的使用</h2> 
    		<ul id="test01">
    			<li>这是test01的第0个li标签</li>
    			<li>这是test01的第1个li标签</li>
    			<li class="part1">这是<span>test01</span>的第2个li标签</li>
    			<li>这是test01的第3个li标签</li>
    			<li>这是test01的第4个li标签</li>
    		</ul>
    		<hr />
    		<ul id="test02">
    			<li>这是test02的第0个li标签</li>
    			<li>这是test02的第1个li标签</li>
    			<li>这是test02的第2个li标签</li>
    			<li class="part1">这是<b><span>test02</span></b>的第3个li标签</li>
    		</ul>
    		<p class="part1">这是一段文字,<span>这是一段文字1</span>,这是一段文字,这是一段文字,这是一段文字</p>
    	</body>
    </html>

    2.1.2  基本标签选择器的详细说明

           名称

                   语法构成

                     描述

                         示例

    标签选择器

    element

    根据给定的标签名匹配元素

    $("h2" )选取所有h2元素

    类选择器

    .class

    根据给定的class匹配元素

    $(" .title")选取所有class为title的元素

    ID选择器

    #id

    根据给定的id匹配元素

    $(" #title")选取id为title的元素

    并集选择器

    selector1,selector2,...,selectorN

    两个选择器之间用英文逗号,隔开

    $("div,p,.title" )选取所有div、p和拥有class为title的元素

    交集选择器

    element.class或element#id

    第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器,两个选择器之间不能有空格,必须连续书写

    $("h2.title")选取所有拥有class为title的h2元素

    全局选择器

    *

    匹配所有元素

    $("*" )选取所有元素

    在示例html代码里,依次添加以下代码(每次添加一个选择器),查看效果:

    		<script src="js/jquery-3.4.1.min.js"></script>
    		<script>
    			$(document).ready(function(){
    				$("h2").css("background-color","aqua");//标签选择器
    				$("#test01").css("border","1px solid green");//id选择器
    				$(".part1").css("border","1px dashed blue");//类选择器
    				$("#test01,.part1").css("border","2px solid red");//并集选择器,使用“,”区分开
    				$("li.part1").css("border","2px dashed green");//交集选择器,第一必须是标记选择器,第二个必须是类别选择器或者ID选择器,两个选择器之间不能有空格,必须连续书写
    				$("*").css("border","yellow 1px solid");//全局选择器
    				
    			});
    		</script><!--注意:jQuery选择器不存在优先级-->

     

    2.2  层次选择器的使用

            jQuery 中的层次选择器与 CSS 中的层次选择器相同, 它们都是根据获取元素与其父元素、子元素、兄弟元素等的关系而构成的选择器。jQuery中有 4 种层次选择器,它们分别是后代选择器、子选择器、相邻元素选择器和同辈元素选择器,其中最常用的是后代选择器和子选择器,它们和 CSS 中的后代选择器与子选择器的语法及选取范围均相同。

    名称

         语法构成

                    描述

                       示例

    后代选择器

    parent descendant

     选择器选取指定元素的后代的所有元素。

    元素的后代可以是元素的第一代、第二代、第三代等等。

    两个选择器之间用空格隔开

    $("#menu span" )选取#menu下的<span>元素

    子选择器

    parent>child

    选取parent元素下的child(子)元素

    $(" #menu>span" )选取#menu的子元素<span>

    相邻元素选择器

    prev+next

    选取紧邻prev元素之后的next元素

    $(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>

    同辈元素选择器

    prev~sibings

    选取prev元素之后的所有siblings元素

    $(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>

    在示例html代码里,依次添加以下代码(每次添加一个选择器),查看效果:

    		<script>
    			$(document).ready(function(){
    				$(".part1 span").css("border","#000000 1px dashed");//后代选择器
    				$(".part1>span").css("border","#000000 1px dashed");//子代选择器
    				$("h2+ul").css("border","#000000 1px dashed");//相邻元素选择器(要是同一个父元素的同辈)
    				$("h2~ul").css("border","#000000 1px dashed");//同辈元素选择器(要是同一个父元素的同辈)			
    			})
    		</script><!--注意:jQuery选择器不存在优先级-->

     

    2.3   属性选择器的使用

            属性选择器就是通过 HTML 元素的属性选择元素的选择器,它与 CSS 中的属性选择器语法构成完全一致,如<p>元素中的 title 属性,<a>元素中的target 属性,<img>元素中的 alt 属性等。属性选择器是 CSS 选择器中非常有用的选择器,从语法构成来看,它遵循 CSS 选择器;从类型来看,它属于 jQuery 中按条件过滤获取元素的选择器之一。

          名称

    语法构成

                        描述

                           示例

    属性选择器

     

    [attribute]

    选取包含给定属性的元素

    $(" [href]" )选取含有href属性的元素

    [attribute=value]

    选取等于给定属性是某个特定值的元素

    $(" [href ='#']" )选取href属性值为“#”的元素

    [attribute !=value]

    选取不等于给定属性是某个特定值的元素

    $(" [href !='#']" )选取href属性值不为“#”的元素

    [attribute^=value]

    选取给定属性是以某些特定值开始的元素

    $(" [href^='en']" )选取href属性值以en开头的元素

    [attribute$=value]

    选取给定属性是以某些特定值结尾的元素

    $(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素

    [attribute*=value]

    选取给定属性是以包含某些值的元素

    $(" [href* ='txt']" )选取href属性值中含有txt的元素

    [selector] [selector2] [selectorN]

    选取满足多个条件的复合属性的元素

    $("li[id][title=新闻要点]" )选取含有id属性和title属性为新闻要点的<li>元素

    2.3.1  示例代码

             为了更加直观地展示 jQuery 属性选择器选取的元素及范围,首先使用 HTML+CSS 代码实现如图所示的页面。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>属性选择器的使用</title>
    	</head>
    	<body>
    		<div id="box1">
    			<h2 id="bt">武汉军运会比赛项目:</h2>
    			<ul>
    				<li class="oushu" title="乒乓球">乒乓球</li>
    				<li class="jishu">羽毛球</li>
    				<li class="oushu" title="海军五项">海军五项</li>
    				<li class="jishu">马术</li>
    				<li class="oushu">帆船</li>
    				<li class="jishu">射击</li>
    			</ul>
    			<a href="http://www.baidu.com" target="_blank">点击我,打开百度首页</a>
    		</div>
    		<hr>
    		<p class="oushu" title="提示文字">这是一段文字</p>
    		<div id="box2">
    			<img src="img/case_1.gif" title="游戏" alt="游戏图片" />
    		</div>
    	</body>
    </html>
    

    在示例html代码里,依次添加以下代码(每次添加一个选择器),查看效果: 

    		<script>
    			$(document).ready(function(){
    				$("[class]").css("border","1px dashed red");//选取包含class属性的元素,并设置样式
    				$("[class='oushu']").css("border","1px dashed blue");//选取class属性,且值是oushu的元素,并设置样式
    				$("[class!='oushu']").css("border","1px dashed blue");//选取class属性,且值不是oushu的元素,并设置样式
    				$("[id^='b']").css("border","1px dashed blue");//选取id属性,且值以b开头的元素,并设置样式
    				$("[class$='ushu']").css("border","1px dashed blue");//选取id属性,且值以ushu结尾的元素,并设置样式
    				$("[id*='o']").css("border","1px dashed blue");//选取id属性,且值包含o的元素,并设置样式
    				$("li[class][title='海军五项']").css("border","1px dashed blue");//选取含有li元素,class属性,且title属性值为海军五项的元素,并设置样式
    			})
    		</script>

    注意:如果基于 jQuery,则使用 ID 选择器获取元素的效率是最高的,因为 ID 具有唯一性。

     

    3、  使用条件过滤选取元素

             过滤选择器主要通过特定的过滤规则来筛选出所需的 DOM 元素,过滤规则与 CSS 中的伪类语法相同,即选择器都以一个冒号(:)开头,冒号前是进行过滤的元素,例如,a:hover 表示当鼠标指针移过<a>元素时,tr:visited 表示当鼠标指针访问过<tr>元素后等。

             按照不同的过滤条件,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。其中,最常用的过滤选择器是基本过滤选择器、可见性过滤器、属性选择器和表单对象属性过滤器。在这里,我们仅讲解基本过滤选择器和可见性过滤选择器。

    3.1   基本过滤选择器

           基本过滤选择器是过滤选择器中使用最为广泛的一种, jQuery 的基本过滤选择器是通过元素所处的位置来获取元素的

    名称

    语法构成

    描述

    示例

    基本过滤选择器

     

    :first

    选取第一个元素

    $(" li:first" )选取所有<li>元素中的第一个<li>元素

    :last

    选取最后一个元素

    $(" li:last" )选取所有<li>元素中的最后一个<li>元素

    :even

    选取索引是偶数的所有元素(index从0开始)

    $(" li:even" )选取索引是偶数的所有<li>元素

    :odd

    选取索引是奇数的所有元素(index从0开始)

    $(" li:odd" )选取索引是奇数的所有<li>元素

    :eq(index)

    选取索引等于index的元素(index从0开始)

    $("li:eq(1)" )选取索引等于1的<li>元素

    :gt(index)

    选取索引大于index的元素(index从0开始)

    $(" li:gt(1)" )选取索引大于1的<li>元素(注:大于1,不包括1)

    :lt(index)

    选取索引小于index的元素(index从0开始)

    $(“li:lt(1)” )选取索引小于1的<li>元素(注:小于1,不包括1)

     

    :not(selector)

    选取去除所有与给定选择器匹配的元素

    $(" li:not(.three)" )选取class不是three的元素

    :header

    选取所有标题元素,如h1~h6

    $(":header" )选取网页中所有标题元素

    :focus

    选取当前获取焦点的元素

    $(":focus" )选取当前获取焦点的元素

    3.1.1  示例代码

             为了更加直观地展示 jQuery 属性选择器选取的元素及范围,首先使用 HTML+CSS 代码实现如图所示的页面。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>属性选择器的使用</title>
    	</head>
    	<body>		
    		<div id="box1">
    			<h2 id="bt">武汉军运会比赛项目:</h2>
    			<ul>
    				<li class="one">乒乓球</li>
    				<li class="two">羽毛球</li>
    				<li class="one">海军五项</li>
    				<li>马术</li>
    				<li>帆船</li>
    				<li>射击</li>
    			</ul>
    		</div>
    		<form method="post" action="">
    			用户名:<input type="text"  name="username"/><br /><br />
    			密&nbsp;&nbsp;&nbsp;码:<input type="text"  name="pwd"/>
    		</form>
    	</body>
    </html>

    在示例html代码里,依次添加以下代码(每次添加一个选择器),查看效果: 

    		<script>
    			$(document).ready(function(){
    				$(":first").css("border","1px dashed blue");//选取第一个元素,当冒号前面没有元素时,会选取整个html中的第一个元素,也就是body元素。
    				$("li:first").css("border","1px dashed blue");//选取所有li元素中的,第一个li元素
    				$("li:last").css("border","1px dashed blue");//选取所有li元素中的,最后一个li元素
    				$("li:not(.one)").css("border","1px dashed blue");//选取所有li元素中的,选择器不是.one的元素
    				$("li:even").css("background-color","aquamarine");//选取所有li元素中的,索引是偶数的元素,索引从0开始
    				$("li:odd").css("background-color","bisque");//选取所有li元素中的,索引是奇数的元素,索引从0开始
    				$("li:eq(3)").css("border","1px dashed red");//选取所有li元素中的,索引值是3的元素,索引从0开始
    				$("li:gt(2)").css("border","1px dashed red");//选取所有li元素中的,索引值大于2的元素,索引从0开始
    				$("li:lt(2)").css("border","1px dashed green");//选取所有li元素中的,索引值小于2的元素,索引从0开始
    				$(":header").css("border","1px dashed red");//选取所有标题元素
    				$("input:focus").css("background-color","blueviolet");//选取当前获取焦点的元素		
    			})
    		</script>

    注意:上述代码中$("input:focus").css("background-color","blueviolet");测试时没有效果,因为页面在加载完毕之后就执行了该代码。可以给input标签里添加一个属性autofocus,即可查看效果,如:<input type="text"  name="username" autofocus/>。

    • autofocus 属性是一个布尔属性。
    • autofocus 属性是 HTML5 中的新属性。
    • autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点。

     

    使用jQuery实现点击文本框后,背景颜色发生变化

    			//点击input后,背景颜色变化
    			$(function(){
    				$("input").focus(function(){
    					$(this).css("background-color","aquamarine");
    				})
    			})

     

    3.1.2  案例练习:使用jQuery实现点击文本框等时背景颜色变化,离开后背景颜色发生变化

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="js/jquery-3.4.1.min.js"></script>
    		<script>
    			$(document).ready(function(){
    				$("input").focus(function(){
    					$(this).css("background-color","palevioletred");//获得焦点时,设置一个颜色
                        //$(this)是在方法focus内,此处的$(this)表示的是当前调用focus方法的对象$("input")
    				})
    				$("input").blur(function(){
    					$(this).css("background-color","antiquewhite");//失去焦点时,设置另外一个颜色
    				})
    			})
    		
    		</script>
    	</head>
    	<body>
    		<form method="post" action="">
    			用户名:<input type="text"  name="username" /><br /><br />
    			密&nbsp;&nbsp;&nbsp;码:<input type="text"  name="pwd"/>
    		</form>
    	</body>
    </html>

    说明:这里提前用到了jQuery的两个事件

    • focus():当元素获得焦点时,发生 focus 事件。
    • blur():当元素失去焦点时发生 blur 事件。

     

    3.2   可见性过滤选择器

           jQuery 选择器除了可以通过 CSS 选择器、位置选取元素外,还能够通过元素的显示状态,即元素显示或者隐藏来选取元素。在 jQuery 中,通过元素显示状态选取元素的选择器称为可见性过滤选择器。

    名称

    语法构成

                 描述

                         示例

    可见性过滤选择器

    :visible

    选取所有可见的元素

    $(":visible" )选取所有可见的元素

    :hidden

    选取所有隐藏的元素

    $(":hidden" ) 选取所有隐藏的元素

     

    3.2.1  案例练习:点击按钮显示/隐藏文字

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>可见性过滤选择器</title>
    		<style type="text/css">
    			#txt_hide { display: block;}
    			#txt_show { display: none;}
    		</style>
    		<script src="js/jquery-3.4.1.min.js"></script>
    		<script>
    			$(document).ready(function(){
    				$("[name=show]").click(function(){
    					$("p:hidden").show();//将状态为隐藏的p元素,调用show()方法
    				});
    			});
    			$(document).ready(function(){
    				$("[name=hide]").click(function(){
    					$("p:visible").hide();//将状态为显示的p元素,调用hide()方法
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<p id="txt_hide">点击按钮,我会被隐藏哦~</p>
    		<p id="txt_show">隐藏的我,被显示了,嘿嘿^^</p>
    		<form method="post" action="">
    			<input name="show" type="button" value="点击显示文字" />
    			<input name="hide" type="button" value="点击隐藏文字" />
    		</form>
    	</body>
    </html>

    注意: show()和 hide()都是 jQuery 中的方法,show()方法的功能是将隐藏的元素显示出来, hide()方法的功能是将显示的元素隐藏起来。

     

    3.2.2    案例练习:点击菜单,显示下拉菜单

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>jQuery点击,显示下拉菜单</title>
    		<script src="js/jquery-3.4.1.min.js"></script>
    		<style type="text/css">
    			ul { display:none; list-style-type:none;}/*设置ul初始样式隐藏*/
    		</style>
    		<script>
    			$(document).ready(function(){
    				$("h2").click(function(){
    					$("ul:hidden").show();
    				})
    			})
    		</script>
    	</head>
    	<body>
    		<h2>jQuery选择器</h2>
    		<ul>
    			<li>基本选择器</li>
    			<li>属性选择器</li>
    			<li>元素选择器</li>
    			<li>过滤选择器</li>
    		</ul>
    	</body>
    </html>

     注意:在可见性选择器中需要注意,选择器:hidden 获取的元素不仅包括样式属性 display 为“none”的元素,还包括文本隐藏域(<input type=”hidden”/>)和 visibility:hidden之类的元素。

     

    4、  使用jQuery选择器注意事项

             在使用 jQuery 选择器时,有一些问题是必须注意的,否则无法显示正确效果。这些问题归纳如下。

    1.   选择器中含有 ","  ,   "#",   "("   或   "]"    等特殊字符

            在 W3C 规范中,规定属性值中不能含有某些特殊字符,但在实际开发过程中,可能会遇到表达式中含有”#”和”.”等特殊字符的情况,如果按照普通的方式去处理就会出错。解决此类错误的方法是使用转义符转义。

    HTML 代码如下:

    <div id="id#a">aa</div>
    <div id="id[2]">cc</div>
    

    按照普通方式来获取,例如:

    $("#id#a");

    $("#id[2]");

    以上代码不能正确获取到元素,正确的写法如下:

    $("#id\\#a");

    $("#id\\[2\\]");

     

    2. 选择器中含有空格的注意事项

            选择器中的空格也是不容忽视的,多一个空格或少一个空格,可能会得到截然不同的结果。如后代选择器与过滤选择器的不同造成的效果如下:

    var $t_a=$('.test :hidden');//带空格的

    以上代码是选取class为"test"的元素里面的隐藏元素。

    var $t_b=$('.test:hidden');//不带空格的

    以上代码则是选取隐藏的class为"test"的元素。

     

     

     

     

     

    =============这里是结束分割线=================

    展开全文
  • 提示:我们可以从jquery文档上学习哦~ 下面简单的介绍几种常用的选择器 ===================================基本选择器================================== id选择器 #id --> 匹配指定id名称 元素选择器 --...

    提示:我们可以从jquery文档上学习哦~        下面简单的介绍几种常用的选择器

    ===================================基本选择器==================================

    id选择器  #id --> 匹配指定id名称

    元素选择器  --> 匹配指定标签名

    类型选择器   .class  --> 匹配class属性的标签

    通配符选择器 --> 匹配所有的选择器 

    组合选择器   selector1,selector2,selectorN  --> 即可匹配多个

    ===================================层级选择器===================================

    ancestor descendant  --> 在指定父元素下匹配所有的后代元素

    parent > child  -->  在指定父元素下匹配所有的子元素

    prev + next    -->   匹配所有紧挨着在 prev 元素后的 next 元素

    ===================================伪类选择器===================================

    :first    -->    获取第一个元素

    :last    -->    获取最后一个元素

    :not(selector)    -->    用于筛选的选择器(即取反)

    :even     -->    匹配所有索引值为偶数的元素,从 0 开始计数

    :odd    -->    匹配所有索引值为奇数的元素,从 0 开始计数

    ===================================属性选择器===================================

    [属性名]    -->    匹配包含给定属性的元素

    [属性名=属性值]   -->    匹配给定的属性是某个特定值的元素

    [属性名],[属性名]   -->    可匹配多个
            ex:匹配属性有code1与code2的元素标签  -->  $("li[code1],li[code2]");
    [属性选择器][属性选择器][属性选择器]    -->    复合属性选择器,需要同时满足多个条件时使用


    更多的选择器可以自己在文档中去学习如何使用哦     ---->              点击下载jquery1.8文档资源     密码:clg1

      

    展开全文
  • 详细分类 jQuery选择器

    2018-09-30 16:41:11
    jQuery选择器-----&... jQuery选择器可以分为下面三种类型的选择器 基本选择器 $('tag') -------按元素标签选择 $('.class') -------按类名选择 $('#id') -------按id选择 $('*') ...
  • jquery选择器大全

    千次阅读 2015-08-20 17:33:26
    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率。...
  • jQuery选择器

    千次阅读 2013-11-06 11:35:36
    l 什么是jQuery选择器 l jQuery中的选择器完全集成了CSS的风格。 l 利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素。 l 学会使用选择器是学习jQuery的基础。 l jQuery选择器的优势 l 简介的...
  • 选择子类: div 下的img元素 $("div").children("img") 选择父类:div的所有父类  $("div").parent('') 选择 祖父: parents()获取所有上级元素 以下是 代码是从当前元素...
  • jquery选择器 1.什么是jquery选择器 jquery中的选择器完全继承了css1.0~2.0的风格,实现少部分css3选择器 ,如果对于CSS选择器非常了解,那么学习jquery选择器会非常简单。 利用jquery选择器可以非常快速的找出你想...
  • 常用jQuery选择器详解

    千次阅读 2016-05-26 14:46:56
    这里就汇总一些十分常用的jQuery选择器。1、jQuery选择器基本结构$('选择器') $('选择器 上下文') 2、使用基本css选择器关于基本的css选择器可以看一下css选择器详解。这里列出几种最基本的使用css选择器的用法。2.1...
  • jQuery选择器全解

    千次阅读 2011-10-28 15:09:17
    jQuery选择器全解   通俗的讲, Selector选择器就是"一个表示特殊语意的字符串". 只要把选择器字符串传入上面的方法中就能够选择不同的Dom对象并且以jQuery包装集的形式返回. 但是如何将jQuery选择器分类让我...
  • CSS选择器优先级 jquery选择器优先级

    千次阅读 2016-09-24 22:00:41
    css选择器主要分为三类:标签名选择器、类选择器、ID... 一、 下面对着5中选择器进行举例:  1. 标签名选择器 div { color:Red;} 即页面中的各个标签名的css样式  2.类选择器 .divClass {color:Red;} 即定义的每个
  • jquery系列教程1-选择器全解jquery基本选择器jquery基本选择器,包括id选择器、class选择器、标签选择器、通配符选择器,同时配合选择器的空格、逗号等语法,可以实现大部分需要的选择功能。 代码如下:$("#myid");...
  • 不用$('#text')或类选择器 怎样在选择下拉框当前位置找到点击的事件的位置用$(this)方式
  • JQuery 选择器

    2012-08-24 17:26:23
    JQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。 $("p") 选取 元素。 $("p.intro") 选取所有 class="intro" 的 元素。 $("p#demo") 选取 id="demo" 的第一个 元素 JQuery 属性选择器jQuery ...
  • jquery选择器扩展之样式选择器

    千次阅读 2016-01-23 18:05:09
    jquery中提供了丰富多样的选择器,利用这些选择器我们可以完成大多数任务,但是喜欢思考的我们总得找点事,提问时间: 1.如何选择所有字体颜色为红色的元素 2.如何选择出背景颜色为为白色的元素 3.如何选择出字体...
  • Jquery选择器使用方法大全

    千次阅读 热门讨论 2015-09-26 08:04:08
    本文主要讲是Jquery选择器的使用方法 点我改变颜色 我是divOne 我是divTwo
  • WEB入门之十三 jQuery选择器

    千次阅读 2017-02-23 20:23:41
    学习内容 jQuery层次选择器 jQuery属性选择器 jQuery表单选择器 jQuery过滤选择器能力目标 熟悉jQuery各种选择器的使用场合能熟练使用jQuery各种选择器本章简介上一章我初步接触了jQuery,并能够编写一些简单的...
  • 【jquery】jquery选择器有哪些

    千次阅读 2020-03-25 16:05:06
    4大类:基本选择器、层次选择器、过滤选择器、表单选择器 ...基本选择器JQuery最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名来查找DOM元素。 $("#myELement") 选择id值等于...
  • jQuery选择器大全

    千次阅读 2012-06-14 01:00:39
    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率。...
  • jQuery-样式(jQuery选择器

    千次阅读 2017-02-24 10:58:54
    jQuery-样式(jQuery 选择器
  • jQuery选择器总结

    千次阅读 2014-01-24 16:24:46
    jQuery选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法   $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择...
  • jquery 选择器

    千次阅读 2008-07-25 22:10:00
    无标题文档本文内容 jQuery1.2选择器 css选择器 jQuery1.1x升级到1.2开发注意事项 jQuery提供了两个方法来选择元素。第一个是使用一个CSS和XPath选择器的结合作为一个字符串被传递给jQuery构造器。第二种方法是...
  • 学习了一段时间JQuery后,我逐渐意识到JQuery的核心由两个,一是通过$(selector)得到的对象,因为无论是...现在就准备好好整理一下对JQuery选择器的认识,争取对其有系统的认识。 (一)JQuery选择器优势  1.简洁写法
  • Jmeter之CSS选择器/JQuery选择器关联

    千次阅读 2019-07-31 10:59:34
    CSS选择器或JQuery选择器是Jmeter支持的两种语法,下面对其两种语法进行简单介绍 CSS选择器 选择 例 选择 .class .intro All elements with class="intro" #id #firstname The element ...
  • jQuery 选择器大全

    千次阅读 2011-11-25 12:04:01
    下面是从W3school转载来的jQuery 选择器列表,忘记的话好有个好参考。 jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,313
精华内容 24,525
关键字:

下面哪个不是jquery选择器