JQuery获取元素的N种方法
来源:互联网 发布:linux安装qemu 编辑:程序博客网 时间:2024/06/06 02:27
一.根据标签属性或属性值获取
1.根据属性获取元素
比如要获取页面p标签中属性有id的元素
代码如下:
$("p[id]").css("color","red");
2.根据属性值获取元素
特殊符号 $ , ! , * , @ , ^ 的灵活使用。
2.1 $
[attribute$=value],匹配给定的属性是以某些值结尾的元素。下面举个例子来说明一下:
<input name="newsletter" /> <input name="milkman" /> <input name="jobletter" />
jq代码:
$("input[name$='letter']")
获取结果:
[ <input name="newsletter" />, <input name="jobletter" /> ]
2.2 !
[attribute!=value],匹配所有不含有指定的属性,或者属性不等于特定值的元素,此选择器等价于:not([attr=value]).例子说明一下:
<input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" />
jq代码:
$("input[name!='newsletter']").attr("checked", true);
结果:
[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]
2.3 *
[attribute*=value],匹配给定的属性是以包含某些值的元素。举个例子说明一下:
<input name="man-news" /> <input name="milkman" /> <input name="letterman2" /> <input name="newmilk" />
jq代码:
$("input[name*='man']")
结果:
[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
2.4 @
匹配包含给定属性的元素。注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可。
2.5 ^
[attribute^=value],匹配给定的属性是以某些值开始的元素,下面举个例子来说明一下
<input name="newsletter" /> <input name="milkman" /> <input name="newsboy" />
jq代码:
$("input[name^='news']")
结果:
[ <input name="newsletter" />, <input name="newsboy" /> ]
2.6 获取指定属性且设定值中有指定字符串的元素
<input type="checkbox" name="newsletter" value="Hot Fuzz"/> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" />
jq代码:
$("input[name$='letter'][value$='zz']").attr("checked","true");支持多条件操作
在jquery中,当使用
$(”input[name='metaId']“).val()
不能直接获得被选择的radio的值,只是获得 radio标签的第一个值,这可能jquery使用xpath语言了进行查找有关,而我们通常是想获得被选中的radio的值,有以下几种方法:
1,使用$(”input[name='metaId']:checked”).val()获得 //name代表radio中name属性名 2,使用$(”:radio:checked”).val()获得 //限制页面只有一组radio标签
二.根据标签选择器以及父子节点获取指定元素
1. 根据下标获取元素
<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>
jq代码
<script type="text/javascript"> $(function(){ $("p").eq(2).css("color","red"); $("p").eq(3).css("color","red"); }) </script>
2. 获取指定条件一致和指定范围的元素
<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>
jq代码
<script type="text/javascript"> $(function(){ $("p").filter('.center').css("color","red"); }) $(function(){ $("p").slice(5,7).css("color","yellow"); }) </script>
3.获取与条件表达式一致的元素
<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>
jq代码
<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.获取元素的上一个元素和下一个元素
<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>
jq代码
//获取元素的下一个元素 jQuery(function(){ $("p").next(".yes").css("color","red"); }) //获取元素的上一个元素 jQuery(function(){ $("p").prev(".yes").css("color","red"); })
5.获取元素的父元素和子元素
<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>
jq代码
//获取元素的父元素 jQuery(function(){ $("p").parent().css("color","red"); }) //获取元素的子元素 jQuery(function(){ $("#aa").children(".yes").css("color","red"); })
阅读全文
0 0
- JQuery获取元素的N种方法
- 获取jquery元素的方法
- jQuery获取元素的方法
- jquery获取父元素下的第n个子元素
- 获取表单内部元素的N种方法
- JQuery元素获取方法
- jQuery -> 获取后代元素的三种方法
- Jquery获取父级元素的三种方法
- jquery获取元素值的方法
- jQuery 获取表单元素中值的方法
- jquery中获取兄弟元素的方法
- 掌握jQuery获取元素的方法
- js和jquery获取元素的方法
- jquery 获取第一个元素的方法
- jQuery获取当前元素是该父元素的第几个元素&获取父元素的第n个子元素
- jQuery获取点击的当前行的第n列元素
- jquery获取元素值的方法(常见的表单元素)
- Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID
- Caffe 模型微调 的场景、问题、技巧以及解决方案
- STM32中I2C协议时序和使用
- Linux下安装JDK1.7
- 在ubuntu中某目录下右键快速打开终端
- 软件设计模式整理
- JQuery获取元素的N种方法
- 简单学生选课系统之学分汇总
- Maven 那点事儿 黄勇
- 建造者模式
- java网络编程之SOCKET
- springMVC+springBatch
- Hibernate的懒加载详解
- Apache与Nginx的比较
- java