jquery中获取元素的几种方式小结


Posted in Javascript onJuly 05, 2011

1 从集合中通过指定的序号获取元素
html:

<div> 
<p>0</p> 
<p>1</p> 
<p>2</p> 
<p>3</p> 
<p>4</p> 
<p>5</p> 
<p>6</p> 
<p>7</p> 
</div>

JS
<script type="text/javascript"> 
jQuery(function(){ 
$("p").eq(2).css("color","red"); 
$("p").eq(3).css("color","red"); 
}) 
</script>

2 获取指定条件一致和指定范围的元素
html:
<div> 
<p>0</p> 
<p>1</p> 
<p class="center">2</p> 
<p class="center">3</p> 
<p>4</p> 
<p>5</p> 
<p>6</p> 
<p>7</p> 
</div>

JS
<script type="text/javascript"> 
jQuery(function(){ 
$("p").filter('.center').css("color","red"); 
}) 
$(function(){ 
$("p").slice(5,7).css("color","yellow"); 
}) 
</script>

3 获取与条件表达式一致的元素
html:
<div> 
<p>0</p> 
<p>1</p> 
<p class="center">2</p> 
<p class="center">3</p> 
<p>4</p> 
<p class="aa">5</p> 
<p>6</p> 
<p>7</p> 
</div>

js
<script type="text/javascript"> 
jQuery(function(){ 
$("p").each(function(){ 
switch(true){ 
case $(this).is(".center"): 
$(this).css("color","red"); 
break; 
case $(this).is(".aa"): 
$(this).css("color","yellow"); 
break; 
} 
}) 
}) 
</script>

4 获取元素的上一个元素和下一个元素
Html:
<div id="aa"> 
<p>1号</p> 
<p class="yes">2号</p> 
<p>3号</p> 
<p>4号</p> 
<p>5号</p> 
<p class="yes">6号</p> 
<p class="yes">7号</p> 
</div>

js
//获取元素的下一个元素 
jQuery(function(){ 
$("p").next(".yes").css("color","red"); 
}) 
//获取元素的上一个元素 
jQuery(function(){ 
$("p").prev(".yes").css("color","red"); 
})

5 获取元素的父元素和子元素
html:
<div id="aa"> 
<p>1号</p> 
<p class="yes">2号</p> 
<p>3号</p> 
<p>4号</p> 
<p>5号</p> 
<p class="yes">6号</p> 
<p class="yes">7号</p> 
</div>

js
//获取元素的父元素 
jQuery(function(){ 
$("p").parent().css("color","red"); 
}) 
//获取元素的子元素 
jQuery(function(){ 
$("#aa").children(".yes").css("color","red"); 
})
Javascript 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
Exjs 入门篇
Apr 07 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
在node中如何使用 ES6
Apr 22 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 #Javascript
Javascript计算时间差的函数分享
Jul 04 #Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 #Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 #Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 #Javascript
JS分割字符串并放入数组的函数
Jul 04 #Javascript
js列举css中所有图标的实现代码
Jul 04 #Javascript
You might like
MySQL授权问题总结
2007/05/06 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
prototype1.4中文手册
2006/09/22 Javascript
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
jquery实现数字输入框
2017/02/22 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
Python 代码性能优化技巧分享
2012/08/07 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
医学院护理专业应届生求职信
2013/11/12 职场文书
电焊工岗位职责
2014/03/06 职场文书
借款担保书范文
2014/05/13 职场文书
个人求职自荐信范文
2015/03/06 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python