首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >《众妙之门:JavaScript 与 jQuery 技术精粹》部分要点摘录

《众妙之门:JavaScript 与 jQuery 技术精粹》部分要点摘录

作者头像
Jeff
发布于 2018-01-22 02:43:40
发布于 2018-01-22 02:43:40
8260
举报
文章被收录于专栏:DeveWorkDeveWork

以下内容来自于《众妙之门:JavaScript 与 jQuery 技术精粹》一书,为本人在阅读的时候感觉有必要记录的地方记录而来。

三重标记法

var d; if(x < 200){ d = 1; } else { d = -1; }   var d = x < 200 ? 1 : -1;

数组的遍历& 性能影响

/* cached outside loop*/ var len = myArray.length; for (var i = 0; i < len; i++) {}   /* cached inside loop */ /* 数组长度在每个循环中都被不必要的重复访问,如此导致程序运行缓慢*/ for (var i = 0, len = myArray.length; i < len; i++){}   /* cached outside loop using while */ var len = myArray.length; while (len--){}

命名空间模式

问题:程序中使用的命名空间是正确的,但对其存在性的检查无效。如下例:

if (!MyNamespace){ MyNamespace = {}; }

执行过程中!MyNamespace 会报错,变量之前么有做声明。较好的处理方式:

方式一

if (!MyNamespace){ MyNamespace = {}; }

方式二

var MyNamespace = MyNamespace || {};

方式三

if( typeof MyNamespace == 'undefined'){ var MyNamespace = {}; }

JavaScript 部件的七部测试法

  1. 当JavaScript 关闭时会发生什么?
  2. 怎样改变外观、感受和内容?
  3. 最终产品的可用性和语义性如何?
  4. 是否明白在发生神马?(当出错时候能否快速定位问题?)
  5. 与其他语言的交互性如何?
  6. 维护人员是否专注?
  7. 是否有测试方案,升级或扩展是否简单易行?

数据类型相关概念

typeof null > "object" //Null 是一个对象   null instanceof Object > false //Null 不是对象的实例   typeof NaN > "number" //NaN 是一个数字   NaN === NaN > false //NaN 不等于任何值   new Array() == false > true //空数组 == false

JavaScript 七宗罪

根源:特定于浏览器的代码

  • 与其他脚本兼容不好
  • 相信取代测试(默认所有东西都是正确的)
  • 使用错误的技术进行设计(不赞同)
  • 依赖于 JavaScript 和特定的输入设备
  • 维护麻烦
  • 未进行文档整理的代码
  • 为机器而非人优化

jQuery 的几个易混淆概念

parent()、parents()、closest()

parent() 用于匹配元素的直接父元素。

parents() 类似于parent(),返回的是多个父元素。

closest() 类似于parents(),但只返回一个父元素或祖先元素,且为最近的元素。

position() 与 offset()

position() 计算相对于偏移父元素(即含有position:relative 的元素的最近父元素,如果没有,相对于文档)

offset() 则总是计算相对于文档的位置。

css('width')与css('height')、width()与height()

前者返回字符型维度,以px 为单位;后者返回整数型维度。

click()、bind()、live()、delegate()

bind()可以一次绑定多个事件,并可以传递回调函数。

var message = "right"; $("a").bind("click contextmenu", { msg: message }, function(e) { alert(e.data.msg); return false; });

live()类似bind(),区别在于可将事件绑定到当前和将来的元素(通过DOM 脚本生成的元素)

delegate() 在jQuery 1.4.2 中出现的未来弥补live()无法直接用于链式结构。

//无效的 $("#test").children("a").live("mouseover", function() { alert("hello"); });   // $("#test").delegate("a", "mouseover", function() { alert("hello"); });

not()、is()、:not()区别

not() 返回不匹配的元素、is()只会返回布尔值、:not()可用于选择器字符串中。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015/09/17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)
D.closest()获得D所有父元素,含自己(D、B、A)与 D.parents() 对比
杨校
2018/12/06
9.2K0
JavaWeb18-jquery学习笔记(Java全栈开发)
jquery一.筛选 筛选与之前的选择器雷同,筛选提供的都是函数. 1. 过滤 eq(index|-index):获取指定索引的元素.如果是正数,索引从0开始;若是负数,倒着数从1开始. first():第一个 last():最后一个 hasClass(...):判断元素是否含有特定的样式 filter(...):筛选出与指定表达式匹配的元素集合 is(...):判断元素是否符合指定的选择器 has(...):含有特定后代的元素 not(...):删除与指定表达式匹配的元素 slice(start
Java帮帮
2018/03/19
7.2K0
JavaWeb18-jquery学习笔记(Java全栈开发)
day41_jQuery学习笔记_02
下面是jQuery 提供额外的事件,用于完善javascript缺失的事件 详解如下:
黑泽君
2018/10/11
4.1K0
jQuery最佳实践
jQuery的版本更新很快,你应该总是使用最新的版本。因为新版本会改进性能,还有很多新功能。
用户2192970
2019/02/22
1.5K0
Python全栈之jQuery笔记
jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob.com/manual/jquery/ jQuery笔记 笔记来源于: 传智播客的黑马程序员视频笔记. 菜鸟教程:http://www.runoob.com/ 自己的查询与整理. JS的不完美地方: 1. 代码比较麻烦,给多个元素添加事件需要遍历,可能还需要进行嵌套.
py3study
2020/01/19
6K0
jQuery 事件绑定 和 JavaScript 原生事件绑定
jQuery 中提供了四种事件监听绑定方式,分别是 bind、live、delegate、on,
Krry
2018/09/10
6.4K0
jQuery 事件绑定 和 JavaScript 原生事件绑定
jQuery
jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
py3study
2020/01/16
4.4K0
比较实用的jQuery代码段
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
奋飛
2019/08/15
2.1K0
50个必备的实用jQuery代码段
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成。 如何修改jQuery默认编码(例如默认UTF-8改成改GB2312): $.ajaxSetup({ ajaxSettings:{ contentType:"application/x-www-form-urlencoded;chartset=GB2312"} }); 解决
大师级码师
2021/09/19
7.4K0
JavaWeb(八)JQuery
jQuery 市场用得比较多两个框架: jQuery 比较适合做一些互联网 的应用(12306.com,蘑菇街,美丽说,聚美) extjs 比较适合做后台管理系统(电商(订单管理),银行,电信) 核心: 主要功能:javascript开发人员查找元素、操作DOM、处理事件、执行动画和开发Ajax的操作。优势:(宗旨:write less ,do more 写更少的代码,做更多的事情) 1:轻量级 (js 库非常小) 2:强大的选择器(获取页面上面的dom 元素 document.getElementByI
二十三年蝉
2018/02/28
2.1K0
jquery学习
<1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
菲宇
2019/06/13
2.4K0
【前端基础】javascript笔记
浏览器在加载显示一个网页时,会对页面html代码解析,并在内存中创建一个描述该页面的模型(树形结构)。
fankhu
2023/06/20
4710
Web阶段:第五章:JQuery库
点击:API文档下载 Jquery介绍 1.什么是JQuery ? jQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库。 2.JQue
Java廖志伟
2022/09/28
27.5K0
Web阶段:第五章:JQuery库
[jQuery学习系列四 ]4-Jquery学习四-事件操作
前言: 今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席 云集 听道 推酷 青年中国说 SELF格致论道 参考:http://www.365mini.com/page/tag/jquery-event-methods 1,ready ready()函数用于在当前文档结构载入完毕后立即执行指定的函数。 该函数的作用相当于window.onload事件。 2,blind bind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数。 举例:
一枝花算不算浪漫
2018/05/18
4.9K0
JavaScript学习笔记(四)—— jQuery入门
子元素伪类选择器就是选择某一个元素下面的子元素的方式,在jQuery中,子元素伪类选择器分为两大类:
wsuo
2020/07/31
11.7K0
Web前端JQuery入门实战案例
快速的,轻量级的,功能丰富的 js 库。动画(animation),ajax,DOM,更简单,容易使用的api。
达达前端
2019/07/03
4.2K0
jQuery知识总结(最全 最精美)
使用: <script src="jquery-3.5.1/jquery-3.3.1.min.js"></script> 注意: 如果<script> 在body前面,应该使用 jQuery独有的预加载 $(function(){ 这里写代码 }) jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。 选择器: 所有选择器 * 标签选择器 标签名 ID选择器 #id 类选择器 .
编程张无忌
2021/01/26
5K0
jQuery (二)
还可以使用三个值,第一值为事件,第二个值为Event对象的data属性,在调用最后一个处理函数的时候,会将第二个值作为对象的data属性,这样即可避免使用闭包操作
mySoul
2018/08/24
10.1K0
javascript模式 读书笔记一
模式是指一个通用问题的解决方案。 模式分三种 设计模式 编码模式:javascript特有的
lilugirl
2019/05/26
1.1K0
《JavaScript 模式》读书笔记(2)— 基本技巧2
  for循环经常用在遍历数组或者类数组对象,如引数(arguments)和HTML容器(HTMLColltion)对象。通常for循环模式使用如下:
zaking
2020/03/19
4460
相关推荐
杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档