jQuery 选择器

最新推荐文章于 2024-01-14 11:54:30 发布
最新推荐文章于 2024-01-14 11:54:30 发布
阅读量254 收藏
点赞数
分类专栏： html/css/js/jquery 文章标签： jquery 选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lkk1344/article/details/49975555
版权

选择器允许您对元素组或单个元素进行操作。

jQuery 选择器


在前面的章节中，我们展示了一些有关如何选取 HTML 元素的实例。

关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

选择器允许您对 HTML 元素组或单个元素进行操作。

在HTML DOM 术语中：

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。


jQuery 元素选择器

jQuery 使用 CSS 选择器来选取HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有class="intro" 的 <p> 元素。

$("p#demo") 选取id="demo" 的第一个 <p> 元素。


jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

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


jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：


实例

<html>

<head>

<script type="text/javascript"src="../jquery/jquery.js"tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

 $("button").click(function(){

   $("p").css("background-color","yellow");

  });

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button type="button">Clickme</button>

</body>

</html>

 

更多的实例

语法

描述

$(this)

当前 HTML 元素

$("p")

所有 <p> 元素

$("p.intro")

所有 class="intro" 的 <p> 元素

$(".intro")

所有 class="intro" 的元素

$("#intro")

id="intro" 的第一个元素

$("ul li:first")

每个 <ul> 的第一个 <li> 元素

$("[href$='.jpg']")

所有带有以 ".jpg" 结尾的 href 属性的属性

$("div#intro .head")

id="intro" 的 <div> 元素中的所有 class="head" 的元素
lkk1344
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery选择器
m0_57774967的博客
06-16 4633
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
JQuery选择器语法
苏木三少
03-25 909
JQuery选择器语法：一、什么是选择器语法：1、就是DOM对象进行定位的条件，比如根据ID定位，根据标签类型名。2、jquery中只有三种选择器二、基本选择器：1、【定位条件】：可以根据ID编号，根据标签类型名，根据标签采用样式选择器2、【使用】：三、层级选择器：1、[定位条件]：可以根据标签之间父子关系定位，可以根据标签之间兄弟关系定位2、[标签之间关系]3、【使用】： 一、什么是选择器语法： 1、就是DOM对象进行定位的条件，比如根据ID定位，根据标签类型名。 2、jquery中只有三种选择器 二、基
JQuery选择器超级详细
热门推荐
林高禄
08-06 1万+
基本选择器 id选择器：$("#id的属性值") 获取与指定id属性值匹配的元素 单击按钮，将id为myid的元素背景为绿色 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>JQuery选择器</title> <script src="js/jquery-3.3.1.min...
jQuery选择器分类
weixin_45753617的博客
08-19 1133
jQuery选择器分类
jquery选择器以及案例
m0_59745705的博客
11-03 1112
jquery选择器是jquery为我们提供的一组方法，让我们更加方便的获取到页面中的元素，注意：jquery选择器返回的是jquery对象。 jquery选择器有很多，但是选择器之间可以互相替代，就是说获取到一个元素，会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。 Css()方法：获取/设置样式 1.获取样式：css（）方法设置参数为要获取值的样式名。 $('#getbtn').click(function(){ 1.1获取id为div1这个元素的样式 conso
jQuery选择器大全总结
impact_factor的博客
08-12 1万+
jQuery选择器jQuery的选择器基本选择器基本过滤选择器属性过滤选择器表单选择器子元素选择器操作元素属性操作样式操作样式类获取或设置元素高度和宽度操作HTML代码操作text代码 jQuery的选择器 基本选择器 id选择器：#id 类选择器：.class 标签名选择器： * ：匹配所有元素 基本过滤选择器 Element:first ：选取第一个元素 Element:last : 选取最后一个元素 Element:not(selector)：去除所有与给定选择器匹配的元素 Element:ev
jQuery 选择器全部详细笔记
业精于勤，荒于嬉
04-23 2007
1. jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML,css,dom...2. 提供方法、events、选择器，并且方便地为网站提供 AJAX 交互3. 其宗旨是—WRITE LESS,DO MORE,写更少的代码,做更多的事情.4. jQuery 实现了浏览器的兼容问题1. jQuery 对象就是对 DOM 对象进行包装后产生的对象比如： $("#test").html() 意思是指：获取ID为test的元素内的html代码。
jQuery选择器（一）基本选择器、层次选择器及属性选择器的详细使用
最新发布
Jin_Xiang123的博客
01-14 3564
本篇文章主要介绍在jQuery中基本选择器、层次选择器及属性选择器的详细使用以及部分理论知识 在jQuery中，基本选择器是一组简单而直接的选择器，用于选择DOM元素。它们是最常用和最基础的选择器，可以根据元素的标签名、类名、id等属性来选择元素。基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器。名称语法构成描述示例标的id匹配元素。
JQuery 选择器使用详解
闲时不练功，忙时一场空
11-05 2544
文章目录1. 基本选择器2. 层级选择器3. 属性选择器4. 基本过滤器5. 内容过滤器6. 表单过滤器:7. 表单对象属性过滤器8. jQuery 元素筛选 选择器：筛选具有相似特征的元素(标签) 1. 基本选择器 1. 标签选择器（元素选择器） 语法： $("html标签名") 获得所有匹配标签名称的元素 案例： $("div") 选择元素名为<div>的所有元素 2. id选择器 语法： $("#id的属性值") 获得与指定id属性值匹配的元素 案例： $("#one") 选
jQuery选择器思维导图
12-28
通过思维导图对知识进行梳理，以便记忆
jquery选择器简述
11-24
jQuery选择器是jQuery库的核心功能之一，它极大地简化了对网页DOM元素的选取，使得JavaScript开发者能够更加高效地操作页面内容。jQuery选择器基于CSS选择器，并在其基础上扩展了一些更强大的功能，使得开发者能以...
jQuery 选择器用法实例分析【prev + next】
10-15
jQuery选择器是jQuery库中的核心部分，用于高效地选取DOM元素。在JavaScript中，选取DOM元素通常需要编写复杂的代码，而jQuery提供了一套简洁、强大的选择器系统，使得选取元素变得简单直观。本文将深入探讨jQuery...
jQuery选择器全面总结
10-26
这篇文章将对jQuery选择器进行全面总结，帮助开发者更好地理解和运用这些工具。 首先，我们要了解基本选择器，这是jQuery选择器的基础。包括： 1. **ID选择器**: 使用`#`符号后跟元素的ID，如`jQuery("#ID")`，它...
javascript之html元素文本输出
颜枫
10-16 6738
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。下面的 JavaScript 语句向  id="demo" 的 HTML 元素输出文本 "Hello World" 。下面是代码： document.getElementById("demo").innerHTML="hello world"; 但是这里有一点，必须把js代码块放在body里面，例如这样
HTML5音乐导航
颜枫
11-18 1840
音乐导航 #nav{ list-style-type:none; /*去掉无序列表前面的点*/ margin:50px auto 0px; /*上边界50px,左右居中，下边界为0*/ width:960px; height:38px; color:#333; font-size:14px; padding:0px; overflow:hidden; } #nav li{ width:1
JavaScript写的数字加法
颜枫
11-07 1001
无标题文档   window.onload=function (){             var otxt1=document.getElementById('txt1');             var otxt2=document.getElementById('txt2');             var obtn1=document.getElementById('bt
HTML5新增标签2，视频，音频，调节颜色
颜枫
11-18 865
HTML5 $(document).ready(function(e) { $('input').change(function(e){ var red=$('#red').val(); var green=$('#green').val(); var blue=$('#blue').val(); //当前修改的值 var value=$(this).val(); $(th
jQuery选择器详解与应用
"jQuery选择器全解：包括动态创建DOM元素、封装DOM对象以及文档就绪的简写方式。此内容详细介绍了jQuery选择器的使用，特别是jQuery支持的不仅是CSS选择器，还包括自定义选择器。jQuery选择器分为‘选择’和‘过滤’...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值