jQuery-02

2019-09-25 本文已影响0人 xiaohan_zhang

事件绑定

js 可以添加多个相同或不同类型的事件，不会覆盖，都会执行。

eventName(fn) 推荐
注意：部分事件jQuery没有实现，不能添加

$("button").click(function () {
    alert("第一种");
});

on(eventName, fn)
所有事件都可以添加

$("button").on("click", function () {
    alert("第二种");
});

off() 事件解绑

不传参数，移除全部事件
传递一个参数，会移除指定类型的所有事件
传递两个参数，会移除指定类型的指定事件

function test1(){
    alert("test1");
}
function test2(){
    alert("test2");
}
$("button").click(test1);
$("button").click(test2);
$("button").mouseleave(function () {
    alert("mouseleave");
});
// 移除事件
// $("button").off();
// $("button").off("click");
$("button").off("click", test1);

事件冒泡和默认行为

事件冒泡
子元素和父元素同时绑定了事件，那么子元素事件触发时，也会触发父元素的事件
阻止事件冒泡

$(".son").click(function () {
    alert("son");
    // 方式一
    return false;
});
$(".son").click(function (event) {
    alert("son");
    // 方式二
    event.stopPropagation();
});
$(".father").click(function () {
   alert("father");
});

默认行为
比如a标签点击就会跳转，form的submit按钮点击也会跳转
阻止默认行为

// 方式一
$("a").click(function () {
    // alert("我是百度");
    return false;
});
// 方式二
$("input").click(function (event) {
    event.preventDefault();
});

事件自动触发

trigger() 自动触发事件
会触发事件冒泡
会触发默认行为
triggerHandler()自动触发事件
不会触发事件冒泡
不会触发默认行为

$(".son").click(function () {
    alert("son");
    return false;
});

$(".father").click(function () {
    alert("father");
});
// 方式一
$(".father").trigger("click");

// 方式二
$(".father").triggerHandler("click");

$("input[type='submit']").click(function () {
    alert("submit");
});
$("input[type='submit']").trigger("click");

<div class="father">
    <div class="son"></div>
</div>
<form action="https://taobao.com">
    <input type="text">
    <input type="submit">
</form>

自定义事件

两个条件：
1.事件必须通过on绑定
2.事件必须通过trigger()来触发

$(".son").on("myClickTest", function () {
    alert("son");
    return false;
});
$(".son").trigger("myClickTest");

事件命名空间

1.事件必须通过on绑定
2.事件必须通过trigger()来触发
注意：
利用trigger()触发子元素带命名空间的事件，那么父元素带相同命名空间的事件，也会被触发冒泡。
利用trigger()触发子元素不带命名空间的事件，那么子元素所以相同类型的事件都会被触发，父元素所有相同类型的事件都会被触发冒泡。

$(".father").on("click.xiaohong", function () {
    alert("father xiaohong");
});
$(".father").on("click", function () {
    alert("father");
});

// 添加click事件
$(".son").on("click.xiaohong", function () {
    alert("son xiaohong");
//    return false;
});
// 添加click事件
$(".son").on("click.xiaolan", function () {
    alert("son xiaolan");
//    return false;
});
$(".son").trigger("click.xiaohong");
$(".son").trigger("click");

事件委托

$("button").click(function () {
    $("ul").append("<li>我是新增的li</li>");
});
// 如果找到的元素不止一个，会给找到的所有元素添加事件
// 这种方式，新增的li不会被绑定事件
// $("ul>li").click(function () {
//     alert("click");
// });
// 将li的事件委托给ul
$("ul").delegate("li","click",function () {
    alert("delete click");
    console.log($(this).html()); // 这里的this是li
});

鼠标移入移出事件

/*
// 当子元素被移入移出也会触发父元素的事件
$(".father").mouseover(function () {
    console.log("father被移入了");
});
$(".father").mouseout(function () {
    console.log("father被移出了");
});
*/

/*
// 当子元素被移入移出不会触发父元素的事件-----推荐
$(".father").mouseenter(function () {
   console.log("father被移入了");
});
$(".father").mouseleave(function () {
   console.log("father被移出了");
});
*/

$(".father").hover(function () {
    console.log("father被移入了");
},function () {
    console.log("father被移出了");
});

//    只写一个参数 移入移出都会被监测
// $(".father").hover(function () {
//     console.log("father hover");
// });

显示/隐藏动画

显示show()

// $("div").css("display", "block");
// $("div").show(1000);
$("div").show(1000, function () {
   alert("显示动画执行完毕");
});

隐藏hide()

// $("div").css("display", "none");
// $("div").hide(1000);
$("div").hide(1000, function () {
    alert("隐藏动画执行完毕");
});

切换toggle()
隐藏变显示显示变隐藏

// $("div"). toggle(1000);
$("div").toggle(1000, function () {
    alert("切换动画执行完毕");
});

展开和收起动画

展开slideDown()

// $("div").slideDown(1000);
$("div").slideDown(1000, function () {
   alert("展开完毕");
});

收起slideUp()

// $("div").slideUp(1000);
$("div").slideUp(1000, function () {
    alert("收起完毕");
});

切换slideToggle()
展开变收起收起变展开

// $("div").slideToggle(1000);
$("div").slideToggle(1000, function () {
    alert("切换完毕");
});

停止执行stop()

$("div").stop();

注意：如果要执行动画，建议在执行动画前先调用stop()方法，然后再执行动画。

淡入淡出动画

淡入fadeIn()

$("div").fadeIn(1000, function () {
    alert("淡入动画完毕");
});

淡出fadeOut()

$("div").fadeOut(1000, function () {
    alert("淡出动画完毕");
});

切换fadeToggle()
淡入变淡出淡出变淡入

$("div").fadeToggle(1000, function () {
    alert("切换完毕");
});

淡入到fadeTo()

$("div").fadeTo(1000, 0.3, function () {
    alert("淡入到动画完毕");
});

$('.ad').stop().slideDown(2000).fadeOut(2000).fadeIn(3000);

自定义动画 animate()

第一个参数：接收一个对象，可以在对象中修改属性
第二个参数：指定动画时长
第三个参数：指定动画节奏，默认是swing(先慢再快再慢)
第四个参数：动画执行完毕后的回调函数

修改属性

$(".one").animate({
    // width:500,
    marginLeft: 500
}, 5000, function () {

});

$(".two").animate({
    marginLeft:500
}, 5000, "linear", function () {

});

累加属性

$(".one").animate({
    width: "+=100"
}, 1000, function () {

});

关键字

$(".one").animate({
    // width: "hide" // 隐藏
    width: "toggle" // 隐藏
}, 1000, function () {

});

delay()方法

// 可以同时修改多个属性，多个属性动画会同时执行
/*
$(".one").animate({
    width: 500,
    height: 500
}, 1000);
 */
// 分开执行
/*
$(".one").animate({
    width: 500
}, 1000);
$(".one").animate({
    height: 500
}, 1000);
 */
// $(".one").stop().animate({width:500},1000).animate({height:500},1000);
// 执行完宽度变化后等2秒再执行高度变化
$(".one").stop().animate({width:500},1000).delay(2000).animate({height:500},1000);

stop()方法

// 1. 立即停止当前动画，继续下一个动画
$(".one").stop();
$(".one").stop(false);
$(".one").stop(false,false);

// 2. 立即停止当前和后续所有的动画
$(".one").stop(true);
$(".one").stop(true, false);

// 3. 立即完成当前的动画，继续执行后续的动画
$(".one").stop(false, true);

// 4. 立即完成当前的动画，并且停止后续所有的动画
$(".one").stop(true, true);

添加节点相关方法

内部插入
append()、appendTo() 会将元素添加到指定元素最后；
prepend()、prependTo() 会将元素添加到指定元素最前面；

// 创建一个节点
var $li = $("<li>新增的li</li>")
// 新增一个节点
// 添加到最后
$("ul").append($li); 
// $li.appendTo("ul");
// 添加到最前面
$("ul").prepend($li); 
// $li.prependTo("ul");

外部插入
after()、insertAfter() 会将元素添加到指定元素外部最后，和指定元素并列；
before()、insertBefore() 会将元素添加到指定元素外部最前面，和指定元素并列；

var $li = $("<li>新增的li</li>");
$("ul").after($li);
// $li.insertAfter("ul");

$("ul").before($li);
// $li.insertBefore("ul");

删除节点相关方法

remove()、detach() 删除指定元素；
empty() 删除指定元素的内容和子元素，指定元素自身不会被删除；

$("li").remove();
$("li").remove(".item");
// $("li").detach();
// $("li").detach(".item");
$("div").empty();

替换节点

replaceWith()、replaceAll() 替换所有匹配的元素为指定元素

var $h6 = $("<h6>我是h6</h6>");
// 用h6替换p
$("p").replaceWith($h6);
// $h6.replaceAll("p");

复制节点

clone(false) 浅复制，可以复制元素，不能复制元素的事件；
clone(true) 深复制，可以复制元素，同时可以复制元素的事件；

// 浅复制
var $li = $("li:first").clone(false);
$("ul").append($li);
// 深复制
var $li = $("li:first").clone(true);
$("ul").append($li);