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 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
jQuery AJAX回调函数this指向问题
Feb 08 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
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 simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
Python合并多个Excel数据的方法
2018/07/16 Python
详解python statistics模块及函数用法
2019/10/27 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
物流管理应届生求职信
2013/11/07 职场文书
品酒会策划方案
2014/05/26 职场文书
老龄工作先进事迹
2014/08/15 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
个人合作协议范本
2015/08/06 职场文书
社区结对共建协议书
2016/03/23 职场文书
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技