3 jQuery学习笔记第三节 Jq的设计思想之写法

最新推荐文章于 2024-05-23 16:08:37 发布

weixin_33736832

最新推荐文章于 2024-05-23 16:08:37 发布

阅读量94

点赞数

文章标签： javascript json ViewUI

原文链接：https://juejin.im/post/5a39da756fb9a04523420733

版权

####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(){})这个函数中去执行.

看下面的一个图示,关于文档就绪函数的一个解释说明

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>来进行链接是一个道理.***

转载于:https://juejin.im/post/5a39da756fb9a04523420733

weixin_33736832

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3 jQuery学习笔记第三节 Jq的设计思想之写法

####jQuery学习笔记第三节/Jq的设计思想之写法1.方法函数化Jq中基本看不到等号了,基本都是用**函数**来完成操作的.每一步都是在调用函数.不在像 Js 里面的那样会有等号进行取值和赋值操作下面举个栗子://这个代码演示的是JS和JQ对于事件的操作的演示.2.<!DOCTYPEhtml>3.<html>4.<...
复制链接

扫一扫