**JQUERY** jQuery与HTML

>html的获取

---

>>用于DOM操作的HTML方法

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

html() - 设置返回所选元素内容

val() - 设置或返回表单字段的值

attr() - 用于获取属性值

>html的设置

---

>>可以直接使用上述三个函数设置文本内容

<span style="font-size:14px;">$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});</span>

>>可以使用上述内容的匿名函数，来设置文本内容。参数包括被选元素列表中当前元素的下标和原始值

<span style="font-size:14px;">$("#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 + ")";
  });
});</span>

>>attr()设置改变属性值的方法

可以同时设置多个属性

支持使用匿名函数返回新的值，由两个参数组成，被选列表中当前元素的下标以及原始的旧值

<span style="font-size:14px;">$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});</span>

>添加新的HTML内容

---

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

>>添加单一元素

<span style="font-size:14px;">$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");</span><pre name="code" class="javascript"><span style="font-size:14px;">$("img").after("Some text after");
$("img").before("Some text before");</span>

>>通过append和prepend添加若干元素

<span style="font-size:14px;">function appendText()
{
var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
var txt3=document.createElement("p");  // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素
}</span>

<span style="font-size:14px;">function afterText()
{
var txt1="<b>I </b>";                    // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建新元素
var txt3=document.createElement("big");  // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
}</span>

>删除元素

---

$("selector").remove();

$("selector").empty();

>jQuery对css的操作

>>对类的设置

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

<span style="font-size:14px;">$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});</span>

注意，可以通过逗号将多个选择器分割；可以用空格将多个类分开

>>jquery 中css()

语法：$("p").css("background- color");

作用：返回属性值

语法：$("p").css("backgroun-color","yellow");

作用：修改属性值

语法：css({"propertyname":"value","propertyname":"value","propertyname":"value",...})

>jQuery尺寸方法

---

>>访问元素的高度和宽度值

width()返回宽度，不包括内边距

height()返回高度

innerWidth()返回宽度，包括内边距

innerHeight()返回高度

outerWidth()返回元素宽度，包括内边距和边框

outerHeight()返回元素高度

设置元素的高度宽度值

在括号中添加相应参数

<span style="font-size:14px;">$("button").click(function(){
  $("#div1").width(500).height(500);
});</span>