一. 获取和设置元素的内容
三个方法:
html()text()val()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
//获取得到的标签的内的文本,不包括内部的标签。但是内部标签与标签中的空格会获取到
var text = $(".box").text(); // ele.innerText
console.log(text);
var html = $(".box").html();
//标签内的所有内容,包括子标签本身 ele.innerHTML
console.log(html);
//上面的方法不传入参数表示只是获取,如果传入字符串表示设置
// $(".box").text("哈哈哈");
//设置html,如果有标签,则会解析出来
$(".box").html("<button>点我啊</button>")
})
$(function () {
$("div button").click(function () {
//获取一个标签的value值(如果有)
var inputText = $("div input").val();
alert(inputText);
})
})
</script>
</head>
<body>
<div class="box">
<a href="http://www.yztcedu.com">点我去育知同创</a>
</div>
<div>
<input type="text" name="user" id="user" value="" />
<br />
<button>获取输入框中的值</button>
</div>
</body>
</html>
二. 获取修改删除元素的属性
attr()不是布尔值的建议用这个prop()如果属性值是布尔值的建议用这个removeAttr()removeProp()
三. 操作class属性
对样式的操作包括:获取class,设置class,追加class,删除class,切换class,判断是否有class属性
可以使用
attr()和prop()去直接操作class属性addClass()追加classremoveClass()移除classtoggleClass切换classhasClass判断是否有指定的class
四. 操作css属性
css()方法, 即可以获取内部样式, 也可以获取外部样式
如果只传入一个字符串,则是获取匹配的第一元素的这个字符串表示的属性的值。
css("backgroundColor")获取背景色。如果传入的是一个数组,则可以获取匹配的第一个元素的多个属性值。
如果传入两个参数:第一个参数是一个字符串,第二个参数是字符串或者数字。则表示设置所有匹配元素的属性的值。
如果传入的是一个
js对象,则表示同时设置多个css属性和值