jQuery 选择具有特殊属性的元素
如今有这样一种需求,须要选出全部有背景图片的元素.
这个问题有点棘手.我们无法使用选择表达式来完毕这个问题了.
使用jQuery的DOM过滤方法filter(),能够依据函数中表达的不论什么条件选择元素.
jQuery中的过滤器方法同意传递一个字符串(也就是选择器表达式)作为參数.
或者传递的是一个函数.它的返回值将定义某个元素是否被选中.
传递的函数将对当前选择集中的每一个元素执行.
当函数返回假时,相应的函数就从选择集中被删除掉.每当返回值为真的时候,相应的元素
不受影响.
jQuery('*').filter(function(){
return !!jQuery(this).css('background');
});
上述代码选择全部具有背景图片的元素.
初始集合是全部元素(*).然后以一个函数为參数调用filter().
这个函数在每一个集合上进行是否有属性background属性的推断,
假设有,则保留.否则,则在结果集中删除这个元素.
你所示!! 是javascript中间不论什么undefined ,空类型,当然还有false.
假设函数调用返回的是这些值,那么函数返回false,从而在集合中删除
没有background属性的元素.
实际上,!!并非必要的.由于jQuery将把这些返回值转化为Boolean类型.可是保留仍然是一个好的主意.
这样不论什么人看到你的代码的时候,都能绝对肯定你的意图.(这有助于代码的可读性).
在传递个filter()的函数中,能够通过thiskeyword引用当前元素.
将它包括在jQuery函数中就变成了一个jQuery对象了.
this //常规的元素对象.
jQuery(this) //jQuery对象.
以下是激发你想象力的一些样例.
jQuery('div').filter(function(){
var width = jQuery(this).width;
return width >100 && widht < 200;
});
//返回子元素有10个或者20个的元素.
jQuery('*').filter(function(){
var children = jQuery(this).childern().length;
return children ===10 || children ===20;
});
以下是一个代码样例:推断有背景颜色的元素。并将它们的背景颜色全部改为黑色。
<html>
<head>
<title></title>
<style type="text/css">
.c1{
background-color: yellow;
}
.c2{
background-color: green;
}
p{
background-color: pink;
}
h3{
background-color: gray;
}
</style>
</head>
<body>
<div class="c1">Bye Bye Beautiful</div>
<div class="c2">Nothing but the girl</div>
<p>The Lazy song</p>
<h2>If I die young</h2>
<h3>New soul</h3>
<script type="text/javascript" src="jquery.2.0.3.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var ret = $('*').filter(function(index) {
return !$(this).css('background-color');
});
$.each(ret, function(index, val) {
$(val).css('background-color','black');
});
});
</script>
</body>
</html>
Best Wishes.
jQuery 选择具有特殊属性的元素的更多相关文章
- jquery选择器之获取父级元素、同级元素、子元素
一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 二.获取同级元素: 1.next([expr]): 获取指定元素的下一个同级元素 2.nextAll([expr]) ...
- JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)
JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...
- JQUERY 选择
jQuery 选择器 jQuery 采用 CSS 一个选择选择 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取 ...
- jQuery选择元素的方法大全
jQuery选择器其实是一个有些地方比较费解的,如果没有经过多次实验的话,很难得出它的每个操作符到底是干什么的,很容易出错,经过 我的多次测试,终于对一些比较难理解或容易出错的选择操作进行总结,既方便 ...
- jQuery——选择元素
###理解DOM jQuery最强大的特性之一就是能够简化在DOM中选择元素的任务.**DOM(文档对象模型)**充当了JavaScript与网页之间的接口,它以对象网络而非纯文本的形式来表现HTML ...
- jquery属性选择器(匹配具有指定属性的元素)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 查找带有某一属性的元素
$('*[name="username"]') 要在前面加个*表示所有的DOM,如果只是查找带有name属性的DOM的话则是这样的 $('*[name]')//其实, $('[ ...
- jQuery选择:子代元素与后代元素的区别
(1)后代元素:html代码如下,那么在jquery选择时,$(".test img"),中间为空格,则是选取后代元素,img对于ul来说是孙子辈元素,中间隔了li元素,所以后代元 ...
- jquery选择器之属性过滤选择器
<style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray } </style> ...
随机推荐
- iOS -- Effective Objective-C 阅读笔记 (7)
1: 实现 description 方法 NSlog 在输出自定义的类时, 只输出了 类名 和 对象的内存地址. 要想输出更为有用的信息也很简单, 只需要覆写 description 方法并将描述此对 ...
- 根据ip获取对应的省市区
public static String getAddressByIp(String ip) { String resout = ""; try { if (isInner(ip) ...
- python基础之常用关键字总结
前言 到python3.6为止,python内置的关键字有33个,比python2.7的版本多了2个.下面总结一下python3的关键字的使用. python内置关键字 解释器在加载上下文的时候,如果 ...
- figlet
figlet https://aotu.io/notes/2016/11/22/figlet/ 教程 npm i figlet --save-dev var figlet = require('fi ...
- SSH项目需要的所有架包
原地址:https://blog.csdn.net/qq_35816104/article/details/54346182 SSH框架:struts2 hibernate spring 该三大框 ...
- P4147 玉蟾宫 二维DP 悬线法
题目背景 有一天,小猫rainbow和freda来到了湘西张家界的天门山玉蟾宫,玉蟾宫宫主蓝兔盛情地款待了它们,并赐予它们一片土地. 题目描述 这片土地被分成N*M个格子,每个格子里写着'R'或者'F ...
- 20172328 2018-2019《Java软件结构与数据结构》第六周学习总结
20172328 2018-2019<Java软件结构与数据结构>第六周学习总结 概述 Generalization 本周学习了第十章:非线性集合与数据结构--树.主要讨论了树的使用和实现 ...
- java日志规约及配置示例终极总结
目录 什么是日志 常用日志框架 日志级别详解 日志的记录时机 日志使用规约 logback 配置示例 loh4j2 配置示例 什么是日志? 简单的说,日志就是记录程序的运行轨迹,方便查找关键信息,也方 ...
- Linux 下执行本目录的可执行文件(命令)为什么需要在文件名前加“./”
一.PATH 是环境变量,里面保存了执行文件路径(通常会包含多个路径,各路径之间以冒号":"进行间隔).当执行一个可执行文件(命令)时,Linux 会优先到 PATH 环境变量中保 ...
- rhel配置网络yum源
redhat 7.2配置网易yum源 卸载原来的yum源和安装必须的rpm包 1)确保虚拟机能够连接外网 2)前往http://mirrors.163.com/centos/7/os/x86_64/P ...