jQuery学习笔记二

jQuery HTML

jQuery获取、设置内容和属性

$(selector).text() // 获取标签之间文本内容
$(selector).html()// 获取html内容
$(selector).val()// 获取标签内value
$(selector).attr()// 获取对应属性值

$(selector).text("hello, world!") //设置值
$(selector).text(function(i, origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
  // i 被选元素列表中当前元素的下标类如选中拥有同个id的模块  origText 原始文本

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});//attr支持设置多个属性

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

jQuery - 添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

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);         // 追加新元素
}

jQuery - 删除元素

remove()// 删除元素
empty()// 清空元素内容
$("p").remove(".italic"); // 过滤删除 class=“italic”

jQuery - 获取并设置 CSS 类

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

css({"propertyname":"value","propertyname":"value",...});//设置css对应值

jQuery尺寸

width() // context宽度
height()
innerWidth()//context 和 padding
innerHeight()
outerWidth()// context、padding以及border
outerHeight()
outerWidth(true)//context、padding、border以及margin
outerWidth(true)

设值：

$("button").click(function(){
  $("#div1").width(500).height(500);
});