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 ...
随机推荐
- dmesg命令的使用
dmesg命令用于打印Linux系统开机启动信息,kernel会将开机信息存储在ring buffer中.您若是开机时来不及查看信息,可利用dmesg来查看(print or control the ...
- WebView具体介绍
PART_0 侃在前面的话 WebView是Android提供给我们用来载入网页的控件.功能非常强大.我们经常使用的手机淘宝.手机京东的Androidclient里面大量使用到了WebView. ...
- MVC扩展控制器, 把部分视图转换成字符串(带验证信息), 并以json传递给前端视图
当我们使用jQuery异步提交表单数据的时候,需要把部分视图转换成字符串(带验证信息),以json的形式传递给前端视图. 使用jQuery异步加载部分视图,返回内容追加到页面某个div: jQ ...
- EXC_BAD_ACCESS(code=2,address=0xcc 异常解决 及 建议不要在子线程中刷新界面
iOS 上不建议在非主线程进行UI操作,在非主线程进行UI操作有很大几率会导致程序崩溃,或者出现预期之外的效果. 我开始不知道这一点,在子线程中进行了弹窗操作,结果程序就出问题了! 报的错误是(EXC ...
- 建议：一般地，建议使用xcode 4.3开发app 而不是使用xcode4.5
建议:一般地,建议使用xcode 4.3开发app 而不是使用xcode4.5 因为,xcode4.5 默认的sdk 是ios6.0,这里面有很多新特性.比如,Autolayout 等,这个特性再io ...
- Java HMAC-SHA1加密算法的实现
public static String hamcsha1(byte[] data, byte[] key) { try { SecretKeySpec signingKey = new Secret ...
- [翻译] INTERACTIVE TRANSITIONS 实时动态动画
INTERACTIVE TRANSITIONS 实时动态动画 翻译不到位处敬请谅解,感谢原作者分享精神 原文链接 http://www.thinkandbuild.it/interactive-tra ...
- spring mvc获取header
两种方法: 1.在方法参数中加入@RequestHeader 2.在类级别注入HttpServletRequest 建议使用第二种方法,这样可避免每个方法都加入HttpHeaders参数 @Contr ...
- Python 3.6学习笔记（一）
知识是一座宝库,而实践就是开启这座宝库的钥匙. ----Thomas Fuller 开始之前 基础示例 Python语法基础,python语法比较简单,采用缩紧方式. # print absolute ...
- 再有人问你synchronized是什么，就把这篇文章发给他
在再有人问你Java内存模型是什么,就把这篇文章发给他.中我们曾经介绍过,Java语言为了解决并发编程中存在的原子性.可见性和有序性问题,提供了一系列和并发处理相关的关键字,比如synchronize ...