JQuery中查找父元素，子元素,追加元素，插入元素和删除元素 及其余经常使用方法...

Jquery之因此强大，和其在获取对象时使用与css选择器兼容的语法有很大关系。并且它还兼容了CSS3的选择器，并且多出了很多。

因此jQuery的选择器也就变得不少很强大。就最基本的有如下四个:

$('*')  匹配页面全部元素

$('#id') id选择器

$('.class') 类选择器

$('element') 标签选择器

$('E[attr]') 含有属性attr的元素E

$('E[attr=value]') 属性attr=value的元素E

 

JQuery中查找父元素

.closest()

closest会首先检查当前元素是否匹配，若是匹配则直接返回元素自己。若是不匹配则向上查找父元素,一层一层往上，直到找到匹配选择器的元素。若是一直没有找到匹配元素，则返回一个空的jQuery对象

<ul class="ulCss">
<li class="itemA">A</li>
<li class="itemB">B</li>
</ul>

<script>
$('li.itemA').closest('ul').css('background-color','red');
</script>

在这里,$('li.itemA').closest('ul') 获取的就是 <ul class="ulCss"> 这个元素 

.parent()

parent() 向上只查找一层,即返回惟一的父元素。 若是选择器选择了多个对象(好比 $("div").parent(), 这里选择器$("div")会返回页面上全部的div,若是页面上有多个div,则就是说，这个选择器$('div')就是选择了多个对象),则返回父元素数组.

好比: $("div").parent() 返回页面上全部div元素的父元素，结果是一个数组。若是须要在这个数组里面继续选择，可使用$("div").parent("#id"), $("div").parent(".className")

.parents()

parents()方法就不是往上只查找一层，而是会一层一层的往上查找，直到返回全部匹配上的元素.  也就是说，它会查找jQuery对象符合选择器的全部祖先元素，但不包括元素自己.

$("p.selected").parents("div").css("border","2px red solid")  会查找css class为selected的p元素 的 全部祖宗div元素,而后给这些div元素添加border属性"2px red solid"

 

因此 parents()和closest()的区别

1. parents()从父级开始匹配元素，而closest()从自身开始

2. parents()向上查找全部的父级元素，直到根元素。而后把这些全部的查找结果放到一个临时的集合中，再经过额定的条件来进行筛选.

   closest()从自身元素开始向上查找，直到找到有效的匹配元素就中止.

3. parents()返回的元素值能够有0个,1个，或者多个. 而closest()结果返回值就只有0个或者1个

 

JQuery中查找子元素

.children()

.children()方法和.parent()方法 (注意 不是parents()) 相对应

children在英文中是孩子的意思，因此它只向下追索一层.

children()方法返回被选元素的全部直接子元素，该方法只会向下一级对DOM树进行遍历.

好比 $("div").children() 会返回页面上每一个div的全部直接子元素.

 

.find()

find()方法用来查找指定元素的后代元素,一路向下直到最后一个后代  注意： find()用来查找当前元素的全部后代元素

$('ul').find('li').css('background-color','red') 首先找到页面上全部的ul元素，而后找到ul元素下面的全部后代li元素，给他们加上背景颜色-红色

又好比 $("#table1").find("td") 和 $("#table1 td")效果是同样的。

$("div").find("*") 返回<div>的全部后代元素.

 

JQuery中的基本方法

.ready(handler) 

 文档加载完成后执行的方法，区别于window.onload

$(document).ready(function(){

});

.each(function(index,element))

 其中, function(index,element) 为必须项, 为每一个匹配元素规定运行的函数.

index -- 选择器的index位置

element - 当前的元素 (也可以使用 "this" 选择器)

each()方法是jQuery中的一个很是强大的方法(该方法在javascript中也存在). each()方法可以使得DOM循环结构简洁，不容易出错. 它封装了强大的遍历功能，能够用来遍历一维数组，多维数组，DOM和JSON等等.

each处理一维数组例子：

var arrTest = ["a","b","c"];

$.each(arrTest,function(i,val){

   alert(i);
   alert(val);

});

alret(i)将输出 0, 1, 2
alret(val)将输出 a,b,c

each处理二维数组例子：

var arrTest = [['a','aa','aaa'],['b','bb','bbb'],['c','cc','ccc']]

$.each(arrTest, function(i,item){

  alert(i);
  alert(item);

});

在这里, arrTest是一个二维数组，而item至关于获取这个二维数组中的每个数组
alert(i) 将输出0,1,2 由于这个二维数组含有3个数组元素
alert(item) 将输出['a','aa','aaa'],['b','bb','bbb'],['c','cc','ccc']
item[0] 则至关于取其中每一个一维数组里面的第一个值

因此，若是咱们须要获取里面的每一个一维数组中的每一个元素，须要使用两个each循环

$.each(arrTest,function(i,item){

    $.each(item,function(j,val){
     
              alert(j);
              alert(val);


       });


});

在这里, alert(j)将输出0,1,2,0,1,2,0,1,2
alert(val)将输出a,aa,aaa,b,bb,bbb,c,cc,ccc

each处理json数据的例子

var obj = {one:1, two:2, three:3}
$.each(obj,function(key,val){

    alert(key);
    alert(val);
});

采用RunJs (http://runjs.cn/code)进行测试这个代码，发现
alert(key)将输出one, two,three
alert(val)将输出1,2,3

 

转载于:https://www.cnblogs.com/wphl-27/p/6917382.html