首页 > 代码库 > 锋利的jQuery第三章
锋利的jQuery第三章
现在开始学习第三章,jQuery中的Dom操作。
以前我也看过w3school的dom,看过了很迷,不知道dom是什么。
1,dom是文档对象模型,dom操作分为3类:Dom Core(核心),HTML-DOM,CSS-DOM
(1)Dom Core(核心):主要有getElementById(),getElementByTagName(),getAttribute()和setAttribute()等方法。
(2)HTML-DOM:如 document.forms //取得forms对象; element.src;//获取元素属性
(3)CSS-DOM:主要针对css操作,如element.style.color = "red";
2,节点操作:
(1)获取和创建
var $para=$("p"); //获取<p>节点var p_txt=$para.attr("title"); //获取<p>属性title//创建节点var $li=$("<li title=‘香蕉‘>香蕉</li>");//直接返回一个jQuery对象
(2)插入节点
<p>我想说:</p><b>你好</b>var $p=$("p"); //获取<p>var $b=$("b"); //获得<b>(1)$p.append($b);//<p>元素内部追加内容得到<p>我想说:<b>你好</b></p>$b.appendTo($p);//把$b追加到$p中得到<p>我想说:<b>你好</b></p>这两个就是正好相反。(2)$p.prepend($b);//<p>元素内部前置内容得到<p><b>你好</b>我想说:</p>$b.prependTo($p);//把$b前置到$p中得到<p><b>你好</b>我想说:</p>(3)$p.after($b); //在$p后面添加$b<p>我想说:</p><b>你好</b>$b.insertAfter($p); //把$b插入到$p后<p>我想说:</p><b>你好</b>(4)$p.before($b);//在$p之前插入$b<b>你好</b><p>我想说:</p>$b.insertBefore($p);//把$b插入到$p之前<b>你好</b><p>我想说:</p>
(3)删除节点:
(1)remove()方法:从dom中删除匹配元素,参数用于根据jQuery表达式来筛选元素var $li=$("ul li:eq(1)").remove();//获取第2个li并从网页删除$li.appendTo("ul"); //把刚才删除的节点重新添加到ul中$("ul li").remove("li[title!=菠萝]");//将li中属性不等于菠萝的li删除(2)detach()方法:从dom中去掉匹配元素,但是不从jQuery对象中删除;与remove()不同,所有绑定的事件、附加的数据都会保存下来。$("ul li").click(function(){ alert($(this).html() ); })var $li = $("ul li:eq(1)").detach();//删除元素$li.appendTo("ul");//重新追加此元素,之前绑定的click事件还在。(3)empty()方法:清空元素中的所有后代节点。$("ul li:eq(1)").empty();//清空后是:<li title="橘子"/>
(4)复制和替换节点:
(1)clone()方法:复制$("ul li").click(function(){ $(this).clone().appendTo("ul");//复制当前节点,追加到ul中});$(this).clone(true).appendTo("body");//复制当前节点,追加到body中,同时复制绑定的事件。(2)replaceWith()方法:$("p").replaceWith("<strong>你好</strong>");//把<p>换成<strong>你好</strong>(3)replaceAll()方法:$("<strong>你好</strong>").replaceAll("p");//把<p>换成<strong>你好</strong>; replaceWith()和replaceAll()颠倒了操作。如果替换之前已经为该元素绑定事件,替换后原先绑定的事件和被替换的元素将一起消失。
(5)包裹节点:
(1)wrap()方法:$("strong").wrap("<b></b>");//用<b>把<strong>包裹起来,结果如下:<b><strong>香蕉</strong></b><b><strong>苹果</strong></b>(2)wrapAll()方法:将所有选择出的元素 单独包裹,包在一个下面$("strong").wrapAll("<b></b>");//strong单独包裹,结果如下:<b><strong>香蕉</strong><strong>苹果</strong></b>(3)wrapInner()方法:将每一个匹配的元素的子内容(包括文本节点)用其他标记包裹:$("strong").wrapInner("<b></b>");//结果如下:<strong><b>香蕉</b></strong><strong><b>苹果</b></strong>
3,属性操作
(1)获取或设置属性:
(1)获取属性,只需要给方法attr()传递属性名称的参数var $para = $("p"); //获取<p>var p_txt = $para.attr("title"); //获取<p>的title属性(2)$("p").attr("title","your title");//设置单个属性,两个参数$("p").attr({"title" : "your title", "name" : "test" });//将一个“名/值"形式的对象设置为匹配元素的属性像html(),text(),height(),width(),val(),css()等既可以获取属性值也可以设置属性值。(3)删除属性removeAttr()方法("p").removeAttr("title");//删除<p>的属性title如<p title="苹果">苹果</P>得到<p>苹果</p>
4样式操作:
(1)追加样式:addClass()$(”p").addClass("another");//给<p>追加“another”类如<p class="high">高亮样式</p>得到<p class="high another">高亮样式</p>(2)移除样式:removeClass()$(”p").removeClass("another")//给<p>移除"another"类<p class="high another">高亮样式</p>得到<p class="high">高亮样式</p>$("p").removeClass("high").removeClass("another");//移除多个样式<p class="high another">高亮样式</p>得到<p>高亮样式</p>$("p").removeClass("high another");//移除多个样式$("p").removeClass();//将<p>所有样式移除(3)切换样式toggleClass()$("p").toggleClass();//重复切换类名“another"如果原来的class值为myClass,这样<p>的class值就在"myClass"和”myClass another"之间切换.(4)判断是否含有某个样式hasClass()$("p").hasClass("another");//含有返回true,不含有返回false
5,设置和获取html,文本和值
(1)html()方法,获取html内容<p><strong>苹果</strong></p>var p_html = $("p").html(); //获取p的html:<strong>苹果</strong> $("p").html(<strong>苹果</strong>);//设置<p>的html(2)text()方法,获取或设置文本值<p><strong>苹果</strong></p>$("p").text(); //获取<p>的文本内容:苹果(3)val()方法:获取文本框,下拉列表,单选框等的值,如为多选,返回数组。
$("#check1).val();//获取check1的value
$("#check1).val("1");//设置check1的value为1
下面是有关 邮箱登录默认状况的例子,单击时文本框变空:
<script src=http://www.mamicode.com/"jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript" > $(document).ready(function(){ //等待所有dom绘制完成后就执行 $("#username").focus(function(){ var txt = $(this).val();//获取值 if(txt == "请输入帐号"){ $(this).val(""); }//if });//$("#username") $("#username").blur(function(){ var txt = $(this).val();//获取值 if(txt == ""){ $(this).val("请输入帐号"); }//if });//$("#username") $("#password").focus(function(){ var txt = $(this).val();//获取值 if(txt == "请输入密码"){ $(this).val(""); }//if });//$("#password") $("#password").blur(function(){ var txt = $(this).val();//获取值 if(txt == ""){ $(this).val("请输入密码"); }//if });//$("#password") }); //$(document) </script></head><body><input type="text" id="username" value=http://www.mamicode.com/"请输入帐号" /><input type="text" id="password" value=http://www.mamicode.com/"请输入密码" /><input type="button" value=http://www.mamicode.com/"登录" /></body></html>
下面是使用val()方法设置select,checkbox,radio的值的例子:
<script src=http://www.mamicode.com/"jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript" > $(document).ready(function(){ //等待所有dom绘制完成后就执行 $(":button").click(function(){ $("#single").val("选择2号");//改变单选select的值 $("#multiple").val(["选择2号","选择3号"]);//以数组的形式出现 $(":checkbox").val(["check1","check2"]); $(":radio").val(["radio2"]); //单选也要放在数组中 });//$(button) }); //$(document) </script></head><body><select id="single"> <option>选择1号</option> <option>选择2号</option> <option>选择3号</option></select><select id="multiple" multiple="multiple" style="height:120px;"> <option selected="selected">选择1号</option> <option>选择2号</option> <option>选择3号</option> <option selected="selected">选择4号</option></select><input type="checkbox" value=http://www.mamicode.com/"check1" />多选1<input type="checkbox" value=http://www.mamicode.com/"check2" />多选2<input type="radio" value=http://www.mamicode.com/"radio1" />单选1<input type="radio" value=http://www.mamicode.com/"radio2" />单选2 <input type="button" value=http://www.mamicode.com/"改变选择的项" /></body></html>
6,遍历节点:
(1)children()方法:获取匹配元素的子元素集合,只考虑子元素不考虑后代元素。var $ul = $("ul").children();//获取ul的子元素集合(2)next()方法:获取匹配元素后面紧邻的同辈元素var $p1 = $("p").next();//取得<p>后面紧邻的同辈元素(3)prev()方法:获取匹配元素前面紧邻的同辈元素var $p1 = $("p").next();//取得<p>前面紧邻的同辈元素(4)siblings()方法:获取匹配元素前后所有的同辈元素var $p2 = $("p").siblings();(5)closest()方法:获得最近的匹配元素。首先检查当前元素是否匹配,如果匹配直接返回它,否则向上查找父元素,直到找到匹配元素,找不到就返回空。$(document).bind("click",function(e){ $(e.target).closest("li").css("color","red");});//给点击的目标元素最近的li元素添加颜色
(6)parent()获取集合中每个匹配元素的父级元素
parents()获取集合中每个匹配元素的祖先元素
closest()从元素本身开始,逐级向上级匹配,并返回最先匹配的祖先节点。
7,CSS-DOM操作:
(1)$("p").css("color");//获取<p>元素的样式颜色$("p").css("color","red");//设置<p>元素的样式颜色$("p").css({"fontSize":"30px","backgroundColor":"#888888"});//设置<p>元素的多个样式(2)$("p").css("opacity","0.5");//设置半透明(3)$("p").css("height");//获取高度$("p").height();//获取高度 ,默认单位是pxcss获取的高度和样式有关,有可能是auto,height()获取的高度为元素在页面的实际高度,不单单位。(4)offset()方法:获取元素在当前视窗的相对偏移,两个属性top和leftvar offset = $("p").offset();var left = offset.left; //获取左偏移var top = offset.top; //获取上偏移(5)scollTop()方法和scollLeft()方法:获取元素的滚动条距离顶端和左端的距离:var $p = $("p");var scrollTop = $p.scollTop();//获取<p>的滚动条距离顶端的距离var scrollLeft = $p.scollLeft();//获取<p>的滚动条距离左端的距离
有关鼠标移动提示的例子:
<script src=http://www.mamicode.com/"jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript" > $(document).ready(function(){ //等待所有dom绘制完成后就执行 var x = 10; //让显示的位置里鼠标远些 var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title;//获取title this.title = "";//内容清空 var tooltip = "<div id =‘tooltip‘>"+this.myTitle + "</div>";//创建一个div $("body").append(tooltip);//追加到文档 $("#tooltip") .css({ "top":(e.pageY + y) + "px", "left":(e.pageX + x) + "px" }).show("fast"); //设置坐标并且显示 })//mouseover .mouseout(function(){ this.title = this.myTitle; $("#tooltip").remove(); //移除 }) //mouseout .mousemove(function(e){ //移动事件 $("#tooltip") .css({ "top":(e.pageY+y) + "px", "left":(e.pageX+x) + "px" }); })//mousemove }); //$(document) </script></head><body><p><a href=http://www.mamicode.com/"#" class="tooltip" title="超链接提示1">我定义的提示</a></p><p><a href=http://www.mamicode.com/"#" title="超链接提示2" >title自带的提示</a></p></body></html>
总结:有关dom的三个方面,core,html,css
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。