jQuery中:has选择器用法实例


Posted in Javascript onDecember 30, 2014

本文实例讲述了jQuery中has选择器用法。分享给大家供大家参考。具体分析如下:

此选择器匹配含有选择器所匹配的元素的元素。

语法结构:

$(":has(selector)")

关于此选择器的定义可能有点拗口,通俗的讲就是如果一个元素含有selector(选择器)所匹配的元素,那么此元素将被匹配。例如:
$("div:has(p)")

以上选择器将匹配含有p元素的div元素。
此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等。例如:
$("div:has(p)").css("color","blue")

以上代码将含有p元素的div元素中的字体颜色设置为蓝色。
如果不和其他选择器配合使用,则默认状态是和*选择器配合使用,例如$(":has")等同于$("*:has")。

参数列表:

参数 描述
selector 一个用于筛选的选择器。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

div 

{

  border:1px solid green;

  height:50px;

}

span{border:1px solid blue;}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("div:has(span)").css("border","1px solid red") 

  }) 

}) 

</script>

</head>

<body>

<div>我不含span</div>

<div> <span>我是span</span></div>

<button>点击查看效果</button>

</body>

</html>

以上代码能够将包含span元素的div的边框颜色设置为红色。

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

div 

{

  border:1px solid green;

  height:50px;

}

span{border:1px solid blue;}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("*:has(span)").css("border","1px solid red") 

  }) 

}) 

</script>

</head>

<body>

<div>我不含span</div>

<div><span>我是span</span></div>

<p><span>我是span</span></p>

<button>点击查看效果</button>

</body>

</html>

由于以上代码并没有指定与:has选择器相配合使用的选择器,所以就默认和*选择器配合使用,所以能够以上代码能够将所有含所有span元素的元素的边框颜色设置为红色。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
vue中nextTick用法实例
Sep 11 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
Vue详细的入门笔记
May 10 Vue.js
jQuery中:empty选择器用法实例
Dec 30 #Javascript
jQuery中:contains选择器用法实例
Dec 30 #Javascript
解决ueditor jquery javascript 取值问题
Dec 30 #Javascript
jQuery中:focus选择器用法实例
Dec 30 #Javascript
JavaScript中的原型链prototype介绍
Dec 30 #Javascript
jQuery中:not选择器用法实例
Dec 30 #Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 #Javascript
You might like
小偷PHP+Html+缓存
2006/11/25 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
PDO::quote讲解
2019/01/29 PHP
详解php命令注入攻击
2019/04/06 PHP
jQuery检查事件是否触发的方法
2015/06/26 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
Python3匿名函数用法示例
2018/07/25 Python
python numpy实现rolling滚动案例
2020/06/08 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
Python如何绘制日历图和热力图
2020/08/07 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
中专自荐信
2013/10/13 职场文书
高中毕业自我鉴定
2013/12/19 职场文书
审计工作个人的自我评价
2013/12/25 职场文书
教师个人剖析材料
2014/02/05 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
礼仪培训心得体会
2016/01/22 职场文书
Redis读写分离搭建的完整步骤
2021/09/14 Redis