您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
jQuery DOM操作实例
作者：佚名 责任编辑：admin 更新时间：2022-06-22
本文用代码的方式详细讲解了jQuery的DOM操作,具体操作方法请详细参看代码中的注释部份
都来加深印象吧，大家都知道jQuery很好使用，因为它简化了javascript代码，更重要的是它还兼容基本上所有的浏览器，网页开发最头疼的就是这个了，所以jQuery也因此深受码农的喜爱，不过首先你得要记住它才能更好的使用它不是吗，过久了没用的属性方法也会淡忘的，下面是jQuery的DOM操作方法属性的详解，看看加深下印象。 例子虽丑功能还俱全呢！ 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> body { /*color: purple;*/ } .a{ color:red; } .b { color:purple; } </style> <script src="script/jquery-1.4.1.js"></script> </head> <body> <p id="div">class</p> <div id="all" class="a" >all <input type="text" value="text" name="text" id="text"/> <p id="p">p</p> <ul id="ul"> <li id="a">苹果</li> <li id="b">脐橙</li> <li id="c">柚子</li> </ul> <div id="d"> <p>内容</p> </div> <input type="button" value="鼠标悬浮效果" id="over" /> </div> <script type="text/javascript"> $().ready(function () { var p = $("#p"); //alert(p.attr("id"));//attr("属性名")获取属性，attr("属性名","属性值")设置属性 //p.attr("title","title");//设置属性 //p.removeAttr("id");//删除指定元素属性名的元素属性 //$("#all").attr("class", "class");//设置class属性，如此设置属性会替换前面的class属性(class='class') //$("#all").addClass("class");//设置class属性，在原来的class属性里面追加一个class(class='all class')如果一个class里面有相同的属性(比如color),那么后者会覆盖前者 //$("#all").removeClass("all");//删除指定的class属性 //$("#all").removeClass();//移除class里面所有的class属性 //$("#all").toggle(//交替方法 // function () { // $(this).css("color","red"); //}, function () { // $(this).css("color","purple"); //}); //$("#div").click(function () { $("#all").toggle();});//用于显示隐藏交替指定的元素 //$("#all").click(function () { $("#div").text("class属性为："+$("#all").attr("class"));}); //$("#all").click(function () { // $("#all").toggleClass("b") //}); //alert($("#all").hasClass("all"));//判断是否有此class属性 //alert($("#all").is(".all"));//效果同上 //alert($("#all").html());//同等于InnerHTML效果 //$("#all").html("设置成功"); //alert($("#all").text());//获取所有的文本内容 //$("#all").text("设置成功"); //alert($("[name='text']:eq(0)").val());//同等于value属性(val("设置属性值")) var newP = $("<p id='newP'>newP</p>");//创建元素，创建单个元素时因(<p/>)加上/ //p.append(newP);//追加元素到p内部后面(<p id='p'>p<p id='newP'>newP</p></p>) //newP.appendTo(p);//将newP追加到p内部后面 //p.prepend(newP);//追加元素到p内部前面(<p id='p'><p id='newP'>newP</p>p</p>) //newP.prependTo(p);//将newp追加到p内部前面 //p.after(newP);//追加元素到p元素的后面(<p id='p'>p</p><p id='newP'>newP</p>) //newP.insertAfter(p);//将newP追加到p元素的后面 //p.before(newP);//追加到p元素的前面 //newP.insertBefore(p);//将newP追加到p元素前面 //苹果 脐橙 柚子 移动属性节点 var a = $("#a"); var c = $("#c"); //c.insertBefore(a);//把c(柚子)元素移动到a(苹果)元素的前面 //a.remove();//删除节点(所有的后代节点也将被删除) //a.remove(); //c.after(a);//删除元素在添加回去 //$("ul>li").remove("li[id='a']");//根据条件删除指定元素 //a.empty();//清空元素里面的所有 //a.clone().insertAfter(c);//把复制的节点a(苹果)添加到c(柚子)的后面 //$("#d").replaceWith("<span>span</span>");//把id为#d元素里面的所有文本元素替换成指定的内容文本 //$("<span>span</span>").replaceAll("#d");//同上,只是顺序反了 //$("#ul").wrap("<b></b>");//把id为#ul的元素用<b>标签包裹起来(如果假设有多个ul元素的话此方法会将每个ul都用一个<b>包裹起来) //$("#ul").wrapAll("<b></b>");//把id为#ul的元素用<b>标签包裹起来(如果假设有多个ul元素的话此方法会将所有的ul用一个<b>包裹起来) //$("#ul").wrapInner("<b></b>")//将- 上一个程序编程： thinkphp中常用的系统常量和系统变量
- 下一个程序编程： JSON中双引号的轮回使用过程中一定要小心
