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 相关文章推荐
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
微信小程序组件 marquee实例详解
Jun 23 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
Vue中component标签解决项目组件化操作
Sep 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
微信小程序分页加载的实例代码
2017/07/11 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
python中去空格函数的用法
2014/08/21 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
python树莓派红外反射传感器
2019/01/21 Python
对Python函数设计规范详解
2019/07/19 Python
python装饰器练习题及答案
2019/11/01 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
Python如何输出整数
2020/06/07 Python
python 发送get请求接口详解
2020/11/17 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
餐饮加盟计划书
2014/01/10 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
后备干部推荐材料
2014/12/24 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
病假条格式范文
2015/08/17 职场文书