Web开发基础_JQuery学习_0002_jQuery对象

jQuery对象的介绍：

案例思路：

案例演示：

需要引用 jquery-1.11.1.js

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery对象</title>
<script src="../js/jquery-1.11.1.js"></script>
<script>
	//建议：jQuery对象对应的变量名以$开头。
	//1.选择器选中的是jQuery对象。
	//2.jQuery的API若返回的是节点，是jQuery对象。
	//3.jQuery的API若返回的是值，通常是String。
	function dayin() {
		var $ps = $("p");
		for(var i=0;i<$ps.length;i++) {
			var p = $ps[i];
			alert(p.innerHTML);
		}
	}
	
	//传入的this是DOM对象，因此
	//接收它的参数img是DOM对象。
	function chg(img) {
		//将DOM转为jQuery，以便于调用
		//jQuery提供的简单的API。
		console.log($(img).width());
		if($(img).width() == 218) {
			$(img).width("250").height("250");
		} else {
			$(img).width("218").height("218");
		}
		
		console.log(img);
		console.log($(img));
	}
</script>
</head>
<body>
	<input type="button" value="打印"
		onclick="dayin();"/>
	<p>jQuery对象本质上是DOM数组</p>
	<p>jQuery对象只能调用jQuery的API</p>
	<p>jQuery对象可以转换成DOM对象</p>
	<div>
		<img src="../images/01.jpg"
			onclick="chg(this);"/>
		<img src="../images/02.jpg"
			onclick="chg(this);"/>
		<img src="../images/03.jpg"
			onclick="chg(this);"/>
	</div>
</body>
</html>

最终页面显示效果：

点击打印按钮页面依次显示如下：

点击图片后：页面效果及控制台输出

可以看到图片尺寸大小在切换，控制台输出规律

【js中修改的宽度参数在函数执行结束才会应用到HTML元素上，即：执行中修改的参数，HTML元素宽度不会立即生效】

Web开发基础_JQuery学习_0002_jQuery对象

猜你喜欢