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);
});