jQuery中first-child与first选择器区别
1、first-child
first-child为每个父级元素匹配第一个子元素，可以匹配出多个元素：
示例代码：
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>jQuery中first-child与first选择器区别</title>
</head> <body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
//选择了2个元素：
//分别是：<li>John</li> 和 <li>Glen</li>
//first-child为每个父级元素匹配第一个子元素，可以匹配出多个元素
$("li:first-child").css('color', 'red');
</script>
</body> </html>
效果：
2、first
first为获取匹配的第一个元素，只能匹配一个元素。
示例代码：
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>jQuery中first-child与first选择器区别</title>
</head> <body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
//选择了1个元素：
//是：<li>John</li>
//first为获取匹配的第一个元素，只能匹配一个元素
$("li:first").css('color', 'red');
</script>
</body> </html>
效果：
在使用过程中要注意两者的区别。
jQuery中first-child与first选择器区别的更多相关文章
- jQuery中的bind() live() delegate()之间区别分析
jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...
- 深入理解jQuery中live与bind方法的区别
本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 ...
- jquery中的this与$(this)的区别总结（this：html元素）（$(this)：JQuery对象）
jquery中的this与$(this)的区别总结(this:html元素)($(this):JQuery对象) 一.总结 1.this所指的是html 元素,有html的属性,可用 this.属性 ...
- jQuery中attr和prop方法的区别说明
jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check node=123 id=ck & ...
- jquery中的$().each和$.each的区别
jquery中的$().each和$.each的区别 注意:jquery中的$().each和$.each的区别,前者只能遍历数组,后者可以遍历数组和对象 备注:sinobook项目中地名本体相关地按 ...
- jQuery中attr和prop方法的区别
jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...
- jquery中this与$(this)的用法区别
jquery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( function() { this.title = "Test ...
- jquery 中 html与text函数的区别
jquery 中 html与text函数的区别 共同点:它们都能讲函数中的参数渲染到页面中: 异同点: text() 只是简单的讲参数的内容写入到页面中: html() 会根据参数的值,判断是否字体符 ...
- 前端开发入门到进阶附录一【JQuery中parent()，parents()，parentsUntil()区别和使用技巧】
JQuery中parent(),parents(),parentsUntil()区别和使用技巧:https://blog.csdn.net/china1223/article/details/5193 ...
- JQuery中$.each 和$(selector).each()的区别详解
PS:晚上在写页面时,发现了一个问题,$.each 和$(selector).each()有哪些区别?百度搜索关键词,首页显示出来一些前人的经验,总结一下,发上来. 1.$(selector).eac ...
随机推荐
- 我对NHibernate的感受（4）：令人欣喜的Interceptor机制
之前谈了NHibernate的几个方面,似乎抱怨的居多,不过这次我想谈一下我对Interceptor的感受,则基本上都是好话了.这并不一定是说Interceptor设计的又多么好(事实上它使用起来还是 ...
- C#高性能大容量SOCKET并发(转)
C#高性能大容量SOCKET并发(零):代码结构说明 C#高性能大容量SOCKET并发(一):IOCP完成端口例子介绍 C#高性能大容量SOCKET并发(二):SocketAsyncEventArgs ...
- MVC如何避免控制器方法接收到的值不能被转换为参数类型
假设控制器方法参数类型是int: public ActionResult GetSth(int id) { return Content(id.ToString()); } 而视图传递过来的是字符串: ...
- Oracle的数据类型
Oracle基本数据类型(亦叫内置数据类型 built-in datatypes)可以按类型分为: 字符串类型.数字类型.日期类型.LOB类型.LONG RAW& RAW类型.ROWID &a ...
- NativeXml
NativeXml GITHUB: https://github.com/kattunga/NativeXml THIS IS A FORK WITH SOME FIXES AND IMPROVEME ...
- 解决eclipse安装maven的问题:Unable to update index for central|http://repo1.maven.org/maven2
问题产生如下:因为单位使用了过滤,访问Internet时,超过10M的内容就拒绝.因为maven插件在初始时,需要下载Maven的index文件,这个文件比较大,有38M多,下载不成功.所以造成使用M ...
- NGUI 3.5教程（一）安装NGUI 3.5.8
写在前面: 网上找的NGUI教程,都是基于2.x版本号的.为了能配合教程学着做,我也是下载了各种NGUI 2.x版本号.可是在导入的时候,或多或少都报错(我用的Unity 的版本号是4.3.2).无奈 ...
- [Android Pro] Android源码编译后，再重编译所需要做的清理工作
1.在源码目录的根目录下,make clean; 2.进到源码的\linux\kernel\目录下,执行make mrproper: 3.再退回到根目录,执行source build/envsetu ...
- 算法导论第九章 第K顺序统计量
1.第K顺序统计量概念 在一个由n个元素组成的集合中,第k个顺序统计量是该集合中第k小的元素.例如,最小值是第1顺序统计量,最大值是第n顺序统计量. 2.求Top K元素与求第K顺序统计量不同 Top ...
- [leetcode]Balanced Binary Tree @ Python
原题地址:http://oj.leetcode.com/problems/balanced-binary-tree/ 题意:判断一颗二叉树是否是平衡二叉树. 解题思路:在这道题里,平衡二叉树的定义是二 ...