jQuery中:only-child选择器用法实例


Posted in Javascript onJanuary 03, 2015

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

此选择器将匹配父元素的唯一子元素。如果其父元素中含有其他元素,那将不会被匹配。

语法结构:

$(":only-child")

此选择器一般也要和其他选择器配合使用,比如类选择器、元素选择器等等。例如:

$("li:only-child").css("color","blue")

以上代码能够将只有一个li元素的ul元素下的li元素中的字体颜色设置为蓝色。

注意:这里有必要结合上面的代码再对概念进行一下说明。这里所说的父元素并不是li,而是li的父元素。很多人往往误以为是匹配li元素的子元素中的最后一个元素。

实例代码:

<!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(){ 

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

    $("li:only-child").css("color","blue") 

  }) 

})  

</script>

</head>

<body>

<div>

  <ul>

    <li class="houtai" title="asp">ASP教程</li>

  </ul>

  <ul>

    <li class="qiantai" title="html">html教程</li>

    <li class="qiantai" title="div">DIV+CSS教程</li>

    <li class="qiantai" title="jquery">jQUERY教程</li>

    <li class="qiantai" title="js">jAVAScript教程</li>

  </ul>

</div>

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

</body>

</html>

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

Javascript 相关文章推荐
JavaScript面向对象编程
Mar 02 Javascript
jquery异步循环获取功能实现代码
Sep 19 Javascript
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
javascript iframe跨域详解
Oct 26 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
微信小程序删除处理详解
Aug 16 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
js中取得变量绝对值的方法
Jan 03 #Javascript
基于豆瓣API+Angular开发的web App
Jan 02 #Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 #Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 #Javascript
javascript制作的cookie封装及使用指南
Jan 02 #Javascript
分享一则javascript 调试技巧
Jan 02 #Javascript
javascript实现无限级select联动菜单
Jan 02 #Javascript
You might like
怎么使 Mysql 数据同步
2006/10/09 PHP
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
php 缓存函数代码
2008/08/27 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
12步教你理解Python装饰器
2016/02/25 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
小学毕业家长寄语
2014/01/19 职场文书
《在家里》教后反思
2014/03/01 职场文书
企业党员公开承诺书
2014/03/26 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
任命书范本大全
2014/06/06 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
创业计划书之溜冰场
2019/10/25 职场文书