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 相关文章推荐
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
js控制input框只读实现示例
Jan 20 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
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 编程安全性小结
2010/01/08 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
php中Ctype函数用法详解
2014/12/09 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
js制作提示框插件
2020/12/24 Javascript
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
SQL面试题
2013/12/09 面试题
乡下人家教学反思
2014/02/01 职场文书
秦兵马俑导游词
2015/02/02 职场文书
golang生成vcf通讯录格式文件详情
2022/03/25 Golang