jQuery基础学习二 捕获、设置等复杂操作

本文介绍了jQuery的基本操作,包括获取和设置内容、属性、CSS类及尺寸等。还详细讲解了如何添加、删除HTML元素,以及如何遍历DOM树的父节点和子节点。此外,文章还涉及了jQuery提供的过滤方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、jQuery捕获

即:jQuery - 获取内容和属性

jquery拥有 可操作HTML元素和属性的强大方法。

1、DOM操作

1).text() :设置或返回所选元素的文本内容

2).html():设置或返回所选元素的内容(包括HTML标记)

3).val():设置或返回表单字段的值

$("#test").val()
4) .attr():获取属性值

$("button").click(function(){
  alert($("#w3s").attr("href"));
});


二、jQuery设置

1、使用参数的方法,设置元素的文本内容、内容(标记)、表单value

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});
2、在DOM操作的参数中加入回调函数,通过回调函数返回相应的值

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")"; 
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")"; 
  });
});
3、设置标签元素的属性值:

可同时设置多个属性的值

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3cschool.cc/jquery",
    "title" : "W3Schools jQuery Tutorial"
  });
});

4、通过回调函数设置元素的属性值:

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});


三、jQuery添加HTML元素

通过jQuery,可以很容易的添加新元素/内容

下面介绍四个jQuery方法:

1、append()方法

此方法可在被选的元素结尾处插入内容

$("p").append("Some appended text.");

2、prepend()方法

此方法可在备选的元素的前面插入内容

$("p").prepend("Some prepended text.");
3、append和prepend可以批量添加,用逗号隔开即可

$("p").append(txt1,txt2,txt3);
4、after()和before()方法,以前两个想似。在所选的元素之前或之后添加内容。


四、删除元素

通过jQuery可以很容易的删除HTML已有的元素。一般有以下两个方法:

1、remove():删除被选元素,以及其子元素

可以接受一个参数,过滤要删除的元素,该参数可以是任何jQuery选择器的语法。

$("p").remove(".italic");  意思为:删除class=italic的p标签。

2、empty():清空被选元素的子元素


五、获取并设置CSS类

jQuery操作css的方法:

1、addClass: 向被选元素添加一个或多个类,添加类时,还可以选取多个元素

1)选取多个元素添加类

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});
2)添加多个类:

$("button").click(function(){
  $("#div1").addClass("important blue");
});


2、removeClass: 删除类

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

3、toggleClass:实现对被选元素的的添加类/删除类的切换操作

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

4、css:方法用于设置或返回被选元素的一个或者多个样式属性

1)返回指定的css属性值:

css("propertyname");
<pre name="code" class="javascript">$("p").css("background-color");


2)设置指定的css属性值

语法:css("propertyname","value");

使用:

$("p").css("background-color","yellow");


3)设置多个css属性值

语法:css({"propertyname":"value","propertyname":"value",...});
使用:

$("p").css({"background-color":"yellow","font-size":"200%"});


六、尺寸

jQuery提供了多个处理大小的方法:

1、宽:width()  设置或返回元素的宽度(不包括内边距、边框、外边距)

2、高:height() 设置或返回元素的高度(不包括内边距、边框、外边距)

$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});


3、innerWidth():返回元素的宽度(包括内边距)

4、innerheight():返回元素的高度(包括内边距)

$("button").click(function(){
  var txt="";
  txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
  txt+="Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

5、outerWidth():返回元素的宽度(包括内边距和边框)

6、outerHeight():返回元素的高度(包括内边距和边框)

$("button").click(function(){
  var txt="";
  txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
  txt+="Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

七、jQuery 的DOM树(父节点)

1、parent():返回被选元素的直接父元素; 该方法只会向上一级对DOM树进行遍历

$(document).ready(function(){
  $("span").parent();
});

2、parents():返回被选元素的所有祖先父辈,它一路向上直到文档的根元素(html)

$(document).ready(function(){
  $("span").parents();
});

还可以对结果过滤,得到自己想要的父辈元素。

$(document).ready(function(){
  $("span").parents("ul");
});

3、parentsUntil()返回所有父辈的过滤方法,返回到参数节点之间的所有节点

$(document).ready(function(){
  $("span").parentsUntil("div");
});

八、jQuery的DOM树(子节点)

1、children():返回被选元素的所有直接子节点。

下面的例子返回每个<div>元素的所有直接子节点

$(document).ready(function(){
  $("div").children();
});

可以使用参数来过滤返回结果:

下面的例子返回class=“1”的所有<p>元素,并且他们是<div>的直接子节点

$(document).ready(function(){
  $("div").children("p.1");
});

2、find():返回被选元素的所有子节点;也可以通过参数过滤返回结果

$(document).ready(function(){
  $("div").find("span");
});

如想返回所有子节点,用*做参数,表示全选

$(document).ready(function(){
  $("div").find("*");
});

九、jQuery中的过滤

三个基本过滤方法

1、first():返回被选元素的首个元素

选取首个<div>元素内部的第一个<p>元素

$(document).ready(function(){
  $("div p").first();
});

2、last():返回被选元素的最后一个元素

选取首个<div>元素内部的最后一个<p>元素

$(document).ready(function(){
  $("div p").last();
});

3、eq():返回被选元素 中带有指定索引号的元素

选取第二个元素:

$(document).ready(function(){
  $("p").eq(1);
});

两个不常用的过滤方法

4、filter():规定一个标准,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

返回带有类名“intro”的所有<p>标签

$(document).ready(function(){
  $("p").filter(".intro");
});

5、not():返回不匹配标准的的所有元素;与filter相反

返回不带有类名"intro"的所有<p>标签

$(document).ready(function(){
  $("p").not(".intro");
});

















评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值