初识jQuery

jQuery是什么？

jQuery其实就是一堆的js函数(js库)，也就是普通的js而已，不是全新的东西。

write less, do more!!! 

人很话不多

 

Why jQuery?

1、jQuery面向用户良好的设计使得在使用过程中彻底解放了记忆原生操作DOM的接口；

2、jQuery中大量可复用的函数和发展过程中常年积累下来的插件库，可以极大的简化JavaScript开发；

3、jQuery在半数以上并没有复杂交互的网站中得以大面积使用，因为他们需要的仅仅是一些兼容低级浏览器而又呈现炫酷效果动画的页面；

4、jQuery改变了百万人编写JavaScript的方式，当然部分人已经觉得时过境迁，组件化，工程化，大行其道，但请不要忘记他的前端开发者的启蒙意义！且很多公司很多项目仍然需要它，所以笔面试必会！

 

jQuery学习注意点

1、jQuery只是辅助工具，不能完全替代js，二者并存当方式出现在项目中

2、jQuery很庞杂，要会使用，但应重学思想

3、jQuery方法很多，按需学习，把常用的有价值的学会

4、jQuery api可以现用现查

 

jQuery 使用-起步

引入jQuery工具库

cdn: http://www.jq22.com/cdn/#a2

下载地址： http://www.jq22.com/jquery-info 122

官方地址（下载api查询等）

中文： https://www.jquery123.com/

英文原版： https://jquery.com/

核心全局函数

$(jQuery)

1、使用css selector选出元素

<div class="wrapper">
    <ul>
        <li>1</li>
        <li data="Duyi">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
    </ul>
</div>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<script type="text/javascript">
    // css selector
    // 实例方法
    $('div').css({border:'1px solid black'});

    // css selector
    $('.wrapper ul li').css({width: 100, height: 100, backgroundColor: 'red'});
</script>

 2、jQuery中一些特有的选择器

// jquery unique selecotor
$('.wrapper ul li:first'); //选中第一个
$('.wrapper ul li:last'); //选中最后一个
$('.wrapper ul li:odd'); //选中奇数个
$('.wrapper ul li:even'); //选中偶数
$('.wrapper ul li:eq(4)'); //选中特定的第几个
$('li[data="Duyi"]); //选中带有data="duyi"属性的，^=表示开头，&=表示结尾，!=表示没有该属性

3、jQuery中的容错机制 

// null undefined '' 容错机制
$(null); // jQuery.fn.init() 空的对象

$('div')
    .find('span') //没有找到div下的span时，js不会停止进程
    .css({width: 100, height: 100, backgroundColor: 'red'});

4、dom

var div = document.getElementByTagName('div');
console.log(div, $(div));
// <div>...</div> dom对象
// jQuery.fn.init(1) jQuery对象

5、$(function(){})和$(document).ready(function(){})在DOMContentLoaded之后，和window.onload不同，在其之前。

6、$('div','.wrapper')选取二种，不是同时满足

$() 对象？

jQuery库  封闭作用域

(function() {
    function jQuery(selector) {
        return new jQuery.prototype.init(selector);
    }
    jQuery.prototype.init = function(selector) {
        // 选出 dom 并且包装成jQuery对象    返回
        // id class tag
        this.length = 0;
        if(selector.indexOf('.') != -1) {
            var dom = document.getElementsByClassName( selector.slice(1) );
        }else if(selector.indexOf('#') != -1){
            var dom = document.getElementById( selector.slice(1) );
        }else {
            var dom = document.getElementsByTagName(selector);
        }
        if(dom.length == undefined) {
            this[0] = dom;
            this.length ++;
        }else{
            for (var i = 0; i < dom.length; i++){
                this[i] = dom[i];
                this.length ++;
            }
        }
        return this;
    }
    jQuery.prototype.css = function(config) {
        for(var i = 0; i < this.length; i++){
            for(var attr in config){
                this[i].style[attr] = config[attr];
            }
        }
        return this;
    }
    jQuery.prototype.init.prototype = jQuery.prototype;
    window.$ = window.jQuery = jQuery;
}())

其中，链式调用通过return this实现