一、获取HTML 元素的内容和属性
(1) 获得内容
1.text() 设置或返回所选元素的文本内容
参数:不给任何参数,就是获取文本内容
给参数,就是设置文本内容
$(function(){
$("#getBtn").click(function(){
// 获取这个div的文本
var text = $(".div1").text();
console.log(text);
})
$("#setBtn").click(function(){
// 我要给div1这个盒子设置文本
$(".div1").text("<a>我是新设置的text</a>");
})
});
注意: 设置文本会覆盖元素原本的文本 包括子元素
如果新设置的文本中中包括了标签 那么它是不会解析标签的 来解析当前文本内容
2.html() 设置或返回所选元素的内容(包括 HTML 标记)
参数:不加任何参数 就是获取对应的元素 包括我们的标签以及标签里面的文本
如果html()中加了参数 那么就是设置内容 把内容直接给参数
$("#btnHtml").click(function(){
alert($("#myDiv1").html());
});
$("#btnHtmlSet").click(function(){
$("#myDiv1").html('这是一个<b>神奇</b>的世界啊');
alert($("#myDiv1").html());
});
注意:就是会覆盖原来的内容 而且如果设置的内容中有标签 也会解析出来
3.val() 设置或返回表单字段的值
参数:如果不传参数 那么 就是直接获取表单元素的值
如果传参数 那么 就是直接设置表单元素的值
$("#btnVal").click(function(){
alert($("#myInput1").val());
});
$("#btnValSet").click(function(){
$("#myInput1").val('好好学习,天天向上');
alert($("#myInput1").val());
});
(2) 获取属性
attr() 用于获取属性值,也用于设置/改变属性值。
获取属性 jQuery对象.attr(“属性名”)
设置属性 jQuery对象.attr(“属性名”,“属性值”)
$("#get").click(function(){
console.log($("img").attr("src"));
})
$("#set").click(function(){
$("img").attr({
src:"img/1.jpg",
"title":"大图",
"sb":"222",
"aaa":"111"
})
注意: 再获取属性时如果这个属性 在元素中不存在 那么就会的到undefined
原本就存在的属性 设置之后 就是修改 原本不存在 那么就是添加
(3) 移出属性
removeAttr() 用于移除属性值
$("#remove").click(function(){
// 移出多个属性
$("img").removeAttr("src aaa");
})
二、添加元素:append() 和 prepend() 方法,after() 和 before() 方法
1.append() 方法在被选元素的结尾插入内容(仍然该元素的内部)
//append() 方法在被选元素的结尾插入内容(仍然该元素的内部)
$("#btn_append").click(function(){
$("#myDiv1").append("world");
});
2.prepend() 方法在被选元素的开头插入内容(仍然该元素的内部)
$("#btn_prepend").click(function(){
$("#myDiv1").prepend("Hello ");
});
3.before() 方法在被选元素的开头插入内容
$("#btn_before").click(function(){
$("#myDiv1").before("Hello ");
});
4.after() 方法在被选元素的后面插入内容
$("#btn_after").click(function(){
$("#myDiv1").after("World ");
});
5.appendTo()方法 子元素2.appendTo(父元素) 把元素2作为最后一个添加到父元素中
$("#appendToBtn").click(function(){
//新增一个li标签
var $newLi = $("<li>我是新创建的标签</li>");
$newLi.appendTo($("#ul1"));
})
三、 删除元素:remove() 方法,empty() 方法
remove() 方法删除被选元素及其子元素
$("#btn_remove").click(function(){
$("#myDiv1").remove();
});
empty() 方法删除被选元素的子元素。
$("#btn_empty").click(function(){
$("#myDiv2").empty();
});