Jquery选择器的概念以及选择器的学习一（基本、层级、简单，另有简单动画效果代码）

最新推荐文章于 2022-08-13 00:16:01 发布
最新推荐文章于 2022-08-13 00:16:01 发布
阅读量1k 收藏
点赞数
分类专栏： jquery 文章标签： jquery function button div javascript header
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wo1354691371/article/details/7375109
版权
    什么是jquery选择器？    

概念：允许的多个元素组或单个严肃进行操作，从而找出想要的元素。

  几种jquery选择器的介绍：

一、基本选择器

1、  Id选择器

功能：根据匹配的ID匹配一个元素

示例:$(“#id”)

2、  class选择器

功能：根据给定的类匹配元素。

  示例：$(“.class”)

  3、*

        功能：匹配所有元素。

        示例：$(“*”)

4、element

功能：根据给定的元素名匹配所有的元素。

示例：$(“div”)  查找所有的div

5、组选择器

      功能：将每一个选择器匹配到的元素合并后一起返回。

      示例：$(“table tr td”)

二、层级选择器

1、  ancestor descendant

       功能：在给定的祖先元素下匹配所有的后代元素

       示例：$(“div span”)

2、  选取子元素

       功能：在给定的父元素下匹配所有的子元素

       示例：$(“div>span”)

3、  prev+next

       功能：匹配所有进阶在prev后的下一个元素（紧邻）

       示例：$(“#one+div”)

4、~

         功能：匹配选定的操作符后所有兄弟元素

       示例：$(“#one~div”)

 

三、简单选择器(冒号不可省略)

1、:first

       功能：匹配找到第一个元素。

       示例：$(“div:first”)

2、:last

       功能：匹配找到最后一个元素。

       示例：$(“div:last”)

4、  not

       功能：去除所有与给定选择器匹配的元素

       示例：$(“div:not(#d2)”)

5、  :even

       功能：匹配所有索引值为偶数的元素，从0开始计数

       示例：$(“tr:even”)

6、  :odd

       功能：匹配所有索引值为奇数的元素，从0开始计数

       示例：$(“tr: odd”)

7、:eq(index)

       功能：匹配一个给定索引值的元素

       示例：$(“tr: eq(1)”)

8、:gt(index)

       功能：匹配所有大于给定索引值的元素

       示例：$(“gt: eq(3)”)

9、:lt(index)

       功能：匹配所有小于给定索引值的元素

       示例：$(“tr: lt(3)”)

10、:header

       功能：匹配如h1,h2之类的标题元素

       示例：$(“:header”)

11、:animated

       功能：匹配所有正在执行画效果的元素

示例:$(“div:animated”)

 

学习了这些jquery的选择器，下面给大家附上动画效果的代码：

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery简单选择器的效果2</title>

</head>

<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>

<script language="javascript" type="text/javascript">

  $(document).ready(function (){

         //获取所引致等于1的tr

         $("#btn0").click(function (){

                $("tr:eq(1)").css("background","green");

                });

       //获取索引大于3的tr

         $("#btn1").click(function (){

                $("tr:gt(3)").css("background","green");

                });

                //获取索引小于3的tr

         $("#btn2").click(function (){

                $("tr:lt(3)").css("background","green");

                });

               

              //获取网页中所有的标题h1 h2 

              $("#btn3").click(function (){

                $(":header").css("background","green");

                }); 

               

               //获取网页中正在执行的动画

               $("#btn4").click(function (){

                $("div:animated").css("background","red");

                }); 

               //定义一个动画函数

               function move(){

                      $("#move").slideToggle(2000,move);

                      };

                      move();

                      

              //取消效果

              $("#btn5").click(function (){

                 $("*").removeAttr("style");

                

                 });

         });

 

</script>

 

<body>

<h1>简单选择器1</h1>

<h2>简单选择器2</h2>

<div id="move" style="width:200px; height:200px; background-color:#03C;">这是动画效果</div>

<table width=" 600" border="1">

  <tr>

    <td>姓名</td>

    <td>性别</td>

    <td>年龄</td>

    <td>电话</td>

    <td>住址</td>

  </tr>

  <tr>

    <td>张三</td>   

    <td>男</td>

    <td>20</td>

    <td>110110;</td>

    <td>大象</td>

  </tr>

  <tr>

    <td>张三</td>   

    <td>男</td>

    <td>20</td>

    <td>110110;</td>

    <td>大象</td>

  </tr>

  <tr>

    <td>张三</td>   

    <td>男</td>

    <td>20</td>

    <td>110110;</td>

    <td>大象</td>

  </tr>

  <tr>

    <td>张三</td>   

    <td>男</td>

    <td>20</td>

    <td>110110;</td>

    <td>大象</td>

  </tr>

 <tr>

    <td>张三</td>   

    <td>男</td>

    <td>20</td>

    <td>110110;</td>

    <td>大象</td>

  </tr>

  <tr>

    <td>张三</td>   

    <td>男</td>

    <td>20</td>

    <td>110110;</td>

    <td>大象</td>

  </tr>

 

</table>

<input type="button" id="btn0" value="获取所引致等于1的tr">

<input type="button" id="btn1" value="获取索引大于3">

<input type="button" id="btn2" value="获取索引小于3">

<input type="button" id="btn3" value="获取网页中所有的标题h1 h2">

<input type="button" id="btn4" value="获取网页中正在执行的动画">

<input type="button" id="btn5" value="取消效果">

 

</body>

</html>

duoduo220
关注
专栏目录
JQuery选择器基本概念
XiaoDong的博客
11-16 578
1.jquery的选择器和 css 很相近 css中的选择器是用  .a{} 类选择器  #a{} 是id选择器 a{} 是标签选择器 当然 div a.a{} 也可以使用 div>a{} 来表示 2.选择器的容错性 即使页面没有这个元素，jQuery也不会报错 那么我们可以把一大堆jquery放到页面，减少了开发时间 3.选择器的种类 1.基本选择器 id选
jQuery选择器及基础概念
weixin_56709347的博客
05-11 163
jQuery 是什么 基本概念 1、 jQuery是一个JS库，能够帮助我们轻松实现 一些原本比较麻烦的功能。 2、 jQuery每个版本有两个小版本：压缩版与 未压缩版，压缩版没有排版和注释，不便于阅 读；未压缩版文与之相反。 3、 jQuery实际上就是一个js文件，加载到页面 就可以直接使用了。 <script src="../jquery-3.2.1.min.js"></script> 基本语法 1、 $(选择器).action(); 2、 $:定义了这是一个jQuery的
jquery的选择器概述
水巷石子的博客
09-18 2836
jquery的选择器概述 （1）选择器是什么？ $() 特殊的”函数”，不同的字符串参数（代表不同的规则），执行之后可以获取页面的符合条件的元素返回 （2）选择器分类 基本选择器 层级选择器 属性选择器 基本过滤选择器 表单属性选择器 jquery的选择器-基本选择器*** （1）基本选择器 （2）css函数 在jquery中，修改样式的函数 参1：属性名 参2：属性值 （3）参数字符串可以为多个规则，使用，隔开，表示或者 <script type="text/javascript"
jQuery选择器概述
橘猫吃不胖的博客
12-18 279
jQuery选择器1 jQuery概述2 jQuery选择器概述3 基本选择器4 层次选择器5 过滤选择器5.1 基本过滤选择器5.2 内容过滤选择器5.3 可见性过滤选择器5.4 属性过滤选择器5.5 子元素过滤选择器5.6 表单对象属性过滤选择器6 表单选择器 1 jQuery概述 jQuery是一个快速的、简洁的JavaScript库。它的理念是：“写的少，做的多” jQuery语法： 1、原生写法 $(document).ready(function () { //jQuery代码 });
1.jquery选择器
weixin_51353891的博客
08-15 374
认识jQuery 介绍：在学习jQuery之前我们需要知道的重要一点是，jQuery只是一个JavaScript库。jQuery的所有功能都是通过JavaScript访问的，因此，对JavaScript的深刻理解对于理解、构建和调试代码是至关重要的。 学习jQuery本质： 就是学习调用这些函DOM数（方法） jQuery安装 概念：若想要在你的项目中jQuery库，首先必须下载jQuery库并将他添加到你的项目中 下载jQuery，在同一个版本下jQuery为开发者提供了两种模式的文件： 产品模
jQuery层级选择器实例代码
10-20
这对于学习和实践jQuery选择器具有较高的参考价值。 需要注意的是，由于示例代码中存在一些OCR技术造成的文字识别错误，我们在理解时需要将其错误的文字调整为正确的用法。例如，“”应该更正为“”，这样的调整...
jQuery层级选择器用法分析
10-24
我们通常使用jQuery选择器来快速应用样式或操作这些元素。本文将详细介绍jQuery中常见的四种层级选择器：子元素选择器、后代元素选择器、紧邻同辈元素选择器和相邻同辈元素选择器。 子元素选择器（>）是用于选择...
jquery层级选择器(匹配父元素下的子元素实现代码)
10-21
jQuery层级选择器是前端开发中非常重要的工具之一，它可以大大简化代码量并提高开发效率。 总体而言，jQuery层级选择器不仅提供了丰富的选择方式，还允许开发者通过简单而直观的方式来选取复杂的DOM结构中的元素。...
jquery选择器之层级过滤选择器详解
12-11
代码如下:$(“ancestor descendant”)：选取parent元素后所有的child元素$(...注:siblings是过滤器后两个用的比较少，一般会有其他选择器替代 代码如下:$(“prev + next”)等价于next()$(“prev ~ siblings”)等价
jQuery的概念、基本使用、选择器、样式操作
weixin_53155105的博客
08-13 237
仓库： 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了 JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。
jQuery选择器
m0_57774967的博客
06-16 4691
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
jQuery四大选择器，以及例子来充分理解
热门推荐
wang__junhappy的博客
05-14 2万+
1. jQuery选择器的优势：(1) 代码更简单(2) 支持CSS1到CSS3选择器(3) 完善的处理机制2. jQuery选择器的分类（1） 基本选择器      基本选择器是jQuery中使用最多的选择器，它又元素Id、class、元素名、多个元素符组成。      （2） 层次选择器       层次选择器通过DOM元素间的层次关系来获取元素，主要的层次关系包括父子、后代、相邻、兄弟关系。...
关于jquery中的选择器的概念和各个选择器的用法及功能
03-20 2240
关于jquery中的选择器的概念和各个选择器的用法及功能   概念：选择器允许您对元素组或单个元素进行操作，在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器   选择器的分类：基本、层次、简单、内容、可见性、属性、子元素、表单 表单对象属性   一、基本选择器（5种）： 1、id选择器： 用法：$("#id") 功能：用于搜索的，通过元素的
[jQuery]：jQuery选择器总结
我只是个程序员。
09-26 929
jQuery选择器是继承了CSS和Xpath的部分语法，总体分为四种：基本选择器、层次选择器、过滤选择器和表单选择器。
使用jQuery动态创建一个表格（根据用户输入的内容添加一行数据，并且能逐行删除）
03-22 1万+
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> jquery实现添加、移除表格   table{  margin:auto auto; background-color:#9FC;}  td{   width:80px;}
使用jquery的验证框架，对表单进行验证(简单、基础)
03-30 2852
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 注册表单验证 $.validator.setDefaults({  submitHandler: function(form) {  alert("submitted!");  for
jquery实现弹框效果
03-27 2570
window.html文件 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> jquery实现弹框效果  $(document).ready(function (){   //居中效果   $("#btn_center").clic
两种方法使用jquery实现左右移动效果（包含each遍历方式）
03-21 2511
第一种：使用each()遍历方法 jquery实现左右选择器           $(document).ready(function (){     //遍历元素           $("option").each(function (index,domEle){                                   $(d
实现多功能的表格的各行选择变色（点击、单选、多选）
03-26 2405
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 实现多动能的表格的各行选择变色 tr.odd{  background-color:#F99;} tr.even{  background-color:#FF9;}  tr.hover{
jQuery选择器与层级操作详解
"jQuery选择器和层级基础教程" 在jQuery中，选择器是用于选取DOM（文档对象模型）中特定元素的工具，它们极大地简化了JavaScript中的DOM操作。本教程将介绍jQuery中的基本选择器，包括ID选择器、元素选择器和类选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值