欢迎来到尧图网

客户服务 关于我们

您的位置：首页 > 汽车 > 新车 > 第二章，jQuery基本操作（DOM操作）

第二章，jQuery基本操作（DOM操作）

2025/4/19 12:50:03 来源：https://blog.csdn.net/m0_68766848/article/details/143000553  浏览:  次   关键词：第二章，jQuery基本操作（DOM操作）

文章目录

        • 第二章，jQuery基本操作（DOM操作）
          • 一，样式操作
          • 二，内容操作
          • 三，节点操作
          • 四，属性操作
          • 五，节点遍历

第二章，jQuery基本操作（DOM操作）
一，样式操作
操作说明
$().css(‘属性名’)获取样式style属性
$().css(‘属性名’, “属性值”)设置样式style属性
$().css({属性名1：属性值1，属性名2：属性值2})通过对象形式设置样式style属性
$().addClass(“className”)给元素添加类名
$().removeClass(“className”)删除元素的类名
$().toggleClass(“className”）添加获取删除类名
$().hasClass()是否具有该类名
//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()方法的语法格式如下：
    html()
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()方法的语法格式如下：
    text()
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()方法的语法格式如下：
    val()
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>
三，节点操作

  • 查找节点

    //查找元素节点
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]);

  • 创建节点

    //通过jQuery的工厂函数来创建元素节点
var $element = $(elementName); //elementName:表示元素名称var $li = $('<li></li>');

  • 插入节点

    • 插入内部节点
      • append()方法:向每个匹配的元素内部追加内容。
      • appendTo()方法:把所有匹配的元素追加到另一个指定的元素元素集合中。
      • prepend()方法:向每个匹配的元素内部前置内容。
      • prependTo()方法:把所有匹配的元素前置到另一个、指定的元素元素集合中。
    // 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()方法:把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
    // before - before后面的节点被添加到before前面的节点的前面
$("#ti").before($("#ms"));
// after - after后面的节点被添加到after前面的节点的后面
$("#ti").after($("#ms"));
//insertBefore
$("#ti").insertBefore($("t#ms"));
//insertAfter
$("#ti").insertAfter($("#ms"));

  • 删除节点

    • remove（）方法
    //jQuery中提供rermove()方法用于从DOM中删除所有匹配的元素
$element.remove([expr]);
//expr:用于筛选元素的jQuery表达式。
$("ul li:eq(1)").remove();//获取第二个<li>元素节点后，将它从网页中删除
$("ul li" ).remove("li[title!=菠萝]");//把<li>元素中属性title不等于"菠萝"的<li>元素删除
    • empty（）方法
    //jQuery中提供empty)方法删除匹配的元素集合中所有的子节点。
$element.emptv();
//empty()方法的用法如下示例代码:
$("ul lieq(1)").empty();ll获取第二个<li>元素节点后，清空此元素里的内容

  • 替换节点

    • replaceWith()方法
    //jQuery中提供replaceWidth()方法将所有匹配的元素替换成指定的HTML或DOM元素
$element.replaceWidth(content);
//content:用于将匹配元素替换掉的内容。
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
    • replaceAll()方法
    //jQuery中提供replaceAll()方法将所有匹配的元素替换成指定的HTML或DOM元素。
$element.replaceAll(content);
//content:用于将匹配元素替换掉的内容。
$("p").replaceAll("<strong>你最不喜欢的水果是?</strong>");

  • 复制节点

    • colne()方法
    //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）返回值： 返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值

    <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>
五，节点遍历

  • 遍历子元素

    //children()方法可以用来获取元素的所有子元素
$(selector).children([expr]);//获取<section>的子元素，但不包含子元素的子元素
var $section =$("section").children();alert($section.length);

  • 遍历同辈元素

    //jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素
//next([expr])   用于获取紧邻匹配元素之后的元素
$("li:eq(1)").next().addClass("orange");//prev([expr])  用于获取紧邻匹配元素之前的元素
$("li:eq(1)").prev().addClass("orange");
//slibings([expr])     用于获取位于匹配元素前面和后面的所有同辈元素

  • 遍历前辈元素

    //parent()：获取元素的父级元素 
//parents()：获取元素的所有祖先元素
$("li:eq(1)").parent().addClass("orange");$("li:eq(1)").parents().addClass("orange");

  • 其他遍历方法

    //each( ) ：规定为每个匹配元素规定运行的函数
$(selector).each(function(index,element)) ;
//index:选择器位置
//element:当前元素

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

相关资讯

热文排行

最新新闻

推荐新闻

热搜词