前端基础之jQuery操作标签

一、常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

keydown和keyup事件组合示例：

<!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</title>
</head>
<body>


<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>Egon</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>Alex</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>Yuan</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>EvaJ</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>Gold</td>
        <td>
            <select>
                <option value="1">上线</option>
                <option value="2">下线</option>
                <option value="3">停职</option>
            </select>
        </td>
    </tr>
    </tbody>
</table>


<script src="jquery.js"></script>
<script>
    var flag = false;
    // shift被按下，就将全局的flag置为true
    $(window).keydown(function (e) {
        if (e.keyCode === 16) {
            flag = true;
        }
    });
    // shift被抬起的时候，就将全局的flag置为false
    $(window).keyup(function (e) {
        if (e.keyCode === 16) {
            flag = false;
        }
    });
    // 按下shift键，进入批量编辑模式
    // 应该是给select标签绑定change事件
    $('td>select').change(function () {
        // 判断是否进入批量编辑模式
        // 如何判断shift按键被按下
        // 如何判断当前行被选中
        var isChecked = $(this).parent().prev().prev().find(':checkbox').prop('checked');
        if (flag && isChecked) {
            // 1. 取到当前select选中的值
            var checkedValue = $(this).val();
            // 2. 找到所有被选中的行
            // 3. 把选中行的select置为和我一样的值
            $('tr:has(input:checked)').find('select').val(checkedValue);
        }
    })
</script>
</body>
</html>

按住shift实现批量操作

hover事件示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>hover示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            height: 40px;
            width: 100%;
            background-color: #3d3d3d;
            position: fixed;
            top: 0;
        }

        .nav ul {
            list-style-type: none;
            line-height: 40px;
        }

        .nav li {
            float: left;
            padding: 0 10px;
            color: #999999;
            position: relative;
        }

        .nav li:hover {
            background-color: #0f0f0f;
            color: white;
        }

        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }

        .son {
            position: absolute;
            top: 40px;
            right: 0;
            height: 50px;
            width: 100px;
            background-color: #00a9ff;
            display: none;
        }

        .hover .son {
            display: block;
        }
    </style>
</head>
<body>
<div class="nav">
    <ul class="clearfix">
        <li>登录</li>
        <li>注册</li>
        <li>购物车
            <p class="son hide">
                空空如也...
            </p>
        </li>
    </ul>
</div>
<script src="jquery.js"></script>
<script>
    $(".nav li").hover(
        function () {
            $(this).addClass("hover");
        },
        function () {
            $(this).removeClass("hover");
        }
    );
</script>
</body>
</html>

hover事件

实时监听input输入值变化示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script src="xyh.js"></script>
    <script src="ws.js"></script>
    <script>
        window.onload = function () {
            // input框失去焦点才触发
            $('#i1').on('blur', function () {
                var value = $(this).val();
                console.log(value);
            });
            // input框只要值发生变化就触发
            $('#i1').on('input', function () {
                var value = $(this).val();
                console.log(value);
            })
        }
    </script>
</head>
<body>

<input type="text" id="i1">


</body>
</html>

input值变化事件

二、事件绑定

1、动态绑定：

$(' ').on('events' 'selector', function(){} )

events：事件
selector: 选择器（可选的）
function: 事件处理函数

2、静态绑定：

$(' ').click(function(){})

$(' ').on('click', function(){})

三、移除事件

.off(events selector, function(){})

off() 方法移除用 .on()绑定的事件处理程序。

events：事件
selector: 选择器（可选的）
function: 事件处理函数

四、阻止后续事件执行

return false; // 常见阻止表单提交等
e.preventDefault();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">
    <button id="b1">点我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.preventDefault();
    });
</script>
</body>
</html>

注意：

像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。

想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
    $(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
    $(this).removeClass('hover');
});

五、阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

六、页面载入

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

两种写法：

$(document).ready(function(){
// 在这里写你的JS代码...
})

简写：

$(function(){
// 你在这里写你的代码
})

文档加载完绑定事件，并且阻止默认事件发生：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录注册示例</title>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>

<form id="myForm">
    <label for="name">姓名</label>
    <input type="text" id="name">
    <span class="error"></span>
    <label for="passwd">密码</label>
    <input type="password" id="passwd">
    <span class="error"></span>
    <input type="submit" id="modal-submit" value="登录">
</form>

<script src="jquery-3.2.1.min.js"></script>
<script src="s7validate.js"></script>
<script>
    function myValidation() {
        // 多次用到的jQuery对象存储到一个变量，避免重复查询文档树
        var $myForm = $("#myForm");
        $myForm.find(":submit").on("click", function () {
            // 定义一个标志位，记录表单填写是否正常
            var flag = true;
            $myForm.find(":text, :password").each(function () {
                var val = $(this).val();
                if (val.length <= 0) {
                    var labelName = $(this).prev("label").text();
                    $(this).next("span").text(labelName + "不能为空");
                    flag = false;
                }
            });
            // 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件
            return flag;
        });
        // input输入框获取焦点后移除之前的错误提示信息
        $myForm.find("input[type!='submit']").on("focus", function () {
            $(this).next(".error").text("");
        })
    }

    // 文档树就绪后执行
    $(document).ready(function () {
        myValidation();
    });
</script>
</body>
</html>

登录校验示例

七、与window.onload的区别

window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

八、事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

示例：

表格中每一行的编辑和删除按钮都能触发相应的事件。

$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})

九、动画效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

自定义动画示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>点赞动画示例</title>
    <style>
        div {
            position: relative;
            display: inline-block;
        }

        div > i {
            display: inline-block;
            color: red;
            position: absolute;
            right: -16px;
            top: -5px;
            opacity: 1;
        }
    </style>
</head>
<body>

<div id="d1">点赞</div>
<script src="jquery.js"></script>
<script>
    $("#d1").on("click", function () {
        var newI = document.createElement("i");
        newI.innerText = "+1";
        $(this).append(newI);
        $(this).children("i").animate({
            opacity: 0
        }, 1000)
    })
</script>
</body>
</html>

点赞特效简单示例

输出：

.each(function(index, Element))：

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

// 为每一个li标签添加foo
$("li").each(function(){
　　$(this).addClass("c1");
});

注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：

也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：

$("li").addClass("c1");  // 对所有标签做统一操作

注意：

在遍历过程中可以使用 return false提前结束each循环。

终止each循环

return false；

十一、.data()

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value):

描述：在匹配的元素上存储任意相关数据。

$("div").data("k",100);  //给所有div标签都保存一个名为k，值为100

.data(key):

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name,value)或 HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$("div").removeData("k");  //移除元素上存放k对应的数据

十二、插件（了解即可）

jQuery.extend(object)

jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。

示例：

<script>
jQuery.extend({
  min:function(a, b){return a < b ? a : b;},
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>

jQuery.fn.extend(object)

一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。

<script>
  jQuery.fn.extend({
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>

单独写在文件中的扩展：

十、each

jQuery.each(collection, callback(indexInArray, valueOfElement))：

描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

li =[10,20,30,40]
$.each(li,function(i, v){
　　console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

posted @ 2019-12-20 20:54 zyling_me 阅读(274) 评论(0) 编辑收藏举报

刷新页面返回顶部

zyling_me