什么是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>
谢谢你看到这里!写作仓促,有疏漏之处还请评论指正,共同探讨进步!