Web开发基础_JQuery学习_0002_jQuery对象

最新推荐文章于 2024-11-16 16:45:03 发布

原创最新推荐文章于 2024-11-16 16:45:03 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

Web开发专栏收录该内容

108 篇文章

订阅专栏

本文介绍了jQuery对象的基础概念，包括如何创建jQuery对象、jQuery对象与DOM对象之间的转换方式，以及通过实例展示了jQuery对象如何调用jQuery API进行网页元素操作。

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>

最终页面显示效果：

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