dom操作的分类:
1.DOM Core(核心)
2.HTML DOM
3.css DOM
jquery中的dom操作:
一 查找节点
1>查找节点元素(同过前面讲的选择器来得到)
var $li=$("ul li:eq(1)");//获取<ul>里第二个<li>节点 var li_text=$li.text();//获取第二个<li>元素节点的文本内容
2>操作节点属性
var $p=$("p");//获取<p>节点 var ptext=$.attr("title");//获取<p>元素节点属性title
二 相关节点操作 创建:主要通过$(html)这个方法来完成
1>创造元素节点
var $li1=$("<li></li>")//创造第一个<li元素> var $li2=$("<li></li>")//创造第二个<li元素>
2>创造文本节点
var $li1=$("<li>乒乓球</li>")//创造第一个<li元素> var $li2=$("<li>羽毛球</li>")//创造第二个<li元素>
>3创建属性节点
var $li1=$("<li title="乒乓球">乒乓球</li>")//创造第一个<li元素> var $li2=$("<li title="羽毛球">羽毛球</li>")//创造第二个<li元素>
插入节点:
1>插入到元素内部
append(),appendTo(),prepend(),prependTo();
2>插入到元素外面
after(),insertafter(),before(),insertbefor();
注:
append(),appendTo()的区别和prepend(),prependTo()的区别一样都是将要插入的地方的标识和要插入的内容做了对调.
after(),insertafter()的区别和before(),insertbefor()的区别一样都是将要插入的地方的标识和要插入的内容做了对调.
删除节点:
1>remove()
$("ul li:eq(1)").remove();//获取第二个<li>元素节点后,将它从网页中移除.
这个放过会返回一个指向已被删除的节点的引用,删除只是从网页中删除,在jquery对象中,这个元素还在,还可重新利用. 2>empty()
$("ul li:eq(1)").empty();//获取第二个<li>元素节点后,清空此元素里的内容
这个方法 不是删除节点,而是清空节点.
复制节点:
clone()
若传递一个参数true,则会将元素的绑定事件一起复制.
替换节点:
replaceAll()和replaceWith()(是一对颠倒方法).
包裹节点:
1>wrap()
将所有匹配的元素用其他元素的结构化标记包裹起来.
2>wrapall()
将所有匹配的元素用单个元素包裹起来.
3>wrapinner()
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来.
属性操作:
1>获取和设置属性
var $para=("p")//获取<p>节点 var p_txt=$para.attr("title")//获取<p>元素节点的属性title $("p").attr("title","我的标题");//将<p>的title属性值设为:"我的标题"
2>移除属性 removeAttr()
$("p").removeAttr("title");//删除<p>元素的属性title
样式操作:
1>获取和设置样式:css();
2>追加样式:addClass();
3>移除样式:removeClass();
4>切换样式:toggle();
5>判断是否含有某个样式:hasClass(),返回true或false;
获取,设置HTML,文本的值:
1>html();
2>text();
3>val();
遍历节点:
1>取得匹配元素的子元素集合:children();
2>取得匹配元素后面紧邻的同辈元素:next();
3>取得匹配元素前紧邻的同辈元素:prev();
4>取得匹配元素前后所有同辈元素:sibings();
5>去取得最近的匹配元素:closest();
三 css DOM操作
1>获取和设置元素样式属性:css();
2>获取和设置透明du:opacity();
3>获取和设置元素的宽和高:height(),width();
4>获取元素在当前视窗的相对偏移量:offset();
5>获取元素相对于最经\近的一个position样式属性为relative或absolute的祖父节点的相对偏移:position();
6>获取元素的滚动条距顶端和距左侧的距离:scrollTop(),scrollLeft();
新手上路,请多指教,万分感激
