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-3.5.1.js(版本可自己选择)
- jquery下载地址: https://www.jq22.com/jquery-info122
使用
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对象

通过getElementById()查询出来的标签对象是DOM对象
通过getElementByName()查询出来的标签对象是DOM对象
通过getElementByTagName()查询出来的标签对象是DOM对象
通过createElement()创建的对象是DOM对象

Dom对象alert出来的效果是: [object HTML标签名Element]

3.2 jQuery对象

通过jQuery提供的API创建的对象, 是jQuery对象
通过jQuery包装的Dom对象, 是jQuery对象
通过jQuery提供的API查询到的对象, 是jQuery对象

jQuery对象alert出来的效果是: [object Object]
jQuery对象的本质是什么?
- jQuery对象是dom对象数组+jQuery提供的一系列功能函数
jQuery对象和Dom对象的使用区别
- jQuery对象和Dom对象互相不能使用对方的属性和方法

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

3.3.1 Dom对象转化为jQuery对象[重点]

先有Dom对象
$(Dom对象) 就可以转换成为jQuery对象

3.3.2 jQuery对象转为Dom对象[重点]

先有jQuery对象
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 {

            width: 100px;

            height: 140px;

        }

        div {

            width: 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(){}

的区别?

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

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

它们触发的顺序?

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

它们的执行次数?

原生的js页面加载完成之后, 只会执行最后一次的赋值函数
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>

2_jQuery的更多相关文章

随机推荐

SpringBoot接口 - 如何生成接口文档之非侵入方式（通过注释生成）Smart-Doc？
通过Swagger系列可以快速生成API文档,但是这种API文档生成是需要在接口上添加注解等,这表明这是一种侵入式方式: 那么有没有非侵入式方式呢, 比如通过注释生成文档? 本文主要介绍非侵入式的方式 ...
一张图进阶 RocketMQ - 消息存储
前言三此君看了好几本书,看了很多遍源码整理的一张图进阶 RocketMQ 图片,关于 RocketMQ 你只需要记住这张图!觉得不错的话,记得点赞关注哦. [重要]视频在 B 站同步更新,欢迎围观 ...
「一本通 1.4 例 2」[USACO3.2]魔板 Magic Squares
[USACO3.2]魔板 Magic Squares 题目背景在成功地发明了魔方之后,鲁比克先生发明了它的二维版本,称作魔板.这是一张有8个大小相同的格子的魔板: 1 2 3 4 8 7 6 5 题 ...
基于CentOS的IB网卡驱动安装
一.准备步骤 1.查看centos版本 cat /etc/issue或者cat /etc/redhat-release 2.查看linux版本 cat /proc/version或uname -a或 ...
rsync 文件备份
# rsync # 实现文件的备份. # 备份位置可以是当前主机,也可以是远程主机. # rsync实现了完全备份和增量备份 # 可以做到:1.将本地主机的文件复制到另一个位置(本地.远程). # 2 ...
编码GBK的不可映射字符，最新版sublime
最近开始学java了,跟着老师写一个hello world,刚执行javac就报错:编码GBK的不可映射字符然后去网上找了一堆,总结来说的就是编码不对,最新版的sublime只要设置utf-8保存即 ...
搞定面试官 - MySQL 中你知道如何计算一个索引的长度嘛？
大家好,我是程序员啊粥. 今天给大家分享一个我遇到过的比较少见的面试题,那就是 MySQL 中如何计算一个索引的长度. 说实话,我第一次遇到这个问题的时候想当然的以为索引长度就是我们建表时定义的字段长 ...
python包合集-shutil
一.简介 shutil是 python 中的高级文件操作模块,与os模块形成互补的关系,os主要提供了文件或文件夹的新建.删除.查看等方法,还提供了对文件以及目录的路径操作.shutil模块提供了移动 ...
JavaScript 异步编程（二）：Promise
PromiseState Promise 有一个 [[PromiseState]] 属性,表示当前的状态,状态有 pending 和 fulfill 以及 reject. 从第一个 Promise 开 ...
mybatisplus-Service CRUD 接口
通用 Service CRUD 封装IService (opens new window)接口,进一步封装 CRUD 采用 get 查询单行 remove 删除 list 查询集合 page 分页前 ...

2_jQuery

一. jQuery介绍

1.1 什么是jQuery

1.2 jQuery核心思想

1.3 jQuery流行程度

1.4 jQuery优点

1.5 下载和使用

二. jQuery的核心函数

三. jQuery对象和Dom对象区分

3.1 DOM对象

3.2 jQuery对象

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

3.3.1 Dom对象转化为jQuery对象[重点]

3.3.2 jQuery对象转为Dom对象[重点]

四. jQuery选择器[重点]

4.1 基本选择器[重点]

4.2 层级选择器[重点]

4.3 过滤选择器[重点]

4.3.1 基本过滤器

4.3.2 内容过滤器

4.3.3 属性过滤器

4.3.4 表单过滤器

4.3.5 表单对象属性

4.3.6 元素筛选

五. jQuery属性操作

5.1 jQuery属性操作

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

六. Dom的增删改

6.1 从左边添加到右边练习

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

七. CSS样式操作

八. jQuery动画操作

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

九. jQuery事件操作

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

9.2 事件的冒泡

9.3 javascript事件对象

十. 注册练习

十一. AJAX

11.1 jQuery中的AJAX请求

十二. i18n国际化

12.1 国际化测试

12.2 页面国际化

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

2_jQuery的更多相关文章

随机推荐

热门专题