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 ...
随机推荐
- vue中路由返回上一个页面,恢复到上一个页面的滚动位置
第一步:路由文件的配置(对你所需要的vue文件进行保存缓存标志的添加) import Vue from 'vue' import Router from 'vue-router' import Hel ...
- QCon大会上推荐阅读的10本书
QCon北京2014大会将于4月25-27日在北京国际会议中心盛大开幕.QCon是由@InfoQ 主办的全球顶级技术盛会.在此次盛会中,现场将有@人民邮电出版社-信息技术分社 主办的现场扫描二维码赠书 ...
- HttpPost+json请求---服务器中文乱码及其他
好凌乱的题目,只是一些功能点的总结咯. 首先构造一个json对象用于存放数据,如果光加上header为utf-8就能解决中文就大错特错了... json对象可以put变量,也可以put对象.取的时候o ...
- 在没有界面的类中，实现弹出UIAlertView || 在没有界面的类中，刷新程序界面 思路
+(DisplayErrorMsg *)sharedDisplayErrorMsg { static DisplayErrorMsg *instance = nil; @synchronized(in ...
- 用命令行安装并启动Windows Phone 8 App
一.安装并启动应用 "C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Tools\XAP Deployment\XapDep ...
- .NET：CLR via C#：CLR Hosting And AppDomains
AppDomain Unloading To unload an AppDomain, you call AppDomain’s Unload static method.This call caus ...
- Appium+python自动化6-Remote远程控制
前言 在第三篇启动app的时候有这样一行代码driver = webdriver.Remote('http://192.168.1.1:4723/wd/hub', desired_caps),很多小伙 ...
- 使用 SVWebViewController 推出浏览器控制器
SVWebViewController 简单翻译 https://github.com/samvermette/SVWebViewController SVWebViewController is a ...
- 启动Memcached报错：/usr/local/memcached/bin/memcached: error while loading shared libraries: libevent-2.1.so.6: cannot open shared object file: No such file or directory
1.查找文件放在哪里 sudo find / -name libevent-2.1.so.6 发现放在/usr/local/lib/libevent-2.1.so.6下. 2.创建软链接 sudo l ...
- 端口复用技术简单了解；重用端口；socket复用端口
端口复用相关点 多个应用复用端口,只有最后一个绑定的socket可以接受数据,所有socket都可以发送数据 使用端口复用技术时,所有的socket都开启端口复用,才可以实现端口复用 黑客技术,使用标 ...