<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item" >list item 3</li>
<li><input type="text" name="test" value = "ceshi"/></li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$('li.third-item').next().css('background-color', 'red');
alert($('li.third-item').nextAll().andSelf().length);
</script>
作为一位服务端开发的新手，在遇到对前台元素控制的时候才意识到前端知识的欠缺啊，昨天修改一个复选框选中获取元素的信息让我整整修改了一整天，你们可能觉得应该是一个很简单的问题，但是项目中用的不是简单的 type = “checked” 这样的一个input标签，它是通过bootstrap框架控制的！这让我头疼的要命，后来我用了很笨的一种办法将这个问题给解决了，解决方法就是一层层的获取标签对象，在控制里面的值。
今天简单给大家总结一下获取页面元素的方法：
我想大家都知道，获取标签可以使用各种选择器来获取，我使用的是jquery方式进行对象获取，$("#third-item") 获取到当前li标签；$("li.third-item")同样可以获取到。
- 获取同级元素
$("#third-item").prev();用于获取指定元素的上一个同级元素
$("#third-item").prevAll();获取指定元素上面的所有同级元素
$("#third-item").next();用于获取指定元素的下一个同级元素
$("#third-item").nextAll();获取指定元素下面的所有同级元素
andSelf();$("#third-item").nextAll().andSelf()表示获取指定元素下面所有同级元素并加上当前指定元素； 个人感觉这个很有趣
- 获取父级元素
parent();用于获取当前元素的直属父级元素；
parents()；获取当前元素的父级或是更高等级的指定元素；
- 获取子级元素
方法一：var aNods = $("ul > a"); 查找ul下的所有a标签
方法二：children();获取的是当前元素下一集的子元素，参数可选用来过滤子元素
方法三：find();find方法获得所有下级元素，参数必选；
值得注意的一点是$('li.item-ii').find('li')方法等同于$('li', 'li.item-ii')。这样写更便捷
这些获取元素的方法是可以叠加使用的，这样可以将结构变得更加清晰，当获取到的元素是多个同级标签的时候，我们可以通过循环或者是eq(i)（索引从0开始）的方式获取想要的标签！
在js中获取元素长度用length，而不是size();
更多细致操作请参考jQuery帮助文档^_^
扫一扫
359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
