[JS] JavaScript框架(1) jQuery

　　jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

　　官网API：

　　　　http://api.jquery.com

　　下载：

　　　　NuGet：Install-Package jQuery

　　

　　知识点：主要功能、版本、基本语法、事件，操作元素，特效，AJAX，扩展$，释放$，遍历，ready/onload区别

　　先顶后看

1.主要功能

　　html选取，操作，css操作，事件，特效，遍历，ajax

2.版本

　　1.x：IE6+(本人测试，部分方法还是不支持IE8及以下)　　　　

　　2.X:IE9+

3.基本语法

　　$(selector).action()

　　如：

        function func() {
            $(this).hide();             //所有div隐藏
        }
        $('div').click(func);           
        $('div').bind('click', func);   //unbind
        $('div').on('click', func);     //off   bind本质用的就是on

4.事件

　　jquery和js的事件对象不一样。(包装了一下js对象，originalEvent属性就是js event对象)

　　事件对象：

　　　　type：事件名，如：click

　　　　target：触发源，实际点击目标。

　　　　currentTarget：触发源，触发事件目标。

    <div>
        <p>Text</p>
    </div>
    <script>
        $('div').first().click(function (e) {
            console.log(e);
        })
    </script>

　　阻止冒泡：

    <div>text</div>
    <div>text</div>
    <script>
        function func(e) {
            console.log(e);                     //打印事件
            e.stopImmediatePropagation();       //阻止所有冒泡
            e.stopPropagation();                //阻止父级冒泡
            //todo
        }
        $('div')[1].onclick = func;             //js事件
        $('div').first().click(func);           //jquery事件
    </script>

　　

5.操作元素

　　查、改：text,html,val,attr,css

    <p><a>p1</a></p>
    <p><a>p2</a></p>
    <input type="text" value="v1" />
    <input type="text" value="v2" />
    <script>
        var ps = $('p');            //所有p元素jquery对象
        ps.eq(0).text();            //innerText
        ps.eq(1).html();            //innerHTML
        $('input').val();           //value
    </script>

　　增：

    <p> text </p>
    <script>
        $('p').prepend('prepend');          //向前插入
        $('p').append('append');            //向后插入
        $('p').before('before');            //向前插入，且换行
        $('p').after('after');              //向后插入，且换行
    </script>

　　删：

    <div>
        <p> text </p>
    </div>
    <span>通过该位置及样式区别</span>
    <script>
        $('div').css({ height: '200px', background: '#0094ff' });           //设置div样式
        $('div').remove();                                                  //删除元素及子元素
        $('div').empty();                                                   //删除子元素
    </script>

　　

6.特效

　　语法：effect(time,func)

    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div>
    </div>
    <script>
        $('div').css({ height: '100px', background: 'red' });
        $('button').eq(0).click(function () {
            $('div').show(1000);                        //显示
            $('div').fadeIn(1000);                      //淡入
            $('div').slideUp(1000);                     //滑动入
        })
        $('button').eq(1).click(function () {
            $('div').hide(1000);
            $('div').fadeOut(1000);
            $('div').slideDown(1000);
        })
        $('button').eq(2).click(function () {
            $('div').toggle(1000);
            $('div').fadeToggle(1000);
            $('div').slideToggle(1000);
        })
    </script>

　　

7.AJAX

　　语法：$.method(url,data,func)

    <script>
        $.get('handle.ashx',{ time: new Date().toLocaleString() }, function (data) {
            alert(data);
        }).error(function (e) {
            //todo　　出现异常执行
        })
    </script>

　　语法：$(selector).load(url,func)　　　　　　//加载文件

　　语法：$.getScript(url,func)　　　　　　　　//加载script，本质是$.get( url, undefined, func, "script" );

8.扩展jQuery

　　通过$.fn作为扩展，可实现链式编程。

    <div>text</div>
    <script>
        $.fn.func = function () {
            alert(this);                //this为jQuery对象
        }
        $('div').func();
    </script>

　

9.noConflict

　　该方法会释放 $ 标识符的控制

    <div>text</div>
    <script>
        var my$ = $.noConflict();       //释放$
        my$('div').hide(1000);
        //$('div').hide(1000);          //无效
    </script>

　　

10.css

　　语法：　　　　$(selector).css(name,value)　　　　　　$(selector).css(obj)

　　常用操作：　　$(selector).addClass(className)　　　　$(selector).removeClass(className)　　$(selector).toggleClass(className)

        $('div').css('width', '200px').css('background', 'blue');
        $('div').css({'200px',background:'blue'});

11.遍历

遍历元素

　　子元素：　　　　chilrden()　　find()

　　父元素：　　　　parent()　　parents()　　parentUntil(selector)

　　同级元素：　　　

    <script>
        var d = $('div');
        d.siblings();                           //同级所有其他元素
        d.next();                               //同级下一个元素
        d.nextAll();                            //同级下面所有元素
        d.nextUntil(selector);                  //同级下面到selector间的所有元素
        d.prev();                               //同级上一个元素
        d.prevAll();                            //同级上面所有元素
        d.prevUntil(selector);                  //同级上面到selector间的所有元素
    </script>

　　过滤：　　　　first()　　last()　　eq(index)　　filter(selector)　　not(selector)　　　　

　　　　eq(index):　　　　　　　　取jQuery对象数组中的第几个对象，从0开始

　　　　filter(selector):　　　　　　取jQuery对象数组中符合selector的对象，not(selector)相反。

遍历集合

　　　　map

　　　　　　遍历数组,返回新的数组

　　　　　　语法:$.map([],function(v,i){})

　　　　each

　　　　　　遍历数组

　　　　　　语法:$.each([],function(v,i){})

12.DOM对象jQuery对象互转：　

　　DOM对象　　=>　　jQuery对象：　　　　$(DOM对象)

　　如：　　　　　　var ele = document.getElementById('id');　　$(ele);　　　

　　常用操作：　　　　$('<a href="#">a标签<a>');　　　　//直接将html标签转成DOM对象

　　jQuery对象　　=>　　DOM对象：　　　　jQuery对象[0]

　　如：　　　　　　$(ele)[0];

13.ready，onload

　　ready在前，onload在后。

DOM树节点完成:

　　$(function(){}) === $(document).ready(function(){})

load完成:

　　window.onload = function(){}