<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="js/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(document).ready(function(){
//选取含有 属性title 的div元素.
$('#btn1').click(function(){
$('div[title]').css("background","#bbffaa");
})
//选取 属性title值等于 test 的div元素.
$('#btn2').click(function(){
$('div[title=test]').css("background","#bbffaa");
})
//选取 属性title值不等于 test 的div元素.
$('#btn3').click(function(){
$('div[title!=test]').css("background","#bbffaa");
})
//选取 属性title值 以 te 开始 的div元素.
$('#btn4').click(function(){
$('div[title^=te]').css("background","#bbffaa");
})
//选取 属性title值 以 est 结束 的div元素.
$('#btn5').click(function(){
$("div[title$=est]").css("background","#bbffaa");
})
//选取 属性title值 含有 es 的div元素.
$('#btn6').click(function(){
$("div[title*=es]").css("background","#bbffaa");
})
//组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.
$('#btn7').click(function(){
$("div[id][title*=es]").css("background","#bbffaa");
})
});
</script>
</head>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/>
<label for="isreset">点击下列按钮时先自动重置页面</label>
<h3> 属性选择器.</h3>
<input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
<input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>
<input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/>
<input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/>
<input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/>
<input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/>
<br />
<br />
<div class="one" id="one" > id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" > id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div> 包含input的type为"hidden"的div
<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
效果图：
相关推荐
选择器分为基本选择器、层次选择器、属性选择器、类选择器和ID选择器等多种类型。在表单对象中，我们经常需要根据特定属性来筛选元素，这时属性过滤选择器就显得尤为重要。 二、属性过滤选择器 属性过滤选择器是...
"jq时间选择器"是指利用jQuery实现的一个功能，允许用户在网页上方便地选取日期或时间。这个功能在网页表单、日程安排、预订系统等场景中非常常见。 jQuery时间选择器通常基于插件实现，例如jQuery UI中的...
一个针对jQuery属性选择器的小例子,增加对jQUery属性选择器的理解: 代码如下: <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> [removed][removed] <style type=”...
从给定的文件信息来看，该段代码展示了一个基于jQuery的网页示例，用于实现一个商品属性选择器，主要用于电商网站中的商品规格选择，如尺寸、颜色和价格区间。下面将详细解析这段代码中涉及的关键知识点，以及如何...
- 考虑到无障碍性，确保周历选择器能够被屏幕阅读器正确读取，使用ARIA属性和合理的HTML结构，以帮助残障用户使用。 9. **测试与兼容性**： - 对于这样的组件，进行全面的浏览器兼容性测试是必要的，确保在主流...
在jQuery中，选择器分为多种类型，包括基本选择器、层次选择器、过滤器选择器以及内容和属性过滤器。下面我们将详细探讨这些选择器的用法和实例。 1. **基本选择器**： - `#id`：通过ID选择器选取具有特定ID的元素...
属性选择器允许根据元素的属性来选择元素，如`[attr]`、`[attr=value]`、`[attr^=value]`等。例如： ```javascript input[type="text"]. // 选取所有type属性为"text"的元素 a[href$=".com"] // 选取href属性以"....
在网页开发中，jQuery日期时间选择器是一种常用的交互组件，它允许用户方便地选择日期和时间，提升用户体验。本文将详细介绍基于Bootstrap 3的jQuery日期时间选择器，并提供相关知识点。 Bootstrap是Twitter推出的...
4. **属性选择器** - `[attribute]`：选择具有指定属性的元素，如`$("[href]")`。 - `[attribute=value]`：选择属性值为特定值的元素，如`$("[href='https://example.com']")`。 - `[attribute^=value]`：选择...
如果选择器匹配多个元素，`attr()`将对每个元素执行相同的操作。例如： ```javascript $("img").attr("alt", function(index, currentValue) { return "图片" + (index + 1); }); ``` 这会为所有`<img>`标签...
jQuery中的内容选择器如`:has()`和`:empty`允许我们根据元素包含的内容进行选择，而属性选择器如`$("[attribute=value]")`则让我们能根据HTML属性选取元素。 最后，表单选择器如`:$(":input")`选取所有输入元素，`:...
本文实例讲述了jQuery中复合属性选择器用法。分享给大家供大家参考。具体分析如下： 此选择器能够匹配同时满足多个属性条件的元素。 语法结构: 代码如下:[selector1][selector2][selectorN] 参数列表: 参数 ...
【标题】"一个简单的jQuery时间选择器" 描述了如何使用jQuery库来创建一个用户友好的时间选择界面。在Web开发中，特别是涉及到用户输入时间的场景，如预订、会议安排等，拥有一个直观易用的时间选择器可以极大提升...
在本示例中，我们将详细探讨`element[attribute*='value']`这一属性选择器，以及与之相关的其他几个选择器。 首先，`element[attribute*='value']`是jQuery中的一种属性选择器，它用于选取具有指定属性，并且该属性...
在本作业"Homework20171121_jq属性设置1"中，我们需要使用jQuery库来实现一个功能，即动态地修改HTML中div元素的任意属性，并且能够根据用户交互改变样式。这个任务涉及到jQuery的选择器、属性操作、事件绑定以及DOM...
为了使日期选择器更好地融入到页面设计中，开发者可以自定义其样式，修改CSS文件中的颜色、字体、边框等属性。此外，还可以通过JavaScript编程接口（API）来控制日期选择器的行为，例如监听选择事件，获取用户选定的...
属性选择器允许我们根据元素的特定属性来选取元素。例如： ```javascript $("[href]"); // 选择所有具有 href 属性的元素 $("[data-*]"); // 选择所有具有 data- 开头的自定义数据属性的元素 $("[type='checkbox']...
通过选择器（如ID、类名或属性选择器）选取元素后，我们可以调用一系列的方法来获取或修改它们的内容和属性。 ### 获取内容 1. **`text()`**: 使用`text()`方法可以获取元素的文本内容，不包括子元素的文本。如果...
**级联选择器（Cascader）在JavaScript中的应用** 级联选择器，通常被称为级联下拉框或树形下拉菜单，是一种常见的用户界面元素，尤其在数据层次结构复杂的情况下，它允许用户逐级浏览和选择数据。在JavaScript开发...