jQuery 学习笔记

jQuery对象就是经过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。
若是一个对象是 jQuery对象，那么它就可使用jQuery里的方法

$("#i1").html()的意思是：获取id值为 i1的元素的html代码。
其中 html()是jQuery里的方法。至关于： document.getElementById("i1").innerHTML;

1. jQuery对象转换成DOM对象,用索引取出具体的标签
2. DOM对象转换成jQuery对象,$(DOM对象)
# dom对象         => $(dom对象)        jquery对象
# jquery对象    => $('li')[0]        dom对象

$("#i1").html();        //jQuery对象可使用jQuery的方法
$("#i1")[0].innerHTML;    // DOM对象使用DOM的方法

选择器

    1.基本选择器

        $("#id")            //ID选择器
        $("div")            //元素选择器
        $(".classname")     //类选择器
        $(".classname,.classname1,#id1")     //组合选择器

    2.层次选择器

        x和y能够为任意选择器
            $("x y");    // x的全部后代y（子子孙孙）
            $("x > y")    // x的全部儿子y（儿子）
            $("x + y")    // 找到全部紧挨在x后面的y
            $("x ~ y")    // x以后全部的兄弟y

    3.过滤选择器(重点)

        $("li:first")    // 第一个li
        $("li:last")     // 最后一个li
        $("li:even")     // 匹配全部索引值为偶数的元素，从 0 开始计数
        $("li:odd")      // 匹配全部索引值为奇数的元素，从 0 开始计数
        $("li:eq(4)")    // 索引等于 4 的li(第五个 li 元素)
        $("li:gt(2)")    // 匹配全部大于给定索引值的元素
        $("li:lt(2)")    // 匹配全部小于给定索引值的元素
        $("li:not(#runoob)") //挑选除 id="runoob" 之外的全部li

    3.2内容过滤选择器

        $("div:contains('Runob')")    //包含 Runob文本的元素
        $("td:empty")                 //不包含子元素或者文本的空元素
        $("div:has(selector)")        //含有选择器所匹配的元素 //选取全部包含一个或多个标签在其内的标签(指的是从后代元素找)
        $("td:parent")                //含有子元素或者文本的元素

    3.3可见性过滤选择器

        $("li:hidden")        //匹配全部不可见元素，或type为hidden的元素
        $("li:visible")        //匹配全部可见元素

    3.4属性过滤选择器

        $("div[id]")            //全部含有 id 属性的 div 元素
        $("div[id='123']")        // id属性值为123的div 元素
        $("div[id!='123']")        // id属性值不等于123的div 元素
        $("div[id^='qq']")        // id属性值以qq开头的div 元素
        $("div[id$='zz']")        // id属性值以zz结尾的div 元素
        $("div[id*='bb']")        // id属性值包含bb的div 元素
        $("input[id][name$='man']") //多属性选过滤，同时知足两个属性的条件的元素

    3.5状态过滤选择器

        $("input:enabled")        // 匹配可用的 input
        $("input:disabled")        // 匹配不可用的 input
        $("input:checked")        // 匹配选中的 input
        $("option:selected")    // 匹配选中的 option

    4.表单选择器

        $(":input")        //匹配全部 input, textarea, select 和 button 元素
        // $(":text")    等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
        $(":text")        //全部的单行文本框
        $(":password")    //全部密码框
        $(":radio")        //全部单选按钮
        $(":checkbox")    //全部复选框
        $(":submit")    //全部提交按钮
        $(":reset")        //全部重置按钮
        $(":button")    //全部button按钮
        $(":file")        //全部文件域


筛选器方法

    下一个元素：

        $("#id").next()
        $("#id").nextAll()            // 下到全部
        $("#id").nextUntil("#i2")    // 下到某处为止

    上一个元素：

        $("#id").prev()
        $("#id").prevAll()
        $("#id").prevUntil("#i2")

    父亲元素：

        $("#id").parent()
        $("#id").parents()        // 查找当前元素的全部的父辈元素
        $("#id").parentsUntil() // 查找当前元素的全部的父辈元素，直到遇到匹配的那个元素为止。

    儿子和兄弟元素：

        $("#id").children()        // 儿子们
        $("#id").siblings()        // 兄弟们

    查找

        $("div").find("p")
        // 搜索全部与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
        // 等价于$("div p")

    筛选
    
        $("div").filter(".c1")  // 从结果集中过滤出有c1样式类的
            // 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
            // 等价于 $("div.c1")
            
        .first()    // 获取匹配的第一个元素
        .last()        // 获取匹配的最后一个元素
        .not()        // 从匹配元素的集合中删除与指定表达式匹配的元素
        .has()        // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
        .eq()        // 索引值等于指定值的元素

    

操做标签

    样式类
    
        addClass()        // 添加指定的CSS类名。
        removeClass()    // 移除指定的CSS类名。
        hasClass()        // 判断样式存不存在
        toggleClass()    // 切换CSS类名，若是有就移除，若是没有就添加。

        示例：
            $("p").css("color", "red");    // 将全部p标签的字体设置为红色

    位置操做

        offset()    // 获取匹配元素在当前窗口的相对偏移或设置元素位置
        position()    // 获取匹配元素相对父元素的偏移
        scrollTop()    // 获取匹配元素相对滚动条顶部的偏移
        scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
        示例：
            $(window).scrollTop(0);        // 返回顶部

    文本操做

        HTML代码：

            html()        // 取得第一个匹配元素的html内容
            html(val)    // 设置全部匹配元素的html内容

        文本值：

            text()        // 取得全部匹配元素的内容
            text(val)    // 设置全部匹配元素的内容

        值：

            val()                // 取得第一个匹配元素的当前值
            val(val)            // 设置全部匹配元素的值
            val([val1, val2])    // 设置多选的checkbox、多选select的值
        
        示例：
            获取被选中的checkbox或radio的值：

                <label for="c1">女</label>
                <input name="gender" id="c1" type="radio" value="0">
                <label for="c2">男</label>
                <input name="gender" id="c2" type="radio" value="1">

            可使用：
                $("input[name='gender']:checked").val()


    尺寸：

        height()        // 设置或返回被选元素的高度
        width()
        innerHeight()    // 返回元素的高度（包含 padding，不包含 border）
        innerWidth()
        outerHeight()    // 返回元素的宽度（包含 padding 和 border）
        outerWidth()    // outerWidth(true) 设置true计算margin值



属性操做
    
    用于ID等或自定义属性：

        attr(attrName)                // 返回第一个匹配元素的属性值
        attr(attrName, attrValue)    // 为全部匹配元素设置一个属性值
        attr({k1: v1, k2:v2})        // 为全部匹配元素设置多个属性值
        removeAttr()                // 从每个匹配的元素中删除一个属性


    用于checkbox和radio

        prop()            // 获取属性
        removeProp()    // 移除属性
        
        对于返回布尔值的好比checkbox、radio和option的是否被选中都用prop。        
        示例：
            <input type="checkbox" checked id="i1" value="1">

            $("#i1").attr("checked")    // checked
            $("#i1").prop("checked")    // true
        attr的做用范围只限于HTML标签内的属性，
        而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。


文档处理

    添加到指定元素内部的后面

        $(A).append(B)        // 把B追加到A
        $(A).appendTo(B)    // 把A追加到B

    添加到指定元素内部的前面

        $(A).prepend(B)        // 把B前置到A
        $(A).prependTo(B)    // 把A前置到B

    添加到指定元素外部的后面

        $(A).after(B)        // 把B放到A的后面
        $(A).insertAfter(B)    // 把A放到B的后面

    添加到指定元素外部的前面

        $(A).before(B)        // 把B放到A的前面
        $(A).insertBefore(B)// 把A放到B的前面

    移除和清空元素

        .remove()    // 从DOM中删除全部匹配的元素。所选元素消失
        .empty()    // 删除匹配的元素集合中全部的子节点。所选元素还在

    替换
    
        $("p:first").replaceWith("Hello world!");
        // 规定要插入的内容（可包含 HTML 标签）。
        $("<span>Hello world!</span>").replaceAll("p:last");
        // 规定要插入的内容（必须包含 HTML 标签）。

    克隆

        clone()    // clone方法加参数true，克隆标签而且克隆标签带的事件



事件
    经常使用事件
        
        click(function(){...})
        hover(function(){...})
        blur(function(){...})
        focus(function(){...})
        change(function(){...})
        keyup(function(){...})
        
    keydown和keyup、change事件组合示例:
        <script>

            var flag = false;
            // shift按键被按下的时候
            $(window).keydown(function (event) {
                console.log(event.keyCode);
                if (event.keyCode === 16){
                    flag = true;
                }
            });
            // shift按键被抬起的时候
            $(window).keyup(function (event) {
                console.log(event.keyCode);
                if (event.keyCode === 16){
                    flag = false;
                }
            });
            // 当元素的值改变时发生 change 事件（仅适用于表单字段）。
            $("select").change(function (event) {
                // 若是shift按键被按下，就进入批量编辑模式
                // shift按键对应的code是16
                // 判断当前select这一行是否被选中
                console.log($(this).parent().siblings().first().find(":checkbox"));
                var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked");
                console.log(isChecked);
                if (flag && isChecked) {
                    // 进入批量编辑模式
                    // 1. 取到当前select选中的值
                    var value = $(this).val();
                    // 2. 给其余被选中行的select设置成和我同样的值
                    // 2.1 找到那些被选中行的select
                    var $select = $("input:checked").parent().parent().find("select")
                    // 2.2 给选中的select赋值
                    $select.val(value);
                }
            });
        </script>


    hover() 
        方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
        方法触发 mouseenter 和 mouseleave 事件。
        注意: 若是只指定一个函数，则 mouseenter 和 mouseleave 都执行它。
            
        $("p").hover(function(){
            $("p").css("background-color","yellow");
        },function(){
            $("p").css("background-color","pink");
        });


    事件绑定

        .on( events [, selector ],function(){})
        // 使用 on() 方法添加的事件处理程序适用于当前及将来的元素（好比由脚本建立的新元素）。
        events： 事件
        selector: 选择器（可选的）
        function: 事件处理函数
        示例：
            $("table").on("click", ".delete", function () {
              // 绑定的事件...
            })
            
    移除事件

        .off( events [, selector ][,function(){}])

        off() 方法移除用 .on()绑定的事件处理程序。

        events： 事件
        selector: 选择器（可选的）
        function: 事件处理函数

    阻止后续事件执行

        return false;         // 常见阻止表单提交等
        e.stopPropagation();  // 阻止事件冒泡(层级触发)
 e.preventDefault(); // 阻止默认事件  示例：  <div><p><span>点我</span></p></div> <script> $("span").click(function (e) { alert("span"); // e.stopPropagation(); return false; }); $("p").click(function () { alert("p"); }); $("div").click(function () { alert("div"); }) </script>  页面加载完成再执行javascript的三种方式 当DOM载入就绪 能够查询及操纵时绑定事件。 $(document).ready(function(){ // myfunc();  }) 简写： $(function(){ // 你在这里写你的代码  }) // window.onload()函数有覆盖现象，必须等待着图片资源加载完成以后才能调用 // jQuery的这个入口函数没有函数覆盖现象，文档加载完成以后就能够调用（建议使用此函数）  示例： <script> function Fa() { // 屡次用到的jQuery对象存储到一个变量，避免重复查询文档树 var $f1 = $("#f1"); } // 文档树就绪后执行 $(document).ready(function () { Fa(); }); </script>  动画效果 语法： $(selector).xxx(speed,callback); // 可选的 speed 参数规定隐藏/显示的速度，能够取如下值："slow"、"fast" 或毫秒。 // 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。  隐藏、显示： hide() 和 show() toggle() hide和show实例： $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(1000,function(){ alert('ssss'); }); }); toggle实例(在hide与show之间切换): $("button").click(function(){ $("p").toggle(); }); 淡入淡出： fadeIn $("button").click(function(){ $("#div3").fadeIn(3000); }); fadeOut $("button").click(function(){ $("#div2").fadeOut("slow"); }); fadeToggle // 切换fadeIn与fadeOut $("button").click(function(){ $("#div3").fadeToggle(); }); fadeTo() 方法 jQuery fadeTo() 方法容许渐变为给定的不透明度（值介于 0 与 1 之间）。 语法: $(selector).fadeTo(speed,opacity,callback); 必需的 speed 参数规定效果的时长。它能够取如下值："slow"、"fast" 或毫秒。 fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。 可选的 callback 参数是该函数完成后所执行的函数名称。 实例 $("button").click(function(){ $("#div1").fadeTo("slow",0.15); }); 滑动方法： // 用法同上  slideDown() slideUp() slideToggle() 动画 - animate() 方法 语法： $(selector).animate({params},speed,callback); // 必需的 params 参数定义造成动画的 CSS 属性。 // 默认状况下，全部 HTML 元素都有一个静态位置，且没法移动。 // 如需对位置进行操做，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！  示例： $("button").click(function(){ $("div").animate({left:'250px'}); }); // 操做多个属性 $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); 使用相对值 // 也能够定义相对值（该值相对于元素的当前值）。须要在值的前面加上 += 或 -=：  实例 $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); 使用队列功能 编写多个 animate() 调用，jQuery 会建立包含这 些方法调用的"内部"队列。而后逐一运行这些 animate 调用。 示例： $("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); }); 能够用 animate() 方法来操做全部 CSS 属性吗？ 使用驼峰属性名，好比，marginRight 而不是 margin-right， 若是须要生成颜色动画，您须要从 jquery.com 下载 颜色动画 插件。 注：但...咱能够在回掉函数中简单改变color属性 each jQuery.each(collection, callback(indexInArray, valueOfElement))： 描述：一个通用的迭代函数，它能够用来无缝迭代对象和数组。数组和相似数组的对象经过一个长度 属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其余对象经过其属性名进行迭代。 li =[10,20,30,40] $.each(li,function(i, v){ console.log(i, v);//index是索引，ele是每次循环的具体元素。  }) 输出： 010 120 230 340 .each(function(index, Element))： 描述：遍历一个jQuery对象，为每一个匹配元素执行一个函数。 .each() 方法用来迭代jQuery对象中的每个DOM元素。每次回调函数执行时，会传递当前循环次数做 为参数(从0开始计数)。因为回调函数是在当前DOM元素为上下文的语境中触发的，因此关键字 this 总 是指向这个元素。 // 为每个li标签添加foo $("li").each(function(){ $(this).addClass("c1"); // $("li").addClass("c1"); // 对全部标签作统一操做  }); 在遍历过程当中可使用 return false提早结束each循环。 .data() 在匹配的元素集合中的全部元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。 .data(key, value): 描述：在匹配的元素上存储任意相关数据。 $("div").data("k",100);//给全部div标签都保存一个名为k，值为100  .data(key): 描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—经过 .data(name, value)或 HTML5 data-*属性设置。 $("div").data("k");//返回第一个div标签中保存的"k"的值  .removeData(key): 描述：移除存放在元素上的数据，不加key参数表示移除全部保存的数据。 $("div").removeData("k"); //移除元素上存放k对应的数据