JS(5) jquery学习

1.jquery中的顶级对象
    浏览器中的顶级对象:window,浏览器中和页面中所有的东西都是window的
    页面中的顶级对象:document
    jQuery中的顶级对象:jQuery(简写为$)
2.Jquery对象和DOM对象互转
    jquery对象就是对一个或多个DOM的对象进行的包装或者封装。
    通过DOM方式获取的对象为DOM对象，即通过document.getElementByXXX("")获取的对象
    通过$或者是jQuery的方式获取的对象为jQuery对象，即通过$("")获取的对象
    
    var domObj=document.getElementById("btn");//DOM对象
    var jqyObj=$("#btn");//jquery对象
    
    jquery对象转换成DOM对象：
    首先需要通过jquery对象.length属性是否为0来判断对象是否存在，为0则表示对象不存在，大于0表示对象存在
    如何得到jquery对象中的DOM对象？
    jquery对象[i];//i的范围为[0,jquery对象.length-1]
    jquery对象.get(i);//i的范围为[0,jquery对象.length-1]
    如：$("p")[0],表示第一个P元素的DOM对象,$("p")[1],表示第二个P元素的DOM对象
    遍历jquery对象？
    jquery对象.each(function(i,e){});
    $("img").each(function(i,e){
        this.src = "test" + i + ".jpg";//e=this 这里的e或者this都是DOM对象；i为索引
    });
    
    DOM对象转换成jquery对象：
    var jqyObj=$(domObj);
    
    注意：jquery对象不能调用DOM对象的方法或属性，同样DOM对象不能调用jquery对象的方法和属性
    如，在jquery中，为按钮绑定事件为jquery对象.click方法，而DOM中，为按钮绑定事件为DOM事件.onclick方法
    $("#btn").click(function(){});
    document.getElementById("btn").onclick(){}
    
3.jquery相关方法
    jQuery对象.val();//获取该元素的value属性值
    jQuery对象.val("值");//设置该元素的value属性
    jQuery对象.text();//获取该元素的文本内容
    jQuery对象.text("值");//设置该元素的文本内容
    jQuery对象.css("css的属性名字");//获取元素的样式属性值 如 $("选择器").css("backgroundColor");
    jQuery对象.css("css的属性名字","属性的值");//设置元素的样式属性值 如 $("选择器").css(backgroundColor","yellow");
    jQuery对象.html();//获取标签中的html内容
    jQuery对象.html(html字符串内容);//设置标签中的html内容
    
4.jquery页面加载事件
    1.第一种方式，页面加载完毕后才触发，包括页面中的基本元素和图片等资源
    $(window).load(function () {
     console.log("11111");
   });
    2.第二种方式，比第一种方式快，是页面中的基本的元素加载后就触发
    $(document).ready(function () {
      console.log("2222222222");
    });
    3.第三种方式，是第二种方式的简写
    $(function () {
      console.log("33");
    });
    总结：不管是上面的那种页面加载事件方式，在同一个页面中都可以定义多个，不会出现后面覆盖前面的情况
          通常用第三种
          
5.jquery获取页面元素方式
    DOM中获取元素方式:
    根据id获取元素
    document.getElementById("id属性的值");//返回一个DOM对象
    根据标签名字获取元素
    document.getElementsByTagName("标签名字");//返回一个DOM对象数组
    根据name属性获取元素，如复选框
    document.getElementsByName("name属性的值");//返回一个DOM对象数组
    根据类样式名字获取元素
    document.getElementsByClassName("类样式的名字");//返回一个DOM对象数组
    
    
    jQuery中获取元素的方式:
    $("选择器");//jQuery对象
    
    id选择器
    $("#id属性的值");//返回一个jquery对象
    
    标签选择器
    $("标签名字");//返回一个jquery对象，该对象像数组
    示例：
    $("p").text("11111");//页面中的所有P标签的文本都变成了11111，如果是DOM方式，需要我们自己遍历数组并手动设置文本
    
    类选择器
    $(".类样式名");
    $(".类样式名").css("属性","值");//设置css样式属性值
    $(".cls").css("backgroundColor","yellow");//将cls样式表中添加(修改)背景颜色
    
    交集选择器
    一般是标签选择器+类选择器，即$("标签名.类样式名");
    $("p.cls").css("backgroundColor","green");    //先找p标签,从p标签中找应用了cls类样式的元素
    
    并集选择器
    选择器,选择器,选择器n：$("#id1,p,span.cls");//id为id1的对象，或者p标签对象，或span标签中类样式名为cls的对象
    
    层次选择器
    $("选择器1 选择器2");//选择器1 范围内的所有满足选择器2的对象(包括直接的子元素,孙子元素)
        $("#dv span").css("backgroundColor","red");//获取的是div这个父级元素中所有span标签
    $("选择器1>选择器2");//选择器1下的直接子元素中满足选择器2的对象
        $("#dv>span").css("backgroundColor","red");//获取的是div这个父级元素中直接的子元素
    $("选择器1~选择器2");//选择器1后的所有满足选择器2要求的兄弟元素对象
        $("#dv~span").css("backgroundColor","red");//获取的是div这个元素后面的所有的兄弟元素---span
    $("选择器1+选择器2");//选择器1后第一个元素对象，且这个对象满足选择器2的要求
        $("#dv+span").css("backgroundColor","red");//获取的是div后面第一个直接的span兄弟元素
        
    :first :last
    $("选择器1:first");//所有满足选择器1要求的对象中的第一个对象
        $('li:first');//第一个li标签
    $("选择器1:last");//所有满足选择器1要求的对象中的最后一个对象
        $('li:first');//最后一个li标签
        
    :not("选择器") 取反选择器
        $("#dv~span:not(:first)").css("backgroundColor","red");//id为dv后的所有span兄弟元素中除去第一个外的其他兄弟元素
    
    :even :odd
    $("选择器1:even");//所有满足选择器1要求的对象中的第偶数个对象集合 0 2 4 6
    $("选择器1:old"); //所有满足选择器1要求的对象中的第奇数个对象集合 1 3 5 7
    $("tr:even");//偶数行 
    $("tr:odd");//奇数行
    
    索引选择器
    :eq(索引值) :gt(索引值) :lt(索引值)   等于 大于 小于
    $("选择器:eq(n)");//所有满足选择器要求对象集合中的第n+1个对象 索引从0开始
        $("#dv~span:eq(2)").css("backgroundColor","red");//id为dv后的所有span兄弟元素中的第3个兄弟元素
    $("选择器:gt(n)");//所有满足选择器要求对象集合中的第n+1个对象后的所有对象 索引从0开始
    $("选择器:eq(n)");//所有满足选择器要求对象集合中的第n+1个对象前的所有对象 索引从0开始
        $("ul>li:gt(5):lt(3)").css("backgroundColor","blue");//li的第6个后的所有元素中的前3个，相当于索引号为678的三个元素对象
    
6.元素样式的设置
    $("选择器").css(css属性名,css属性值)
    //第一种写法:
    $("#dv").css("width","300px");
    $("#dv").css("height","200px");
    $("#dv").css("backgroundColor","hotpink");
    $("#dv").css("border","2px solid red");

    //第二种写法:链式编程
    //$("#dv").css("width","300px").css("height","200px").css("backgroundColor","hotpink").css("border","2px solid red");

    //第三种写法:键值对的写法
    var json={"width":"200px","height":"100px","backgroundColor":"pink","border":"2px solid green"};
    $("#dv").css(json);
    
7.类样式的设置
    $("选择器").addClass("类样式名");//添加类样式 可以链式编程
    $("选择器").removeClass("类样式名");//移除类样式 可以链式编程
    $("选择器").hasClass("类样式名");//判断选择器是否应用了这个类样式
    $("选择器").toggleClass("类样式名");//如果没有使用类样式名，则使用，否则就移除该类样式
        $("#dv").addClass("cls");
        $("#dv").removeClass("cls");
    
    注意：css方法是不能添加或者移除类样式的
    
8.获取兄弟元素的方法
    获取下一个兄弟元素
    $("选择器1").next();//选择器1的后面一个兄弟元素对象
    $("选择器1").next("选择器2");//选择器1的后面一个且满足选择器2的兄弟元素对象。和$("选择器1+选择器2")效果一样
    
    获取后面的兄弟元素
    $("选择器1").nextAll();//选择器1的后面所有的兄弟元素对象
    $("选择器1").nextAll("选择器2");//选择器1的后面s所有满足选择器2的兄弟元素对象。和$("选择器1~选择器2");效果一样
    
    获取上一个兄弟元素
    $("选择器1").prev();//选择器1的前面一个兄弟元素对象
    $("选择器1").prev("选择器2");//选择器1的前面一个且满足选择器2的兄弟元素对象
    
    获取前面的兄弟元素
    $("选择器1").prevAll();//选择器1的前面所有兄弟元素对象
    $("选择器1").prev("选择器2");//选择器1的前面所有满足选择器2的兄弟元素对象
    
    获取选择器除自己外所有的兄弟元素
    $("选择器1").siblings();//选择器1的所有其他兄弟元素
    $("选择器1").siblings("选择器2");//选择器1的其他所有兄弟元素中满足选择器2的兄弟元素
    
    查找子元素
    $("选择器1").find("选择器2");//选择器1中满足选择器2条件的所有子元素对象。和$("选择器1 选择器2");效果一样
    
9.动画相关方法
    show：显示，它是以左上角（0,0）为坐标逐渐变大，直到满足元素的大小
    hide：隐藏，它是以左上角（0,0）为坐标逐渐变小，直到元素消失
    toggle：切换显示或隐藏
    slideDown：显示，像卷闸门关门的样子
    slideUp：隐藏，像卷闸门开门的样子
    slideToggle：切换显示或隐藏
    fadeIn：显示，通过改变透明度的方式实现
    fadeOut：隐藏，通过改变透明度的方式实现
    fadeToggle：切换显示或隐藏
        
    上面所有方法的参数：
        参数1:时间，多少毫秒执行完成，也可以用"slow","normal", "fast"这几个枚举变量表示
        参数2:回调函数，动画执行完毕后才执行
        如果没有参数，则立即显示或隐藏。
        
    animate：自定义动画方法
        参数1:键值对----css属性和值
        参数2:时间
        参数3:回调函数
    比如模拟slideDown、slideUp
    //点击第一个按钮显示div
     $("#btn1").click(function () {
        $("#dv").animate({height:"500px"},5000,function () {
         $(this).css("display","hidden");
        });//滑出
     });
     //点击第二个按钮隐藏div
     $("#btn2").click(function () {
       $("#dv").animate({height:0},5000,function () {
         $(this).css("display","block");
       });//滑入
     });
     
10.页面元素的增删改查
    $("父级元素选择器").append($("子元素对象"));
    $("#dv").append($("<a href='http://www.baidu.com'>百度</a>"));//在父级元素div中追加一个创建后的子元素
    
    $("子元素对象").appendTo($("父级元素选择器"));
    $("<a href='http://www.baidu.com'>百度</a>").appendTo($("#dv"));//创建一个子级元素直接加到父级元素
    
    $("父级元素选择器").prepend($("子元素对象"));
    子元素直接插入到父级元素选择器中第一个子元素的前面
    $("#dv").prepend($("<a href='http://www.baidu.com'>百度</a>"));//在父级元素div中第一个子元素前加一个指定的子元素
    
    $("子元素对象").prependTo($("父级元素选择器"));
    子元素直接插入到父级元素选择器中第一个子元素的前面
    $("<a href='http://www.baidu.com'>百度</a>").prependTo($("#dv"));//在父级元素div中第一个子元素前加一个指定的子元素
    
    $("#dv1>p").appendTo($("#dv2"));//将id为dv1的直接子元素p，剪贴到id为dv2的元素中去
    $("#dv1>p").clone().appendTo($("#dv2"));//将id为dv1的直接子元素p，复制到id为dv2的元素中去
    注意：如果子元素是通过jquery从页面中获取的，用append或appendTo添加到父元素中去时,类似于剪切
    
    $("父级元素选择器").html("子元素的html字符串");
    $("#dv").html("<input type='button' value='按钮'>");
    
    append、appendTo可以多次调用以达到将多个子元素对象依次添加到同一个父元素中
    html不能通过多次调用实现将多个子元素对象添加到同一个父元素中，html方法是将子元素html字符串替换原有父元素的所有子元素。
    
    $("选择器").after($("元素对象"));
    $("#dv").after($("<span>this is span2222</span>"));//把span元素添加到dv选择器的后面让其成为dv选择器的下一个兄弟元素
    
    $("选择器").before($("元素对象"));
    $("#dv").before($("<span>this is span2222</span>"));//把span元素添加到dv选择器的前面让其成为dv选择器的上一个兄弟元素
    
    移除所有的子元素
    $("父级元素选择器").empty();//清空该父级元素选择器下的所有子元素
    $("父级元素选择器").html("");//用空字符串替换父级元素下的所有子元素
    $("父级元素选择器").remove();//删除父级元素及其所有子元素
    
11.自定义属性的操作
    jquery对象.attr(属性名,属性值);//设置某个属性的值
    jquery对象.attr(属性名);//获取某个属性的值
    jquery对象.removeAttr(属性名);//删除某个属性
    
    jquery对象.prop(属性名,属性值);//设置某个属性的值
    jquery对象.prop({属性名,属性值});//设置某个属性的值
    jquery对象.prop(属性名,函数);//设置某个属性的值  函数返回值为属性值 函数参数为：第一个为当前元素的索引值，第二个参数为原先的属性值
    jquery对象.prop(属性名);//获取某个属性的值
    
    
    attr方法主要是操作元素的自定义属性的,但是也可以操作元素的自带的属性,
    但是具有 true 和 false 两个值的属性，如 checked, selected 或者 disabled 使用prop()。因为用attr在属性为false时，可能返回的是undefined
    prop方法只能操作元素自带的属性，包括checked、selected、disabled。
    建议：
        attr方法操作自定义属性，prop操作元素自带属性
        具有 true 和 false 两个值的属性操作用prop，其他的用attr

12.设置元素的高和宽
    方式1：css方法获取和设置
    var w=jquery对象.css("width");//返回的是字符串
    var h=jquery对象.css("height");//返回的是字符串
    jquery对象.css("width",(parseInt(w)*2)+"px");
    jquery对象.css("height",(parseInt(h)*2)+"px");
    
    方式2：width、height方法获取 css方法设置
    var w=jquery对象.width();
    var hj=query对象.height();
    jquery对象.css("width",(w*2));
    jquery对象.css("height",(h*2));
    
    方式3：width、height方法获取和设置
    var w=jquery对象.width();
    var hj=query对象.height();
    jquery对象.width(w*2);
    jquery对象.height(h*2);
    
    建议使用方式3
13.设置元素的偏移
    jquery对象.offset();//获取元素的偏移，返回的是对象，对象包括left和top2个属性
    jquery对象.offset({"left":left值,"top":top值});//设置
    
    
14.绑定事件
    普通的写法
    jquery对象.事件名字(回调函数);//如：$("btn").click(function(){});
    
    bind方式：
    bind(type,[data],fn);
    jquery对象.bind("事件类型",参数,回调函数);//jquery对象.bin("click",function(event){});
    
    delegate方式：
    delegate(selector,[events],[data],fn);
    父级jquery对象.delegate("子级元素选择器","事件类型",回调函数);//父级元素调用方法,代理子级元素绑定事件
    
    on方式：
    on(events,[selector],[data],fn);
    events:一个或多个用空格分隔的事件类型
    selector:子级元素选择器，如果为空或者没有，则表示为父级元素绑定事件
    data:当一个事件被触发时要传递event.data给事件处理函数。
    fn:该事件被触发时执行的函数。

    父级jquery对象.on("事件类型","子级元素选择器",回调函数);//和delegate方法一样，父级元素调用方法,代理子级元素绑定事件
    jquery对象.on("事件类型",回调函数);//为jquery对象绑定事件
    
    前两种方式只能为存在的元素绑定事件,后添加的元素没有事件，而后面两种方式,既可以为存在的元素绑定事件,也让后添加的元素也有事件
    建议：以后直接用on方式绑定事件。

15.解绑事件
    用什么方式绑定事件,最好用对应的方式解绑事件。
    
    unbind解绑事件
    jquery对象.unbind("事件类型");
    如果方法没有参数，表示解绑所有事件；$("#dv").unbind();
    可以同时解绑多个事件，每个事件的名字中间用空格即可。$("#dv").unbind("mouseenter mouseleave");
    jquery对象.click()这种方式添加的事件也可以使用unbind解绑。//$("#dv").unbind("click");
    
    undelegate解绑事件：
    父级jquery对象.undelegate("子级元素选择器","事件类型");
    $("#dv").undelegate();//移除了利用dv代理子级元素绑定的所有事件，但dv自己的事件没有解绑
    $("#dv").undelegate("p","click");//移除的是p的点击事件
    $("#dv").undelegate("p","click mouseenter");//可以移除多个事件,但是每个事件之间用空格隔开
    
    off解绑事件
    父级jquery对象.off("事件类型","子级元素选择器");
    $("#dv").off();//父级元素dv和子级元素的所有的事件全部解绑
    $("#dv").off("click");//把父级元素dv和子级元素的点击事件解绑
    $("#dv").off("click mouseenter");//父级元素dv和子级的元素的多个事件解绑,中间用空格
    $("#dv").off("click","p");//解绑dv中p标签的点击事件
    $("#dv").off("click mouseenter","p");//解绑dv中p标签的两个事件
    $("#dv").off("","p");//解绑dv中p标签的所有的事件
    $("#dv").off("click","**");//解绑dv中所有的子元素的点击事件

16.jquery阻止事件冒泡
    在绑定事件的回调函数中添加return false即可。
    
17.其他
    jquery对象.innerWidth();jquery对象.innerHeight()    //方法返回元素的宽度/高度（包括内边距）。
    jquery对象.outerWidth();jquery对象.outerHeight()  //方法返回元素的宽度/高度（包括内边距和边框）。
    jquery对象.outerWidth(true);jquery对象.outerHeight(true)  //方法返回元素的宽度/高度（包括内边距、边框和外边距）。