上一节介绍了怎么用jQuery获取所需的HTML元素,取到手之后当然就是怎么操作这些标签了。本篇就来介绍一下如何对HTML元素中的内容进行获取或更改。
那么jquery实现的到底是个怎样的过程呢?
比如说,当你触发一个事件(点击一个按钮)的时候,jQuery语句就能【得到】/【修改】某些【tag中的文本】或【tag的属性】,或者通过修改【CSS属性】同时改变多个tag的属性
以下表格中的内容,实现前提是写在如下的框架中。即点击id=“button”的按钮时,触发备注中的各种内容
$(document).ready(function(){
$("#button").click(function(){
//获取tag内容/属性;改变tag内容/属性;使用回调函数
});
});
【HTML元素】
内容(tag内) | 属性(tag中) | |
获得 | $("#test").text()//id=“text”的标签 $("#test").html() $("#test").val()//表单的值 | $("#w3s").attr("href") |
设置 | $("#test").text("hello world") $("#test").html("<p>hello world</p>") $("#test").val("Dolly") | 一个:$("#w3s").attr("href","http://www.w3school.com.cn/jquery");多个: $("#w3s").attr({ //后面“”里的内容赋值给前面“”里的tag属性 |
回调函数 | $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); //回调函数就是可以【返回】你想要的文本内容 //获取id=“text”的tag中的文本,并对文本内容进行回调函数内的内容 //回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值 | $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; }); |
添加 | $("p").append("Some text");//在<p>后面添加文本(在<p>tag之内) $("p").prepend("Some text");//在<p>前面添加文本(在<p>tag之内) $("img").after("Some text");//在<img>后面添加文本(在<img>之外的后面) $("img").before("Some text");//在<img>前面添加文本(在<img>之外的前面) //也可以添加多段文本(以上方法都可以接收无限量参数): var txt1="aaaa"; var txt2="bbbb"; $("p").append(txt1, txt2); | |
删除 | $("#div1").remove();//删除id="div1"的元素及其子元素 $("#div1").empty();//删除id="div2”的子元素 $("p").remove(".italic");//带有过滤功能的删除:删除class="italic"的<p>及其子元素 |
【CSS属性】
接下来是对CSS属性的操作。
jquery对CSS的操作,可以在触发某些动作(如点击一个按钮)时对网页中的某些tag增/删/改属性。
四类操作 | 实例 | |
addClass() | $("button").click(function(){ $("h1,h2,p").addClass("blue");//向<h1>/<h2>/<p>的HTMLtag添加.blue的css属性 $("div").addClass("important"); //向<div>的HTMLtag添加.importan的csst属性 $("#div1").addClass("important blue");//对一个tag添加多个属性 }); | |
removeClass() | $("button").click(function(){ $("h1,h2,p").removeClass("blue");//从<h1>/<h2>/<p>的HTMLtag移除.blue的css属性 }); | |
toggleClass() | $("button").click(function(){ $("h1,h2,p").toggleClass("blue");//轮换:点一下按钮增加.blue属性,再点一下就移除.blue属性 }); | |
css() | $("p").css("background-color");//返回页面中第一个匹配到<p>的tag的background-color属性 $("p").css("background-color","yellow"); //设置页面中第一个匹配到<p>的tag的background-color属性为yellow $("p").css({"background-color":"yellow","font-size":"200%"});//设置多个属性 |
【尺寸】
width() height() (得到元素长宽) |
$("button").click(function(){ var txt=""; txt+="Width: " + $("#div1").width() + "</br>"; txt+="Height: " + $("#div1").height(); $("#div1").html(txt); }); |
innerWidth() innerHeight() (包括内边距) | $("button").click(function(){ var txt=""; txt+="Inner width: " + $("#div1").innerWidth() + "</br>"; txt+="Inner height: " + $("#div1").innerHeight(); $("#div1").html(txt); }); |
outerWidth() outerHeight() (包括内边距+边框) outerWidth(true) outerHeight(true) (包括内边距+边框+外边距) | $("button").click(function(){ var txt=""; txt+="Outer width: " + $("#div1").outerWidth() + "</br>"; txt+="Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt); }); $("button").click(function(){ var txt=""; txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>"; txt+="Outer height (+margin): " + $("#div1").outerHeight(true); $("#div1").html(txt); }); |
得到HTML文档/浏览器窗口尺寸 | $("button").click(function(){ var txt=""; txt+="Document width/height: " + $(document).width(); txt+="x" + $(document).height() + "\n";//HTML文档 txt+="Window width/height: " + $(window).width(); txt+="x" + $(window).height();//浏览器窗口 alert(txt); }); |
设置尺寸 | $("button").click(function(){ $("#div1").width(500).height(500);//设置id为div1的尺寸 }); |