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();