jQuery中的DOM操作

jQuery中的DOM操作

DOM操作的分类

一般来说DOM的操作分为3个方面，即DOM Core、HTML-DOM、CSS-DOM

1. DOM Core：JavaScript中的getElementById()、getElementsByTagName()、getAttribute()、serAttribute()等方法都是DOM Core的组成部分
2. HTML-DOM：HTML-DOM的出现甚至比DOM Core还早，它提供了一些更简明的记号来描述各种HTML元素的属性 document.forms和element.src
3. CSS-DOM：它是针对CSS的操作。CSS-DOM的主要技术就是获取和设置style对象的各种属性 element.style.color = 'red'

jQuery中的DOM

查找节点

1.查找元素节点

var $li = $('ul li:eq(1)'); //获取ul里的第二个li节点
var txt = $li.text();   //  获取第二个li节点中的文本内容

2.查找属性节点

attr()方法可以获取某一元素的各种属性。它接受的参数可以为1个也可以是2个。当参数是一个时，则是要查询属性的名称

var $para = $('p');
var txt = $para.attr('title');  //获取p元素的节点属性title

创建节点

1.创建元素节点

创建新元素可以使用jQuery的工厂函数 $()来完成 ===> $(html)，创建完新元素之后需要使用append()方法将其添加到文档中去。

var $li_1 = $('
');
var $li_2 = $('
');
$('ul').append($li_1);
$('ul').append($li_2);

动态创建的元素不会自动添加到文档中去，必须使用其他方法将其插入文档

1.创建文本节点

创建文本节点就是在创建元素节点时直接把文本内容写入标签即可

var $li_1 = $('
111
');
var #complex = $('
这是一个复杂的组合
')

插入节点

动态创建的节点没什么作用，还需要将它插入到文档中

方法	描述	实例
append()	向每个匹配的元素内部追加内容	$('p').append('Hello')
appendTo()	将所有匹配的元素追加到特定的元素中	$('Hello').appendTo('p')
prepend()	向每个匹配的元素内部前置内容	$('p').prepend('Hello')
prependTo()	将所有匹配的元素前置到特定的元素中	$('Hello').prependTo('p')
after()	在每个匹配的元素后面插入内容	$('p').after('Hello')
insertAfter()	将所有匹配的元素插入到特定的元素后面	$('Hello').inserAfter('p')	、
before()	在每个匹配的元素后面插入内容	$('p').before('Hello')
insertBefore()	将所有匹配的元素插入到特定的元素前面	$('Hello').inserBefore('p')

删除节点

1.remove()方法

$('ul li:eq(1)').remove(); //获取ul中的第二个li元素后，将他从页面中删除

某个元素用remove()方法删除后，该节点所包含的所有后代节点都将同时被删除。该方法的返回值指向一个已被删除的节点引用，因此可以在以后再使用该元素

另remove()方法也可以通过传递参数来选择性的删除元素。
$('ul li').remove('li[title!="orange"]') //将li元素中属性不等于orange的元素删除

2.detach()方法

detach()和remove()一样都是去除DOM中所有匹配的元素。不过detach()不会把匹配的元素从jQuery中删除，而且它所绑定的事件、附加的数据均会被保留下来。

3.empty()方法

empty()方法可以清空元素中的所有后代节点。它严格来说不会删除元素，而是清空所匹配元素中的内容

复制节点 clone()

$('ul li').click(function(){
    $(this).clone().appendTo('ul');     //复制当前点击的节点，并将它追加到ul元素中
})

复制节点后，复制的新元素不具备任何行为。如果需要新元素野具有辅助功能，需在clone()方法中传入一个参数true。（深度克隆）

替换节点

如果要替换某个节点，jQuery提供了两个方法：replaceWith()、replaceAll()

$('p').replaceWith('
hahahah
');
$('
hahahah
').replaceAll('p');    //replaceAll()的用法只是颠倒了replaceWith()操作

包裹节点

• wrap(X) 将所有匹配到的元素使用X进行单独包裹
• wrapAll(X) 将所有匹配到的元素用一个X来包裹
• wrapInner(X) 将每一个匹配到的元素的子内容使用X来包裹

属性操作

• 获取属性和设置属性 attr()
• 删除属性 removeAttr()

样式操作

• 获取样式和设置样式 attr('class')
• 追加样式 addClass()
• 移除样式 removeClass()
• 切换样式 toggleClass()
  toggleClass()方法可以控制样式上的重复切换。如果类名存在就删除它，如果不存在就添加它。$('p').toggleClass(another)
• 判断是否含有某个样式 hasClass()

设置和获取HTML、文本和值

1. html() 此方法类似于JavaScript中的innerHtml属性。可以用来读取或设置某个元素中的HTML内容

   var p_html = $('p').html        //获取p元素的html
   $('p').html('hahhahaha');    //设置p元素的html代码
   

2. text() 此方法类似于JavaScript中的innerText属性。可以用来读取或设置某个元素中的文本内容
3. val() 此方法类似于JavaScript中的value属性。可以用来读取或设置某个元素的值。

    //利用val()属性实现当点击文本框时，文本框中的内容将被清除
    //html
     用户名：
    密码：
   //js
   $('#acc').focus(function () {
       if ($(this).val() == this.defaultValue){
           $(this).val('');
        }
    });
     $('#acc').blur(function () {
        if ($(this).val() == ''){
            $(this).val('请输入用户名');
        }
    });
    //同理，密码框也类似

在此例子中，也可以使用表单元素的defaultValue属性来实现同样的功能
if ($(this).val() == this.defaultValue){...} //this.defaultValue就是当前文本框默认值

样式遍历节点

1. children()

用于取得匹配元素的子元素集合且只考虑子元素不考虑其他后代元素

2. next()

用于取得匹配元素后面紧邻的同辈元素

3. prev()

用于取得匹配元素前面紧邻的同辈元素

4. siblings()

用于取得匹配元素前后所有的同辈元素

closest()、parent()、parents()

方法	描述
parent()	获取集合中每个匹配元素的父级元素
parents()	获取集合中每个匹配元素的祖先元素
closest()	从元素本身开始，逐级想上级元素匹配, 并返回最先匹配的祖先元素

CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。

css() 用于获取或设置元素的样式属性

height()、width()用于获取或设置元素的高、宽

当使用css()方法获取元素宽/高时，得到的结果与样式的设置有关，可能会得到auto，也可能是“10px”之类的字符串；而height()的到的是元素在页面的实际高度，不带单位

在CSS-DOM的操作中，关于元素定位有以下几个经常使用的方法

1. offset()方法：它的作用是获取元素在当前视窗的相对位移，其中返回的对象包含两个属性，即top和left。它只对可见的元素有效。

var offset = $('p').offset();   
var left = offset.left;     //获取左偏移量
var top = offset.top;       //获取右偏移量

2. position()方法：它的作用是获取元素相对于最近一个position属性设置为relative或absolute的祖先元素的相对位移，其中返回的对象包含两个属性，即top和left。
3. scrollTop()和scrollLeft()方法：它的作用是获取元素的滚动条距顶端和距左端的距离。