3.jQuery学习笔记第三节/Jq的设计思想之写法
2016-04-13 本文已影响120人
iplaycodex
jQuery学习笔记第三节/Jq的设计思想之写法
1.方法函数化
Jq中基本看不到等号了,基本都是用函数来完成操作的.每一步都是在调用函数.不在像 Js 里面的那样会有等号进行取值和赋值操作
下面举个栗子:
//这个代码演示的是 JS 和 JQ 对于事件的操作的演示.
2.<!DOCTYPE html>
3. <html>
4. <head>
5. <meta charset="UTF-8">
6. <title>事件操作</title>
7. <style type="text/css">
8. div{width: 100px;
height: 100px;
background: #00BFFF;
margin-bottom: 10px;
font-size: 12px;}
9. </style>
10. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
11. </head>
12. <body>
13. <div class="one">我是第一个 div</div>
14. <div class="two">我是第二个 div</div>
15. </body>
16. <script type="text/javascript">
17. //使用 Js 来添加事件
18. var js_one = document.getElementsByClassName("one"); //使用这个方法获取的是一个集合.
19. js_one[0].onclick = function(){
20. alert("one");
21. }
22.
23. //使用 JQ 来执行一个事件
24. $(".two").click(function(){
25. alert("two");
26. })
27. </script>
28.</html>
可以很清晰的看到,使用jq去给元素添加事件是一件很简单的事情
2.DOM 加载的那些事
关于 DOM 加载的时候,我们一般在写一个页面的时候会加载很多的资源.图片了,视频了,JS 的文件了.所以:一般的常规的优化策略针对图片我们使用的是:雪碧图.这样可以减少图片对于 HTTP 的请求.并且对于如果一个页面图片资源过多的时候我们会使用懒加载来加载资源.
还有就是当我们使用 JS 的时候,我们要优先加载 DOM 树.DOM 树加载完毕之后再去加载别的资源.而且如果一段 JS 代码很耗时的时候该咋整,这个时候我们就要把 JS 代码放置在 window.onload 中去执行.在 JQ中就是放置在$(function(){})这个函数中去执行.
看下面的一个图示,关于文档就绪函数的一个解释说明
文档就绪函数.png
SO,我们一般代码都会写在$(function(){})中,就是上面的那么个道理.
3.关于 CSS()函数的复合写法
关于这个方法使用起来是很简单的.这里就是写一下如果要给一个元素设置多个属性的时候该怎么去写.
Talk is cheap,show me the code
//使用 JQ 来执行一个事件
$(".two").click(function(){
alert("two");}).css({"backgroundColor":"blue",
"width":"200px",
"height":"300px",
"color":"#ffffff"});
/*如果 CSS 有多个参数的时候就按照 json 的写发这样来写,
其实就是键值对的写法.也很简单.
但是记住了:在 JQ 中不可以操作复合属性,例如:background.他是一个复合的属性,是不行的!*/
4.选择器的总结
其实总结下来 JQ 的选择器无非就是这么几个:
- id选择器
- class 选择器
- 类型选择器
- 以及还有类似 xPath 样子的拓展的选择器.
5.最后一点就是 JQ 的文件的地方
其实很简单就是我们在写东西的时候要将html 和 css 和 js 文件分离开来.做到了结构和样式以及行为进行分离,这样做的好处就是在以后的项目维护的时候就可以很方便的进行维护.也就是 JS 文件要通过<script></script>标签来进行导入,而不要写在 html 文件中,这样是不好的,就和 CSS 要通过 <link>来进行链接是一个道理.***
