jQuery设计思想就像jQuery的标语一样,writeless,domore,jQuery做到使开发者写的代码更加简

就像jQuery的标语一样,write less, do more,jQuery做到使开发者写的代码更加简洁,却能实现更多复杂的效果.学习jQuery是非常有必要的,至今他仍是业界最通用的技术,且他将为我们今后学习更加高级的库打下基础.

本文参考了阮一峰大大的博客:[http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html](http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html)

**文章主要讲解了一下几点:**

jQuery 如何获取元素
jQuery 的链式操作是怎样的
jQuery 如何创建元素
jQuery 如何移动元素
jQuery 如何修改元素的属性

一、获取元素

jQuery的设计思想和主要方法就是选择网页中的元素,并可以对其进行一系列可连续的操作.相较于JavaScript而言,不需要反复重复选取元素的操作.

将一个选择表达式放进构造函数jQuery() [简写为$()] 中,即可得到被选中的元素.

$(document) //标签选择器
$('#id') //id选择器
$('div.class') //class选择器
$('input[name=first]') //属性选择器

或jQuery的表达式

$('div:first') //选择网页中第一个div元素
$('tr:odd') //选择表格中的奇数行
$('#form:input') //选择表单中的input
$('div:visible') //选择网页中可见的div
$('div:gt(2)') //选择所有的div除了前三个
$('div:animate') //选择处于动画状态的div

同时还可以在选择完的元素的基础上使用jQuery的api再次进行筛选,在结果集中再次进行选择.这也是jQuery的设计思想之二.

$('div').has('p') //选择包含p的div
$('div').not('.myClass') //选择class不等于myClass的div
$('div').filter('.myClass') //选择类名为myClass的div
$('div').first() //选择第一个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中的第3个h3元素并将h3标签的内容改为hello

拆解开来即为:

$('div') //找到div元素

　　　.find('h3') //选择其中的h3元素

　　　.eq(2) //选择第3个h3元素

　　　.html('Hello'); //将它的内容改为Hello

链式操作是怎样实现的呢?

其实jQuery(选择器)用于获取对应的元素,但是他却不返回这些元素,相反,他返回一个对象,称为jQuery构造出来的对象,这个对象可以操作对应的元素.

window.$ = window.jQuery = function (selectorOrArrayOrTemplate) {
    let elements;
    if (typeof selectorOrArrayOrTemplate === "string") {
        if (selectorOrArrayOrTemplate[0] === '<') {
            //创建<></>标签
            elements = [createElement(selectorOrArrayOrTemplate)]
        } else {
            elements = document.querySelectorAll(selectorOrArrayOrTemplate)
        }
    } else if (selectorOrArrayOrTemplate instanceof Array) {
        elements = selectorOrArrayOrTemplate
    }

    function createElement(string) {
        //创建<></>标签
        const container = document.createElement("template")
        container.innerHTML = string.trim()
        return container.content.firstChild;
    }
    //创建api对象,api对象的__proto__为jQuery.prototype
    //api可以操作elements
    const api = Object.create(jQuery.prototype)
    Object.assign(api,{
        elements:elements,

    })
    return api //使之成为链式操作
}

//可操作elements的方法都定义在jQuery.prototype上
jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    get(){},
    append(){},
    find(){},
    parent(){},
    ...
}

三、创建元素

使用js创建元素:

var nodeP = document.createElement('p');
nodeP.innerText = "hello";

使用jQuery创建元素:

$('<p>hello</p>')

对比可见,是不是使用jQuery创建简单很多. 给元素添加属性也十分简单:

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

jQuery还有集中操作元素的重要方法:

复制元素: .clone()
删除元素: .remove() 不保留被删除元素的事件
.detach() 保留被删除元素的事件,有利于重新插入文档时使用
清空元素内容: .empty()

四、移动元素

jQuery设计思想之四,提供两组方法,操作元素在网页中的位置移动.一组方法时直接移动该元素,零一组方法时移动其他元素,使得目标元素达到我们想要的位置.

例如: 我们选中一个div元素,需要把它移动到p元素之后

//方法一
$('div').insertAfter($('p'));

//方法二
$('p').after($('div'));

他们的区别是方法一返回的元素是div, 而方法二返回的元素是p,我们根据自己的需要来决定使用哪一种方法.

这种模式的操作方法有四对:

　.insertAfter()和.after()：在现存元素的外部，从后面插入元素

　.insertBefore()和.before()：在现存元素的外部，从前面插入元素

　.appendTo()和.append()：在现存元素的内部，从后面插入元素

　.prependTo()和.prepend()：在现存元素的内部，从前面插入元素

五、修改元素的属性

jQuery的设计思想之五,使用同一个函数来完成取值(getter)和赋值(setter),到底是取值还是赋值通过传入函数的参数来决定.

$('h1').html();  //html()没有参数,取出h1的值
$('h1').html('hello') //html()有参数hello,对h1进行赋值

常见的取值和赋值函数有:

.html() 取出或设置html内容

.text() 取出或设置text内容

.attr() 取出或设置某个属性的值

.width() 取出或设置某个元素的宽度

.height() 取出或设置某个元素的高度

.val() 取出某个表单元素的值

需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（[.text()](http://api.jquery.com/text/)例外，它取出第一个元素的所有元素的text内容）。

除此之外:

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

常用的工具方法有以下几种：

$.trim()](https://link.zhihu.com/?target=http%3A//api.jquery.com/jQuery.trim/) 去除字符串两端的空格。 [$ .each() 遍历一个数组或对象。
$.inArray()](https://link.zhihu.com/?target=http%3A//api.jquery.com/jQuery.inArray/) 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。 [$ .grep() 返回数组中符合某种标准的元素。
$.extend()](https://link.zhihu.com/?target=http%3A//api.jquery.com/jQuery.extend/) 将多个对象，合并到第一个对象。 [$ .makeArray() 将对象转化为数组。
$.type()](https://link.zhihu.com/?target=http%3A//api.jquery.com/jQuery.type/) 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。 [$ .isArray() 判断某个参数是否为数组。
$.isEmptyObject()](https://link.zhihu.com/?target=http%3A//api.jquery.com/jQuery.isEmptyObject/) 判断某个对象是否为空（不含有任何属性）。 [$ .isFunction() 判断某个参数是否为函数。
$.isPlainObject()](https://link.zhihu.com/?target=http%3A//api.jquery.com/jQuery.isPlainObject/) 判断某个参数是否为用"{}"或"new Object"建立的对象。 [$ .support() 判断浏览器是否支持某个特性。

2\. **jQuery设计思想之七**，事件操作,就是把[事件](http://api.jquery.com/category/events/)直接绑定在网页元素之上。

　　$('p').click(function(){
　　　　alert('Hello');
　　});

还有一些jQuery支持的事件,参考文首的阮一峰博客.

使用[.bind()](http://api.jquery.com/bind/)可以更灵活地控制事件，比如为多个事件绑定同一个函数：

$('input').bind(
　　　　'click change', //同时绑定click和change事件
　　　　function() {
　　　　　　alert('Hello');
　　　　}
　　);

只想让事件运行一次，这时可以使用[.one()](http://api.jquery.com/one/)方法。

$("p").one("click", function() {
　　　　alert("Hello"); //只运行一次，以后的点击不会运行
　　});