前端基础 -JQuery之 属性过滤选择器
2023-09-11 14:15:41 时间
JQuery之属性过滤选择器
关键字:
- [属性]
- [属性=属性值]
效果图:
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>06-属性选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function() {
$("#btn1").click(function() {
$("div[title]").css("background-color", "yellow");
})
$("#btn2").click(function() {
$("div[title=test]").css("background-color", "yellow");
})
});
</script>
<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" />
<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>
</body>
</html>
相关文章
- jQuery验证控件jquery.validate.js使用说明+中文API
- jQuery Event.delegateTarget 属性详解
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)
- jquery $.proxy使用 Jquery实现ready()的源码
- jquery 获取下拉框 某个text='xxx'的option的属性 非选中 如何获得select被选中option的value和text和......
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
- 【Jquery】jQuery获取URL參数的两种方法
- JQUERY学习(壹)
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的使用方法总结
- Jquery配合Asp.Net无刷新删除指定服务器上的文件!
- 猴子也能学会的jQuery第八期——jQuery属性操作
- [转]jQuery EasyUI自定义DataGrid的Editor
- jquery文档操作
- Web前端JQuery面试题(一)
- 移动端开发:使用jQuery Mobile还是Zepto
- 《jQuery Cookbook中文版》——1.14 获取、设置和删除DOM元素属性
- jquery 通过attr获取属性只有一个值的解决
- Jquery_jquery中attr和prop的区别
- JQuery学习---JQuery基础知识
- 不定义JQuery插件,不要说会JQuery[转载]
- Jquery 行选中背景色
- 使用jquery操作元素的css样式(获取、修改等等)