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 相关文章推荐
Array的push与unshift方法性能比较分析
Mar 05 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
react 创建单例组件的方法
Apr 26 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 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
组合算法的PHP解答方法
2012/02/04 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
python八皇后问题的解决方法
2018/09/27 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
Pyqt5自适应布局实例
2019/12/13 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
Python中Qslider控件实操详解
2021/02/20 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
Java如何格式化日期
2012/08/07 面试题
工地安全生产标语
2014/06/06 职场文书
社区助残日活动总结
2014/08/29 职场文书
2015年组织部工作总结
2015/04/03 职场文书
学雷锋活动简报
2015/07/20 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS