`

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

 
阅读更多
今天的学习

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
分享到：
| 6月13号学习（轮播效果）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery选择器全解.

    选择器按功能分为基础选择器、层次选择器、属性选择器、表单选择器、可见性选择器、位置选择器、子元素选择器、内容选择器、属性选择器、表单对象属性选择器以及过滤选择器。每类选择器都有其独特的应用场景，熟悉并...

    JQuery选择器测试 离线版

    这个“JQuery选择器测试 离线版”是一个专门用于检验和学习jQuery选择器功能的应用，由一位国外专家创建，并进行了轻微的修改。** 在jQuery中，选择器分为多种类型，包括基础选择器、类别选择器、ID选择器、属性...

    jQuery基础选择器练习题

    本篇文章将深入探讨jQuery的基础选择器及其在实际编程中的应用，以帮助你更好地理解和掌握这些知识点。 首先，我们来了解一下jQuery的基本选择器。它们是用于选取HTML元素的最基础工具，包括： 1. **ID选择器**: ...

    jquery选择器入门详解小案例

    在JavaScript的世界里，jQuery是一个非常流行且...在深入学习jQuery选择器的同时，别忘了结合实际项目进行练习，这样才能更好地将理论知识转化为实际技能。现在，你可以打开案例文件，开始你的jQuery选择器探索之旅吧！

    jQuery选择器.rar

    这个名为"jQuery选择器.rar"的压缩包文件显然包含了关于jQuery选择器的相关学习资源，可能包括示例代码、教程文档等。这些内容可能与《锋利的jQuery第二版》这本书中的章节相匹配，该书是jQuery学习的经典参考资料之...

    jquery周历选择器

    本项目“jquery周历选择器”利用jQuery的灵活性和易用性，构建了一个适用于混合应用程序（Hybrid App）的周历选择器组件。 1. **周历选择器设计**： - 周历选择器通常用于日程管理或时间规划应用，显示一周的日期...

    jQuery颜色选择器ColorPicker

    **jQuery颜色选择器ColorPicker详解** 在Web开发中，用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中，颜色选择器是一个常见的组件，它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...

    jQuery选择器的一个Bug

    然而，即便如此成熟的库，也难免存在一些已知的问题和限制，其中之一就是我们今天要探讨的"jQuery选择器的一个Bug"。 首先，我们要理解jQuery选择器的基本原理。jQuery基于CSS选择器，它允许开发者通过类似CSS的...

    jQuery选择器总结

    jQuery选择器总结，网上下载的，非原创的，仅供参考，学习学习。

    jQuery学习资料之万能的选择器

    【jQuery学习资料之万能的选择器】 jQuery是一个强大的JavaScript库，极大地简化了DOM操作、事件处理和动画制作。其中，选择器是jQuery的核心功能之一，它允许开发者高效地选取页面上的HTML元素，从而进行进一步的...

    基于jquery的H5移动端选择器，日期选择器，自定义级联选择器，自定义html选择器

    通常，这样的选择器会包含年、月、日的滑动选择或者下拉菜单，使得用户可以快速、准确地设定日期，避免手动输入可能带来的错误。 级联选择器（Cascading Selectors）则是一种允许用户从一系列相关选项中逐级选择的...

    jquery样式选择器插件源码demo

    jQuery支持多种类型的选择器，包括基本选择器（如ID选择器、类选择器、标签选择器）、属性选择器、伪类选择器以及组合选择器等。这些选择器可以灵活地帮助我们定位页面中的特定元素，进行操作和样式设置。 该插件的...

    jquery选择器速查表

    jquery选择器功能无比强大，用好了可以起到事半功倍的效果，这个资源把选择器单独列出来，便于方便查找

    Jquery实验室的选择器工具

    **jQuery选择器工具详解** jQuery库是JavaScript中最广泛使用的库之一，它简化了DOM操作、事件处理、动画制作以及Ajax交互。在这个“jQuery实验室的选择器工具...在实践中学习和探索，将使你成为jQuery选择器的专家。

    jquery日期选择器

    **jQuery日期选择器详解** 在Web开发中，用户界面的交互性和用户体验往往直接影响到网站的质量。日期选择器作为常见的交互元素之一，对于处理日期输入场景非常有用。"jQuery日期选择器"是这样一个轻量级且易用的...

    jquery基本选择器

    **jQuery基本选择器** jQuery库是JavaScript中最广泛使用的库之一，它简化了DOM操作、事件处理和动画制作。其中，选择器是jQuery的核心功能之一，它使得能够高效地选取页面中的HTML元素。以下是对jQuery基本选择器...

    城市选择器jquery

    jquery 城市选择器代码

    一个简单的jQuery时间选择器

    【标题】"一个简单的...总的来说，"一个简单的jQuery时间选择器"项目涵盖了前端开发中的多个核心概念，包括jQuery库的使用、插件开发、事件处理、样式设计以及响应式布局等，是学习和实践JavaScript开发的好素材。

    jquery双向选择器代码

    为了进一步学习和理解，你可以解压文件，查看其中的JavaScript代码，分析它是如何使用jQuery选择器进行双向操作的。此外，也可以查阅jQuery官方文档和在线教程，以获取更全面的知识和实践指导。 总的来说，掌握...

    jquery颜色选择器源码

    学习jQuery颜色选择器源码，我们可以深入理解以下知识点： 1. jQuery选择器和DOM操作：如何使用jQuery选择特定的HTML元素，如`.addClass()`, `.removeClass()`, `.val()`等方法来改变元素的样式和内容。 2. 事件...

Magicbox
Global site tag (gtag.js) - Google Analytics