JQuery选择器

最新推荐文章于 2021-01-04 14:32:30 发布
最新推荐文章于 2021-01-04 14:32:30 发布
阅读量198 收藏
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45846139/article/details/106190967
版权

JQuery有着许多的选择器来供我们使用，以方便我们通过JQuery来对页面的元素进行修改和添加事件。

JQuery的基本选择器
  • id选择器
 $("#one").css("background","#0000FF");

改变 id 为 one 的元素的背景色为 #0000FF"

  • 元素选择器
    $("div").css("background","#00FFFF");

改变元素名为 <div> 的所有元素的背景色为 #00FFFF"

  • class选择器
  $(".mini").css("background","#FF0033");

改变 class 为 mini 的所有元素的背景色为 #FF0033"

  • *选择器
     $("*").css("background","#00FF33");

改变所有元素的背景色为 #00FF33"

  • 匹配选择器
 $("span,#two").css("background","#3399FF");

改变所有的 <span>元素和 id 为 two 的元素的背景色为 #3399FF"。注意，多个选择器并列使用时中间用逗号隔开。

JQuery的层次选择器
  • 改变 <body> 内所有 <div> 的背景色为 #0000FF"
   //祖先元素和后代元素的关系
   $("body div").css("background","#0000FF");
  • 改变 <body> 内子元素 <div> 的背景色为 #FF0033"
   //父元素和子元素的关系
   $("body>div").css("background","#FF0033");
  • 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"
   $("#one+div").css("background","#0000FF");
  • 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF"
   //获取指定元素的后面所有兄弟元素
   $("#two~div").css("background","#0000FF");
  • 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF"
   //获取指定元素的所有兄弟元素
  $("#two").siblings("div").css("background","#0000FF");
JQuery的基础过滤选择器
  • 改变第一个 div 元素的背景色为 #0000FF"
 $("div:first").css("background","#0000FF");
  • 改变最后一个 div 元素的背景色为 #0000FF"
 $("div:last").css("background","#0000FF");
  • 改变class不为 one 的所有 div 元素的背景色为 #0000FF"
 $("div:not(.one)").css("background","#0000FF");
  • 改变索引值为偶数的 div 元素的背景色为 #0000FF"
  $("div:even").css("background","#0000FF");
  • 改变索引值为奇数的 div 元素的背景色为 #0000FF"
 $("div:odd").css("background","#0000FF");
  • 改变索引值为大于 3 的 div 元素的背景色为 #0000FF"
 $("div:gt(3)").css("background","#0000FF");
  • 改变索引值为等于 3 的 div 元素的背景色为 #0000FF"
   $("div:eq(3)").css("background","#0000FF");
  • 改变索引值为小于 3 的 div 元素的背景色为 #0000FF"
 $("div:lt(3)").css("background","#0000FF");
  • 改变所有的标题元素的背景色为 #0000FF"
 $(":header").css("background","#0000FF");
JQuery的属性过滤器
  • 含有属性title 的div元素"
 $("div[title]").css("background","#0000FF");
  • 属性title值等于test的div元素"
 $("div[title=test]").css("background","#0000FF");
  • 属性title值不等于test的div元素(没有属性title的也将被选中)"
  $("div[title!=test]").css("background","#0000FF");
  • 属性title值 以te开始 的div元素."
 $("div[title^=te]").css("background","#0000FF");
  • 属性title值 以est结束 的div元素…"
 $("div[title$=est]").css("background","#0000FF");
  • 属性title值 含有es的div元素."
  $("div[title*=es]").css("background","#0000FF");
  • 选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素"
//多个属性过滤选择器并列使用，就这样并列放置就OK
      $("div[id][title*=es]").css("background","#0000FF");
weixin_45846139
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery选择器思维导图
12-28
通过思维导图对知识进行梳理，以便记忆
初学遇到了小问题关于jquery的
diehuwen5636的博客
09-12 328
今天在网上遇到了几道题 随手一做才知道 还是没学懂，，真的是。。。。 在此我订正一下 : 1.jquery的简写是？ 您的回答：? 符号 正确答案：$符号。 解析： 这里我上网搜了一下，嗯 点开后确实都是 $()形式的代码 emmm 好吧强记下。 2.通过 jQuery，选择器 $("div"...
给div元素设置背景颜色
qq_37499398的博客
05-03 8223
Give a Background Color to a Div Element你可以用 background-color 属性来设置一个元素的背景颜色。例如，如果你想把一个元素的背景颜色设置为green，你应该把这些加到你的 style 元素中：.green-background {  background-color: green;}创建一个叫做 gray-background 的类选择器，设...
jquery效果
风火一回，一生不毁
09-18 562
1.显示和隐藏 hide():隐藏元素 show():显示元素 toggle():显示被隐藏的匹配元素，并隐藏匹配的显示着的元素 hide([speed],[callback]):按照speed速度隐藏元素，speed可以为slow、fast或毫秒,callback为当隐藏完成后所执行的函数。 show([speed],[callback]):按照speed速度显示元素 toggle(
jq更改子元素文本_jQuery子元素的更改属性
weixin_34565946的博客
12-24 778
I have this code, and I want on click on div with favoriteButton class, text in current (this) and src of current img tag to be changed.Changing text in work fine but image not work.I try to put an...
jquery选择器简述
11-24
jQuery选择器使得获得页面元素变得更加容易、更加灵活，从而大大减轻了开发人员的压力。如同盖楼一样，没有砖瓦，就盖不起楼房，得不到元素谈何其他各种操作呢？可见,jQuery选择器的重要性。 jquery选择器大方向可以...
jQuery 选择器
01-19
jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”...
常用jQuery选择器汇总
12-08
学习【js DOM 编程艺术】，最后面有许多jQuery的选择器，每个都动手敲了一遍。 jQuery 提供了高级选择器的方法。 j s获取元素的三个基本方法分别是通过标签名，类名和id，即(getElementsByTagName, ...
jQuery选择器之基本选择器
07-29 828
基本选择器： 基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用). 1.#id     用法: $(”#myDiv”);    返回值  单个元素的组成的集合(表示只有一个元素) 说明：这个就是直接选择html中的id="myDiv"的元素
Jquery基础_点击按钮使div背景变色_根据class_根据标签_所有都变色_一直动画_实例（二）
有 prepare , No out
07-18 3461
1 点击id为btn1的按钮，则id为one的div的样式 背景变为 特殊的绿色 $('#btn1').click(function(){ $('#one').css("background","#bfa"); }); 2  使得id为btn2的按钮点击，则类为mini的div 背景色全变为特殊绿色 //选择 class 为 mini 的所有元素 $('
17.jQuery
子衿
04-14 241
# jQuery基础 jQuery是一个非常优秀的JavaScript框架 通用功能实现完毕,编写自己的特殊功能 jQuery特点: * 支持CSS3技术 * 实现浏览器兼容性,跨域浏览器. 从2.0版本开始,不在支持IE678 * 代码越小越少,功能越多越好 * AJAX异步请求 ## 基础语法 ```javascript <script type="text/j...
JavaWeb学习总结：JQuery
怪咖的博客
09-02 312
JQuery基础 一，概念 一个JavaScript框架。简化JS开发 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScrip...
jquery获取checkbox选中的值_Web前端开发(10)——JQuery选择器
weixin_39924674的博客
12-01 301
JQuery选择器基本选择器①id选择器语法：$("#id的属性值") 获得与指定id属性值匹配的元素。比如：改变id为one的元素的背景色为红色：$("#one").css("backgroundColor","pink");②标签选择器(元素选择器)语法：$("html标签名") 获得所有匹配标签名称的元素。比如：改变元素名为的所有元素的背景色为红色：$("div").css("ba...
使用jquery修改div元素的背景色
Ceremony_feeling的博客
10-27 351
使用jquery修改div元素的背景色 要求: 随意颜色,点击DIV即修改 代码 <div id="div02">我是div</div> $("#div02").on('click',function(){ $(this).css("background","red"); }); ...
jquery 点击元素实现背景色改变，点击元素以外任意地方还原该元素背景色
热门推荐
感恩、奋进、自信
07-20 1万+
jquery 点击元素实现背景色改变，点击元素以外任意地方还原该元素背景色 html代码如下： ssssds div{ width: 300px; height: 300px; border:3px red solid; } jquery代码如下： $(function(){ $("div").click(
JQuery修改div元素的背景色
weixin_45747067的博客
10-27 351
jquery代码完成单击背景换色 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.3.1.js"></script> &...
jQuery基础入门（选择器，常用事件，基础动画，Ajax）
qq_45596525的博客
01-04 225
文章目录前言一、jQuery是什么？二、基本语法三、选择器1.各类选择器的使用2.示例四、常用事件1.常用事件罗列2.解决名称冲突五、基础动画1.显示与隐藏2.淡入淡出3.自定义动画六、Ajax1.JQ原生版2.$.get / $.post参考资料 前言 2021第一更 提示：以下是本篇文章正文内容，下面案例可供参考 一、jQuery是什么？ jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性：???? HTML 元素选取 HTML 元素操作 CSS 操作 HTML
jquery选择器
最新发布
06-01
jQuery选择器是一个功能强大的工具，用于选择HTML元素并对其进行操作。jQuery提供了多种选择器方法，以下是其中的一些： 1. ID选择器： 使用“#”符号，后跟ID名称，如下所示： ``` $("#myId") ``` 2. 类选择器...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值