一、jQuery捕获
即:jQuery - 获取内容和属性
jquery拥有 可操作HTML元素和属性的强大方法。
1、DOM操作
1).text() :设置或返回所选元素的文本内容
2).html():设置或返回所选元素的内容(包括HTML标记)
3).val():设置或返回表单字段的值
$("#test").val()
4) .attr():获取属性值
$("button").click(function(){
alert($("#w3s").attr("href"));
});
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,可以很容易的添加新元素/内容
下面介绍四个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");
});
$("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");
语法:css("propertyname","value");
使用:
$("p").css("background-color","yellow");
语法: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);
});
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");
});