今天开始进入jQuery的学习,最大的感受就是方便,特别的方便,至少在学了js之后是这么感觉的。很简单的例子,就是js如果想要做一个滑动或者渐入渐出的效果,要自己动手封装一个函数,获取元素,获取对应的效果,判断等等。但是用jQuery的话直接用对应的方法就好了,里面都是封装好的东西,相当于是一个“高级版的common.js”。用的时候,和引用js文件一样,如同下面所展示:
<script src="js/jquery-1.12.4.js"></script>
另外附一个简单的例子,点击第一个按钮显示几个块,点击第二个按钮在每个块里显示文字:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 100px;
background: greenyellow;
display: none;
margin-top: 20px;
}
</style>
</head>
<body>
<input type="button" value="展示" id="btn1">
<input type="button" value="设置内容" id="btn2">
<div></div>
<div></div>
<div></div>
</body>
</html>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/common.js"></script>
<script>
//文档准备好了,可以执行了,把函数作为参数穿进去
$(document).ready(function () {
//1、找按钮节点
$('#btn1').click(function () {
//jquery不用遍历
//jquery;有一个特点叫隐式迭代,会自动遍历,不需要我们遍历
$('div').show(1000);//显示
})
$('#btn2').click(function () {
$('div').text('emmm?');
})
})
/*
* 1、jQuery拥有隐式迭代的特性,不需要遍历
* 2、完全没有兼容性问题
* 3、实现动画非常简单,功能强大
* 4、不会覆盖
* 5、代码简单粗暴
* */
</script>