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 相关文章推荐
JQuery 学习笔记 选择器之六
Jul 23 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
vuex的module模块用法示例
Nov 12 Javascript
精读《Vue3.0 Function API》
May 20 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
php通过修改header强制图片下载的方法
2015/03/24 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
js 深拷贝函数
2008/12/04 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
Pandas读取并修改excel的示例代码
2019/02/17 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
总经理工作职责范文
2014/03/14 职场文书
优秀食品类广告词
2014/03/19 职场文书
食品销售计划书
2014/04/26 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
Spring中的@Transactional的工作原理
2022/06/05 Java/Android