jQuery的一些使用方法
1.读取/写入文本
text()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span id="span">456</span>
<span id="span1"></span>
<script type="text/javascript" src="js/jquery-1.11.3.js">
</script>
<script type="text/javascript">
// 读取文本
alert($("#span").text())
//写入文本
$("#span1").text("123")
</script>
</body>
</html>
2.设置属性
获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。
attr 可设置的东西很多,当属性没有被设置时候,.attr()方法将返回undefined
prop 可以设置一些固有的属性:class id 等,其他属性设置时可能会无法返回
为了防止一些错误,对于有true/false的属性设置使用prop,其他使用attr
检索和更改DOM属性,比如元素的checked, selected, 或 disabled状态,使用prop
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="img/1.jpg" >
<script type="text/javascript" src="js/jquery-1.11.3.js">
</script>
<script type="text/javascript">
$("img").attr("width","300px")
//这里采用prop没有反应
//$("img").prop("width","300px")
</script>
</body>
</html>
3.设置css样式
设置display属性
$("#img").css("display","none");
例如设置一个空div大小和背景色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div">
</div>
<script type="text/javascript" src="js/jquery-1.11.3.js">
</script>
<script type="text/javascript">
$("div").css("width","300px")
$("div").css("height","300px")
$("div").css("background-color","red")
</script>
</body>
</html>
给一个标签添加class
$("div").addclass("p")
相当于在原来的class后面添加
而$("div").attr("class","p")
是将class替换了
4.jquery链式编程
一个对象上可以绑定多个事件,之间用点连接,具体代码如下:
$("table tr:gt(0)".mousemove(function(){}).mouseout(function(){});
5.each()
不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象
通常$拿到的都是一个集合,为了将里面的每一个元素进行区别设置,需要调用工具类点each()
如果遍历的是数组,i是索引,n是内容
$.each(数组,function(i,n){})
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
如果遍历的是对象,i为变量名称,n为变量内容
$.each(对象,function(i,n){})
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});