jQuery中:empty选择器用法实例


Posted in Javascript onDecember 30, 2014

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

此选择器匹配所有不包含子元素或者文本的空元素。

注意:空格也属于选择器包含的元素。

语法结构:

$(":empty")

此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等。例如:
$("li:empty").animate({width:"200px"})

以上代码能够将li元素集合中的空li元素的宽度以自定义动画的方式设置为200px。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

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

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

<style type="text/css">

li {

  list-style-type:none;

  width:150px;

  height:30px;

  border:1px solid red;

}

.run{background-color:green;}

.static{background-color:#603;}

</style>

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

<script type="text/javascript"> 

$(document).ready(function(){ 

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

    $("li:empty").animate({width:"200px"}); 

  }) 

}) 

</script>

</head>

<body>

<ul>

  <li>html专区</li>

  <li>div+css专区</li>

  <li>Jquery专区</li>

  <li>Javascript专区</li>

  <li></li>

</ul>

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

</body>

</html>

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

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

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

<style type="text/css">

li {

  list-style-type:none;

  width:150px;

  height:30px;

  border:1px solid red;

}

.run{background-color:green;}

.static{background-color:#603;}

div{

  width:100px;

  height:30px;

  background-color: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(){ 

    $("*:empty").animate({width:"200px"}); 

  }) 

}) 

</script>

</head>

<body>

<ul>

  <li>html专区</li>

  <li>div+css专区</li>

  <li>Jquery专区</li>

  <li>Javascript专区</li>

  <li></li>

</ul>

<div></div>

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

</body>

</html>

由于以上代码并没有指定与:empty选择器相配合使用的选择器,所以就默认和*选择器配合使用,能够将所有元素中的空元素的长度以自定义动画方式设置为200px。

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

Javascript 相关文章推荐
javascript弹出层输入框(示例代码)
Dec 11 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
vue中实现高德定位功能
Dec 03 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
正则表达式基础与常用验证表达式
Jun 16 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
JavaScript中对象property的读取和写入方法介绍
Dec 30 #Javascript
You might like
php array_unique之后json_encode需要注意
2011/01/02 PHP
PHP简洁函数小结
2011/08/12 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
JS实现求5的阶乘示例
2019/01/21 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python基于phantomjs实现导入图片
2016/05/13 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
tensorflow获取变量维度信息
2018/03/10 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
python实现快递价格查询系统
2020/03/03 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
python如何删除文件、目录
2020/06/23 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
六年级数学教学反思
2014/02/03 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
2014年质量工作总结
2014/11/22 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL