zoukankan      html  css  js  c++  java
  • 2_jQuery

    一. jQuery介绍

    1.1 什么是jQuery

    • jQuery, 顾名思义, 也就是JavaScript和查询(Query), 它就是辅助JavaScript开发的js类库

    1.2 jQuery核心思想

    • 它的核心思想write less, do more(写的更少, 做的更多), 所以它实现了很多浏览器的兼容问题

    1.3 jQuery流行程度

    • jQuery现在已经成为最流行的JavaScript库, 在世界前10000个访问最多的网站中, 有超过55%在使用jQuery

    1.4 jQuery优点

    • jQuery是免费, 开源的, jQuery的语法设计可以使开发更加便捷, 例如操作文档对象, 选择DOM元素, 制作动画效果, 事件处理, 使用Ajax以及其他功能

    1.5 下载和使用

    • 下载
    • 使用
    • jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数, 可以通过下面的标记把 jQuery 添加到网页中:
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    </head>
    
    • 库的替代
      • 如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
    • 使用 Google 的CDN
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
    /jquery/1.4.0/jquery.min.js"></script>
    </head>
    
    • 使用 Microsoft 的 CDN
    <head>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
    /jquery-1.4.min.js"></script>
    </head>
    
    • Hello World程序
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../static/js/jquery-3.5.1.js"></script>
        <script type="text/javascript">
            // window.onload = function () {
            //     var btnObj = document.getElementById("btnId");
            //     btnObj.onclick = function () {
            //         alert("js 原生的单击事件")
            //     }
            // }
            $(function () {//表示页面加载完成之后, 相当于window.onload = function () {}
                var $btnId = $("#btnId");//表示按id查询标签对象
                $btnId.click(function () {//绑定单击事件
                    alert('jQuery 的单击事件');
                });
            });
        </script>
    </head>
    <body>
        <button id="btnId">SayHello</button>
    </body>
    </html>
    
    • 注意:
      • 使用jQuery一定要引入jQuery库
      • jQuery中的$是一个函数
      • 如何为按钮添加点击响应函数
        1. 使用jQuery查询到标签对象
          • var $btnId = $("#btnId");//表示按id查询标签对象
        2. 使用标签对象.click(function(){});
          • $btnId.click(function () {alert('jQuery 的单击事件');});

    二. jQuery的核心函数

    • $是jQuery的核心函数, 能完成jQuery的很多功能. $()就是调用$这个函数
      • 传入参数为[函数]时:
        • 表示页面加载完成之后,相当于window.onload = function () {);
      • 传入参数为[HTML字符串时]:
        • 会对我们创建这个html标签对象
      • 传入参数为[选择器字符串时]:
        • $("#id属性值"); id选择器,根据id查询标签对象
        • $("标签名"); 标签选择器,根据标签名查询标签对象
        • $(".class属性值"); 类型选择器,可以根据class属性查询标签对象
      • 传入参数为[DOM对象]时:
        • 会把这个dom对象转换为jQuery对象

    三. jQuery对象和Dom对象区分

    3.1 DOM对象

    1. 通过getElementById()查询出来的标签对象是DOM对象
    2. 通过getElementByName()查询出来的标签对象是DOM对象
    3. 通过getElementByTagName()查询出来的标签对象是DOM对象
    4. 通过createElement()创建的对象是DOM对象
    • Dom对象alert出来的效果是: [object HTML标签名Element]

    3.2 jQuery对象

    1. 通过jQuery提供的API创建的对象, 是jQuery对象
    2. 通过jQuery包装的Dom对象, 是jQuery对象
    3. 通过jQuery提供的API查询到的对象, 是jQuery对象
    • jQuery对象alert出来的效果是: [object Object]
    • jQuery对象的本质是什么?
      • jQuery对象是dom对象数组+jQuery提供的一系列功能函数
    • jQuery对象和Dom对象的使用区别
      • jQuery对象和Dom对象互相不能使用对方的属性和方法

    3.3 Dom对象和jQuery对象相互转换

    3.3.1 Dom对象转化为jQuery对象[重点]
    1. 先有Dom对象
    2. $(Dom对象) 就可以转换成为jQuery对象
    3.3.2 jQuery对象转为Dom对象[重点]
    1. 先有jQuery对象
    2. jQuery对象[下标]取出相应的Dom对象

    四. jQuery选择器[重点]

    4.1 基本选择器[重点]

    • id 选择器,井号键后加id属性
      • 根据id查找标签对象
    • .class 选择器
      • 根据class查找标签对象
    • element 选择器
      • 根据标签名查找标签对象
      • 表示任意的, 所有的元素
    • selector1,selector2,selectorN 组合选择器
      • 合并选择器1, 选择器2...选择器N的结果并返回

    4.2 层级选择器[重点]

    • ancestor descendant: 在给定的祖先元素下匹配所有的后代元素
      • ancestor : 任何有效选择器
      • descendant: 用以匹配元素的选择器, 并且它是第一个选择器(ancestor )的后代元素
    • parent > child: 在给定的父元素下匹配所有的子元素
      • parent: 任何有效选择器
      • child: 用以匹配元素的选择器, 并且它是第一个选择器(parent)的子元素
    • prev + next: 匹配紧接在prev元素后的next元素(单个,同级元素)
      • prev : 任何有效选择器
      • next: 一个有效选择器并且紧接着第一个选择器
    • prev ~ siblings: 匹配所有紧接在prev元素后的siblings元素(多个,同级元素)
      • prev : 任何有效选择器
      • siblings: 一个有效选择器并且紧接着第一个选择器

    4.3 过滤选择器[重点]

    4.3.1 基本过滤器
    • :first: 获取第一个元素
    • :last: 获取最后一个元素
    • :not(selector): 去除所有与给定选择器匹配的元素
    • :even: 匹配所有索引值为偶数的元素, 从0开始计数
    • :odd: 匹配所有索引值为奇数数的元素, 从0开始计数
    • :eq(index): 匹配一个给定索引值的元素,index从0开始计数
    • :gt(index): 匹配所有大于给定索引值的元素,index从0开始计数
    • :lt(index): 匹配所有小于给定索引值的元素,index从0开始计数
    • :header: 匹配如 h1,h2,h3之类的标题元素
    • :animated: 匹配所有正在执行动画效果的元素
    • :focus:
    4.3.2 内容过滤器
    • :contains(text): 匹配包含给定文本的元素
    • :empty: 匹配所有不包含子元素或者文本的空元素
    • :parent: 匹配含有子元素或者文本的元素
    • :has(selector): 匹配含有选择器所匹配的元素的元素
    4.3.3 属性过滤器
    • [attribute] :匹配包含给定属性的元素
    • [attribute=value] :匹配给定的属性是某个特定值的元素
    • [attribute!=value] :匹配所有不含有指定的属性, 或者属性不等于特定值的元素
    • [attribute^=value] :匹配给定的属性是以某些值开始的元素
    • [attribute$=value] :匹配给定的属性是以某些值结尾的元素
    • [attribute*=value] :匹配给定的属性是以包含某些值的元素
    • [attrSel1] [attrSel2] [attrSelN] :复合属性选择器, 需要同时满足多个条件时使用
    4.3.4 表单过滤器
    • :input : 匹配所有 input, textarea, select和button元素
    • :text : 匹配所有 文本输入框
    • :password : 匹配所有 密码输入框
    • :radio : 匹配所有 单选框
    • :checkbox : 匹配所有 复选框
    • :submit : 匹配所有 提交按钮
    • :image : 匹配所有 图片
    • :reset : 匹配所有 重置阿按钮
    • :button: 匹配所有 按钮
    • :file : 匹配所有 文件域
    • :hidden : 匹配所有 不可见元素,或者type为hidden的元素
    4.3.5 表单对象属性
    • :enabled : 匹配所有 可用元素
    • :disabled : 匹配所有 不可用元素
    • :checked : 匹配所有 选中的被选中元素(复选框, 单选框等,不包括select中的option)
      • val()可以操作表单项的value属性值
      • 使用size()方法获取选取到的元素集合的元素个数
      • each方法是jQuery对象提供用来遍历元素的方法, 在遍历的function函数中, 有一个this对象, 这个this对象,就是当前遍历到的dom对象
    • :selected : 匹配所有 选中的option元素
    4.3.6 元素筛选
    • eq() : 获取给定索引的元素
    • first() : 获取第一个元素
    • last() : 获取最后一个元素
    • filter(exp) : 留下匹配的元素
    • is() : 判断是否匹配给定的选择器, 只要有一个匹配就返回, true
    • has(exp) : 返回包含有匹配选择器的元素的元素
    • not(exp) : 删除匹配选择器的元素
    • childen(exp) : 返回匹配给指定选择器的子元素
    • find(exp) : 返回匹配给指定选择器的后代元素
    • next() : 返回当前元素的下一个兄弟元素
    • nextAll() : 返回当前元素后面所有的兄弟元素
    • nextUntil() : 返回当前元素到指定匹配的元素为止的后面元素
    • parent() : 返回父元素
    • prev(exp) : 返回当前元素的上一个兄弟元素
    • prevAll() : 返回当前元素前面所有的兄弟元素

    五. jQuery属性操作

    5.1 jQuery属性操作

    • html() : 它可以设置和获取起始标签和结束标签中的内容
      • 和dom属性的 innerHTML 一样
    • text() : 它可以设置和获取起始标签和结束标签中的文本
      • 和dom属性的 innerText 一样
    • val() : 它可以设置和获取表单项的value属性值
      • 和dom属性的 value 一样
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../static/js/jquery-3.5.1.js"></script>
        <script type="text/javascript">
            $(function () {
                //不传参数是获取, 传递参数是设置
                // alert($("div").html());//获取
                // $("div").html("<h1>我是div中的标题1</h1>");//设置
    
                //不传参数是获取, 传递参数是设置
                // alert($("div").text());//获取
                // $("div").text("<h1>我是div中的标题1</h1>");//设置
                
                $("button").click(function () {
                    alert($("#username").val())//获取
                    $("#username").val("jQuery");//设置
                });
            })
        </script>
    </head>
    <body>
        <div>我是div标签 <span>我是div中的span</span></div>
        <input type="text" name="username" id="username">
        <button>操作输入框</button>
    </body>
    </html>
    
    • val() 操作表单项的选中状态
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../static/js/jquery-3.5.1.js"></script>
        <script type="text/javascript">
            $(function () {
                /*//批量操作单选框的选中状态
                $(":radio").val(["radio2"]);
                //批量操作复选框的选中状态
                $(":checkbox").val(["checkbox2","checkbox1"]);
                //批量操作多选下拉框的选中状态
                $("#multiple").val(["mul2","mul3","mul4"]);
                //批量操作单选下拉框的选中状态
                $("#single").val(["sin2"]);*/
    
                //也可以一次性对所有选择框进行操作
                $(":radio,:checkbox,#multiple,#single")
                    .val(["radio2",
                        "checkbox1","checkbox2",
                        "mul2","mul3","mul4",
                        "sin2"]);
            });
        </script>
    </head>
    <body>
        单选:
        <input name="radio" type="radio" value="radio1" />radio1
        <input name="radio" type="radio" value="radio2" />radio2
        <br/>
        多选:
        <input name="checkbox"type="checkbox" value="checkbox1" />checkbox1
        <input name="checkbox"type="checkbox" value="checkbox2" />checkbox2
        <input name="checkbox"type="checkbox" value="checkbox3" />checkbox3
        <br/>
        下拉多选:
        <select id="multiple" multiple="multiple" size="4">
            <option value="mul1">mul1</option>
            <option value="mul2">mul2</option>
            <option value="mul3">mul3</option>
            <option value="mul4">mul4</option>
        </select>
        <br/>
        下拉单选:
        <select id="single">
            <option value="sin1">sin1</option>
            <option value="sin2">sin2</option>
            <option value="sin3">sin3</option>
        </select>
    </body>
    </html>
    
    • attr() : 可以设置和获取属性的值, 不推荐操作 checked,readonly,selected,disabled等
    • prop() : 可以设置和获取属性的值, 只推荐操作checked,readonly,selected,disabled等
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../static/js/jquery-3.5.1.js"></script>
        <script type="text/javascript">
            $(function () {
                // $(":checkbox").attr("name","newCheckbox");//设置
                // alert($(":checkbox").attr("name"));//获取
    
                // alert($(":checkbox").prop("checked",true));
    
                $(":checkbox:first").attr("abc","abcValue");//设置
                alert($(":checkbox:first").attr("abc"));//获取
            });
        </script>
    </head>
    <body>
        多选:
        <input name="checkbox"type="checkbox" value="checkbox1" />checkbox1
        <input name="checkbox"type="checkbox" value="checkbox2" />checkbox2
        <input name="checkbox"type="checkbox" value="checkbox3" />checkbox3
    </body>
    </html>
    

    5.2 练习(全选全不选反选)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../static/js/jquery-3.5.1.js"></script>
        <script type="text/javascript">
            $(function () {
                //全选
                $("#chooseAll").click(function () {
                    $(":checkbox").prop("checked",true);
                });
                //全不选
                $("#chooseNone").click(function () {
                    $(":checkbox").prop("checked",false);
                });
                //反选
                $("#chooseReverse").click(function () {
                    //查找全部的球类的复选框
                    $(":checkbox[name='items']").each(function () {
                        //在each遍历的function函数中, 有一个this对象, 这个this对象是当前正在遍历到的dom对象
                        this.checked = !this.checked;
                    });
                    //要检查是否满选
                    //先获取全部的球类个数
                    var allCount = $(":checkbox[name='items']").length;
                    //再获取选中的球类个数
                    var choosedCount = $(":checkbox[name='items']:checked").length;
                    // if (choosedCount == allCount) {
                    //     $("#checkAllBox").prop("checked",true);
                    // }else {
                    //     $("#checkAllBox").prop("checked",false);
                    // }
                    $("#checkAllBox").prop("checked",choosedCount === allCount);
                });
                //提交按钮单击事件
                $("#submitBtn").click(function () {
                    //获取选中的球类的复选框
                    $(":checkbox[name='items']:checked").each(function () {
                        alert(this.value);
                    })
                });
                //给全选/全不选 绑定单击事件
                $("#checkAllBox").click(function () {
                    //在事件的function函数中, 有一个this对象, 这个this对象是当前正在响应事件的dom对象
                    //alert(this.checked);
                    $(":checkbox[name='items']").prop("checked",this.checked);
                });
                //给全部球类绑定单击事件
                $(":checkbox[name='items']").click(function () {
                    var allCount = $(":checkbox[name='items']").length;
                    var choosedCount = $(":checkbox[name='items']:checked").length;
                    $("#checkAllBox").prop("checked",choosedCount === allCount);
                });
            });
        </script>
    </head>
    <body>
        你爱好的运动是? <input type="checkbox" id="checkAllBox" />全选/全不选
        <br/>
        <input type="checkbox" name="items" value="football" />足球
        <input type="checkbox" name="items" value="basketball" />篮球
        <input type="checkbox" name="items" value="badminton" />羽毛球
        <input type="checkbox" name="items" value="ping_pang" />乒乓球
        <br/>
        <button id="chooseAll">全选</button>&nbsp;<button id="chooseNone">全不选</button>&nbsp;<button id="chooseReverse">反选</button>
        <br/>
        <button type="submit" id="submitBtn">提交</button>
    </body>
    </html>
    

    六. Dom的增删改

    • 内部插入
      • append(content|fn)
      • appendTo(content)
        • a.appendTo(b) : 把a插入到b子元素末尾, 成为最后一个子元素
      • prepend(content|fn)
      • prependTo(content)
        • a.prependTo(b) : 把a插入到b所有子元素前面, 成为第一个子元素
    • 外部插入
      • after(content|fn)
      • before(content|fn)
      • insertAfter(content)
      • insertBefore(content)
    • 替换
      • replaceWith(content|fn)
      • replaceAll(selector)
    • 删除
      • empty()
      • remove([expr])

    6.1 从左边添加到右边练习

    • 将左边下拉框中元素单个添加或全部添加到右侧, 右侧同理
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            select {
                 100px;
                height: 140px;
            }
    
            div {
                 130px;
                float: left;
                text-align: center;
            }
        </style>
        <script type="text/javascript" src="../static/js/jquery-3.5.1.js"></script>
        <script type="text/javascript">
            //页面加载完成
            $(function () {
                //第一个按钮 选中添加到右边
                $("button:eq(0)").click(function () {
                    //左边选中的option.appendTo(右边的select)
                    $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
                });
                //第二个按钮 全部添加到右边
                $("button:eq(1)").click(function () {
                    //左边选中的option.appendTo(右边的select)
                    $("select:eq(0) option").appendTo($("select:eq(1)"));
                });
                //第三个按钮 选中添加到左边
                $("button:eq(2)").click(function () {
                    //左边选中的option.appendTo(右边的select)
                    $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
                });
                //第四个按钮 全部添加到左边
                $("button:eq(3)").click(function () {
                    //左边选中的option.appendTo(右边的select)
                    $("select:eq(1) option").appendTo($("select:eq(0)"));
                });
            })
        </script>
    </head>
    <body>
        <div id="left">
            <select name="sel01" multiple="multiple">
                <option value="opt01">选项1</option>
                <option value="opt02">选项2</option>
                <option value="opt03">选项3</option>
                <option value="opt04">选项4</option>
                <option value="opt05">选项5</option>
                <option value="opt06">选项6</option>
                <option value="opt07">选项7</option>
                <option value="opt08">选项8</option>
            </select>
            <button>选中添加到右边</button>
            <button>全部添加到右边</button>
        </div>
        <div id="right">
            <select name="sel02" multiple="multiple">
            </select>
            <button>选中添加到左边</button>
            <button>全部添加到左边</button>
        </div>
    </body>
    </html>
    

    6.2 动态的添加和删除表格记录

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../static/js/jquery-3.5.1.js"></script>
        <script type="text/javascript">
            $(function () {
                //创建一个用于复用的删除function事件
                var deleteFun = function(){
                    //在事件响应的function函数中, 有一个this对象, 这个this对象是当前正在响应事件的dom对象
                    //获取a标签的父元素的父元素tr标签
                    var $trObj = $(this).parent().parent();
                    //获取tr标签下的第一个td标签对象中的文本
                    var name = $trObj.find("td:first").text();
                    //confirm是js语言中提供的一个确认提示框函数,你传什么,它就提示什么
                    //当用户点击确定,返回true,点击取消,返回false
                    if (confirm("确定要删除" + name + "吗?")) {
                        $trObj.remove();
                    }
                    //return false;//可以阻止元素的默认行为
                    return false;
                };
    
    
                //给提交按钮绑定单击事件
                $("#addEmployee").click(function () {
                    //获取输入框中姓名,邮箱,工资的内容
                    var username = $("#username").val();
                    var email = $("#email").val();
                    var salary = $("#salary").val();
                    //创建一个行标签对象, 添加到显示数据的表格中
                    var $trObj = $("<tr>" +
                        "<td>" + username + "</td>" +
                        "<td>" + email + "</td>" +
                        "<td>" + salary + "</td>" +
                        "<td><a href="deleteEmp?id=001">Delete</a></td>" +
                        "</tr>");
                    //添加到显示数据的表格中
                    $trObj.appendTo($("#employeeTable"));
    
                    //给添加的行的a标签绑上事件
                    $trObj.find("a").click(deleteFun);
                });
                //给删除的a标签绑定单击事件
                $("a").click(deleteFun);
            });
        </script>
    </head>
    <body>
        <table id="employeeTable" border="1" >
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Salary</th>
                <th></th>
            </tr>
            <tr>
                <td>Tom</td>
                <td>tom@tom.com</td>
                <td>5000</td>
                <td><a href="deleteEmp?id=001">Delete</a></td>
            </tr>
            <tr>
                <td>Jack</td>
                <td>jack@jack.com</td>
                <td>7000</td>
                <td><a href="deleteEmp?id=002">Delete</a></td>
            </tr>
            <tr>
                <td>Lily</td>
                <td>lily@lily.com</td>
                <td>9000</td>
                <td><a href="deleteEmp?id=003">Delete</a></td>
            </tr>
        </table>
        <div>
            <p>添加新员工:</p>
            name: <input type="text" name="username" id="username"><br/>
            email: <input type="text" name="email" id="email"><br/>
            salary: <input type="text" name="salary" id="salary"><br/>
            <input type="submit" id="addEmployee" value="提交">
        </div>
    </body>
    </html>
    

    七. CSS样式操作

    • addClass() : 添加样式
    • removeClass() : 删除样式
    • toggleClass() : 有就删除,没有就添加样式
    • offset() : 获取和设置元素的坐标

    八. jQuery动画操作

    • 基本动画
      • show() : 将隐藏的元素显示
      • hide() : 将可见的元素隐藏
      • toggle() : 可见就隐藏, 不可见就显示
    • 淡入淡出动画
      • fadeIn() : 淡入,慢慢出现
      • fadeOut() : 淡出,慢慢消失
      • fadeTo()
      • fadeToggle()
    • 以上方法都可以添加参数
      1. 第一个参数是动画的执行时长, 以毫秒为单位
      2. 第二个参数是动画的回调函数(动画完成后自动调用的函数)

    8.1 展示精简/全部商品品牌

    <script type="text/javascript" src="../static/js/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //基本的初始状态
            $("li:gt(5):not(:last)").hide();
            //给功能的按钮绑定单击事件
            $("div div a").click(function () {
                //让某些品牌显示或者隐藏
                $("li:gt(5):not(:last)").toggle();
                //判断 品牌, 当前是否可见
                if ($("li:gt(5):not(:last)").is(":hidden")){
                    // 品牌隐藏的状态: 1 显示全部品牌 == 角标向下 showmore
                    $("div div a span").text("显示全部品牌");
                    $("div div").removeClass();
                    $("div div").addClass("showmore");
                    //去掉高亮
                    $("li:contains('索尼')").removeClass("promoted");
                }else {
                    // 品牌隐藏的状态: 2 显示精简品牌 == 角标向上 showless
                    $("div div a span").text("显示精简品牌");
                    $("div div").removeClass();
                    $("div div").addClass("showless");
                    //加高亮
                    $("li:contains('索尼')").addClass("promoted");
                }
    
                return false;
            });
        })
    </script>
    

    九. jQuery事件操作

    $(function(){});

    window.onload = function(){}

    的区别?

    它们分别在什么时候触发?

    1. jQuery的页面加载完成之后, 浏览器的内核解析完页面的标签创建好Dom对象, 之后就会马上执行
    2. 原生js的页面加载完成之后, 除了要等浏览器内核解析完标签创建好Dom对象, 还要等标签显示时需要的内容加载完成

    它们触发的顺序?

    1. jQuery页面加载完成后先执行
    2. 原生js的页面加载完成后后执行

    它们的执行次数?

    1. 原生的js页面加载完成之后, 只会执行最后一次的赋值函数
    2. jQuery的页面加载完成之后是会把注册的function函数顺序依次全部执行

    9.1 jQuery中其他的事件处理方法

    • click() : 它可以绑定事件,也可以触发事件
    • mouseover() : 鼠标移入事件
    • mouseout() : 鼠标移除事件
    • bind() : 可以给元素一次性绑定一个或多个事件
    • one() : 使用上和bind一样, 但是one()绑定的事件只会响应一次
    • unbind() : 跟bind方法相反的操作, 解除事件的绑定
    • live() : 也是用来绑定事件, 还可以用来绑定选择器匹配的所有元素的事件, 哪怕这个元素是后面动态创建出来的也有效

    9.2 事件的冒泡

    • 什么是事件的冒泡?
      • 父子元素同时监听同一个事件, 当触发子元素的事件时, 同一个事件也被传递到了父元素的事件里去响应
    • 如何阻止事件的冒泡?
      • 在事件函数体内,return false; 可以阻止事件的冒泡传递

    9.3 javascript事件对象

    • 事件对象,是封装有触发的事件信息的一个javascript对象
    • 我们重点关心的是怎么拿到这个javascript的事件对象,以及使用
    • 如何获取 javascript事件对象?
      • 在给元素绑定事件时, 在事件的function(event)参数列表中添加一个参数, 这个参数名, 我们习惯取名为event,这个event就是javascript传递事件处理函数的事件对象
    • 例如: 原生javascript获取事件对象
    <script type="text/javascript">
    	window.onload = function () {
            document.getElementById("test1").onclick = function (event) {
                console.log(event);
            }  
        };
    </script>
    
    • jQuery获取事件对象
    <script type="text/javascript">
        $(function () {
            $("test1").click(function (event) {
                console.log(event);
            }); 
        });
    </script>
    
    • 使用bind同时对多个事件绑定同一个函数,怎么获取当前操作是什么事件
    <script type="text/javascript">
        $("#test1").bind("mouseover mouseout",function (event) {
            if (event.type == "mouseover"){
                console.log("鼠标移入");
            } else if (event.type == "mouseout"){
                console.log("鼠标移出");
            }
        });
    </script>
    

    十. 注册练习

    <script type="text/javascript">
        //页面加载完成后
        $(function () {
            //1. 验证用户名: 必须由字母数字下划线组成,并且长度为5到12位
            //1.1 获取输入框中内容
            var username = $("#username").val();
            //1.2 创建正则表达式对象
            var upattern = /^w{5,12}$/;
            //1.3 使用test方法验证
            if (!upattern.test(username)) {
                //1.4 提示用户结果
                $("#usernameMsg").text("用户名不合法");
                return false;
            }else {
                $("#usernameMsg").text("");
            }
    
            //2. 验证密码: 必须由字母数字下划线组成,并且长度为5到12位
            //2.1 获取输入框中内容
            var password = $("#upassword").val();
            //2.2 创建正则表达式对象
            var ppattern = /^w{5,12}$/;
            //2.3 使用test方法验证
            if (!ppattern.test(password)) {
                //2.4 提示用户结果
                $("#passwordMsg").html("密码不合法");
                return false;
            }else {
                $("#passwordMsg").html("");
            }
            //3. 验证确认密码: 和密码相同
            //3.1获取确认密码内容
            var confirmPwd = $("#confirmPassword").val();
            //3.2和密码相比较
            if (confirmPwd != password) {
                //3.3提示用户结果
                $("#rePwdMsg").html("密码不一致");
                return false;
            }else {
                $("#rePwdMsg").html("");
            }
            //4. 邮箱验证
            //4.1 获取输入框中内容
            var email = $("#email").val();
            //4.2 创建正则表达式对象
            var epattern = /^([.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
            //4.3 使用test方法验证
            if (!epattern.test(email)) {
                //4.4 提示用户结果
                $("#emailMsg").html("邮箱不合法");
                return false;
            }else {
                $("#passwordMsg").html("");
            }
            //5. 验证码
            var code = $("#code").val();
            //去掉验证码前后空格
            code = $.trim(code);
            if (code == null || code == ""){
                $("#codeMsg").html("验证码不能为空");
            }else{
                $("#codeMsg").html("");
            }
        });
    </script>
    

    十一. AJAX

    • AJAX是一种浏览器通过js异步发起请求, 局部更新页面的技术

    11.1 jQuery中的AJAX请求

    • $.ajax方法
      • url : 表示请求的地址
      • type : 表示请求的类型GET或POST请求
      • data : 表示发送给服务器的数据
        • 两种格式1. name=value&name=value 2. {key:value}
      • success : 请求响应, 响应的回调函数
      • dataType : 响应的数据类型
        • 常用的数据类型有: text表示纯文本, xml表示xml数据,json表示json对象

    十二. i18n国际化

    • Locale对象
      • Locale表示不同的 时区,位置,语言
        • zh_CN : 中国,中文
        • en_US : 英文,美国
    • properties属性配置文件
      • 国际化配置文件命名规则
        • baseName_local.properties
        • 比如baseName是i18n
        • 中文的配置文件名时: i18n_zh_CN.properties
        • 英文的配置文件名时: i18n_en_US.properties
    • ResourceBundle.getBundle(): ResourceBundle类:
      • 根据给定的baseName和Locale读取相应的配置文件, 得到的文字信息:
        • ResourceBundle.getString(key);得到你想要的不同国家的语言信息

    12.1 国际化测试

    • i18n_zh_CN.properties
    username=用户名
    password=密码
    sex=性别
    age=年龄
    
    • i18n_en_US.properties
    username=username
    password=password
    sex=sex
    age=age
    
    • 测试
    import org.junit.Test;
    
    import java.util.Locale;
    import java.util.ResourceBundle;
    
    public class MyTest {
    
        @Test
        public void testLocale(){
            //获取系统默认的语言,国家信息
    //        Locale locale = Locale.getDefault();
    //        System.out.println(locale);//zh_CN
    
            //获取可用的语言,国家信息
    //        for (Locale availableLocale : Locale.getAvailableLocales()) {
    //            System.out.println(availableLocale);
    //        }
    
            //获取中文,中国的常量的Locale对象
            System.out.println(Locale.CHINA);
            //获取英文,美国的常量的Locale对象
            System.out.println(Locale.US);
        }
    
        @Test
        public void testI18n(){
            //得到我们需要的Locale对象
            //Locale locale = Locale.US;
            Locale locale = Locale.CHINA;
            //通过指定的baseName和Locale对象,读取相应的配置文件
            ResourceBundle bundle = ResourceBundle.getBundle("i18n", locale);
            System.out.println("username: " + bundle.getString("username"));
            System.out.println("password: " + bundle.getString("password"));
            System.out.println("sex: " + bundle.getString("sex"));
            System.out.println("age: " + bundle.getString("age"));
    
        }
    }
    
    

    12.2 页面国际化

    • 例如我们有一个页面是1i8n.jsp
    • 我们想要点击中英文按钮就能用不同的语言展示页面
    <body>
    <a href="i18n.jsp?country=cn">中文</a>|
    <a href="i18n.jsp?country=us">英文</a>  
    </body>
    
    //从请求头中获取locale信息(语言)
    Locale locale = null;
    String country = request.getParameter("country");
    if ("cn".equals(country)) {
    	local = Locale.CHINA;
    }else if ("us".equals(country)) {
    	locale = Locale.US;
    }else {
    	local = request.getLocale();
    }
    System.out.println(locale);
    //获取读取包(通过指定的baseName和Locale对象,读取相应的配置文件)
    ResourceBundle bundle = ResourceBundle.getBundle("i18n", locale);
    
    • 最后把页面文字展示的地方用bundle.getString("username")这样的方式替换掉

    12.3 使用JSTL标签库fmt实现国际化

    • 在jsp页面中导入fmt标签库
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    
    <body>
       
        <%--1.使用标签设置Locale信息--%>
        <fmt:setLocale value="${param.locale}"/>
        <%--2.使用标签设置baseName--%>
        <fmt:setBundle basename="i18n"/>   
        <%--3.使用标签输出国际化信息,把这行代码替换掉页面中想要显示的文字即可,注意key的值需要改变--%>
        <fmt:message key="username"/>
         
    <a href="i18n_fmt.jsp?locale=zh_CN">中文</a>|
    <a href="i18n_fmt.jsp?locale=en_US">英文</a>  
    </body>
    
    
  • 相关阅读:
    [野狐行网游研究][二期][8.21更新]
    Movidius的深度学习入门
    Linux下深度学习常用工具的安装
    Intel AI Cloud 使用
    【Effective Java读书笔记】创建和销毁对象(一):考虑使用静态工厂方法代替构造器
    策略模式
    Java 8 中常用的函数式接口
    MySQL权限管理(五)
    kickstart无人值守安装
    pymysql模块使用
  • 原文地址:https://www.cnblogs.com/MRASdoubleZ/p/14851343.html
Copyright © 2011-2022 走看看