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 相关文章推荐
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 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
php反弹shell实现代码
2009/04/22 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
微信红包随机生成算法php版
2016/07/21 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
vue-router命名视图的使用讲解
2019/01/19 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Python 异常处理的实例详解
2017/09/11 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
Python跳出多重循环的方法示例
2019/07/03 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
提高python代码运行效率的一些建议
2020/09/29 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
应征英语教师求职信
2013/11/27 职场文书
保外就医申请书范文
2015/08/06 职场文书
GO中sync包自由控制并发示例详解
2022/08/05 Golang