007 jquery过滤选择器-----------（屬性过滤选择器）
1.介紹
2.程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
//选取含有 属性title 的div元素.
$("#btn1").click(function(){
$("div[title]").css("background","#abf");
});
//选取 属性title值等于'test'的div元素.
$("#btn2").click(function(){
$("div[title='test']").css("background","#fab");
});
//选取 属性title值不等于'test'的div元素(没有属性title的也将被选中).
$("#btn3").click(function(){
$("div[title!='test']").css("background","#ffa");
});
//选取 属性title值 以'te'开始 的div元素
$("#btn4").click(function(){
$("div[title^='te']").css("background","#ffc");
});
//选取 属性title值 以'est'结束 的div元素
$("#btn5").click(function(){
$("div[title$='est']").css("background","#ffc");
});
//选取 属性title值 含有'es'的div元素.
$("#btn6").click(function(){
$("div[title*='es']").css("background","#ffa");
});
//组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
$("#btn7").click(function(){
$("div[id][title*='es']").css("background","#ffa");
});
//选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
$("#btn8").click(function(){
$("div[title][title!='test']").css("background","#ffa");
});
})
</script>
</head>
<body>
<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'的 div 元素." id="btn7" />
<input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" /> <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" value="123456789"
size="8">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
007 jquery过滤选择器-----------（屬性过滤选择器）的更多相关文章
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...
- jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器
$()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...
- jQuery总结01_jq的基本概念+选择器
jQuery基本概念 学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常见的效果. 为什么要学习jQuery? [01-让div显示与设置内容.html] 使 ...
- jquery学习（3）--高级选择器
自己手写的学习笔记.常规选择器: /****************学习--高级选择器(1)****************/---高级选择器:ie7+ 层次选择器: 后代选择器 ul li ...
- jQuery学习笔记（简介，选择器）
jQuery优势 1. 强大的选择器.jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器. 2. 出色的DOM操作封装 3. 可靠的事件处理机制 ...
- JQuery（一）---- JQ的选择器，属性，节点，样式，函数等操作详解
JQuery的基本概念 JQuery是一个javascript库,JQuery凭借着简洁的语法和跨平台的兼容性,极大的简化了js操作DOM.处理事件.执行动画等操作.JQuery强调的理念是:'wri ...
- jquery总结01-基本概念和选择器
dom元素和jquery元素的区别 dom元素支持dom元素自带的属性和方法,jquery元素支持jquery元素自带的属性和方法 dom var div = doc ...
- 基于jQuery带备忘录功能的日期选择器
今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safa ...
随机推荐
- 借读：分布式锁和双写Redis
本帖最后由 howtodown 于 2016-10-3 16:01 编辑问题导读1.为什么会产生分布式锁?2.使用分布式锁的方法有哪些?3.本文创造的分布式锁的双写Redis框架都包含哪些内容? ...
- linux c 编程 ------ 获取时间，计算程序执行时间
#include <time.h> #include <stdio.h> #include <unistd.h> int main(int argc, char a ...
- Kubernetes 部署 1.9.7 高可用版
转载于https://codegreen.cn/2018/08/30/kubernetes-cluster-1.9.7/ 前言 在部署之前,首先感谢 手动搭建高可用的kubernetes 集群 博文的 ...
- 函数和常用模块【day06】：模块特殊变量（十四）
from test import test ''' __mame__ # 当前文件为主文件是等于__main__.用于调用时不执行一些命令 __file__ # 当前文件的路径,相对路径 __cach ...
- Vue单页面应用阻止浏览器记住密码
Vue单页面应用阻止浏览器记住密码 ——IT唐伯虎 摘要: Vue单页面应用阻止浏览器记住密码. 现象1:路由切换时再次提示“是否记住密码” 登录页面有个密码输入框,输入账号密码进行登录: 登录完成后 ...
- SpringJMS解析--使用示例
Spring配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="h ...
- js拾遗: replace 替换参数
先来看一个简单的例子吧. var str = "123X321".replace("X", "$'"); 替换后的 str 是什么呢?是 & ...
- Yii 自定义模型路径
例如现有两个 Yii 项目,分别是 test1 和 test2.在 test1 中,已经有模型了,test2 直接调用 test1 中的模型,其实添加个别名,然后修改下配置即可. 先在 index.p ...
- TED_Topic8：How to control someone else's arm with your brain
By Greg Gage (Neuroscientist) Greg Gage is on a mission to make brain science accessible to all. In ...
- 20155339 2016-2017-2 《Java程序设计》第5周学习总结
20155339 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 使用try.catch 使用try.catch语法,JVM会先尝试执行try区块中的代码,如 ...