前端-part10-jQuery操作样式三：函数+事件委托+阻止冒泡+鼠标事件+输入框监听

原创

少年包青菜

修改于 2020-07-30 14:53:43

2.5K0

修改于 2020-07-30 14:53:43

1.jQurey的 .each() 循环方法的使用

//一般方法示例1
for (var i=0;i<$("div").length;i++){  // 定位到所有的 div 标签并遍历其下标
    console.log($("div")[i]); // 依次打印出标签
}

//jQUery的 .each() 方法示例1
$("div").each(function(){
	console.log(this);
})

=========================================================================================================

//一般方法示例2
var a1 = [11,22,33,44];
for(var i=0;i<a1.length;i++){
	console.log(a1[i])
}

//jQuery的 .each() 方法示例2
var a1 = [11,22,33,44];
$.each(a1,function(k,v){
	console.log(k,v);
})

=========================================================================================================

// 如何跳出某次循环 <Python 的 continue>
a = [11,22,33,44];
$.each(a,function(k,v){  // k,v jQuery 用 .each() 方法时的键值对
	if(v === 33){ // 当 v 等于 33 的时候
		return;  // return 代表continue，即不执行本次循环
	}else{
		console.log(v); // 结果依次为 11 22 44
	}
})

// 如何结束循环 <Python 的 break>
a = [11,22,33,44];
$.each(a,function(k,v){  // k,v jQuery 用 .each() 方法时的键值对
	if(v === 33){ // 当 v 等于 33 的时候
		return false;  // return false 代表break，即不再往下执行了
	}else{
		console.log(v);  // 结果依次是 11 22
	}
})

2.data() 方法的使用实例

$("div").data("狗子","二哈"); // 给找到的标签绑上一个键值对
$("div").data("狗子"); // 此时可以根据 "狗子" 这个键，找到对应的 "二哈" 的这个值
$("div").data(); // 也可以直接 使用 .data() 方法，直接找出键值对

$("div").data("狗子","金毛"); // 既然可以赋值，同样可以修改它的值
$("div").data("狗子"); // 此时可以根据 "狗子" 这个键，原来的 "二哈" 变成了 "金毛"

$("div").data("猫子","布偶"); // 同样可以增加一组键值对
$("div").data(); // 此时就有了两组键值对，可以添加很多的键值对

$("div").data("列表",[11,22,33,44]); // 可以添加列表
$("div").data("data",new Data()); // 可以添加对象

3.jQuery 以及 jQurey对象的扩展方法

$.extend({ // jQuery的扩展方法
	"new_function":function(){
	console.log("我是jQuery的一个扩展方法");
	}
})
$.new_function();  // 此时执行这个扩展方法，就会打印出 "我是jQuery的一个扩展方法" 这句话


$.fn.extend({ // jQuery对象的扩展方法
	new_obj_func:function(){
	console.log("我是jQuery对象的扩展方法");
	}
})
$("div").new_obj_func(); // 此时一个 jQuery 对象执行这个扩展方法，就会打印出"我是jQuery对象的扩展方法"这句话

4.删除操作实例（事件委托）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>我的文件操作</title>
    <style>

    </style>
</head>
<body>
<button id="b1">添加</button>
<table border="1">
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>二哈</td>
        <td>食屎</td>
        <td>
            <button class="delete">开除</button>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>金毛</td>
        <td>装逼</td>
        <td>
            <button class="delete">开除</button>
        </td>
    </tr>
    </tbody>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
    $("#b1").click(function () { // 定位到 "添加" 这个按钮

        var trEle = document.createElement("tr"); // 创造一个元素
        trEle.innerHTML = `
        <td>2</td>
        <td>柴犬</td>
        <td>切糕</td>
        <td><button class="delete">开除</button></td>
    `;
        $("tbody").append(trEle) // 添加一行
    });
    $("table").on("click",".delete",function(){  // 使用事件委托的方式给未来的标签绑定事件
        $(this).parent().parent().remove()
        //button -> td ->  tr  - > remove()
    })
</script>
</body>
</html>

5.阻止默认事件冒泡（阻断事件的继续执行）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>我的阻止默认事件冒泡</title>
    <style>

    </style>
</head>
<body>
<form action="">
    <input id="i1" type="text" placeholder="输入点什么我来提交">
    <input id="i2" type="submit" value="提交"> <!--form表单里面提交会刷新-->
</form>
<script src="jquery-3.3.1.js"></script>  
<script>
    $("#i2").click(function(event){
        var value = $("#i1").val();
        if (value.length===0){ // 如果我的输入为空的话
            alert("你的输入为空");
            event.preventDefault() // 阻断默认事件的进行，即浏览器不会再刷新界面
        }
    })
</script>
</body>
</html>

6.shift批量操作（特殊操作按键如 Enter、Tab、Alt 等可参照此示例摸索）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>我的键盘操作</title>
    <style>

    </style>
</head>
<body>

<table border="1">
  <thead>
  <tr>
    <th>#</th>
    <th>姓名</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><input type="checkbox"></td>
    <td>钢铁侠</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>雷神</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>美国队长</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>黑寡妇</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>绿巨人</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  </tbody>
</table>

<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选">
<script src="jquery-3.3.1.js"></script>
<script>
$("#b1").click(function () {  // 全选
    $(":checkbox").prop("checked",true)
});
$("#b2").click(function () {
    $(":checkbox").prop("checked",false) // 全不选
});


    var flag = false; // 这个全局变量用来监听 shift 的按键状态
    $(window).on("keydown",function (event) { // 在键盘按下来的时候
        if(event.keyCode===16){ // 每个keyCode 代表一个按键事件，这个16代表 shift，
                                //其他的例如: Enter、Tab、Alt 等等都有对应数字与其对应的
            flag = true;
        }
    });
    $(window).on("keyup",function(event){ // 在鼠标抬起来的时候
        if(event.keyCode===16){
            flag = false; // 设定 flag 为 false
        }
    });

  $("select").on("change", function () {
    // 是否为批量操作模式
      var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked");
    if (flag && isChecked) {
      var selectValue = $(this).val();
      // 找到所有被选中的那一行的select，选中指定值
      $("input:checked").parent().siblings().find("select").val(selectValue);
      // 默认找到全部checkbox为选中的
    }
  })
</script>
</body>
</html>

7.鼠标悬停事件之hover

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>我的鼠标悬停</title>
    <style>
        * {
            margin: 5px;
            padding: 0;
        }

        .top-menu {
            height: 30px;
            background-color: #8e939a;
            /*position: relative;*/
        }

        .top-menu > ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        .top-menu > ul > li {
            display: inline;
            line-height: 30px;
            font-size: 25px;
        }

        .items {
            position: absolute;
            left: 140px;
            top: 35px;
            background-color: cornflowerblue;
            display: none;
        }

       .top-menu > ul > li >div > a {
            font-size: 15px;
        }


        .hover > .items {
            display: block;
        }
    </style>
</head>
<body>
<div class="top-menu">
    <ul>
        <li>登录</li>
        <li>注册</li>
        <li class="shopping-car">购物车
            <div class="items">
                <a href="https://www.baidu.com/">连接到百度</a><br>
                <a href="https://www.sogou.com/">连接到搜狗</a><br>
                <a href="https://www.163.com/">连接到网易</a>
            </div>
        </li>
    </ul>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
    // $(".shopping-car").hover(
    //     function () {
    //         $(this).addClass("hover");
    //     },
    //     function () {
    //         $(this).removeClass("hover");
    //     }
    // );
        $('.top-menu').on('mouseenter', '.shopping-car', function() {//绑定鼠标进入事件
        $(this).addClass('hover');
    });

    $('.top-menu').on('mouseleave', '.shopping-car', function() {//绑定鼠标划出事件
        $(this).removeClass('hover');
    });

</script>
</body>
</html>

8.实时监测输入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>我的实时输入框监测</title>
    <style>
        #i1{
            width: 50%;
        }
    </style>
</head>
<body>
<input id="i1" type="text">
<script src="jquery-3.3.1.js"></script>
<script>
    $("#i1").on("input",function () {  // 实时监控输入框里面的值，打印到 Console
        var value = $(this).val();
        console.log(value);
    })
</script>
</body>
</html>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

jquery