博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
3 jQuery学习笔记第三节 Jq的设计思想之写法
阅读量:5873 次
发布时间:2019-06-19

本文共 2047 字,大约阅读时间需要 6 分钟。

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


1.方法函数化

Jq中基本看不到等号了,基本都是用**函数**来完成操作的.每一步都是在调用函数.不在像 Js 里面的那样会有等号进行取值和赋值操作 下面举个栗子:

 //这个代码演示的是 JS 和 JQ 对于事件的操作的演示. 2. 3.     4.        5.       
6.         
事件操作 7.         
8.             div{width: 100px;                    height: 100px;                    background: #00BFFF;                    margin-bottom: 10px;                    font-size: 12px;} 9.           10.         
11.       12.      13.         
我是第一个 div 14.         
我是第二个 div 15.      16.     
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.    28. 复制代码

可以很清晰的看到,使用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

你可能感兴趣的文章
Java微服务之Spring Boot on Docker
查看>>
2010年InfoQ中文站Java社区回顾:让Java飞一
查看>>
android.Manifest.permission
查看>>
机器学习:实用案例解析
查看>>
[导入] 微星P35 Neo2 FR入手
查看>>
Boost在vs2010下的配置
查看>>
android camera(四):camera 驱动 GT2005
查看>>
一起谈.NET技术,ASP.NET伪静态的实现及伪静态的意义
查看>>
20款绝佳的HTML5应用程序示例
查看>>
string::c_str()、string::c_data()及string与char *的正确转换
查看>>
11G数据的hive初测试
查看>>
如何使用Core Text计算一段文本绘制在屏幕上之后的高度
查看>>
==和equals区别
查看>>
2010技术应用计划
查看>>
XML 节点类型
查看>>
驯服 Tiger: 并发集合 超越 Map、Collection、List 和 Set
查看>>
Winform开发框架之权限管理系统改进的经验总结(3)-系统登录黑白名单的实现...
查看>>
Template Method Design Pattern in Java
查看>>
MVC输出字符串常用四个方式
查看>>
LeetCode – LRU Cache (Java)
查看>>