Jquery一般操作归纳

一、DOM操作分类

    1.DOM Core  getElement(s)获得元素
    
    2.HTML-DOM  document.对象/操作标签的属性
    
    3.CSS-DOM   获取和数组style对象的各种属性 eg:element.style.color = "red"
    
二、Jquery基础DOM操作

    1.获取和设置元素的内容
    
        text()     //获取得到标签内的文本，不包括内部标签。空格会获取到
        
                //$(".box").text()  ==  ele.innerText
                
        html()    //获取到标签内的所有内容，包括子标签本身。
        
                //$(".box").html()  == ele.innerHtml
                
        注意：如果不传入参数，表示只是获取;如果传入字符串，表示设置！
        
              设置html,如果有标签，则会解析出来！
              
        val()    //获取一个标签的value值。有,则返回。
        
        
    2.获取和修改元素的属性
    
        attr(属性名)
        
        $("div a").attr("href")        //获取属性href值
        
        $("div a").attr("href","http://www.baidu.com").attr("title","百度").text("百度");
        
    3.元素的样式操作
    
        js 操作(id) ; css 操作(class)
        
        1.获取和设置样式 (参照上)
        
        2.追加样式      $("#box").addClass("big")
        
        3.移除样式      $("#box").removeClass("样式名")
        
        4.切换样式      $("#box").toggleClass("样式名") //注意：如果样式名存在，则删除;不存在，则添加！
        
        5.判断是否有指定的class        hasClass("样式名")
        
        6.each()方法    //变量选择到的所有元素。 参数1：遍历的元素的下标 参数2：遍历的那个元素(dom对象，不是jq对象)
        
                $("div").each(function (index, ele) {
                    $(ele).html("呵呵呵")
                })
                
三、CSS-DOM操作
    
    1.CSS()方法  获取和设置css属性
    
        eg:$("#box").css("backgroundColor").css("width","800px")...
        
        注意：1.如果只传一个参数，表示获取这个属性值; 2.如果两个参数，表示设置;
        
    2.offset()方法     //获取这个元素在当前文档的相对偏移。返回的对象的两个属性 left top
    
        eg:console.log($(".box").offset.left + " " + $(".box").offset.top); //获取两个值
        
           $(".box").offset({top:100,left:100});                            //设置相对文档偏移量    
           
    3.position()方法    //获取标签相对于参照定位标签的偏移量。 注意：一般只获取，不设置！
    
        eg:var $position = $(".box div").position;
            console.log($position.left + " " +$position.top);
            
    4.scrollTop() 和 scrollLeft()方法 //获取某个元素的滚动条距离上端和左端的滚动的距离
    
                                      //可以添加定时器，设置让滚动条自动去滚动
        eg：var per = 1;
            var $p = $("p:first");
            var timerId;
                //自动滚屏
                $("button:eq(1)").click(function() {
                    timerId = setInterval(function() {
                        var top = $p.scrollTop();
                        $p.scrollTop(top + per);//更改垂直滚动条距离顶端的距离，则滚动条滚起来
                    }, 50);
                })
            /*取消自动滚屏 clearInterval(timerId);*/

四、DOM节点操作

    1.创建节点
    
        a.创建元素节点  var $li = $("<li>")  //双标签可以写成单标签
        
        b.创建文本节点    var $li = $("<li>item</li>")
        
        c.创建属性节点    var $li = $("<li id='js'>item</li>")
        
    2.插入节点
    
        $("<ul>").append($("<li>"))     //向ul中追加一个li标签。插入后，li是ul的子标签
        
        $("<li>").appendTo($("<ul>"))
        
        $("<ul>").prepend($("<li>"))    //向ul的最前面追加一个li标签
        
        $("<ul>").after($("<li>"))        //在ul后面插入一个li标签。此时，li是ul的兄弟标签
        
        $("<ul>").before($("<li>"))        //在ul前面插入一个li标签。此时，li是ul的兄弟标签
        
    3.删除节点
    
        方法1：remove()        //删除找到的标签。删除的标签会返回; 绑定的事件会丢失
                eg：
        方法2：detach()        //与remove()区别：绑定的事件、附加的数据还在
                eg:
        方法3：empty()        //清空找到的节点的所有内容，包括所有后代节点。节点还在。？？
                eg:
                
    4.复制节点
    
        方法：clone()
                eg:$(".languages li:first").clone().appendTo($(".languages"));//复制节点，并添加到某个元素后面
                
    5.替换节点
    
        方法1：replaceWith()
                eg：$(".languages li").replaceWith("<li>我要全部干掉你们</li>");//找到的所有的li用参数中的节点替换
                
        方法2：replaceAll()        
                eg：$("<li>我要全部干掉你们</li>").replaceAll($(".languages li"));
                
    6.包裹节点
    
        方法1：li.wrap(p)        //每一个li分别用p包裹。    假如，有3个li,此时每个li外面都有1个p包裹住。此时，有3个p;
        
        方法2：li.wrapAll(p)    //所有的li用p包裹。此时，有1个p;    
        
        方法3：li.wrapInner(p)    //用p去包裹li的内容，不包裹li这个标签本身。
        
            eg:$(".languages li").wrapInner("<span>")    //.languages li 标签中的内容用span包括。  注意：不包裹标签字节，只包括标签的内容！

五、JQuery中的事件
    
    基础事件
    
        1.事件绑定    
        
            元素对象.bind("参数1","参数2",参数3)
            
                参数1：事件类型; 比如：blur、load、focus、scroll、click、dblclick、mouseon...
                
                参数2：一般省略
                
                参数3：事件处理函数(一般匿名函数)
                
            eg:$("button:first").bind("click",function(){
                alert("...")
            })
                注意：这里绑定的事件类型是没有on的。
                
        2.解除绑定
        
            元素对象.unbind("事件类型")    //解除与1绑定的事件
            
                注意：如果不传参数表示解除所有的事件绑定(一个按钮会同时存在多种事件)
                
            eg：$("button:eq(0)").unbind("click");
            
        3.简写事件
        
            eg：$("button:eq(1)").click(function () {
                    alert("解除")
                    firstBtn.unbind("click");  //解除click事件的绑定            
                })
                
        4.复合事件
        
            1.hover(f1,f2) //当光标移动到元素上的时候，会触发第一个函数f1;当移除时，会触发第二个函数f2。
            
                模拟光标悬停事件
                
            2.toggle(f1,f2..fn)
            
                模拟鼠标连续单击事件
                
                功能1：当第一次单击时，执行第一个函数。当第二次单击时，执行第二个函数。。。完毕后，再循环。
                
                功能2：不传任何参数，可以让元素隐藏或显示。
                
                注意：从1.9版本后，只保留功能2！！
                
    事件对象
    
        1.获取事件对象
        
            eg:ele.click(function(event){})        //event只能在函数内部使用
            
        2.事件对象的常用属性
        
            1.type属性                //获取事件类型
            
            2.preventDefault()方法    //阻止事件的默认行为。兼容各种浏览器
            
            3.stopPropation()方法    //阻止事件的冒泡
            
            4.target属性            //获取到触发事件的元素
            
            5.pageX、pageY属性        //光标相对与页面的距离。如果有滚动条，还要加上滚动条的距离
            
            6.which属性                //鼠标：左(1)中(2)右(3) 键盘：键盘的按键
            
            7.metaKey属性            //获取ctrl按键
            
        3.事件的冒泡、沉默处理
        
            事件函数中返回false，可以同时停止默认行为和冒泡。所以，可以直接返回false，而不要调用上述两个方法。
        
    高级事件
    
        1.事件模拟操作    
            
            1.ele.trigger(事件类型)
            
            eg:$("button").click(function() {
                    alert("我被点击了");
                })
                
                $("button").trigger("click") == $("button").click();
            
            2.trigger自定义事件
            
            eg:$("button").bind("myClick", function () {
                    alert("这个是我自定义的事件");
                })
               $("button").trigger("myClick");
               
            3.执行默认操作：trigger触发的事件，不仅仅触发了事件函数，也会触发浏览器的默认操作。
            
                比如，给input注册一个focus事件，则不但触发focus事件，还会触发浏览器的默认事件，使input获得焦点。
            
                使用trigerHanddler可以避免浏览器的默认操作。
            
        2.事件命名空间
            
            $btn.bind("click.my", function () {
            console.log("点击事件");
        })
            $btn.unbind(".my"); //通过命名空间统一管理命名空间下的事件
            
        3.事件委托
        
            /*//只处理选择器选中这些元素的委托
            
        $("div:first").delegate("button:nth-child(2n+1)", "click", function(){
            console.log("abc");
        });
        
            //解除委托
            
        $("div:first").undelegate("button:nth-child(2n+1)", "click");*/
        
        4.on()、off()
            
            $("button:first").on("click", {name:"lisi"}, function (event) {
            console.log(event.data);  //在参数中传递的数据，通过event.data获取    //    console.log("abcc");
        })
            $("button:first").off("click");