jQuery的使用与其设计模式

?学习jQuery的设计模式——手写jQuery

jQuery操作元素

选取元素

jQuery基础语法是：$(selector).action()——"选取元素，对其操作"，所以第一步就是学习jQuery 如何获取元素。

jQuery 使用 CSS 选择器来选取 HTML 元素，使用 XPath 表达式来选择带有给定属性的元素，也可以是使用特有的过滤表达式来选取元素。

css选择器

jQuery的选择器表达式可以是CSS 选择器来选取 HTML 元素

 $("p") 选取 <p> 元素。

 $("p.intro") 选取所有 class="intro" 的 <p> 元素。

 $("p#demo") 选取所有 id="demo" 的 <p> 元素。

XPath表达式

jQuery的选择器表达式可以是XPath 表达式来选择带有给定属性的元素

 $("[href]") 选取所有带有 href 属性的元素。

 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

过滤表达式

jQuery的选择器表达式可以是jQuery特有的表达式 ，对元素进行过滤，获取到特定的元素

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

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

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

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

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

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

查找元素

jQuery提供了在DOM树上移动的方法来查找元素，从被选（当前的）元素开始，在DOM树中向上移动（祖先），向下移动（子孙），水平移动（同胞），这种移动被也称为对 DOM 进行遍历。

 $("span").parent();//返回每个 <span> 元素的的直接父元素

 $("span").parents();//返回所有 <span> 元素的所有祖先

 $("div").children();//返回每个 <div> 元素的所有直接子元素

 $("div").find("span");//返回属于 <div> 后代的所有 <span> 元素

 $("h2").siblings();//返回 <h2> 的所有同胞元素

 $("h2").next();//返回 <h2> 的下一个同胞元素
 //三个最基本的过滤方法是：first(), last() 和 eq()
 $("div p").first();//first() 方法返回被选元素的首个元素

 $("div p").last();//last() 方法返回被选元素的最后一个元素

 $("p").eq(1);//选取第二个 <p> 元素

创建元素

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

  $('<p>Hello</p>');

　$('<li class="new">new list item</li>');

元素的取值和赋值

jQuery使用同一个API，根据接收参数的不同，来完成取值（getter）或赋值（setter），即"取值器"与"赋值器"合一，这也是jQuery中使用的一种优秀的设计模式。

• 举例：

$('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值

• 常见的取值和赋值函数

.html() 取出或设置html内容
.text() 取出或设置text内容
.attr() 取出或设置某个属性的值
.width() 取出或设置某个元素的宽度
.height() 取出或设置某个元素的高度
.val() 取出某个表单元素的值

移动元素

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

• 举例：

//第一种方法是使用.insertAfter()
//把div元素移动p元素后面
$('div').insertAfter($('p'));

//第二种方法是使用.after()
//把p元素加到div元素前面
$('p').after($('div'));

• 类似操作方法共4对

　.insertAfter()和.after() //在现存元素的外部，从后面插入元素
　.insertBefore()和.before() //在现存元素的外部，从前面插入元素
　.appendTo()和.append() //在现存元素的内部，从后面插入元素
　.prependTo()和.prepend() //在现存元素的内部，从前面插入元素

删除元素

.remove()——将匹配元素集合从DOM中删除。（注：同时移除元素上的事件及 jQuery 数据）

.detach()——从DOM中去掉所有匹配的元素（注：保留元素上的事件及 jQuery 数据）

.empty()——从DOM中移除集合中匹配元素的所有子节点

链式操作

jquery的核心操作：提供一个函数，参数是选择器，函数内部根据选择器获取这些元素后，返回一个jQuery对象（jquery函数构造出来的对象），后续每一步的jQuery操作也都是返回一个jQuery对象，就实现了链式操作。

$('#test2').find('.child').addClass('green').addClass('blue')

jQuery还提供了.end()方法，使得结果集可以后退一步：

$('#parent').find('.child').addClass('green').end().addClass('old');//退回到选中的parent上添加old类属性

PS：关于jQuery中其他API，事件、Ajax……参考jQuery中文文档

JQuery中的设计模式

模仿jQuery实现其中的部分API后，也学习到了jQuery中各种优秀的设计模式，现在来简单总结一下。

链式调用

每一步的jQuery操作，返回的都是一个jQuery对象，参考上文中的链式操作

函数重载

构造函数$()支持多种参数

• 参数：HTML —— 创建元素
• 参数：选择器 —— 查找元素

下面的代码模拟了jQuery中重载的实现：

    if (typeof selectorOrArrayOrTemplate === "string") {
        if (selectorOrArrayOrTemplate[0] === "<") {
            // 创建 
            elements = [createElement(selectorOrArrayOrTemplate)];
        } else {
            // 查找 
            elements = document.querySelectorAll(selectorOrArrayOrTemplate);
        }
    } else if (selectorOrArrayOrTemplate instanceof Array) {
        elements = selectorOrArrayOrTemplate;
    }

getter/setter

jQuery使用同一个API，根据接收参数的不同，来完成取值（getter）或赋值（setter）

适配器

jQuery针对不同浏览器使用不同代码

如下代码中：innerText是IE支持的DOM操作，textContent是其他浏览器支持的DOM操作

   text(node, string) {
        if (arguments.length === 2) {
            if ('innerText' in node) { //适配不同的浏览器
                node.innerText = string //ie
            } else {
                node.textContent = string //chrome/firefox
            }
        } else if (arguments.length === 1) {
            if ('innerText' in node) { //适配不同的浏览器
                return node.innerText
            } else {
                return node.textContent
            }
        }
    }

别名

避免浪费内存，jQuery中把所有共有的API放在了jQuery.prototype（原型）中，并为其起了别名jQuery.fn

 window.$ = window.jQuery
 jQuery.fn = jQuery.prototype

并且可以用原型继承实现插件系统

 $.fn.modal = function(){ ... }
 $('#div1').modal()

用闭包来隐藏细节

对象中各种函数和获得的elements(元素）形成闭包，让用户只能通过函数来操作元素，隐藏了细节

不使用new的构造函数

通过直接调用函数，返回一个对象的方法来得到jQuery对象。

参考

jQuery 都过时了，那我还学它干嘛？

jQuery设计思想

jQuery中文文档