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 相关文章推荐
html向js方法传递参数具体实现
Aug 08 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
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查看session内容的函数
2008/08/27 PHP
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php 动态添加记录
2009/03/10 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
5 cool javascript apps
2007/03/24 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
微信小程序select下拉框实现源码
2019/11/08 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
python实现异步回调机制代码分享
2014/01/10 Python
python实现决策树分类算法
2017/12/21 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
利用python开发app实战的方法
2019/07/09 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
python 实现的车牌识别项目
2021/01/25 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
人事专员的岗位职责
2014/03/01 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
工作自我推荐信范文
2015/03/25 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
Nginx实现会话保持的两种方式
2022/03/18 Servers
java版 简单三子棋游戏
2022/05/04 Java/Android
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL