jquery选择器中的find和空格,children和>的区别、及父节点兄弟节点,还有判断是否存在的写法

简介: 一、find和空格,children和>及其它的区别 空格:$('parent childchild')表示获取parent下的所有的childchild节点(所有的子孙)。等效成  ==$('parent').find('children')        获取子节点  offspring获取所有子孙节点$('parent *') 大于号:$('parent > child')表示获取parent下的所有child的儿子( 第一代)。

 一、find和空格,children和>及其它的区别

 

空格:$('parent childchild')表示获取parent下的所有的childchild节点(所有的子孙)。

等效成  ==$('parent').find('children')        获取子节点  offspring

获取所有子孙节点$('parent *')

 

大于号:$('parent > child')表示获取parent下的所有child的儿子( 第一代)。

等效成  ==$('parent').children('children')  获取亲子节点  children

 $('parent > *') 获取所有亲子节点

 

 

 

Query.parent(expr)           //找父元素

jQuery.parents(expr)          //找到所有祖先元素,不限于父元素

 jQuery.prev()                //查找上一个兄弟节点,不是所有的兄弟节点

jQuery.prevAll()             //查找所有之前的兄弟节点

jQuery.next()                //查找下一个兄弟节点,不是所有的兄弟节点

jQuery.nextAll()             //查找所有之后的兄弟节点

jQuery.siblings()            //查找兄弟节点,不分前后

jQuery.find(expr)            //跟jQuery.filter(expr)完全不一样,jQuery.filter(expr)是从初始的

                               jQuery对象集合中筛选出一部分,而jQuery.find()的返回结果,不会有初始集中

                               筛选出一部分,比如:

                             $("p").find("span")是从元素开始找,等于$("p span")

 

 

 

二、检测匹配元素是否存在的两种写法  

 

在传统的JavaScript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在。原因是对一个不存在的元素进行操作是不允许的。
例如:
[html] view plain copy
document.getElementById("someID").innerHTML("hi");  

如果ID为"someID"的元素不存在,我们将得到Javascript运行错误:document.getElementById("someID") is null 
正确的写法应该是: 
[html] view plain copy
obj = document.getElementById("someID");   
 if (obj){   
    obj.innerHTML("hi");   
 }   
那么在jQuery,我们如何判断页面元素存在与否呢?如果参照上面的传统Javascript的写法,我们第一个想到的办法一定是: 
[html] view plain copy
if ($("#someID")){   
    $("#someID").text("hi");   
}   

可是这么写是不对的!因为jQuery对象永远都有返回值,所以$("someID") 总是TRUE ,IF语句没有起到任何判断作用。正确的写法应该是: 
[html] view plain copy
if ( $("#someID").length > 0 ) {   
    $("#someID").text("hi");   
 }   

注意 :判断某个页面元素存在与否在jQuery实际上是没有必要的,jQuery本身会忽略 对一个不存在的元素进行操作,并且不会报错
[html] view plain copy
$(document).ready(function(){   
      var value=$('#btn_delXml').length;   
      if(value>0){   
          alert('Extsts');   
        }else {   
          alert('not Extsts');   
        }   
})   

  

 

目录
相关文章
N..
|
1月前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
14 1
|
3月前
|
JavaScript
jquery的9大选择器
jquery的9大选择器
28 2
|
14天前
|
JavaScript 前端开发
JQuery和JS的区别有哪些?
JQuery和JS的区别有哪些?
13 0
|
23天前
|
JavaScript 前端开发
jQuery 和 Zepto 的区别? 各自的使用场景?
jQuery 和 Zepto 的区别? 各自的使用场景?
10 1
|
1月前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
8 0
|
1月前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
9 1
|
1月前
|
JavaScript 前端开发
jQuery选择器整理
jQuery选择器整理
13 0
|
1月前
|
前端开发 JavaScript 索引
第二章jQuery选择器
第二章jQuery选择器
8 0
|
1月前
|
JavaScript
jquery选择器案例分享
jquery选择器案例分享
9 0
|
1月前
|
JavaScript 索引
jQuery选择器 获取元素的十一种方式
jQuery选择器 获取元素的十一种方式