管中窥豹——初识Jquery

发表于   |   分类于 ，   |  

只从离职之后，索性好好玩了一周，也没怎么看书。再拿起书的时候，反正这尼玛完全都不认识了。。。。
看来做笔记还是有用的。。。以后争取每天写学习笔记

##初识jquery
jquery给我的第一个感受就是。太尼玛牛了。之前用原生JS写ajax交互,写了一个下午(当然个人因素:脑子不行占很大一部分)，结果在Jquery就就几句话就完成了。。。让我有种以后写JS 完全不需要原生JS，就用Jquery就行了的错觉。。。。

jquery第一印象

jquery的语法说到底还是很简单的。感觉怎么说呢Jquery就是原生JS的一个进化版怎么说呢。就好比：原生JS是我们的双手，而Jquery就是我们用手弄出来的斧头，锤头啥的工具。效率的确能打打提高，关键这玩意还不大。
这里我有点不是很明白。很多人都觉得Jquery太大了，我感觉如果是单纯觉得Jquery这个库的体积大，就不用了。我不是很能理解，一个Jquery库再大，又能大到哪去，现在网上一个图片动不动就是几百K，甚至上M。一个用户网速再差，少一个Jquery库,网站又能小到哪里去？与其说觉得Jquery体积大，而不用他。还不如想想如何在其他地方优化网页。。

如何使用jquery

我这边是用的百度静态资源库。
为了兼容，就选着1.90版本
然后加载的时候就用

1
2
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js">
</script>

库的框架的区别

  • 从技术角度讲，抽象层次不一样；从使用角度讲，能完成的事情不一样；从学习角度讲，难易程度也是不一样的。
  • 从技术角度：
    库：基于基础功能和算法的抽象，框架：基于通用功能和常见问题的抽象。
  • 从包含关系：
    库：是框架的一个子集。框架：是库的一个超集。(一个框架可以只拥有一个库)。
  • 通俗来说：
    好比造房子，库就是一个工具箱，而框架就是总体的施工方案。可以用工具箱来进行细节优化，但是还是要遵循框架的总体规划。

    jquery的基本用法

    juqery的基本用法这里，我一时半会也说不清。所以下面就经量用例子来说明把。

原生js和jquery之间的转换

1
2
3
4
5
6
7
<ul>
<li>1</li>
<li>2</li>
</ul>
例如：
var a=$("ul li").eq(1);//这个就是jquery对象
var b=$("ul li").[0];//这就是原生JS对象。

怎么说呢。我感觉原生JS，和Jquery是两个物种- -，原生JS就只能用原生JS的方法，Jquery就只能用Jquery的方法。但是两者之间是可以相互转换的具体转换方法如下：

1
var c=$(b);//此时c就变成一个Jquery对象

Jquery能做什么？

  • 获取页面内容
  • 操作DOM
  • 绑定事件
  • 处理Ajax
  • 实现简单的动画和特效
  • 解决跨浏览器的兼容

jquery中如何绑定事件

我这边是用on,来绑定的- -不过貌似都是用on绑定的吧- -
这里用前面的例子写一个普通的绑定和事件代理的例子

1
2
3
4
5
6
7
8
9
$("ul").on("click","li",function(){
   console.log($(this).text());
})
//这里使用的事件代理，点击"ul"下面的"li",在控制台输出li里面的文本内容

$("ul>li").on("click",funtion(){
    console.log($(this).text());
})
//这里用到的是绑定事件。

jquery如何展示/隐藏元素

还是用例子吧。。总是感觉千言万语汇成一串code。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div{
		width:100px;
		height:100px;
		line-height: 100px;
		text-align: center;
		background:red;
		color:white;
		border-radius: 10px;
		margin-top:20px;
		position: relative;
	}
	</style>
</head>
<body>
	<button id="btn1">hide</button>
	<button id="btn2">show</button>
	<button id="btn3">fadeInt</button>
	<button id="btn4">fadeOut</button>
	<button id="btn5">slideDowm</button>
	<button id="btn6">slideUp</button>
	<button id="btn7">slideToggle</button>
	<button id="btn8">animate</button>
	<div>Z-one</div>
</body>
	<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
	<script>
		$("#btn1").on("click",function(){
			$("div").hide();
		})
		$("#btn2").on("click",function(){
			$("div").show();
		})
		$("#btn3").on("click",function(){
			$("div").fadeIn(1000);
		})
		$("#btn4").on("click",function(){
			$("div").fadeOut(1000);
		})
		$("#btn5").on("click",function(){
			$("div").slideDown(1000);
		})
		$("#btn6").on("click",function(){
			$("div").slideUp(1000);
		})
		$("#btn7").on("click",function(){
			$("div").slideToggle(1000);
		})
		$("#btn8").on("click",function(){
			$("div").animate({
				"left":"+=100px",
				"height":"200px"
			},1000,function(){
				$("div").animate({
					"left":0,
					"height":"100px"

				},1000)
			})
		})
	</script>

</html>

在线预览

animate只能改变数值的变化，对于color等颜色变化不能实现。

Jqeury动画的使用

  • jquery动画主要是使用animate({},1000)这个函数
    例如
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $(".an").on("click",function(){
    		$("#box").animate({
    			left:"+=200",
    			height:100,
    		},1000,function(){
    			$("#box").animate({
    				left:0,
    				height:100,
    			},1000)
    		})
    	})

效果预览

Jquery如何获取元素内部HTML元素，如何设置和获取元素内部元素。

这里主要用到html(),和text()，两者的区别之前已经总结。这里就不在多说 和原生方法区别一直。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
	<input type="text" name="text" id="text">
	<div>
		<button class="btn"><span>点我一下就会有图片哦</span></button>
		<img src=""  id="img" alt="" data-src="http://www.ld12.com/upimg358/allimg/c150111/142096112145N0-21106.jpg">
	</div>

</body>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
	var text=document.querySelector("#text");
	text.addEventListener("keyup",function(){
			text.value=text.value.toUpperCase()
	})
	$("#text").on("keyup",function(){
		$(this).val($(this).val().toUpperCase())
	});

	$(".btn").on("click",function(){
		$("#img").attr("src",$("#img").attr("data-src"))
	})
</script>

效果预览

使用$(“option:cheked”)来获取selector被选中的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="text" id="text">
	<select name="" id="box">
	<option value="aad">宜昌</option>
	<option value="asdasd">武汉</option>
	<option value="asdad">长沙</option>
	</select>
	<div id="btn">加载更多</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
	$("#box").on("change",function(){
		console.log($("option:checked").text())
	})
	$("#btn").html('<img src="http://img3.imgtn.bdimg.com/it/u=1375093150,714638213&fm=21&gp=0.jpg">')
</script>
</html>