文章目录
第二章，jQuery基本操作（DOM操作）
一，样式操作
| 操作 | 说明 |
|---|---|
| $().css('属性名') | 获取样式style属性 |
| $().css('属性名', "属性值") | 设置样式style属性 |
| $().css({属性名1：属性值1，属性名2：属性值2}) | 通过对象形式设置样式style属性 |
| $().addClass("className") | 给元素添加类名 |
| $().removeClass("className") | 删除元素的类名 |
| $().toggleClass("className"） | 添加获取删除类名 |
| $().hasClass() | 是否具有该类名 |
js
//1、获取和设置样式
$("#tow").attr("class")获取ID为tow的class属性
$("#two").attr("class","divClass")设置Id为two的class属性。
//2、追加样式
$("#two").addClass("divClass2")为ID为two的对象追加样式divClass2
//3、移除样式
$("#two").removeClass("divClass")移除 ID为two的对象的class名为divClass的样式。
$(#two).removeClass("divClass divClass2")移除多个样式。
//4、切换类名
$("#two").toggleClass("anotherClass") //重复切换anotherClass样式
//5、判断是否含有某项样式
$("#two").hasClass("another")==$("#two").is(".another");
//6、获取css样式中的样式
$("div").css("color") 设置color属性值. $(element).css(style)
//7、设置单个样式
$("div").css("color","red")
//8、设置多个样式
$("div").css({fontSize:"30px",color:"red"})
$("div").css("height","30px")==$("div").height("30px")
$("div").css("width","30px")==$("div").height("30px二，内容操作
-
在jQuery中，提供了html()和text()方法用于操作页面元素的内容，val()方法用于操作表单元素的值。以上方法的使用方式基本相同，当方法没有提供参数时，表示获取匹配元素的内容或值；当方法携带参数时，表示对匹配元素的内容或值进行修改
-
html()方法
- html()方法用于获取第一个匹配元素的HTML，内容或修改匹配元素的HTML内容，方方法仅对XHTML文档有效，不能用于XML文档。html()方法的语法格式如下：
jshtml() html(htmlCode) html(function(index, oldHtmlCode)) //无参方法用于返回第1个匹配元素的HTML内容 //有参方法用于设定匹配元素的文本内容 //htmlCode：表示将所匹配元素的HTML内容设定为htmlCode //function(index, oldHTmlCode)：表示将函数的返回值作为当前元素的HTML内容，index表示当前元素在集合中的索引位置，oldHtmlCode表示当前在修改之前的HTML内容 //返回#mainCotentDiv标签的HTML内容 $("#mainContentDiv".html()); //设置#mainContentDiv标签的HTML内容为红色标题格式的"标题" $("#mainContentDiv").html("<h1><font color='red'>标题</font><h1/>"); //根据元素在集合中的不同位置，设定不同的HTML内容 //示例： $("p").html(function(index, htmlCode){ switch(index){ case 0: return "<h1> + htmlCode + "<h1/>"; case 1: return "<h2> + htmlCode + "<h2/>"; } }); -
text()方法
- text()方法用于读取或设置匹配元素的文本内容。与html()方法区别在于，text()方法返回纯文本内容，适用于XHTML和XML文档。text()方法的语法格式如下：
jstext() text(textContent) text(function(index, oldTextContent)) //无参方法用于返回第1个匹配元素的文本内容 //有参方法用于设定匹配元素的文本内容 //textContent：表示将所匹配元素的文本内容内容设定为textContent //function(index, oldTextContent)：表示将函数的返回值作为当前元素的HTML内容，index表示当前元素在集合中的索引位置，oldTextContent表示当前在修改之前的文本内容 //示例： <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery基本操作-内容操作</title> <script type="text/javascript" src="js/jquery-1.x.js"> </script> </head> <body> <div id="newsContent"> <p>中国的商业正处于一场正在进行时态的变革。</p> <p>MALL新闻频道拥有中国购物，城市综合体，商业街区最全的商业信息。</p> </div> <div id="newsDiscuss"></div> <hr/> <input type="button" value="获得HTML内容" onClick="getHTMLContent()" /> <input type="button" value="获得Text内容" onClick="getTextcontent()" /> <input type="button" value="改变正文内容" onClick="changeContent()" /> <input type="button" value="显示HTML内容" onClick="setHTMLContent()" /> <input type="button" value="显示Text内容" onClick="setTextContent()" /> <script type="text/javascript"> //获取元素的HTML内容 function getHTMLContent() { console.log("<div>中的HTML内容如下：" + $("#newsContent").html()); } //获取元素的文本内容 function getTextcontent() { console.log("<div>中的text内容如下：" + $("#newsContent").text()); } //根据元素在集合中的位置不同，所赋的值也不同 function changeContent() { $("p").html(function(index, htmlCode) { switch(index) { case 0: return "<h1>" + htmlCode + "<h1/>"; case 1: return "<h2>" + htmlCode + "<h2/>"; } }); } //设置元素的HTML内容 function setHTMLContent() { $("#newsDiscuss").html("<hr/>补充如下：Mall全称Shopping Mall（大型购物中心），属于一种新型的复合型商业。"); } //设置元素的文本内容 function setTextContent() { $("#newsDiscuss").text("<hr/>补充如下：Mall全称Shopping Mall（大型购物中心），属于一种新型的复合型商业。"); } </script> </body> </html> -
val()方法
- val()方法用于设置或获取表单元素的值，包括文本框、下拉列表、单选框和复选框等元素。当元素允许多选时，返回一个包含被选项的数组。val()方法的语法格式如下：
jsval() val(newValue) val(arrayValue) val(function(index, oldValue)) //无参方法用于返回所匹配的表单元素的value //有参方法用于设定所匹配的表单元素的value //newValue：表示将所匹配的表单元素的value值设定为newValue //function(index, oldValue)：表示将函数的返回值，index表示当前元素在集合中的索引位置，oldValue表示当前在修改之前的value值 //示例： <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery基本操作-内容操作</title> <script type="text/javascript" src="js/jquery-1.x.js"> </script> </head> <body> <div id="newsContent"> <p>中国的商业正处于一场正在进行时态的变革。</p> <p>MALL时代新闻频道拥有中国购物,城市综合体,商业街区最全的商业信息。</p> </div> <div id="newsDiscuss"> </div> <div> <hr/>评论：<input type="text" value="请输入新闻评论" id="inputDiscuss" /> 颜色： <select id="discussColor"> <option value="black">黑色</option> <option value="red" selected>红色</option> <option value="green">绿色</option> </select> 大小：<input type="radio" name="discussSize" value="9pt">较小 <input type="radio" name="discussSize" value="12pt" checked>正常 <input type="radio" name="discussSize" value="16pt">较大 </div> <hr/> <input type="button" value="提交评论信息" onClick="submitNewsDiscuss()" /> <script type="text/javascript"> function submitNewsDiscuss() { var inputDiscuss = $("#inputDiscuss").val(); $("#newsDiscuss").html("<hr/>评论如下：" + inputDiscuss) .css("color", $("#discussColor").val()) .css("font-size", $("[name=discussSize]:checked").val()); } </script> </body> </html>
三，节点操作
-
查找节点
js//查找元素节点 var $li = $('ul li:eq(2)'); //查找文本节点 console.log($('p').text()); //查找属性节点,通过jQuery的选择器查找到元素节点后，可以利用attr()方法获取其属性的值。attr()方法的用法类似于DOM中的getAttribute()方法 console.log($('p').attr('title')); /获取父节点, //jQuery中的parent()方法用于获取指定元素的父元素 //selector:表示jQuery中的选择器。 //expr:可选，parent()方法的参数，表示用于筛选的选择器。 var Selement = $('selector').parent([expr]); var $parent = $("li:first").parent();//第一个<li>元素的父元素 //拓展： //parents():获取一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素） //closest():从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素 /获取子节点, //jQuery中的children()方法用于获取指定元素的所有子元素 //selector:表示jQuery中的选择器。 //expr:可选，children()方法的参数，表示用于筛选的选择器 var $element = $('selector').children([expr]); var $ul = $("ul").children();//ll<p>元素下有3个子元素 /获取兄弟节点, //jQuery中的next()方法用于获取指定元素的下一个相邻兄弟元素 //selector:表示jQuery中的选择器。 //expr:可选，next()方法的参数，表示用于筛选的选择器。 var $element = $('selector').next([expr]); var $p1 = $('p').next();//l<p>元素的下一个相邻兄弟元素 //jQuery中的prev()方法用于获取指定元素的上一个相邻兄弟元素 var $element = $('selector').prev([expr]); -
创建节点
js//通过jQuery的工厂函数来创建元素节点 var $element = $(elementName); //elementName:表示元素名称 var $li = $('<li></li>'); -
插入节点
- 插入内部节点
append()方法:向每个匹配的元素内部追加内容。appendTo()方法:把所有匹配的元素追加到另一个指定的元素元素集合中。prepend()方法:向每个匹配的元素内部前置内容。prependTo()方法:把所有匹配的元素前置到另一个、指定的元素元素集合中。
js// append - append后面的节点被添加到append前面的节点的后面 $("#ti").append($("#ms")); // prepend - prepend后面的节点被添加到prepend前面的节点的前面 $("#ti").prepend($("#ms")); // appendTo. - append To前面的节点被添加到appendTo后面的节点的后面 $("#ti").appendTo($("#ms")); // prependTo. - prependTo前面的节点被添加到prependTo后面的节点的前面 $("#ti").prependTo($("#ms"));- 插入外部节点
before()方法:在每个匹配的元素之前插入内容。after()方法:在每个匹配的元素之后插入内容。insertBefore()方法:把所有匹配的元素插入到另一个、指定的元素元素集合的前面。insertAfter()方法:把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
js// before - before后面的节点被添加到before前面的节点的前面 $("#ti").before($("#ms")); // after - after后面的节点被添加到after前面的节点的后面 $("#ti").after($("#ms")); //insertBefore $("#ti").insertBefore($("t#ms")); //insertAfter $("#ti").insertAfter($("#ms")); - 插入内部节点
-
删除节点
- remove（）方法
js//jQuery中提供rermove()方法用于从DOM中删除所有匹配的元素 $element.remove([expr]); //expr:用于筛选元素的jQuery表达式。 $("ul li:eq(1)").remove();//获取第二个<li>元素节点后，将它从网页中删除 $("ul li" ).remove("li[title!=菠萝]");//把<li>元素中属性title不等于"菠萝"的<li>元素删除- empty（）方法
js//jQuery中提供empty)方法删除匹配的元素集合中所有的子节点。 $element.emptv(); //empty()方法的用法如下示例代码: $("ul lieq(1)").empty();ll获取第二个<li>元素节点后，清空此元素里的内容 -
替换节点
- replaceWith()方法
js//jQuery中提供replaceWidth()方法将所有匹配的元素替换成指定的HTML或DOM元素 $element.replaceWidth(content); //content:用于将匹配元素替换掉的内容。 $("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");- replaceAll()方法
js//jQuery中提供replaceAll()方法将所有匹配的元素替换成指定的HTML或DOM元素。 $element.replaceAll(content); //content:用于将匹配元素替换掉的内容。 $("p").replaceAll("<strong>你最不喜欢的水果是?</strong>"); -
复制节点
- colne()方法
js//jQuery中提供clone()方法克隆匹配的DOM元素并且选中这些克隆的副本 $element.clone(events); //events:一个布尔值 ( true 或者 false)指示事件处理函数是否会被复制。默认为false。 $("ul li").click(function(){ $(this).clone().appendTo("ul"");//复制当前点击的节点，并将它追加到<u>元素 $(this).clone(true).appendTo("ul");//注意参数true //可以复制自己，并且他的副本也有同样功能 }); //原生DOM中的cloneNade(Boolean)方法，参数Boolean表示是否复制后代节点。 //jQuery中的clone(Boolean)方法，参数Boolean表示是否复制事件
四，属性操作
-
jQuery的attr方法和removeAttr方法
-
attr（）方法
（1）作用： 获取或设置属性节点的值
（2）注意点一： 可以传递一个参数，也可以传递两个参数。如果传递一个参数，代表获取属性节点的值；若传递两个参数，代表设置属性节点的值。
（3）注意点二： 无论找到多少个元素， 都只会返回第一个元素指定的属性节点的值；如果是设置找到多少个元素就会设置该N个元素的属性节点值；如果设置的属性节点不存在，那么系统会在所有找到的元素中 自动新增该属性节点
（4）返回值： 返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值 -
removeAttr（）方法
（1）作用： 删除属性节点
（2）注意点： 会删除所有找到元素指定的属性节点；也可以删除多个属性节点
（3）返回值： 返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值
js<body> <p class="p1" name="name1"></p> <p class="p2" name="name2"></p> <script src="../jquery.js"></script> <script> $(function() { //attr() console.log($('p').attr('class')); console.log($('p').attr('class',"change")); console.log($('p').attr('a',"a")); /*removeAttr(name) 删除属性节点 */ console.log($('p').removeAttr("a")); console.log($('p').removeAttr("class name")); }) </script> </body> -
五，节点遍历
-
遍历子元素
js//children()方法可以用来获取元素的所有子元素 $(selector).children([expr]); //获取<section>的子元素，但不包含子元素的子元素 var $section =$("section").children(); alert($section.length); -
遍历同辈元素
js//jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素 //next([expr]) 用于获取紧邻匹配元素之后的元素 $("li:eq(1)").next().addClass("orange"); //prev([expr]) 用于获取紧邻匹配元素之前的元素 $("li:eq(1)").prev().addClass("orange"); //slibings([expr]) 用于获取位于匹配元素前面和后面的所有同辈元素 -
遍历前辈元素
js//parent()：获取元素的父级元素 //parents()：获取元素的所有祖先元素 $("li:eq(1)").parent().addClass("orange"); $("li:eq(1)").parents().addClass("orange"); -
其他遍历方法
js//each( ) ：规定为每个匹配元素规定运行的函数 $(selector).each(function(index,element)) ; //index:选择器位置 //element:当前元素