一、文本操作
关于标签内文本，可以使用:text（） 和 innerText，
（一）text（）：适用于jquery，可以同时操作$（selector）列表，无参数时返回标签内文本，一个字符串参数时进行标签内文本设置，
（二）innerText：仅适用于DOM节点，一次仅操作一个节点，innerText直接提取节点文本，innerText = string重新设置节点文本，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="jquery-1.12.4.min.js"></script> </head> <body> <div class="like"> <input type="checkbox" name="ch" value="1" checked="checked"/>画画 <input type="checkbox" name="ch" value="2" disabled="disabled" />游泳 <input type="checkbox" name="ch" value="3" disabled="disabled" />轮滑 <input type="checkbox" name="ch" value="4" />跳舞 </div> <div class="sex"> <input type="radio" name="se" value="1" checked="checked" />男 <input type="radio" name="se" value="2" />女 </div> <select class="sel"> <option value="2" disabled="disabled" >上海</option> <option value="3" selected="selected" disabled="disabled">南京</option> </select> <p>你好，lalalallala，哈哈</p> <div> text可以直接操作$（"selector"）集合，innerText一次只操作一个DOM节点， <p>p2</p> <p>p3</p> </div> <div> <a>hello innerText</a> <a>hello 2</a> </div> <script> $(function(){ //text() console.log($("p").text()); console.log($(".sel>:selected").text()); console.log($("p").first().text()); console.log($("p").text("一个字符串参数：替换原标签文本，返回标签列表")); console.log($("p").last().text("无参数：返回原标签文本")); //innerText() console.log(document.getElementsByTagName("a")[1].innerText); console.log(document.getElementsByTagName("a")[0].innerText="innerText仅设置DOM节点"); }) </script> </body> </html>
二、属性操作
（一）attr（）:一个参数时，提取属性值；两个参数时，设置属性值；使用键值对，同时给多个属性赋值，
（二）prop（），设置checked、disabled、selected之类仅有两个选项的属性，true添加属性值、false删除属性值，但是属性条目还在，
（三）removeAttr（），删除指定属性，存在bug，推荐使用removeProp（）;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="jquery-1.12.4.min.js"></script> </head> <body> <div class="like"> <input type="checkbox" name="ch" value="1" checked="checked" who="lucy" />画画 <input type="checkbox" name="ch" value="2" disabled="disabled" />游泳 <input type="checkbox" name="ch" value="3" disabled="disabled" />轮滑 <input type="checkbox" name="ch" value="4" />跳舞 </div> <p>可以使用键值对，同时设置多个属性</p> <a>可以使用匿名函数对属性赋值</a> <script> $(function(){ //prop $(":checkbox[who]").prop("checked",false).removeAttr("checked").siblings().prop("checked",true); /* //attr var user = $(":checkbox").attr("who"); //提取属性值 console.log(user); $(":checkbox[who]").siblings().attr("who",user); //设置一个属性值 console.log($(":checkbox[who]")); //提取含有特定属性的标签 $(":checkbox[value='4']").removeAttr("who"); //删除指定属性，有bug不推荐 $("p").attr({k1:1,k2:2,k3:'li'}); //使用键值对同时设置多个属性 $("a").attr("num",function(){return 2;}); //使用函数对属性赋值 */ }) </script> </body> </html>
三、类操作
（一）addClass（）：添加类
（二）removeClass（）：删除类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="jquery-1.12.4.min.js"></script> <style> .red{ color:red; font-size:20px; } </style> </head> <body> <p class="cla">addClass、removeClass，</p> <script> $(function(){ $(".cla").addClass("red"); //$(".cla").removeClass("red"); }) </script> </body> </html>
四、标签操作
（一）复制：clone（）
（二）移动：
1、到内部：prepent（）、append（）、prepentTo（）、appendTo（）、
2、在外边：before（）、after（）、insertBefore（）、insertAfter（）、
（三）删除：empty（）、remove（）、detach（）、
（四）替换：replaceWith（）、replaceAll（）、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="jquery-1.12.4.min.js"></script> <style> </style> </head> <body> <div class="insert" style="background:gray"> <p>内部移动：前prepend、prepend to、后append、append to、</p> <p>外部插入：上before、insertBefore、下after、insertAfter、</p> </div> <div class="else" style="background:pink"> <p>删除标签：remove（）</p> <p>清空内容：empty（）</p> <p>复制标签：clone（）</p> </div> <div class="test" style="border:1px solid red;"> <hr> 用于操作测试的标签 <hr> </div> <p>替换</p> <script> $(function(){ var node = $(".test"); console.log(node); //移动 //移动到内部 //$(".insert").prepend(node); //后面标签移动到前面标签里面的最上方 //$(".insert").append(node); //后面标签移动到前面标签里面的最下方 //$(".insert").appendTo(node); //前面标签移动到后面标签里面的最下方 //$(".insert").prependTo(node); //前面标签移动到后面标签里面的最上方 //在外部移动 //$(".insert").after(node); //后面标签移动到前面标签后面 //$(".insert").before(node); //后面标签移动到前面标签前面 //$(".insert").insertAfter(node); //前面标签移动到后面标签后面 //$(".insert").insertBefore(node); //前面标签移动到后面标签前面 //复制 //复制标签的移动，只能将前面标签向后移 //$(".insert").clone().appendTo(node); //$(".insert").clone().prependTo(node); //$(".else").clone().insertAfter(node); //$(".else").clone().insertBefore(node); node.clone().insertAfter($(".insert")); //删除 //$(".test").eq(0).empty(); //标签本身保留，内容删除 //$(".test").eq(0).remove(); //全部删除 //$(".test").eq(0).detach(); //标签本身和内容都删除，但是jq中绑定事件和数据保留 //替换 //$(".test").eq(0).replaceWith("<p>替换</p>"); //后面的替换前面的 //$("<p>替换</p>").replaceAll($(".test")); //前面的替换后面的 //同时使用两个标签时，替换标签移动到被替换的位置，不是复制一份来替换 //$(".else").replaceAll($(".test")); //$(".test").eq(0).replaceWith($(".insert")); }) </script> </body> </html>
五、位置尺寸
（一）高度、宽度
1、height、width，元素当前高度，不含padding、border、margin，
2、innerHeight、innerWidth，元素高度+padding，不含border，
3、outerHeight、outerWidth，元素高度+padding+border，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="jquery-1.12.4.min.js"></script> <style> .p{ margin:20px; padding:25px; } .g{ margin:30px; padding:10px; } .w{ margin:20px; padding:25px; } </style> </head> <body> <div class="p" style="background:gray"> <p>scrollTop</p> <p>scrollLeft</p> <p>offset</p> <p>position</p> </div> <div class="g" style="background:pink"> <p>height\width</p> <p>innerHeight\innerWidth</p> <p>outerHeight\outerWidth</p> </div> <div class="w" style="border:1px solid red;"> <hr> 位置和尺寸 <hr> </div> <script> $(function(){ $("div").each(function(){ //height console.log("height\width:",$(this).height(),$(this).width()); //innerHeight = height + padding-top + padding-bottom； console.log("innerHeight\innerWidth:",$(this).innerHeight(),$(this).innerWidth()); //outerHeight = innerHeight + border-top + border-bottom; console.log("outerHeight\outerWidth:",$(this).outerHeight(),$(this).outerWidth()); }); }); </script> </body> </html>
（二）位置
1、offset：元素相对于document的偏移，
2、position：元素相对于最近定位父标签的偏移，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="jquery-1.12.4.min.js"></script> <style> body{ margin:0; padding:0; } .p{ margin:20px; padding:25px; } .g{ margin:30px; padding:10px; } .w{ margin:20px; padding:25px; } </style> </head> <body> <div class="p" style="background:gray"> <p>scrollTop</p> <p>scrollLeft</p> <p>offset</p> <p>position</p> </div> <div class="g" style="background:pink"> <p>height\width</p> <p>innerHeight\innerWidth</p> <p>outerHeight\outerWidth</p> </div> <div class="w" style="border:1px solid red;"> <hr> 位置和尺寸 <hr> </div> <script> $(function(){ //offset:元素相对于document的偏移 $("div").each(function(){ console.log("offset:",$(this).offset()); }); //position：元素相对于最近一个定位的父标签的偏移 console.log($(".w").position()); }); </script> </body> </html>
六、其他操作
（一）css（）：添加CSS样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="jquery-1.12.4.min.js"></script> <style> body{ margin:0; padding:0; } </style> </head> <body> <div class="p"> <p>blur</p> <p>change</p> <p>click\dblclick</p> <p>error</p> </div> <div class="g" style="background:pink"> <p>focus\focusin\focusout</p> <p>keydown\keypress\keyup</p> <p>mousedown\mouseenter\mouseleave\mousemove\mouseout\mouseover\mouseup</p> </div> <div class="w" style="border:1px solid red;"> <hr> <p>resize</p> <p>scroll</p> <p>select</p> <p>submit</p> <p>unload</p> <hr> </div> <script> $(function(){ $(".p").css("background","gray"); $("body").css({padding:"10px",margin:"20px",border:"1px solid yellow"}) }); </script> </body> </html>
（二）return 、return false、
1、return：直接跳出当前循环，当前块，
2、return false：表示退出全体循环
（三）each：遍历，有如下两种写法，
1、$（selector）.each（function（）{$（this）...........}）
2、$.each（$（selector），function（）{$（this）...........}）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="jquery-1.12.4.min.js"></script> <style> body{ margin:0; padding:0; } </style> </head> <body> <div class="p"> <p>blur</p> <p>change</p> <p>click\dblclick</p> <p>error</p> </div> <div class="g" style="background:pink"> <p>focus\focusin\focusout</p> <p>keydown\keypress\keyup</p> <p>mousedown\mouseenter\mouseleave\mousemove\mouseout\mouseover\mouseup</p> </div> <div class="w" style="border:1px solid red;"> <hr> <p>resize</p> <p>scroll</p> <p>select</p> <p>submit</p> <p>unload</p> <hr> </div> <script> $(function(){ //each $.each($("p"),function(){ $(this).css("font-size","16px") }); $("div").each(function(){ $(this).css("padding","30px"); }) }); </script> </body> </html>
浙公网安备 33010602011771号