jQuery 节点操作

节点的选择

first()

获取当前结果集中的第一个对象 相当于eq(0)

last()

获取当前结果集的最后一个对象

slice()

children()

获得匹配元素集合中每个元素的子元素

$('ul.level-2').children()
$('ul.level-2').children('.selected');//可以进行筛选

find()

查找符合选择器的后代元素

$('ul').find('li.current');

$('ul li.current');
$('ul').find('li.current');//尽量用这种方式，性能会更高一些

上面两种方式选择的元素是一样的, 我们应该尽量使用find

节点的选择(父节点)

parent()

获得匹配元素集合中每个元素的父元素

$('li.item-a').parent()

closest()

从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素。
必须要接收一个参数

    
cccc
        
bbbb
            
aaaa
 
        
    
   

例子 : 点击查找指定节点

点击span让相应的li背景变红

    

        
001
    
    

        
002
    
    

        
003
    
    

        
004
    
    

        
005
    

节点的操作

创建节点

//原生的方式
var oDiv = document.createElement('div');

//jq的方式
var $div = $('
')

注意: 要加<``>，不然就变成选择

比原生JS更强大的创建方式

//原生的方式
var oDiv = document.createElement('div');
oDiv.innerHTML = 'hello';
oDiv.id = 'div1';

//jq的方式
var $div = $('
hello
')

插入子节点

append()

在每个匹配元素里面的末尾处插入参数内容。

它的参数可以是DOM 元素，DOM元素数组，HTML字符串，或者jQuery对象，用来插在每个匹配元素里面的末尾。

Greetings

  
Hello
  
Goodbye


box

prepend()

将参数内容插入到每个匹配元素的前面（元素内部）。

参数DOM元素，元素数组，HTML字符串，或者jQuery对象，将被插入到匹配元素前的内容。

插入兄弟节点

before()

after()

节点的操作

• remove() 删除节点
• clone() 克隆节点
  • 默认不克隆事件
  • 如何克隆事件 clone(true)

JQ中的索引

index()

第一种用法，兄弟中的排行

    
001
    
002
    
003

第二种用法，筛选后的排行

001
002
003

• 例子 : 选项卡

    
    
    
    
111
    
222
    
333

JQ中的遍历

遍历就是循环

我们知道在JQ中有很多的省略循环的方法比如说css click ...

但有时候我们也需要自定义循环操作

.each()

回调函数的两个参数

• 第一个参数代表下标
• 第二个参数代表每个原生dom对象

$('span').each(funciton(i, elem){
    alert(i);
    elem.style.background = 'red';
})

each中this指向

this === elem

$('span').each(funciton(i, elem){
    $(this).html(i);
})

退出循环

我们知道在for循环中我们是用break来退出整个循环

在.each() 中 我们用return false来退出整个循环

$('span').each(funciton(i, elem){
    $(this).html(i);
    if(i==0){
        return false;
    }
})

JQ转原生JS

• get()
• 与eq的区别
• 为什么要转，比如：
  • 获取内容的高度
  • 元素之间的比较

get()

获取原生都dom对象

$('div').get(0).innerHTML = 'sdfsdf';

与eq的区别

get方法得到的是原生dom对象， eq得到的是jquery对象

$('div').get(0).innerHTML = 'sdfsdf';
$('div').eq(0).html('sdfsdf');

为什么要转

获取内容的高度

想要获取textarea里内容的实际高度

as
da
sd
asd
a
sd
asd
a
sd
s
s
s
s
s
s
s
s

元素之间的比较

var oDiv = document.getElementById('div1');
$('#div1').get(0) === oDiv; //true;