JQuery基本选择器、层级选择器和基本过滤器介绍

最新推荐文章于 2022-02-23 11:11:46 发布
最新推荐文章于 2022-02-23 11:11:46 发布
阅读量132 收藏
点赞数
文章标签： jQuery HTML JavaScript Apple JSP ViewUI

在介绍选择器之前，我们首先来了解一下JQuery中的ready(fn)函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。请确保在元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

下面举一个简单的例子来加以说明。

<html>

   <head>

      <title>My JSP 'jquerydemo1.jsp' starting page</title>

      //首先引入jquery所需要的js文件

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

</script>

      <script type="text/javascript">

$(document).ready(function() {

   alert("JQuery第一个案例!");

});

</script>

   </head>

   <body>

      <br>

      <br>

      <h2 align="center" style="color: #333333;">

         第一个JQuery案例

      </h2>

   </body>

</html>

接下来我们继续介绍JQuery的基本选择器与层级选择器。

一、JQuery基本选择器

#id  根据给定的ID匹配一个元素。

HTML 代码:

<div id="notMe"><p>id="notMe"</p></div>

<div id="myDiv">id="myDiv"</div>

jQuery 代码:

$("#myDiv");

结果:

[ <div id="myDiv">id="myDiv"</div> ]

element  根据给定的元素名匹配所有元素

HTML 代码:

<div>DIV1</div>

<div>DIV2</div>

<span>SPAN</span>

jQuery 代码:

$("div");

结果:

[ <div>DIV1</div>, <div>DIV2</div> ]

.class  根据给定的类匹配元素。

HTML 代码:

<div class="notMe">div class="notMe"</div>

<div class="myClass">div class="myClass"</div>

<span class="myClass">span class="myClass"</span>

jQuery 代码:

$(".myClass");

结果:

[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

*  匹配所有元素，多用于结合上下文来搜索。

HTML 代码:

<div>DIV</div>

<span>SPAN</span>

<p>P</p>

jQuery 代码:

$("*")

结果:

[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

selector1,selector2,selectorN  将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

HTML 代码:

<div>div</div>

<p class="myClass">p class="myClass"</p>

<span>span</span>

<p class="notMyClass">p class="notMyClass"</p>

jQuery 代码:

$("div,span,p.myClass")

结果:

[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

二、层级选择器

ancestor descendant  在给定的祖先元素下匹配所有的后代元素

找到表单中所有的 input 元素

HTML 代码:

<form>

  <label>Name:</label>

  <input name="name" />

  <fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" />

 </fieldset>

</form>

<input name="none" />

jQuery 代码:

$("form input")

结果:

[ <input name="name" />, <input name="newsletter" /> ]

parent > child  在给定的父元素下匹配所有的子元素，用以匹配元素的选择器，并且它是第一个选择器的子元素。

匹配表单中所有的子级input元素。

HTML 代码:

<form>

  <label>Name:</label>

  <input name="name" />

  <fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" />

 </fieldset>

</form>

<input name="none" />

jQuery 代码:

$("form > input")

结果:

[ <input name="name" /> ]

prev + next  匹配所有紧接在 prev 元素后的 next 元素

匹配所有跟在 label 后面的 input 元素

HTML 代码:

<form>

  <label>Name:</label>

  <input name="name" />

  <fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" />

 </fieldset>

</form>

<input name="none" />

jQuery 代码:

$("label + input")

结果:

[ <input name="name" />, <input name="newsletter" /> ]

prev ~ siblings  匹配 prev 元素之后的所有 siblings 元素

找到所有与表单同辈的 input 元素

HTML 代码:

<form>

  <label>Name:</label>

  <input name="name" />

  <fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" />

 </fieldset>

</form>

<input name="none" />

jQuery 代码:

$("form ~ input")

结果:

[ <input name="none" /> ]

三、基本过滤器

: first  匹配找到的第一个元素

查找表格的第一行

HTML 代码:

<table>

  <tr><td>Header 1</td></tr>

  <tr><td>Value 1</td></tr>

  <tr><td>Value 2</td></tr>

</table>

jQuery 代码:

$("tr:first")

结果:

[ <tr><td>Header 1</td></tr> ]

:last  匹配找到的最后一个元素

查找表格的最后一行

HTML 代码:

<table>

  <tr><td>Header 1</td></tr>

  <tr><td>Value 1</td></tr>

  <tr><td>Value 2</td></tr>

</table>

jQuery 代码:

$("tr:last")

结果:

[ <tr><td>Value 2</td></tr> ]

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

在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）

查找所有未选中的 input 元素

HTML 代码:

<input name="apple" />

<input name="flower" checked="checked" />

jQuery 代码:

$("input:not(:checked)")

结果:

[ <input name="apple" /> ]

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

查找表格的1、3、5...行（即索引值0、2、4...）

HTML 代码:

<table>

  <tr><td>Header 1</td></tr>

  <tr><td>Value 1</td></tr>

  <tr><td>Value 2</td></tr>

</table>

jQuery 代码:

$("tr:even")

结果:

[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

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

查找表格的2、4、6行（即索引值1、3、5...）

HTML 代码:

<table>

  <tr><td>Header 1</td></tr>

  <tr><td>Value 1</td></tr>

  <tr><td>Value 2</td></tr>

</table>

jQuery 代码:

$("tr:odd")

结果:

[ <tr><td>Value 1</td></tr> ]

:eq  匹配一个给定索引值的元素

查找第二行

HTML 代码:

<table>

  <tr><td>Header 1</td></tr>

  <tr><td>Value 1</td></tr>

  <tr><td>Value 2</td></tr>

</table>

jQuery 代码:

$("tr:eq(1)")

结果:

[ <tr><td>Value 1</td></tr> ]

:gt  匹配所有大于给定索引值的元素

  查找第二第三行，即索引值是1和2，也就是比0大

HTML 代码:

<table>

  <tr><td>Header 1</td></tr>

  <tr><td>Value 1</td></tr>

  <tr><td>Value 2</td></tr>

</table>

jQuery 代码:

$("tr:gt(0)")

结果:

[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

:lt  匹配所有小于给定索引值的元素

查找第一第二行，即索引值是0和1，也就是比2小

HTML 代码:

<table>

  <tr><td>Header 1</td></tr>

  <tr><td>Value 1</td></tr>

  <tr><td>Value 2</td></tr>

</table>

jQuery 代码:

$("tr:lt(2)")

结果:

[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

:header  匹配如 h1, h2, h3之类的标题元素

给页面内所有标题加上背景色

HTML 代码:

<h1>Header 1</h1>

<p>Contents 1</p>

<h2>Header 2</h2>

<p>Contents 2</p>

jQuery 代码:

$(":header").css("background", "#EEE");

结果:

[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]

:animated  匹配所有正在执行动画效果的元素

只有对不在执行动画效果的元素执行一个动画特效

HTML 代码:

<button id="run">Run</button><div></div>

jQuery 代码:

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

  $("div:not(:animated)").animate({ left: "+=20" }, 1000);

});

sxpsinosoft
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery选择器之层级过滤选择器详解
10-26
本篇文章主要是对jquery选择器之层级过滤选择器进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
JQuery 选择器、过滤器介绍
10-28
在深入探讨jQuery选择器和过滤器之前，先让我们回顾一下jQuery的基本概念。jQuery是一个流行的JavaScript库，它的核心理念是“write less, do more.”，即用更少的代码实现更多的功能。它简化了DOM（Document Object...
jquery基础之选择器
蜗行窝素
06-06 100
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;ddd&lt;/title&gt; &lt;meta http-equiv="content-type" content="te
选择器——过滤选择器——基本过滤器
A458545418的博客
04-23 152
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-...
jquery选择器之层级过滤选择器
Golden的专栏
11-02 175
$("ancestor descendant")：选取parent元素后所有的child元素 $("parent &gt; child")：选取parent元素后所有的直属child元素，何谓“直属”，也就是第一级的意思了 $("prev + next")：prev和next是两个同级别的元素. 选中在prev元素后面的next元素 $("prev ~ siblings"):选择prev...
jQuery的选择器与过滤器
King的博客
08-04 481
笔记放在Github上，点击访问下载 jQuery是一个优秀的JavaScript库 jQuery选择器 基本选择器 普遍选择器 $("*") 标签选择器 $("div") ID选择器 $("#one") 类选择器 $(".one") 组合选择器 多个选择器使用逗号分隔 $("div,.one") 嵌套选择器 多个选择器共同使用 $("div.one") 层次选择器 后代选择器 $(...
Jquery——Day1(Jquery基本选择器+过滤选择器+表单选择器+表单过滤器)
zxy9602的博客
02-22 488
A、jQuery常规选择器，大体上来讲，简单选择器、进阶选择器、高级选择器 1、简单选择器，分为id选择器、元素（标签）选择器、类（class）选择器 与css进行对比，css是为了添加样式，而jQuery是完全继承了css的风格，但它是为了添加行为 （1）元素名    如“div”      div{}         $('div').css('color','red') （2
JQuery选择器、过滤器大整理
10-24
在JavaScript的世界里，jQuery是一个...在实际开发中，灵活运用jQuery选择器和过滤器能帮助开发者更高效地定位和操作DOM元素，简化代码，提高性能。记得在使用时结合具体的DOM结构和需求，选择最合适的选择器和过滤器。
深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
weixin_34413357的博客
08-23 107
前面的话 　　选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM以及ajax操作都依赖于选择器。jQuery选择器完全继承了CSS的风格，两者的写法十分相似，只不过两者的作用效果不同。CSS选择器找到元素后添加样式，而jQuery选择器找到元素后添加行为。jQuery选择器可以分为基础选择器、层级选择器、过滤选择器和表单选择器四类。对于每类选择器，除了给出jQuery选择器的写...
字体选择器的制作
Spring的博客
05-01 777
从一位前辈博客中看到的，学习并记录下。是用wpf制作的，就是将系统的字体都显示出来，并可以选择。前端代码：     &lt;Window x:Class="字体选择器.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schema...
制作图书简介页面（JavaScript）
weixin_48112113的博客
08-02 5414
1. 任务要求 1）熟悉jQuery的选择器； 2）掌握jQuery的基本选择器； 3）掌握jQuery对象的click()方法； 4）掌握jQuery对象的css()方法；
HTML 表单（一）—— 基本表单元素
七秒钟的记忆
02-23 601
HTML 表单（一）—— 基本表单元素
JQuery学习日记 (1)---------jQuery简介 && jQuery选择器（总）
qq_39887036的博客
01-25 104
简介 jQuery 就是通过 jQuery($()) 包装对象后产生的对象 jQuery 对象是独有的，若一个对象是jQuery 对象，则它可使用 jQuery 里的方法，如$("#persontab").html() jQuery 对象无法使用 DOM 中的任何方法，同样，DOM对象也不可以是使用 jQUery 里的任何方法 约定：如果获取的是jQuery 对象，则要在变量前加上 $ var ...
HTML5-表单元素(Form-input元素)
MelanceXin的博客
04-24 3234
表单元素 表单：是HTML中获取用户输入的手段，对于web应用系统极其重要，但是HTML定义的功能落后于表单的使用方式已经有很多年了。 HTML5中，整个表单已经彻底改造过，标准的步伐已经跟上表单的应用实践。 （比如：百度的输入框是一个表单，网页中用户的的登陆框也是一个表单…） 获取用户输入的方式多样，对应的表单样式也多样。 关键表单元素 // 属性：method action （作...
jQuery的应用
伴夏微凉的博客
03-31 5782
jQuery的应用 jQuery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率 jQuery的优势 体积小，压缩后只有100KB左右 强大的选择器 出色的DOM封装 可靠的事件处理机制 出色的浏览器兼容性 使用隐式迭代简...
jQuery学习记录（三）：使用jQuery选择器获取网页中的元素、对象及子对象
weixin_30292745的博客
11-01 219
获取对象时常用的符号含义 符号 指示作用 # 指示ID . 指示Class ...
一、jQuery简介与选择器
NemophilistPro的博客
09-29 382
总结jQuery的基础知识点与一些重要的选择器
Jquery-02选择器过滤器
SeaSky_Steven的博客
08-10 713
一切从选择器开始 操作之前，必先选中！！！ 选择器语法(格式)： $(expression 表达式 ) jQuery内部提供了9种选择器 基本选择器 层级选择器 基本过滤选择器 内容过滤选择器 可见性过滤选择器 属性过滤选择器 子元素过滤选择器 表单过滤选择器 表单对象属性过滤选择器   如果CSS3 选择器有基础 ，jQuery选择器 非常好学！！   基本选择器...
jQuery层级选择器
dly的博客
12-19 485
jQuery层级选择器A B ，获得A元素内部所有的B后代元素。（父子,爷孙..） A > B ，获得A元素内部所有的B子元素。（父子） A + B ，获得A元素后面的第一个兄弟B。（兄弟） A ~ B ，获得A元素后面的所有的兄弟B。（兄弟）<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
JQuery基础教程：选择器与过滤方法解析
"这篇文档是关于JQuery基础的笔记，主要涵盖了JQuery的选择器、层级选择器和过滤选择器的使用方法，适用于互联网开发中的DOM操作。" 在JQuery库中，"$"符号是一个非常核心的标识，它实际上是对JQuery函数的别名。`$...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值