jQuery学习笔记（二）通过事件触发 实现对HTML和CSS的[得/增/删/改]

上一节介绍了怎么用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({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });

//后面“”里的内容赋值给前面“”里的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的尺寸
});