jquery的操作，dom操作

这次分享的是jquery的操作，也就是jquery对dom的操作。在html中，html可以是dom的节点，也就是整个html中的任何内容都是dom节点，而要对html进行操作或者修改的话，只要选中dom节点就可以了。而jquery的选择器就能十分有效的对这些节点进行选择，jquery的操作部分就能很便利的对节点进行操作，而我要分享的就是jquery的操作（动作）。

一、js中的dom操作

1、dom创建

dom的节点可以对应html中的每一个部分，当你想要知道DOM节点当前部分的类型的时候你可以用

nodeType

对于创建节点而言，有

document.createElement;
document.creatTextNode;

可以这么写：

var elment1 = document.createElement('div');
var element2 = document.createElement('input');
var node = document.createTextNode('hello world!';

2、DOM查询

ele.parentElement;//获取父元素
ele.parentNode;//获取父节点
ele.children;//获取子节点
ele.getElementsByTagName('');//通过属性名称查询子元素
ele.getElementsByClassName('');//通过类名称查询子元素
ele.firstElementChild;//ele元素的第一个子元素节点
ele.lastElementChild;//ele元素的最后一个子元素节点
ele.nextElementSibling;//ele元素的下一个兄弟元素节点
ele.previousElementSibling;//ele元素的上一个兄弟元素节点

3、DOM更改

ele.appendChild(el);//添加子元素
ele.removeChild(el);//删除子元素
ele.replaceChild(el1, el2);//替换子元素
parentElement.insertBefore(newElement, referenceElement);//插入子元素

4、属性操作

el.getAttribute('');//获取属性
el.setAttribute('');//设置属性
el.hasAttribute('');//判断属性
el.removeAttribute('');//移除属性

5、关于innerHTML和outerHTML.

innerHTML//内部html
outerHTML//外部html
innerText//内部文本
outerText//内部文本

<div id='home'><p>text  page</p></div>//<div></div>是outerHTML部分，<p></p>是innerHTML部分，text page这些文字部分是innerText部分，而outerText部分的改变会把标签页它哦哦嗯是改变，而innerText部分是只改变文字部分

二、jquery中的一些简单的dom操作

先给一个html的代码

<p title='车'>你最喜欢的跑车品牌</p>
<ul>
    <li title='奥迪'>奥迪</li>
    <li title='法拉利'>法拉利</li>
    <li title='劳斯莱斯'>劳斯莱斯</li>
</ul>
//一般的网页的dom树是这样的：html下分为head子和body子;head分为meta子，title子，style子
等，body包括ul子，ul子里面包括li子等等。

//查找文本和节点
$('ul li:eq(1)').text()//查找ul中的第二个li元素的文本内容
$('p').attr('title')//获取p元素节点的属性title

//创建元素的节点
$('ul').append($('<li></li>'))//把li 元素添加到ul中
//创建文本节点
$('ul').append($('<li>宝马</li>'))//添加节点和文字
//创建属性节点
$('ul').append($('<li title=宝马>宝马</li>'))//创建属性节点并且添加
//除了append之外还有appendTo(),这个语句和append语句是相反的，是$(a).append(b)
是把a添加到b中;prepend(),这个语句是向每个元素内部前置内容。其他的还有prependTo(),after(),insertAfter(),before(),insertBefore().

//删除节点
$('ul li:eq(1)').remove();//删除ul中第二个元素也就是  法拉利
//如果想要移动一个节点怎么办？分两步：1.先删除，2.后添加
$('ul li:eq(1)').detach();//也是删除节点   但是与上面不同的是  这个不会删除匹配元素，只是去掉，数据库中还存在它的影子
$('ul li:eq(1)').empty();//清空节点,可以清空元素中的所有后代节点

//复制节点
$('ul li').click(fucntion){
    $(this).clone(true).appendTo('ul');//复制当前点击的节点并且并且将它和它的功能加入到ul元素中。如果clone中不写true的话就仅仅是追加当前点击的节点，并没有功能
}

//替换节点
replaceWith()//将所有匹配的元素都替换成指定的HTML或者DOM元素
$('p').replaceWith("<strong>你最不喜欢的跑车是？"<strong>);//把网页中p标签里面的title属性以及p标签的内容换成了 你最不喜欢的跑车是？
$("<strong>你最不喜欢的水果是？</strong>").replaceAll('p')//和上面的代码所要实现的功能一样，只是顺序翻了一下而已。

jquery的操作，dom操作

猜你喜欢