jQuery中has()方法用法实例


Posted in Javascript onJanuary 06, 2015

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

此方法保留包含特定后代的匹配元素。
.has()方法将会从原始的jQuery对象中重新创建一组匹配的对象。
方法通过删选参数将会遍历原先对象的后代,含有匹配后代的对象将得以保留。

语法结构一:

$(selector).has(expr)

参数列表:

参数 描述
expr 字符串选择器。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

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

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

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("li").has("span").css("color","green") 

}) 

</script>

</head>

<body>

<div>

  <ul>

    <li><span>HTML专区</span></li>

    <li class="js">Javascript专区</li>

    <li>Div+Css专区</li>

    <li>Jquery专区</li>

  </ul>

</div>

</body>

</html>

匹配含有span元素的li元素,并将其中的字体颜色设置为绿色。

语法结构二:

$(selector).has(element)

参数列表:

参数 描述
element 含有的DOM元素。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

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

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

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("li").has(document.getElementsByTagName("span")).css("color","green"); 

}) 

</script>

</head>

<body>

<div>

  <ul>

    <li><span>HTML专区</span></li>

    <li class="js">Javascript专区</li>

    <li>Div+Css专区</li>

    <li>Jquery专区</li>

  </ul>

</div>

</body>

</html>

匹配含有span元素的li元素,并将其中的字体颜色设置为绿色。

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

Javascript 相关文章推荐
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 Javascript
vue组件生命周期详解
Nov 07 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
jQuery中map()方法用法实例
Jan 06 #Javascript
jQuery中is()方法用法实例
Jan 06 #Javascript
JavaScript中document对象使用详解
Jan 06 #Javascript
jQuery中Form相关知识汇总
Jan 06 #Javascript
使用VS开发 Node.js指南
Jan 06 #Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 #Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 #Javascript
You might like
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
JS 分号引起的一段调试问题
2009/06/18 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
js 小数取整的函数
2010/05/10 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
js转义字符介绍
2013/11/05 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
校园活动策划书范文
2014/01/10 职场文书
青年志愿者活动总结
2014/04/26 职场文书
小小商店教学反思
2014/04/27 职场文书
财务情况说明书范文
2014/05/06 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
新入职员工工作总结
2015/10/15 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫