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 空位补零实现代码
Feb 26 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
js函数调用的方式
May 06 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
Vue 实现树形视图数据功能
May 07 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
了解JavaScript中let语句
May 30 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
JS函数本身的作用域实例分析
Mar 16 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新手上路(十三)
2006/10/09 PHP
php 文件上传系统手记
2009/10/26 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
python中的reduce内建函数使用方法指南
2014/08/31 Python
跟老齐学Python之永远强大的函数
2014/09/14 Python
Python微信库:itchat的用法详解
2017/08/14 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
python sort、sort_index方法代码实例
2019/03/28 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
感恩之星事迹材料
2014/05/03 职场文书
幸福家庭标语
2014/06/27 职场文书
感恩教育主题班会
2015/08/12 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
深入理解go缓存库freecache的使用
2022/02/15 Golang