锋利的JQuery-Jquery中DOM操作
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>dom</title> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html>
查找节点
1.查找元素节点
var $li=$("ul li:eq(1)")//获取<ul>里第2个<li>节点 var li_txt=$li.text();//获取第2哥<li>元素节点的文本内容 alert(li_txt);
2.查找属性节点
var $para=$("p");//获取<p>节点 var p_txt=$para.attr("title");//获取<p>元素节点属性titile alert(p_txt);
创建节点
1.创建元素节点
var $li_1=$("<li><li>");//创建第1个<li>元素 var $li_2=$("<li><li>");//创建第2个<li>元素
然后将两个元素插入文档中
$("ul").append($li_1);//添加到<ul>节点中,使之能在网页中显示 $("ul").append($li_2);//可以采用链式方法:$("ul").append("$li_1").append("$li_2")
2.创建文本节点
var $li_1=$("<li>香蕉<li>");//创建第1个<li>元素 var $li_2=$("<li>雪梨<li>");//创建第2个<li>元素 $("ul").append($li_1);//添加到<ul>节点中,使之能在网页中显示 $("ul").append($li_2);//可以采用链式方法:$("ul").append("$li_1").append("$li_2")
3.创建属性节点
var $li_1=$("<li title="雪梨">雪梨<li>");//创建第1个<li>元素 var $li_2=$("<li title="香蕉">香蕉<li>");//创建第2个<li>元素 $("ul").append($li_1);//添加到<ul>节点中,使之能在网页中显示 $("ul").append($li_2);//可以采用链式方法:$("ul").append("$li_1").append("$li_2")
插入节点
append() | 向每个匹配的元素内部追加内容 |
appendTo() | |
prepend() | |
prependTo() | |
after() | |
insertAfter() | |
before() | |
insertBefore() |
删除节点
1.remove()方法
找到匹配元素,删除
$("ul li:eq(1)").remove();//获取第二个<li>元素借点后将他从网页后删除
该节点删除后多有后代节点同时被删除,但是这个方法返回值就是被删除节点的引用
var $li=$("ul li:eq(1)").remove();//获取第二个<li>,删除 $li.appendTo("ul")//把刚才删除的元素重新添加到<ul>
remove方法也可以通过传递参数来选择性地删除元素
$("ul li").remove("li[title!=菠萝]");//将<li>元素中属性title不等于“菠萝”的<li>元素删除
2.empty()方法
清空节点里的所遇内容
$("ul li:eq(1)").empty();//获取第二个<li>元素节点后,清空次元素里的内容,注意是元素里
克隆节点
$("ul li ").click(function(){ $(this)/clone().appendTo("ul");//复制当前单机的节点,并将他追加到<ul>元素中 })
替换节点
replaceWith()将所有匹配的元素都替换成指定的HTML或者DOM元素。
<p title="选择你最喜欢的水果">你最喜欢的水果</p>//替换成 <strong>你最喜欢的水果是?</strong>//用如下js S("p").replaceWith("<strong>你最不喜欢的水果是?</strong>")//replaceWith //也可以用 $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p")
包裹节点
wrap()匹配元素进行单独包裹
$("strong").wrap("<b></b>");//用<b>标签把<strong>元素包裹起来 //结果如下 <b><strong>你最不喜欢的水果是?</strong></b>
wrapAll()进行整个包裹
warpInner()方法,将子内容进行包裹
$("strong").wrapInner("<b></b>");//用<b>标签把<strong>元素包裹起来 //结果如下 <strong><b>你最不喜欢的水果是?</b></strong>
属性操作
1.获取属性
var $para=$("p"); var p_txt=$para.attr("title")//获取<p>节点属性title $("p").attr("title","your title");//设置单个属性值
2.删除属性
$("p").removeAttr("title");//删除属性
样式操作
1.获取和设置样式
<p class="myclass" title="选择你喜欢的水果">选择你喜欢的水果</p>
var p_class=$("p").attr("class");//获取样式 $("p").attr("class","high")//设置样式
2.追加样式
.high{ font-weight:bold; /* 粗体字 */ color : red; /* 字体颜色设置红色*/ } .another{ font-style:italic; color:blue; }
$("input:eq(2)").click(function(){ $("p").addClass("another"); });
3.样式移除
<p class="high another">test</p>
$("p").removeClass("high");//移除<p>元素中值为“high”的class $("p").removeClass("high").removeClass("another");//移除两个元素 $("p").removeClass("high another")//同样效果 $("p").removeClass();//移除所有的class
4.切换样式
$("p").toggleClass("another")
5.判断是否含有某种样式
$("p").hasClass("another");
设置和获取HTML、文本和值
1.html()
<p class="myclass" title="选择你喜欢的水果"><strong>选择你喜欢的水果</strong></p>
var p_text=$("p").html();//<strong>选择你喜欢的水果</strong>
设置
$("p").html("<strong>你最喜欢的水果是?</strong>")
2.text()
var p_text=$("p").text();//选择你喜欢的水果
设置:
$("p").text("你最喜欢的地方")
3.val()
案例,文本框获取焦点,自动清空
<input type="text" value="请输入邮箱地址"/> <br/><br/> <input type="text" value="请输入邮箱密码"/> <br/><br/> <input type="button" value="登陆"/>
$(function(){ $("#address").focus(function(){ // 地址框获得鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if(txt_value==this.defaultValue){ $(this).val(""); // 如果符合条件,则清空文本框内容 } }); $("#address").blur(function(){ // 地址框失去鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if(txt_value==""){ $(this).val(this.defaultValue);// 如果符合条件,则设置内容 } }) $("#password").focus(function(){ var txt_value = $(this).val(); if(txt_value==this.defaultValue){ $(this).val(""); } }); $("#password").blur(function(){ var txt_value = $(this).val(); if(txt_value==""){ $(this).val(this.defaultValue); } }) });
遍历节点
1.children()只考虑子元素,不考虑后代元素
2.next()取得匹配元素后面紧邻的同辈元素。
3.prev()取得匹配元素前面紧邻的同辈元素
4.siblings()取得匹配元素前后所有同辈元素
5.closest()取得资金的匹配元素
...
CSS-DOM操作
1.offset()获取元素在当前窗口的相对偏移量。其中返回的对象包含两个属性。top,left
var offset=("p").offset(); var left=offset.left; var top=offset.top;
2.position()方法获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移量,与offset一样。返回两个属性
var position=("p").position(); var left=position.left; var top=position.top;
3.scrollTop和scrollLeft分别获取元素的滚动条距离顶端的距离和距离左侧的距离
var $P=$("p"); var scrollTop=$p.scrollTop(); var scrollLeft=$.scrollLeft();
还可以设置
$("textarea").scrollTop(300); $("textarea").scrollLeft(300);