jQuery/自己动手写,就明白什么是jQuery

课纲

• 预习地址http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html 阮一峰写的jQuery思路(这个是了解jQuery如何使用的)和实践(这个是指导如何最有效地使用jQuery,是jQuery的进阶篇)http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html
• Dom提供了可以选取兄弟元素的api,可是没有提供同时选取所有兄弟元素的api; Dom提供了添加class的api,可是没有提供可以添加多个class的api,通过自己动手写,补充这两个API的过程,就明白什么是jQuery了~
• 了解命名空间

var dom = {}
dom.getSiblings(node)
dom.addClass(node,{a:true,b:false})

//命名空间其实就是一个空对象,把写好的api赋值给它,而不是直接赋值给Window对象,这样的好处一个是,避免日后代码繁重的时候,出现变量覆盖,导致bug;另外可以根据命名空间的命名可以快速辨识出是哪位程序员写的api,和api的大概功能

• 命名空间是一种设计模式//单纯使用命名空间还不是最优化的,因为调用函数的时候不符合我们的直觉,为了更美观的代码,我们有两个方案:1就是利用原型链,修改Node.prototype//这样做的弊端就是修改了Node有可能把前人的东西覆盖,而且修改原来的Node不好
• 多种因素考虑就想出了第二种方式,在使用命名空间的基础上改良,新造一个Node2,区别源生Node,这样功能不变,也不影响源生代码,其实这就是jQuery的做法

jQuery就是这样实现的,jQuery接受一个旧的节点,返回一个新的对象,就是jQuery对象,它具备了更加优化的Dom功能的函数,它接受的不仅是节点,还可以是字符串(选择器名字~)

这个小功能具体代码/模仿
Window.jQuery = function (nodeOrSelector){
    let node
    if(typeof nodeOrSelector === 'string'){
          node =document.querySelector(nodeOrseletor)
          }else{
            node = nodeOrSelector
       }
}
为了多对象操作,可以再改良一下//

所以jQuery的本质:它的本质就是一个构造函数,它可以接受一个参数,这个参数可以是节点也可以是选择器的字串,然后返回一个方法对象去操作节点

• 在检查代码的时候,如果报错不显示行数,那就用dibug方法
• 更换函数的调用方式,体验this这个语法糖
• 缩写alias
• 最后分析我们写的api和jQuery的具体区别,这样就可以清晰地知道什么是jQuery了~~

---

封装函数

• api是别人给你用的代码,库是特定种类的api
• jQuery最好的入门教材是jQuery基础,不过这本书是英文的
• dom提供了nextElementSibling 和previousElementSibling 但是没有选取所有兄弟的api,我们动手写一个有这样功能的

var allChildren = item3.parentNode.children
var array = {length :0}
for (let i=0,i

• 代码优化的第一准则,只要存在重复代码,就有优化的可能

阮一峰jQuery博客笔记

• jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。

        $(document) //选择整个文档对象

　　$('#myId') //选择ID为myId的网页元素

　　$('div.myClass') // 选择class为myClass的div元素

　　$('input[name=first]') // 选择name属性等于first的input元素

　    $('a:first') //选择网页中第一个a元素

　　$('tr:odd') //选择表格的奇数行

　　$('#myForm :input') // 选择表单中的input元素

　　$('div:visible') //选择可见的div元素

　　$('div:gt(2)') // 选择所有的div元素，除了前三个

　　$('div:animated') // 选择当前处于动画状态的div元素

• Query设计思想之二，就是提供各种强大的过滤器，对结果集进行筛选，缩小选择结果。

　    $('div').has('p'); // 选择包含p元素的div元素
　　$('div').not('.myClass'); //选择class不等于myClass的div元素
　　$('div').filter('.myClass'); //选择class等于myClass的div元素
　　$('div').first(); //选择第1个div元素
　　$('div').eq(5); //选择第6个div元素
　    $('div').next('p'); //选择div元素后面的第一个p元素
　　$('div').parent(); //选择div元素的父元素
　　$('div').closest('form'); //选择离div最近的那个form父元素
　　$('div').children(); //选择div的所有子元素
　　$('div').siblings(); //选择div的同级元素

• jQuery设计思想之三，就是最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来

$('div').find('h3').eq(2).html('Hello');
//分开来就是下面这样
　        $('div') //找到div元素
　　　.find('h3') //选择其中的h3元素
　　　.eq(2) //选择第3个h3元素
　　　.html('Hello'); //将它的内容改为Hello

• jQuery设计思想之四，就是使用同一个函数，来完成取值（getter）和赋值（setter），即"取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定。

　　$('h1').html(); //html()没有参数，表示取出h1的值
　　$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值
//常见取值赋值的函数
　[.html()](http://api.jquery.com/html/) 取出或设置html内容

　　[.text()](http://api.jquery.com/text/) 取出或设置text内容

　　[.attr()](http://api.jquery.com/attr/) 取出或设置某个属性的值

　　[.width()](http://api.jquery.com/width/) 取出或设置某个元素的宽度

　　[.height()](http://api.jquery.com/height/) 取出或设置某个元素的高度

　　[.val()](http://api.jquery.com/val/) 取出某个表单元素的值

• jQuery设计思想之五，就是提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。

　　[.insertAfter()](http://api.jquery.com/insertAfter/)和[.after()](http://api.jquery.com/after/)：在现存元素的外部，从后面插入元素

　　[.insertBefore()](http://api.jquery.com/insertBefore/)和[.before()](http://api.jquery.com/before)：在现存元素的外部，从前面插入元素

　　[.appendTo()](http://api.jquery.com/appendTo/)和[.append()](http://api.jquery.com/append)：在现存元素的内部，从后面插入元素

　　[.prependTo()](http://api.jquery.com/prependTo/)和[.prepend()](http://api.jquery.com/prepend)：在现存元素的内部，从前面插入元素

//除了元素的位置移动之外，jQuery还提供其他几种操作元素的重要方法。

复制元素使用.clone()。

删除元素使用.remove()和.detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。

清空元素内容（但是不删除该元素）使用.empty()。

创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了：

• jQuery设计思想之六：除了对选中的元素进行操作以外，还提供一些与元素无关的工具方法（utility）。不必选中元素，就可以直接使用这些方法。

　　[$.trim()](http://api.jquery.com/jQuery.trim/) 去除字符串两端的空格。

　　[$.each()](http://api.jquery.com/jQuery.each/) 遍历一个数组或对象。

　　[$.inArray()](http://api.jquery.com/jQuery.inArray/) 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。

　　[$.grep()](http://api.jquery.com/jQuery.grep/) 返回数组中符合某种标准的元素。

　　[$.extend()](http://api.jquery.com/jQuery.extend/) 将多个对象，合并到第一个对象。

　　[$.makeArray()](http://api.jquery.com/jQuery.makeArray/) 将对象转化为数组。

　　[$.type()](http://api.jquery.com/jQuery.type/) 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。

　　[$.isArray()](http://api.jquery.com/jQuery.isArray/) 判断某个参数是否为数组。

　　[$.isEmptyObject()](http://api.jquery.com/jQuery.isEmptyObject/) 判断某个对象是否为空（不含有任何属性）。

　　[$.isFunction()](http://api.jquery.com/jQuery.isFunction/) 判断某个参数是否为函数。

　　[$.isPlainObject()](http://api.jquery.com/jQuery.isPlainObject/) 判断某个参数是否为用"{}"或"new Object"建立的对象。

　　[$.support()](http://api.jquery.com/jQuery.support/) 判断浏览器是否支持某个特性。

• jQuery设计思想之七，就是把事件直接绑定在网页元素之上。

　　$('p').click(function(){
　　　　alert('Hello');
　　});
//目前，jQuery主要支持以下事件：

 [.blur()](http://api.jquery.com/blur/) 表单元素失去焦点。
　　[.change()](http://api.jquery.com/change/) 表单元素的值发生变化
　　[.click()](http://api.jquery.com/click/) 鼠标单击
　[.dblclick()](http://api.jquery.com/dblclick/) 鼠标双击
　[.focus()](http://api.jquery.com/focus/) 表单元素获得焦点
　[.focusin()](http://api.jquery.com/focusin/) 子元素获得焦点
　[.focusout()](http://api.jquery.com/focusout/) 子元素失去焦点
　[.hover()](http://api.jquery.com/hover/) 同时为mouseenter和mouseleave事件指定处理函数
　　[.keydown()](http://api.jquery.com/keydown/) 按下键盘（长时间按键，只返回一个事件）
　　[.keypress()](http://api.jquery.com/keypress/) 按下键盘（长时间按键，将返回多个事件）
　　[.keyup()](http://api.jquery.com/keyup/) 松开键盘
　　[.load()](http://api.jquery.com/load-event/) 元素加载完毕
　　[.mousedown()](http://api.jquery.com/mousedown/) 按下鼠标
　[.mouseenter()](http://api.jquery.com/mouseenter/) 鼠标进入（进入子元素不触发）
　[.mouseleave()](http://api.jquery.com/mouseleave/) 鼠标离开（离开子元素不触发）
　　[.mousemove()](http://api.jquery.com/mousemove/) 鼠标在元素内部移动
　[.mouseout()](http://api.jquery.com/mouseleave/) 鼠标离开（离开子元素也触发）
　　[.mouseover()](http://api.jquery.com/mouseover/) 鼠标进入（进入子元素也触发）
　　[.mouseup()](http://api.jquery.com/mouseup/) 松开鼠标
　[.ready()](http://api.jquery.com/ready/) DOM加载完成
　[.resize()](http://api.jquery.com/resize/) 浏览器窗口的大小发生改变
　　[.scroll()](http://api.jquery.com/scroll/) 滚动条的位置发生变化
　　[.select()](http://api.jquery.com/select/) 用户选中文本框中的内容
　　[.submit()](http://api.jquery.com/submit/) 用户递交表单
　[.toggle()](http://api.jquery.com/toggle-event/) 根据鼠标点击的次数，依次运行多个函数
　　[.unload()](http://api.jquery.com/unload/) 用户离开页面