Jquery | 基础 | 属性过滤选择器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script language="javascript" type="text/javascript" src="jquery-3.3.1.min.js"></script>
<title>使用jQuery 属性过滤选择器</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center
} div {
float: left;
border: solid 1px #ccc;
margin: 8px;
width: 65px;
height: 65px;
display: none
}
</style> <script type="text/javascript">
$(document).ready(function () {
$("#button1").click(function () { // 显示所有含有name 属性的元素
$("div[name]").show(1000); })
$("#button2").click(function(){
//显示所有属性title的值是"A"的元素
$("div[title='n']").show(1000);
})
$("#button3").click(function(){
//显示属性title的值不是"n"的元素
$("div[title!='n']").show(1000);
})
$("#button4").click(function(){
//显示所有属性title的值以"n"开始的元素
$("div[title^='n']").show(1000);
})
$("#button5").click(function(){
//显示所有属性title的值以"e"结束的元素
$("div[title$='e']").show(1000);
})
$("#button6").click(function(){
//显示所有属性title的值中含有"e"的元素
$("div[title*='e']").show(1000);
})
$("#button7").click(function(){
//显示所有属性title的值中含有"e",且属性id的值是"div2"的元素
$("div[id='div2'][title*='e']").show(1000);
})
})
</script>
</head> <body> <div id="div1" name="n1">hello</div>
<div title="n" name="n2">world</div>
<div id="div2" title="ne">good morning</div>
<div title="nef">good afternoon</div> <button id="button1">显示所有含有name 属性的元素</button>
<button id="button2">显示所有属性title的值是"A"的元素 </button>
<button id="button3">显示属性title的值不是"n"的元素</button>
<button id="button4">显示所有属性title的值以"n"开始的元素</button>
<button id="button5">显示所有属性title的值以"e"结束的元素</button>
<button id="button6">显示所有属性title的值中含有"e"的元素</button>
<button id="button7">显示所有属性title的值中含有"e",且属性id的值是"div2"的元素</button>
</body> </html>
Jquery | 基础 | 属性过滤选择器的更多相关文章
- jQuery之属性过滤选择器
转自:http://blog.csdn.net/woshisap/article/details/7341136 在HTML文档中,元素的开始标记中通常包含有多个属性(attribute), 在jQu ...
- 黑马day16 jquery&属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取对应的元素 .[attribute] 使用方法: $("div[id]") ; 返回值 集合元素 说明:匹配包括给定属性的元素.样 ...
- Jquery | 基础 | jQuery表单对象属性过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用jQuery表单对象属性 ...
- jQuery选择器之表单对象属性过滤选择器Demo
测试代码: 08-表单对象属性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- jQuery表单对象属性过滤选择器
jQuery表单对象属性过滤选择器 <div id="p1" attr="p1"> <input type="text" ...
- 【转】jQuery属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素. [attribute] 选取用次属性的元素 [attribute=value] 选取属性值为value的元素 [attribute ...
- 009 jquery过滤选择器-----------（表单对象属性过滤选择器 与 表单选择器）
1.表单对象属性选择器 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- Jquery | 基础 | 使用 jQuery 表单过滤选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
随机推荐
- openwrt - squashfs-sysupgrade.bin 的生成过程
squashfs-sysupgrade.bin 生成过程图 路径变量 $(KERNEL_BUILD_DIR)="/home/sam/Projects/openwrt-mt7620n/buil ...
- UISegmentedControl方法与属性的总结
SegmentedControl又被称作分段控制器,是IOS开发中经常用到的一个UI控件. 初始化方法:传入的数组可以是字符串也可以是UIImage对象的图片数组 - (instancetype)in ...
- p1697食物链
动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A.现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底是哪一种.有人用两种说法 ...
- 关于苹果iPhone手机对页面margin属性无效的解决方法一（如有错误，请留言批评）
这个问题,是在给商城网站底部footer设置margin属性的时候发现的,先把出现问题的截图发出来看一下 安卓手机,打开正常 iphone6 p 打开出现的问题(无视margin-bottom:6 ...
- 如何去掉idea里mybatis的.xml文件 sql 语句背景色
点击有背景的地方 Alt+Enter选择 un-inject Language/refence 即可去掉
- linux初级学习笔记十：linux grep及正则表达式！(视频序号：04_4)
本节学习的命令:grep 本节学习的技能: grep对文本的匹配 正则表达式的使用 知识点十:grep及正则表达式(4_4) grep,egrep,fgrep: grep: 根据模式搜索文本,并将符合 ...
- let 命令 与 var的区别
ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. <script> { let a = 10; var b = 1; } ...
- iOS--控制器加载自定义view的xib
我们在项目中,经常需要使用到自定义的view,而xib布局显得更为简洁,那么如何加载一个自定义的xib呢,网上的方法也很多很多,就是因为太多了,我经常会弄混,所以总结其中一个使用,如果以后使用到其他的 ...
- 【Java】DateUtil（2）
import java.sql.Timestamp; import java.text.ParseException; import java.text.SimpleDateFormat; impor ...
- wukong引擎源码分析之索引——part 1 倒排列表本质是有序数组存储
searcher.IndexDocument(0, types.DocumentIndexData{Content: "此次百度收购将成中国互联网最大并购"}) engine.go ...