jQuery中的选择器
2016-04-18 16:16
519 查看
<div class="box"> <div class="box1"></div> <div class="box2"> <p class="p1"> <ul class="ul3"> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul> <ul class="ul4"> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ul> </p> </div> <div class="box3"> <p class="p2"></p> <ul class="ul1"> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ul> </div> <ul class="ul2"> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul> <form action=""> <input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="news" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" /> </form> </div>
jquery中基础: 选择器: 1层次的: $(.box ul)->(获取子子孙孙)将ul1 和 ul2 都获取到。 $(.box > ul)->(只获取子集)只是将它的子集获取到 只将ul2 都获取到 $(.box3 + ul)->(获取相邻的弟弟级元素) 只是将ul2获取到 $(.box1 ~ div)->(这个获取同一级别的兄弟姐妹)获取到的是box2 box3 $(.ul1 li:first)-> (一定是li然后冒号 ul1的第一个li~~)<li>list item 1</li> $(.ul1 li:first-child)->(一定是li然后冒号 ul1的第一个li~~)<li>list item 1</li> console.log( $("div p:first")); 得到的是第一个div 中的 第一个 p(.p1)对象 ; console.log( $("div p:first-child")); 得到的是所有div 中的 第一个 p(.p1 和 .p2)对象 console.log($(".box ul:first-of-type")):得到的是:[ul.ul3, ul.ul1, ul.ul2]指的是一个标签中出现所有中的第一个,而不是便签按顺序排列的第一个出现的。 $(.ul1 li:last)->(一定是li然后冒号 ul1最后一个li~~)<li>list item 3</li> $(.ul1 li).gt(0)-> 是大于索引0的 也就是 1 2 <li>list item 2</li> <li>list item 3</li> $(.ul1 li).It(2-> 是小于索引3的 也就是0 1 <li>list item 2</li> <li>list item 3</li> $("div:has(p)").addClass("test")->box2 下的p $("input[name='accept'] ").attr("checked", true) -> <input type="checkbox" name="accept" value="Evil Plans" checked = true /> 判断input拥有name=accept的标签。设置checked并且 checked = true $(input[value^ = 'news'])- > 查找所有 value 以 'news' 开始的 input 元素 <input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="news" value="Cold Fusion" /> 这样的还有好多 $(input[value $ ='news']) 查找所有 value 以 'news' 结尾的 input 元素 * $(input[value * ='news']) 查找所有 value 以 'news' 所有的 input 元素 $(input[id][!value = 'news']) 查找所有拥有id的 并且value值不是news的input $(":text")这是匹配所有的单行文本框 区分:eq nth-child get() $(".ul1 li:nth-child(2)")-> 是孩子从1开始 <li>list item 2</li> $(".ul1 li").eq(2)-> 是孩子从0开始 <li>list item 3</li> $(".box").get(0)<==>$(".box")[0] jQuery转变为原生:直接通过索引获取对应的元素对象即可
相关文章推荐
- Jquery基础初探
- jQuery的内容过滤选择器学习教程
- 高效Web开发的10个jQuery代码片段
- 原生JS和jQuery版实现文件上传功能
- jquery 插件开发
- jquery 获取标签名(tagName)
- jquery datatable设置垂直滚动后,表头(th)错位问题
- jquery datatable设置垂直滚动后,表头(th)错位问题
- 高效Web开发的10个jQuery代码片段
- 高效Web开发的10个jQuery代码片段
- jQuery 如何给Carousel插件添加新的功能
- jQuery.extend 函数详解
- jQuery片段1.0
- jquery-validate动态添加表单元素动态验证
- jQuery返回顶部代码
- JQuery获取文件大小
- 高效Web开发的10个jQuery代码片段
- 浅谈jQuery中setInterval()方法
- 高效Web开发的10个jQuery代码片段
- jquery 对象级插件写法