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 相关文章推荐
javascript 循环读取JSON数据的代码
Jul 17 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
javascrip关于继承的小例子
May 10 Javascript
JS倒计时代码汇总
Nov 25 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
vue源码nextTick使用及原理解析
Aug 13 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 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
php学习笔记之 函数声明(二)
2011/06/09 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
Seajs源码详解分析
2019/04/02 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
Python global全局变量函数详解
2018/09/18 Python
python判断数字是否是超级素数幂
2018/09/27 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
内部类的定义、种类以及优点
2013/10/16 面试题
汽车专业人才自我鉴定范文
2013/12/29 职场文书
农村婚礼证婚词
2014/01/08 职场文书
领导检查欢迎词
2014/01/14 职场文书
产品促销活动策划书
2014/01/15 职场文书
保险公司年会主持词
2014/03/22 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
小学安全教育主题班会
2015/08/12 职场文书