jQuery基础

jQuery基础

一，jQuery是什么？

1：jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

2：Query是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

3：它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

4：jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

5：jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

二，jQuery对象是什么？

 

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

$("p")[0]：jquery对象转为dom对象      
$("p").html() 等价于 $("p")[0].innerHTML

三，jQuery选择器

1：基本选择器

$("*")，$("#id")，$(".class")，$("标签名")，$(".class,p,div")

 2：层级选择器

1：$("ancestor descendant")：匹配 ancestor 下所有的后代 descendant 元素（descendant ：用以匹配元素的选择器，并且它是第一个选择器的后代元素）
2：$("parent > child")：匹配 parent 下所有的子代 child 元素（child ：用以匹配元素的选择器，并且它是第一个选择器的子元素）
3：$("prev + next")：匹配紧挨着 prev 的 next 元素（next ：一个有效选择器并且紧接着第一个选择器）
4：$("prev ~ siblings")：匹配 prev 元素之后的所有 siblings 元素(siblings ：一个选择器，并且它作为第一个选择器的同辈)

 3：属性选择器

1：$("[属性名='name']")：匹配满足属性名=name的元素
例：$("[class='div1']").css("color", "red");

2：$("[属性名='name1'][自定义属性名='name2']"):配满足属性名=name1的元素,自定义属性名=name2的元素
例：$("[class='div1'][kelvin='111']").css("color", "red");

 4：基本筛选器

1：$("li:first") ： 匹配 li 元素的第一个
2：$("li:first") ： 匹配 li 元素的最后一个
3：$("li:eq(2)") ： 匹配 li 元素下标为2的 li 元素
4：$("li:even") ： 匹配 li 元素下标为偶数的 li 元素
5：$("li:odd") ： 匹配 li 元素下标为奇数的 li 元素
6：$("li:gt(1)") ： 匹配 li 元素下标大于1的 li 元素

 5：表单选择器

$("[type='name']")----->$(":name")         **只适用于input标签  : $("input:checked")

 6：过滤筛选器

1：$("li").eq(2)  等价于 $("li:eq(2)")
2：$("li").first()  等价于 $("li:first")
3：$("ul li").hasclass("name") :找到 ul 下的 li 元素class值为 name 的 li 元素

 7：查找筛选器

1.1：$("parent").children("child")：匹配 parent 的子代 child     
1.2：$("parent").find("child")  ：匹配 parent 的后代 child  

2.1：$("parent").next()  ：匹配紧挨着 parent 的下一个同级元素
2.2：$("parent").nextAll()   ：匹配 parent 下的所有同级元素
2.3：$("parent").nextUntil(指定位置)  ：匹配从 parent 到 指定位置 的区间（不包括头尾）元素
                           
3.1：$("parent").prev()    ：匹配紧挨着 parent 的上一个同级元素
3.2：$("parent").prevAll()    ：匹配 parent 上的所有同级元素
3.3：$("parent").prevUntil(指定位置) ：匹配从 parent 到 指定位置 的区间（不包括头尾）元素
                        
4.1：$("child").parent()  ：匹配 child 的第一级父元素
4.2：$("child").parents()    ：匹配 child 的所有父级元素对象并组成一个数组
4.3：$("child").parentUntil(指定位置)   ：匹配 child 从第一级父级元素到指定位置父级元素并组成一个数组（不包括最后一个父级元素）

5：$("div").siblings() ：匹配 div 的所有兄弟元素（div上下都包括）

 四，元素处理

1：属性操作

------------属性--------------
$("").attr(); 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
$("").removeAttr();
$("").prop();  对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性
$("").removeProp();
-----------CSS类-------------
$("").addClass(class|fn)
$("").removeClass([class|fn])
-----------HTML代码/文本/值-------------
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css(属性名,属性值)

2： 文档处理

//创建一个标签对象
    $("<p>")

//内部插入
    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入
    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除
    $("").empty()
    $("").remove([expr])

//复制
    $("").clone([Even[,deepEven]])

 3：css操作

CSS
       $("").css(name|pro|[,val|fn])
位置
        $("").offset([coordinates])
        $("").position()
        $("").scrollTop([val])
        $("").scrollLeft([val])
尺寸
        $("").height([val|fn])  ：元素本身的高度
        $("").width([val|fn])  ：元素本身的宽度
        $("").innerHeight()  ：元素本身高度+内边距的高度
        $("").innerWidth()  ：元素本身宽度+内边距的宽度
        $("").outerHeight([soptions])  ：元素本身高度+内边距的高度+border宽度+（margin）
        $("").outerWidth([options])  ：元素本身宽度+内边距的宽度+border宽度+（margin）

 五，事件处理

页面载入
    ready(fn)  **当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
    方式1：$(document).ready(function(){}) 
    方式2：$(function(){})

事件处理
    $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。
    **  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
    **  $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
    **  click事件；

    [selector]参数的好处:
        好处在于.on方法为动态添加的元素也能绑上指定事件；如：
        **$('ul li').on('click', function(){console.log('click');})的绑定方式和
        **$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个
        **li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的
        **但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加
        **li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件
    
    [data]参数的调用:
             function myHandler(event) {
                  alert(event.data.foo);
              }
             $("li").on("click", {foo: "bar"}, myHandler)

 六，效果

1：基本

方法1：show([speed,[easing],[fn]])：

方法2：hide([speed,[easing],[fn]])

方法3：toggle([speed],[easing],[fn])

speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本效果</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
<button onclick="show()">出现</button>
<button onclick="hide()">消失</button>
<button onclick="toggle()">切换</button>
<div></div>
<script src="js/jquery-1.11.0.js"></script>
<script>
    function show() {
        $("div").show(1000);
    }

    function hide() {
        $("div").hide(1000);
    }

    function toggle() {
        $("div").toggle(1000);
    }
</script>
</body>
</html>

2：滑动

方法1：slideDown([speed],[easing],[fn])

 

方法2：slideUp([speed,[easing],[fn]])

 

方法3：slideToggle([speed],[easing],[fn])

 

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

 

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

 

fn:在动画完成时执行的函数，每个元素执行一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本效果</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
<button onclick="show()">出现</button>
<button onclick="hide()">消失</button>
<button onclick="toggle()">切换</button>
<div></div>
<script src="js/jquery-1.11.0.js"></script>
<script>
    function show() {
        $("div").slideDown(1000);
    }

    function hide() {
        $("div").slideUp(1000);
    }

    function toggle() {
        $("div").slideToggle(1000);
    }
</script>
</body>
</html>

3：淡入淡出

方法1：fadeIn([speed],[easing],[fn])

方法2：fadeOut([speed],[easing],[fn])

方法3：fadeToggle([speed,[easing],[fn]])

方法4：fadeTo([[speed],opacity,[easing],[fn]])

 

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

 

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

 

fn:在动画完成时执行的函数，每个元素执行一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入淡出效果</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
<button onclick="show()">出现</button>
<button onclick="hide()">消失</button>
<button onclick="toggle()">切换</button>
<button onclick="toggleTo()">渐变透明度至</button>
<div></div>
<script src="js/jquery-1.11.0.js"></script>
<script>
    function show() {
        $("div").fadeIn(1000);
    }

    function hide() {
        $("div").fadeOut(1000);
    }

    function toggle() {
        $("div").fadeToggle(1000);
    }

    function toggleTo() {
        $("div").fadeTo(1000, 0.3);
    }
</script>
</body>
</html>

七，扩展方法（插件机制）

1：jQuery插件机制核心方法

<script>
    $.extend(object)      //为JQuery 添加一个静态方法。
    $.fn.extend(object)   //为JQuery实例添加一个方法。

    jQuery.extend({
          min: function(a, b) { return a < b ? a : b; },
          max: function(a, b) { return a > b ? a : b; }
        });
    console.log($.min(3,4));

-----------------------------------------------------------------------

    $.fn.extend({
        "print":function(){
            for (var i=0;i<this.length;i++){
                console.log($(this)[i].innerHTML)
            }
        }
    });

    $("p").print();
</script>

 2：定义作用域

　　定义一个JQuery插件，首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。

(function(a,b){return a+b})(3,5)
(function ($) { })(jQuery);
相当于：
var fn = function ($) { };
fn(jQuery);

 3：默认参数

　　定义了jQuery插件之后，如果希望某些参数具有默认值，那么可以以这种方式来指定。

step01 定义JQuery的作用域
(function ($) {
    //step03-a 插件的默认值属性
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step06-a 在插件里定义方法
    var showLink = function (obj) {
        $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
    }

    //step02 插件的扩展方法名称
    $.fn.easySlider = function (options) {
        //step03-b 合并用户自定义属性，默认属性
        var options = $.extend(defaults, options);
        //step4 支持JQuery选择器
        //step5 支持链式调用
        return this.each(function () {
            //step06-b 在插件里定义方法
            showLink(this);
        });
    }
})(jQuery);