jQuery之DOM操作大全Word格式.docx
《jQuery之DOM操作大全Word格式.docx》由会员分享，可在线阅读，更多相关《jQuery之DOM操作大全Word格式.docx（11页珍藏版）》请在冰豆网上搜索。
,title:
jQuery换了一张图片"
}）;
通过绑定方法设置元素的属性：
attr（key,function（index））
function（）{Math.floor（Math.random（））+"
.jpg"
}）;
删除元素的属性：
removeAttr（name）
（"
）.removeAttr（"
title"
jQuery内容操作
获取元素的HTML内容：
html（）
设置元素的HTML内容：
html（value）
获取元素的文本内容：
text（）
设置元素的文本内容：
text（value）
text（）与html（）获取到的内容有什么区别呢？
text（）获取只获取文本，当该元素下有html代码时会被自动去除。
如对于代码：
<
divid="
div1"
>
p>
测试文本<
/p>
/div>
#div1"
）.text（）;
获取到的是：
测试文本"
而$（"
）.html（）;
获取到的是：
对于设置而言:
）.html（"
实际在浏览器显示的是：
。
也就是说，<
会被浏览器解释。
）.text（"
实际在浏览器显示得是：
也会当做文本显示出来。
jQueryvalue操作
获取value：
val（）
#input1"
）.val（）;
设置value:
val（value）
）.val（"
确认提交"
jQuerycss操作
jQuery设置单一CSS样式语法：
css（name,value）
）.css（"
background-color"
blue"
生成的代码为
style="
background-color:
blue;
）.css（{"
:
red"
color:
wihte"
生成的代码为<
red;
color:
white"
//注意一次过设置多个CSS样式时有"
-"
横线的css要用双引号括起来
jQuery追加CSS类别语法:
addClass（class）注意它还会保留原有的CSS类别
）.addClass（"
css1"
生成的代码为<
class="
生成的样式会被浏览器解释显示。
若继续执行:
css2"
css1css2"
jQuery切换类别语法：
当元素已含有同名称的className的CSS类别时，删除该类别。
如果没有则增加一个该名称的类别。
toggleClass（className）
toggleClass对于参数className的样式有则删除，无则添加。
例子1:
）.toggleClass（"
css_1"
当再次执行同样的代码$（"
例子2：
再执行：
css_2"
css_1css_2"
注意此处不是将css_1替换为css_2
再执行$（"
jQuery删除类别语法:
removeClass（[class]）可以删除1个多个或全部删除
有这样一段代码<
class="
执行
$（"
）.removeClass（"
执行后的代码为:
"
）<
执行后的代码为<
执行$（"
）.removeClass（）;
执行后的代码为<
class>
jQuery创建节点
jQuery创建节点语法：
$（html）
div>
jQuery创建的节点<
这样就创建了一个div节点。
执行一下两行代码
vardom=$（"
span>
/span>
）.append（dom）;
//注意仅仅创建是无效的，必须要插入到页面内部才会生效。
执行后的结果为:
<
jQuery插入节点
内部插入节点：
append（content）
content表示追加到目标的内容
原有代码:
）.append（"
jQuery插入节点<
生成的代码为：
此处插入的是新建的节点。
如果是将页面上原有的节点append（）会怎么样呢？
例子2:
原有代码:
第一个DIV1<
div2"
spanid="
span1"
DIV2里的span1<
）.append（$（"
#span1"
））;
后的代码为:
注意到:
实际上相当于把第二个div里的span移到第一个div里面了。
appendTo（content）
content表示被追加元素（一般是已经存在页面上的元素）
原有代码<
一个P元素<
）.appendTo（$（"
我是div2里的span1<
执行：
append（function（index,html））
将一个function函数作为append方法的参数;
原有代码
执行:
）.append（getHtml（））;
functiongetHtml（）{return"
jQuery通过调用函数生成了我!
;
}
执行后的代码为：
该方法常用于动态生成html再追加到页面元素中
此外插入节点的方法还有：
prepend（content）
prepend（function（index,html））
prependTo（content）
这三个方法的使用与append的三个方法大致一样。
主要区别是prepend在插入的时候是插入到原有内容的前面，而append是插入到原有内容的后面。
原有代码：
原有内容<
）.prepend（"
prepend插入的节点<
append追加的节点<
之后代码为：
外部插入节点：
after（content）
after（function）
before（content）
before（function）
afterbefore与appendprepend的区别是，插入的时候，after与before与被插入元素是兄弟关系，而append和prepend与被插入元素是父子关系。
例子:
原有代码<
我是原有的P元素<
执行代码：
我是prepend函数插入的p元素<
我是append函数插入的p元素<
）.after（"
divid=\"
div3\"
我是after函数插入的div元素<
）.before（"
div2\"
我是before插入的div元素<
执行后的实际代码为：
我是原有的p元素<
div3"
外部插入节点方法2
insertAfter（content）
insertBefore（content）
有如下代码
divid=
升级会员 