6月14号学习jquery(选择器)

最新推荐文章于 2024-08-18 10:54:05 发布
最新推荐文章于 2024-08-18 10:54:05 发布
阅读量116 收藏
点赞数
分类专栏： 前端技术 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xjwolaile/article/details/84443080
版权
今天的学习

1、:contains(text) 


<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 

$(document).ready(function(){
    $("p:contains(is)").css("background-color","#B2E0FF");
});

</script>	

</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>


</body>
</html>



$("p:contains(is)")所有包含 "is" 的 <p> 元素的将背景颜色换成#B2E0FF

2、:empty 


<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 

$(document).ready(function(){
    $(":empty").css("background-color","#B2E0FF");
});

</script>	

</head>
<body>
<html>
<body>
<h1>Welcome to My Web Page</h1>

<table>
<tr>
<th>Id</th>
<th>LastName</th>
<th>FirstName</th>
<th>Address</th>
<th>City</th>
</tr>

<tr>
<td>1</td>
<td></td>
<td>John</td>
<td>Oxford Street</td>
<td></td>
</tr>

<tr>
<td>2</td>
<td>Bush</td>
<td>George</td>
<td></td>
<td>New York</td>
</tr>

<tr>
<td>3</td>
<td>Carter</td>
<td>Thomas</td>
<td>Changan Street</td>
<td>Beijing</td>
</tr>

<tr>
<td>4</td>
<td>Obama</td>
<td></td>
<td>Pennsylvania Avenue</td>
<td>Washington</td>
</tr>

</table>

</body>
</html>


</body>
</html>



$(":empty")选择每个空元素就是<td></td>里面没有任何的内容找到这些元素在把他们的背景颜色换成#B2E0FF

3、:visible 


<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 

$(document).ready(function(){
    $("body :visible").css("background-color","#B2E0FF");
});

</script>	

</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>


</body>
</html>


$("body :visible")找到 <body> 元素中每个可见的元素并将他们的背景颜色换成#B2E0FF

4、[attribute] 


<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 

$(document).ready(function(){
    $("[id]").css("background-color","#B2E0FF");
});

</script>	

</head>
<body>
<html>
<body>
<h1 id="main_header">Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<h3 id="sub_header">My uncle is Scrooge</h3>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>


</body>
</html>



$("[id]")找到带有 id 属性的所有元素将他们的背景颜色换成#B2E0FF

5、[attribute=value] 


<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 

$(document).ready(function(){
    $("[id=choose]").css("background-color","#B2E0FF");
});

</script>	

</head>
<body>
<html>
<body>
<h1 id="main_header">Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<h3 id="sub_header">My uncle is Scrooge</h3>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>


</body>
</html>



$("[id=choose]")找到所有 id="choose" 的元素将他们的背景颜色换成#B2E0FF

6、[attribute!=value] 


<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 

$(document).ready(function(){
    $("body [id!=main_header]").css("background-color","#B2E0FF");
});

</script>	

</head>
<body>
<html>
<body>
<h1 id="main_header">Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<h3 id="sub_header">My uncle is Scrooge</h3>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>


</body>
</html>



$("body [id!=main_header]")找到（<body> 标签中）不包含 id="main_header" 的元素将背景颜色换成#B2E0FF

7、[attribute$=value] 


<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 

$(document).ready(function(){
    $("[id$=header]").css("background-color","#B2E0FF");
});

</script>	

</head>
<body>
<html>
<body>
<h1 id="main_header">Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<h3 id="sub_header">My uncle is Scrooge</h3>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>


</body>
</html>



$("[id$=header]")找到所有带有 id 属性且属性值以 "header" 结尾的元素将背景颜色换成#B2E0FF
xjwolaile
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实例，jquery基本选择器
adsdsasada的博客
11-30 116
正则表达式 符号 描述 /…/ 代表一个模式的开始和结束 ^ 匹配字符串的开始 $ 匹配字符串的结束 \s 任何空白字符 \S 任何非空白字符 \d 匹配一个数字字符，等价于**[0-9]** \D 除了数字之外的任何字符，等价于**[^0-9]** \w 匹配一个数字、下划线或字母字符，等价于**[A-Za-z0-9_]** \W 任何非单字字符，等价于**[^a-zA-z0-9_]** . 除了换行符之外的任意字符 符号 描述 {n
jQuery大于号()选择器的作用解释
12-10
总结一下，jQuery中的大于号（>`）选择器的主要功能有以下几点： 1. **精准定位**：它只选取父元素的直接子元素，而不是所有后代元素。 2. **提高效率**：减少了选择元素时的遍历范围，提高了代码执行效率。 3. **...
jquery 属性选择器用法
ling811的专栏
12-20 683
无标题文档 $(document).ready(function(){ $("[id]").css("color","blue"); }) 实验element 这是个带class的p1 p标签2 p标签3 h3 这是个div li1 li2 li3 效果图： 无标题文档 $(function(){ $("body [id!=main
jQuery选择器
iteye_8010的博客
04-22 125
基本选择器 基本选择器:#id, .class,element ,*, selector1,selector2....,selectoN #id  根据id匹配一个元素   $("#choose").css("background-color","#B2E0FF"); //选取id为 choose的元素背景颜色  .class 根据给定的类名匹配元素  遍历css元素   $("...
jquery eq
y670340559的博客
12-15 435
2种方式： $("th").eq(0).width(200); $("th:eq(0)").css("background-color","#B2E0FF");
jQuery实现日期选择器
一个前端工作者的博客
03-31 1550
日期选择器
CSS选择器和jQuery选择器学习总结
weixin_30545285的博客
10-10 164
一、CSS3选择器 　　1、CSS3基本选择器 类型 语法 功能描述 标签选择器 P{font-size:16px} 使用HTML中的标签作为相应的选择器的名称，直接设置页面中的标签样式 类选择器 .cl...
jQuery_01_选择器_事件
pre_eminent的JAVA学习园地
04-02 397
简介:jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。手册说明:认识jQuery：jQuery的字面意思其实就是JavaScript 和 查询（Query），即用于辅助开发JavaScript的库。jQuery是继prototype之后的又一个优质的Javascript库，属于开源编程语言。Query使用户可以更加方便地处理HTML（标准通...
jQuery（7月23号）
qq_59592117的博客
07-24 172
jQuery
jQuery的学习过程
m0_64351096的博客
09-21 601
jQuery
jQuery基本选择器和层次选择器学习使用
10-20
在Web开发中，使用...此外，通过示例代码的学习，开发者可以更好地掌握jQuery选择器的用法，并将其应用到自己的项目中去。希望这些知识能够对大家在学习和工作中有所帮助，并希望大家能够继续支持相关的学习资源。
JQuery 学习笔记 选择器之二
12-10
本篇学习笔记将深入探讨jQuery中的四种选择器：后代选择器、子元素选择器、相邻兄弟选择器和一般兄弟选择器。 1. **后代选择器（Descendant Selector）** 后代选择器，用空格分隔两个选择器，表示第一个选择器的...
JQuery 学习笔记 选择器之五
10-29
在本篇“JQuery 学习笔记 选择器之五”中，将重点探讨JQuery的属性选择器。 首先，我们来看看什么是属性选择器。在JQuery中，属性选择器是根据元素属性来查找元素的一种方式。属性选择器不仅可以选取具有特定属性的...
网上商品订单转手系统bootpf
最新发布
weixin_43213064的博客
08-18 331
【代码】springboot网上商品订单转手系统bootpf
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 343
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 990
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1151
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
【无标题】
weixin_42348009的博客
08-14 183
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值