jQuery的选择器 DOM 事件的使用

jQuery的引入

<script src=“http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

jQuery选择器

//指定ID选择器
$("#d")
//全选选择器
$("*")
//类选择器
$(".class")
//标签选择器
$("div")
//群组选择器
$("div,span,a")
//后代选择器
$("ul li")
// 子选择器
$("div>p")
//next选择器
$("div+p")
//nextAll选择器
$("div~p")
//属性选择器
$("input[name]")

jQuery过滤选择器

//选取第一个元素
$("li:first")
//选取最后一个元素
$("li:last")
//选取class不是red的元素
$("li:not(.red)")
//选取偶数的所有元素
$("li:even")
//选取所有奇数的元素
$("li:add")
//选择对应下表的元素
$("eq(index)")
 //可见性选择器
$("ul:visible").css("border","solid 5px red");
$("ul:hidden").css("border","solid 5px red");

// 判断一个元素身上是否具有某个class或id
console.log($("#aaa").is(".msg"))
    
// 判断一个元素身上是否具有某个class
console.log($("#aaa").hasClass("msg"))


//判断是否有某个属性名
$("li").is(".red")
$("ul:has(.pink)").css("border","solid 5px red");


//关系过滤器方法
	$(".box h2").css("background","red");
    $(".box").find("h2").css("background","red");

    $(".box>h2").css("background","red");
    $(".box").children("h2").css("background","red");

    $("#box+span").css("background","red");
    $("em").next("span").css("background","red");
    
    $("#box~span").css("background","red");
    $("em").nextAll("span").css("background","red");

    $(".cont:first").css("background","red");
    $(".cont").first().css("background","red");
    
    $(".cont:last").css("background","red");
    $(".cont").last().css("background","red");

    $(".cont:eq(2)").css("background","red");
    $(".cont").eq(1).css("background","red");
    
    $("div:not(.box)").css("background","red");
    $("div").not(".box").css("background","red");

    $("ul:has(.pink)").css("border","solid 5px red");
    $("ul").has(".pink").css("border","solid 5px red");

jQuery动画

//内置动画
$("#box").hide() //显示
$("#box").show() //隐藏
$("#box").toggle() //显示隐藏切换

$("#box").slideUp(); //上拉
$("#box").slideDown(); //下拉
$("#box").slideToggle(); //切换

$("#box").fadeOut(); //淡出 
$("#box").fadeIn(); //淡入
$("#box").fadeToggle(); //淡入淡出切换
$("#box").fadeTo(); //修改透明度

方法有两种用法：

• 一种是不传参数，代表直接显示隐藏。

• 另一种是向方法中传递一个参数，这个参数为number类型，代表动画的执行时间。会有显示隐藏的动画效果。

  示例:show(100)、hide(100)、toggle(100)

• 不仅如此，jQuery还为动画方法提供了三种字符串形式的参数，分别是：fast、slow、和空字符串’’
  show(‘fast’)、hide(‘slow’)、toggle(’’)

三种参数的执行时间，分别为 ，‘fast’ ：200毫秒 ‘’(默认值):400毫秒 ‘slow’：600毫秒

fadeTo()方法接受两个参数。
第一个参数是动画执行的时间，第二个参数是期望达到的透明度。

自定义动画
animate()方法

animate()方法有三个参数。分别是动画目标(target),动画执行时间，回调函数。只有第一个参数是必填参数。

animate()方法的使用：

animate({
    'width':'200px'，
    'height':'200px'
})

将元素属性变换为自定义动画中的目标属性，所有参数中的属性一起改变。

animate({
    'width':'+=200px'
})

设置的属性，支持运算

动画执行顺序
如果想要动画按照顺序执行（执行完第一个动画之后，再执行下一个动画）有三种方法：

1. 借助动画的回调函数。

$('input').click(function(){
    $('div').animate({
        'width':'400px',
        'height':'400px',
    },function(){
        $('div').animate({
            'width':'200px',
            'height':'200px'
        })
    })
})

2. 将动画效果分开写。

$('input').click(function(){
    $('div').animate({
        'width':'400px',
        'height':'400px',
    })
    $('div').animate({
        'width':'200px',
        'height':'200px'
    })
})

3. 连缀

$('input').click(function(){
    $('div').animate({
        'width':'400px',
        'height':'400px',
    }).animate({
        'width':'200px',
        'height':'200px'
    })

在操作同一元素的时候，推荐使用连缀。在操作不同元素的时候，推荐使用回调函数。

动画执行顺序

• 动画方法与动画方法之间是同步执行
• 动画方法与其他方法之间是异步执行
  动画队列
  动画或效果一旦触发多个，就会执行，如果多次触发，就会造成多个动画或效果排队执行。
  解决方案：
  使用stop()
  stop()方法写到动画或者效果的前面，相当于停止结束上一次动画

动画全局方法
$.fx.interval属性可以调整动画每秒的运行帧数，默认为 13 毫秒。数字越小越流畅，但可能影响程序性能。
$.fx.interval=1000;动画的帧数设置。
$.fx.off=true;动画关闭。

Dom元素及属性操作

1. 设置（获取）元素内容

html(); //获取
html("值")  //设置或修改
//原生innerHTML

2. 设置（获取）文本内容

text(); //获取
text("值") //设置

3. 表单内容获取

val()	//获取
val("值") //设置

CSS操作

/ 元素.get/set/removeAttribute

    console.log($(".box").attr("abc"));

    $(".box").attr("qwe","world");

    $(".box").attr({
        a:10,
        b:20,c:30
    });

    $(".box").removeAttr("b");


// 元素.css 参数可是对象格式
    $(".box").css("width","200px");
    $(".box").css({
        width:100,
        height:200,
        background:"pink"
    });

    console.log($(".box").css(["width","height","border"]))

    $(".box").css({
        width:"+=200px"
    });

元素尺寸的获取和设置

	内容的尺寸
    console.log($(".box").width());
    $(".box").width(200);

    内容的尺寸 + padding
    console.log($(".box").innerWidth());
    $(".box").innerWidth(200);

    内容的尺寸 + padding + border
    console.log($(".box").outerWidth());
    $(".box").outerWidth(300);

    (margin + position)其实是相对于包含块偏移的位置
    console.log($(".box").offset());
    $(".box").offset({left:200,top:200})

    position
    console.log($(".box").position())

Class操作

  $("#box").addClass("blue abc qwe asd zxc"); //添加类名
  $("#box").removeClass("asd"); //删除类名
    document.onclick = function(){
        $("#box").toggleClass("blue"); //类名切换，有就删除，没有就设置

元素的操作

// body被div插入了
    $("body").append(div);
    // 把div插入到body
    div.appendTo($("body"));

    $("body").prepend(div) 
    div.prependTo($("body"))
	//this的指向不同，根据需求选择
	//把div插入到上一个兄弟
    $("body").before(div)
    //把div插入到下一个兄弟
    $("body").after(div)
// 切记，创建一个元素，只能被插入一次

	// 删除元素的方式
    $("em").remove()  //删除指定元素
    $("p").html("")  //覆盖所有元素，相当于删除全部
    $("p").empty(); //覆盖单个元素
    $("p").replaceWith("<div>"+ $("p").html() +"</div>");
    //相当于outHTML

    // 克隆(复制)元素
    clon()//参数为ture时候，事件也可以被复制
    $(".btn").click(function(){
        $(".btn").clone(true).appendTo($("body"));
    })

jQuery事件

 // 1. 常规绑定：一般事件都支持，某些事件不支持
    $("#box").click(function(){
        console.log(1)
    })
    $("#box").click(function(){
        console.log(2)
    })

    // 2. on绑定，off删除
    $("#box").on("click.a",function(){
        console.log(1)
    })
    $("#box").on("click.b",function(){
        console.log(2)
    })
    $("#box").on("click.c",function(){
        console.log(3)
    })
    $("#box").off("click.b");

    // 3. one
    $("#box").one("click",function(){
        console.log(1);
    })

    // 4. hover (enter+leave) 
    $("#box").hover(function(){
        console.log("鼠标进入")
    },function(){
        console.log("鼠标离开")
    })

    // 5. bind绑定+unbind删除
    $("#box").bind("click.a",function(){
        console.log(1)
    })
    $("#box").bind("click.b",function(){
        console.log(2)
    })
    $("#box").bind("click.c",function(){
        console.log(3)
    })
    $("#box").unbind("click.b");
    //目前已被弃用

    // 6. bind和on的区别
    // on可以直接支持事件委托
    $("ul").on("click","li",function(){
        console.log(this);
    })
    $("#box").on("click",function(){
        console.log(1)
    })
    
    setInterval(() => {
        // 自动触发事件执行
        $("#box").trigger("click");
        // $("#box").triggerHandler("click");
    }, 500);