python学习笔记(86) jQuery之事件

.on("click", "选择器", function(){...})

适用于给未来的元素绑定事件(事件委托)

事件冒泡和事件捕获

 

　　// 删除按钮绑定行

　　$("tbody").on("click", ".delete", function(){

　　　　$(this).parent().parent().remove()

　　});

 

.off()　　// 取消事件

return false　　// 阻止后续事件进行，常用于阻止表单提交 return flag

退出for循环: break

　　

登陆校验：

　　$("b1").click(function(){

　　　　var $needEles = $(".need");

　　　　var flag = true;

　　　　for (var i = 0, i <$needEles.length, i++ ) {

　　　　　　if($needEles[i].val().trim().length === 0) {

　　　　　　　　var lableName = $($needEles[i]).parent().text().trim().slice(0,-1);

　　　　　　　　$($needEles[i]).next().text(lableName + '不能为空！');

　　　　　　　　flag = false;

　　　　　　　　break;

　　　　　　}

　　　　}

　　　　return flag;

　　})

 

常用事件：

　　click

　　hover

　　blur

　　focus

　　change　　// select

　　keyup　　　　　　

 

批量操作：

　　

var mode = false;
var $bodyEle = $("body");
$bodyEle.on("keydown",function (eve) {
    if (eve.keyCode === 17){
        mode = true
    }
})

$bodyEle.on("keyup",function (eve) {
    if (eve.keyCode === 17){
        mode = false
    }
})

$("select").on("change",function () {
    var value = $(this).val();
    var $thisCheckbox = $(this).parent().siblings().first().find(":Checkbox");
    if ($thisCheckbox.prop("checked")&&mode){
        var $checkedEles = $("input:checked");
        for (var i = 0, i<$checkedEles.length; i++){
            $($checkedEles[i]).parent().siblings().last().find("select").val(value)
        }
    }
})

页面载入之后执行：

　　$(documents).ready(function(){...})

 

动画效果：

　　// 基本

　　.show(s, [e], [fn])

　　.hide

　　.toggle

　　// 滑动

　　.slideDown

　　.slideUp

　　.slideToggle

　　// 淡入淡出

　　.fadeIn

　　.fadeOut

　　.fadeTo　　// .fandeTo(5000, 0.3)

　　.fadeToggle

　　// 自定义

　　.animate(p, [s], [e], [fn])

 

循环方法：

　　.each　　// 循环遍历，为每一个元素执行函数

####################################

　　var $divEles = $("div");

 

　　for (var i = 0, i < $divEles.length, i++){

　　　　console.log($divEles[i].innerText);

　　}

　　

　　$divEles.each(function(){

　　　　console.log(this.innerText);　　// this指向的是DOM对象

　　})

####################################

　　var a1 = [11, 22, 33, 44, 55];

　　$.each(a1, function(k,v){　　　　// 一个参数打印索引

　　　　console.log(k+":"+v);

　　　　if (v === 22){

　　　　　　return;　　　　// 用return false来跳出整个循环，return跳出本次循环

　　　　}

　　})

#####################################

 

.data(key, value)

.data(key)　　// 取值

.removeData(key)　　// 不加key表示删除所有

可以存jQuery对象

$("divl").data("k", 100)

 

插件：

　　给jQuery对象扩展方法

　　$.fn.extend({

　　　　"s9":function(){

　　　　　　console.log;

　　　　}

　　})

　　

　　$("ul").s9()

 

　　$.extend()　　// 给jQuery全局扩展方法

　　$.s9()