Jquery总结



           

l Jquery中常用方法

l Jquery中的各种选择器

l 事件绑定

1.jquery是封装了javascript的一个类库，写得少，做得多特点：

1）解决了很多浏览器的兼容性问题

2）体积小，功能强大

3）链式编程

4）插件多，开源+免费

2.jquery的顶级对象有jquery和$.

3.$(function(){ ...  })   类似于dom中的onload方法且不同于dom，jquery编写的事件可以追加。

4.从dom对象转换为jquery对象:$(dom对象)，从jquery对象转换为dom对象，$(selector)[索引]

5.Jquery中几个常用方法：

1）$.map()  多用于遍历数组

例如： 

 //jquery中map循环的使用,map的参数为遍历对象和callback函数，callback的参数为值和索引        

           $(function () {

            var arr=[1,2,3,4,5,6,7]

            var newarr = $.map(arr, function (value, i) {                

                return value * 2;

                //即使加上return false也不会终止循环 一般用于遍历数组

                return false;

            })

            alert(newarr);

        }

           )

原理模拟：

     var xunhuan = function (arr, callback) {

            var newarr = [];

            for (var i = 0; i < arr.length; i++) {

                var value = callback(arr[i], i);

                if (value != null) {

                    newarr[newarr.length] = value;

                }

            }

            return newarr;

        }

        var arr = [1, 2, 4, 5, 6, 7, 8, 3];

        //不管这儿callback函数定义的变量是什么，其内部调用的都是arr[i],i ，此处参数只是形参，用于运算

        var arr2=xunhuan(arr, function (v,k) {

            return v % 2 == 0 ? v : undefined;

        })

        //遍历输出所有的偶数

        alert(arr2);

 2).$.each 多用于遍历对象

// jquery中的each循环，参数为遍历对象和callback函数，callback函数中的参数为键和值，跟map恰好相反,each的返回值不会改变，通常用于处理对象

         var o={name1:"宾宾",age:"21",id:[1,2,3]}

        var s= $.each(o, function (k,v) {

            if (v instanceof Array) {

                v[1] = "ff";

            }

            //如果有return false 的话，循环将会终止，则v[1]的值不会被修改

            //return false;

        })

        alert(s.id);

        alert(o.id);

可以直接通过jquery对象.each(函数)  或jquery对象.map（函数）对 对象进行遍历

each与map比较：

1.map一般用于遍历数组，each一般用于遍历对象;

2.map中callback参数为value,key，each中为key,value;

3.map的返回值为修改后的，each为原来的对象，在方法内部，map判断arr是否为数组，each判断是否为对象

4.map中return false 不会终止循环，each中会

3）$.trim   剔除前后空格

4）jq对象.html（str）  等价于dom中的innerHTML ，能识别html标签

5）jq对象.text(str)  等价于dom中的text，不能识别html标签

6）jq对象.attr(“属性”,”属性值”) 设置属性，没有该属性时会自动添加。

  Jq对象.removeAttr(“属性”)  移除属性

还可以使用css方式添加更多属性。

jq对象.css(“属性”，“属性值”)，添加多个属性时用关联对象的方法：jq对象.css({“属性1”：“属性值1”，“属性2”：“属性值2”...})

7）jq对象.val() 获取对象的value值（一般针对文本标签对象

8）Jq对象.addClass(类样式名)   添加类样式

   Jq对象.hasClass(类样式名)    判断jq对象是否有该类样式

   Jq对象.removeClass(类样式名)   移除类样式

   Jq对象.toggle(类样式名)    有则移除，无则添加（制作开关等效果）

9）end() 当链式的引用对象改变时，用该方法返回上一层引用对象

6.jquery中的查询方法（花样繁多的选择器）

模拟查询：

 //6.模拟jquery查询,//使用this.length的方式保护数组安全，对象的length属性不会自加

        var J = {

            length: 0,

            get: function (tag) {

                var arr = document.getElementsByTagName(tag);

                for (var i = 0; i < arr.length; i++) {

                    J[this.length++] = arr[i];

                }

                return this;

            },

            css: function (cssJson) {

                // 隐士迭代实现所有元素的样式添加

                for (var i = 0; i < this.length; i++) {

                    for (var css in cssJson) {

                        this[i].style[css] = cssJson[css];

                    }

                }

            }

        };

        $(function () {            

            J.get("a").css({

                border: "1px solid red",

                margin: "10px 0",

                backgroundColor: "pink",

                display: "block"

            });

        })

Jquery中存在大量的选择器，通过这些选择器，我们可以快速的确定对象，对其进行操作。下面将逐一介绍：

基本选择器

$(“标签名”)  标签选择器，当文档中存在多个标签对象时将组成数组，获取其中的一个方法在之后提到。

$(“#id”)   id选择器   同上理解

$(“*”)     通用选择器

$(“.className”)  类样式名选择器（不要忘记”.”）

复合选择器

$(“标签.类样式名”)  标签类样式选择器

$(“#id,.className,Tag”)组合选择器  慎重使用

层次选择器

$(“#dv>ul”)/$(“ul>li”)/$(“div ul li”)/$(“div~p”)(div后面所有p标签)/$(“div+p”) div后面第一个p标签(少用)

部分选择器

  $(“selector1”).nextAll(“selector2”)  向后所有seletor2选择出来对象(nextAll方法可以不写参数代表向后所有对象)

$(“selector1”).prevAll(“selector2”) 与上面相反（向前）

$(“selector”).siblings()  反选兄弟级

$(“selector”).get(num)   不带参时获取该类对象的一个数组，带参时获取指定索引的一个对象（dom）对象。

过滤选择器

$(“selector:first”)  取第一个

$(“selector:last”)   取最后一个

$(“selector:lt(num)”)  取索引小于num的

$(“selector:gt(num)”)  取索引大于num的

$(“selector:eq(num)”)  取索引为num的

$(“selector:even”)   取偶数

$(“selector:odd”)    取奇数  （注意编程中数字从0开始，所以一般取奇数和取偶数相反，0为偶数）

$(“selector:not(selector2)”)  取不是selector2的

$(“selector:hidden”)    取隐藏的

$(“selector:checked”)   取被选中的

$(“selector:类型”)   适用于所有表单标签如$(“:button”) 表示取出所有button

$(“selector:contains(text)”)   取包含text的

$(“selector:has(selector2)”)  取包含selector2过滤出来的对象的

属性过滤器：

$(“selector[属性]”)           取包含某属性的

$(“selector[属性名=值]”)    取某属性为某值的

$(“selector[属性名！=值]”)   取属性名不为某值的

$(“selector[属性名*=值]”)    取属性值包含某值的

$(“selector[属性名^=值]”)    取属性值以某值开头

$(“selector[属性名$=值]”)    取属性值以某值结尾

子元素选择器（除了nth系列其他不推荐，注意selector后面有空格）

$("selector :nth-child(num)")    取num索引的子元素

$("selector :nth-child(even)")   取子元素中的偶数项
$("selector :nth-child(odd)")    取子元素中的奇数项

$("selector :nth-child(3n+1)")    索引符合该表达式的

$("selector :first-child")  取第一个子元素

$("selector :last-child")  取最后一个子元素

Jquery中有太多的选择器，因而也特别容易造成混乱，因而培养使用习惯更加重要。

7.增删改查

 增：

 创建：$(“html字符串”)   已知对象.clone()   克隆（参数指定是否克隆事件）

例如：

 var img = $("<img src='5.jpg'/>");

img.prependTo("#dv");

添加：子元素.appendTo(“selector”) 从后追加

     子元素.prependTo(“selector”)  从前面加入

     元素.insertBefore(“selector”)  插到指定jq对象前面

     元素.insertAfter(“selector”)   插到指定jq对象后面     

注意是前两个是子元素向父元素下添加

删：

元素.empty()  清空子集

$(selector).remove()    移除指定项,不保留事件等数据

$(selector).detach()    移除指定项，保留事件等数据

改和查

   修改：

jq对象.attr()  修改属性

Jq对象.text()   修改文本

Jq对象.html()   可识别html标签的文本修改

Jq对象.css()    修改样式属性(id等不能修改)

Jq对象.val()     修改value

查： 通过上面介绍的选择器进行查找

8.事件对象

 绑定事件 ：Jq对象.bind(“事件1，事件2，事件3”，function（）函数)

 移除事件 ：Jq对象.unbind(“事件1，事件2，事件3”) 

Jq对象.hover（function1,function2）   //相当于enter和leave事件

Jq对象.toggle(func1,func2....funcn) toggle默认有点击事件，依次轮换执行方法

其他诸如click，focus等事件，为对象.click(函数)，区别于DOM中的是没有on，并且不是函数赋值书写，而是括号。

事件对象e

Jquery解决了大多数浏览器之间的兼容问题，包括鼠标事件，可以直接用e.type获取事件类型，e.which获取点击的键，e.stopPropagation()阻止事件冒泡，e.preventDefault()取消事件（类似renturn false）,e.keyCode获取按键阿斯科码。

9.动画

Show（），hide（）基本动画；fadeOut()和fadeIn()淡入淡出；

slideUp()和slideDown() 卷帘效果；自定义动画：animate(样式，时间)在指定的时间内完成动画转变。

$("#btn1").toggle(function(){

    $("#dv ul:first").hide(500);

},function(){

$("#dv ul:first").show(500);

},function(){

$("#dv ul:first").fadeOut(1000);

},function(){

$("#dv ul:first").fadeIn(1000)

},function(){

$("#dv ul:first").slideUp(1000)

},function(){

$("#dv ul:first").slideDown(1000)

})

//自定义动画

setInterval(function(){

$("img")[0].style.visibility="";

},1)

 var s=function(){

 $("img").animate({left:"800px"},3000)

.animate({top:"500px"},3000)

.animate({left:"0px"},3000)

.animate({top:"0px"},3000).animate(s())}

s();