【暑假学习笔记】之——jQuery的使用,选择器的使用,DOM对象与jQuery对象的转换

什么是jQuery?

jQuery是一个轻量级的"写的少,做的多"的JavaScript库。用jQuery框架,可以简化代码,提升代码效率。

怎么使用jQuery?

可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法:

  • 从 jquery.com 下载 jQuery 库
  • 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

在这里我使用的是百度的CDN,代码如下:

<script src="http://libs.baidu.com/jquery/2.0.2/jquery.min.js"></script>

jQuery对象:就是封装了DOM对象数组和jQuery函数的对象。

我们可以通过选择器来选择网页中的标签,更改标签的样式,内容等。下面是一个点击+,对网页上的字体进行放大的示例。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo1_字体放大</title>
<script src="http://libs.baidu.com/jquery/2.0.2/jquery.min.js">
</script>
<script>
	function bigger() {
		//获取段落的原始字号
		var size = $("p").css("font-size");
		console.log(size);
		//去掉单位便于增加字号
		size = size.replace("px","");
		//将字号+1再设置给段落
		$("p").css("font-size", ++size+"px");
	}
</script>
</head>
<body>
	<input type="button" value="+" onclick="bigger();"/>
	<p>1.引入jQuery</p>
	<p>2.使用选择器选中节点</p>
	<p>3.调用它的API操作节点</p>
</body>
</html>

示例:点击“打印”按钮,在控制台输出所有<p>内容,点击图片,放大,再点一次,缩小。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo2_DOM转jQuery的时机</title>
<script src="http://libs.baidu.com/jquery/2.0.2/jquery.min.js"></script>
<script>
	function print() {
		//使用选择器获取的是jQuery对象
		var $ps = $("p");
		console.log($ps);
		for (var i = 0; i < $ps.length; i++) {
			//从jQuery对象中获取的值是DOM
			var p = $ps[i];
			console.log(p.innerHTML);
		}
	}
	//调用时传入了this,指代点击的那个图片,是DOM对象
	function chg(img) {
		console.log($(img).width());
		if ($(img).width() == 218) {
			$(img).width(250).height(250);
		} else {
			$(img).width(218).height(218);
		}
	}
</script>
</head>
<body>
	<input type="button" value="打印" onclick="print();"/>
	<p>1.jQuery对象才能调用jQuery方法</p>
	<p>2.DOM对象才能调用DOM方法</p>
	<p>3.jQuery对象本质是DOM数组</p>
	<div>
		<img src="../img/01.jpg" onclick="chg(this);">
	</div>
</body>
</html>

谢谢你看到这里!写作仓促,有疏漏之处还请评论指正,共同探讨进步!


猜你喜欢

转载自blog.csdn.net/limonsea/article/details/81194494