前端开发工程师-第2章 JQuery 进阶技术

前端开发工程师-第1章 JQuery基础语法

第一阶段（A）（前端） 20天 120学时

第2章 JQuery 进阶技术（6）

[学习课时] 本章共需要学习 6 课时

[目的要求]

掌握Jquery增删元素的方法
掌握Jquery获取元素尺寸的方法
掌握Jquery显示特效
掌握Jquery常用方法

[教学内容]

jQuery 增删元素

增加元素

append(arg1,arg2) - 在被选元素的结尾插入一个或者多个子元素
prepend(arg1,arg2) - 在被选元素的开头插入一个或者多个子元素
after(arg1,arg2) - 在被选元素之后插入一个或者多个内容
before(arg1,arg2) - 在被选元素之前插入一个或者多个内容

$("p").append("追加文本");

$("div").append("<h1>追加文本</h1>");

$("p").prepend("在开头追加文本");

$("div").prepend("<h1>在开头追加文本</h1>");

$("img").before("在img前面添加文本");

$("img").before("<h1>在img前面添加文本</h1>");

$("img").after("在img后面添加文本");

$("img").after("<h1>在img后面添加文本</h1>");

删除元素

remove() - 删除被选元素自身（及其子元素）

empty() - 从被选元素中删除子元素，把子元素清空

$("#div1").remove(selector);

$("#div1").empty();

创建元素

function appendText() {

var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本

var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本

var txt3=document.createElement("p");

txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM

$("body").append(txt1,txt2,txt3); // 追加新元素

}

实例：demo01

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            html,

            body {

                padding: 0;

                margin: 0;

                height: 100%;

            }



            #header {

                height: 50%;

                background-color: rgba(255, 0, 0, 0.1);

                overflow: hidden;

            }



            #footer {

                height: 50%;

                background-color: rgba(0, 255, 0, 0.1);

                overflow: hidden;

            }

            ul{

                list-style: none;

            }

            li{

                border: 1px solid rgba(10,10,10,0.05);

                padding: 15px 20px;

                float: left;

                margin: 10px;

                cursor: pointer;

            }

        </style>

        <script src="../../jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            function top_bottom(t){

                $('#footer ul').append('<li onclick="bottom_top(this)">'+$(t).text()+'</li>');

                $(t).remove();

            }

            function bottom_top(t){

                $('#header ul').append('<li onclick="top_bottom(this)">'+$(t).text()+'</li>');

                $(t).remove();

            }

        </script>

    </head>

    <body>

        <div id="header">

            <ul>

                <li onclick="top_bottom(this)">功能1</li>

                <li onclick="top_bottom(this)">功能2</li>

                <li onclick="top_bottom(this)">功能3</li>

                <li onclick="top_bottom(this)">功能4</li>

                <li onclick="top_bottom(this)">功能5</li>

            </ul>

        </div>

        <div id="footer">

            <ul>

                <li onclick="bottom_top(this)">功能6</li>

                <li onclick="bottom_top(this)">功能7</li>

                <li onclick="bottom_top(this)">功能8</li>

                <li onclick="bottom_top(this)">功能9</li>

                <li onclick="bottom_top(this)">功能10</li>

            </ul>

        </div>

    </body>

</html>

效果图

jQuery 尺寸

处理尺寸的重要方法：

width() - 设置或返回元素的宽度（不包括内边距、边框或外边距）
height() - 设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth() - 返回元素的宽度（包括内边距）
innerHeight() - 返回元素的高度（包括内边距）
outerWidth() - 返回元素的宽度（包括内边距和边框）
outerHeight() - 返回元素的高度（包括内边距和边框）
offset() - left:元素距离左边的距离；top:元素距离顶部的距离

jQuery 效果

显示隐藏

可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

- hide(time,function) - 隐藏元素
- show(time,function) - 显示元素
- toggle(time,function) - 显示或者
- stop() - 停止

语法:

$(selector).hide(time,function);
$(selector).show(time,function);

$(selector).toggle(time,callback);

实例

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

淡入淡出

fade可以实现元素的淡入淡出效果。

fadeIn(time,function) - 淡入效果
fadeOut(time,function) - 淡出效果
fadeToggle(time,function) - 淡入或者淡出
- fadeTo(time, opacity ,function) - 渐变到指定透明度
stop() - 停止

语法：

$(selector).fadeIn(time, function);

$(selector).fadeOut(time, function);

$(selector).fadeToggle(time, function);

$(selector).fadeTo(time,opacity, function);

滑动

滑动方法：

slideDown() - 从上往下滑动
slideUp() - 从下往上滑动
slideToggle() - 点击向下出现，再点向上消失
stop() - 停止

$(selector).slideDown(time, function);

$(selector).slideUp(time, function);

$(selector).slideToggle(time, function);

动画

animate() 方法用于创建自定义动画。stop() - 停止

语法：

$(selector).animate({params}, time, function);

案例：demo02

<!DOCTYPE html>

<html>

         <head>

                   <meta charset="UTF-8">

                   <title></title>

                   <style type="text/css">

                            div {

                                     width: 200px;

                                     height: 200px;

                                     margin: auto;

                                     background-color: red;

                            }

                            button{

                                     display: block;

                                     width: 100px;

                                     margin: auto;

                            }

                   </style>

                   <script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

         </head>

         <body>

                   <button>开始</button>

                   <div></div>

         </body>

         <script type="text/javascript">

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

                            $("div").animate({

                                     left: '250px',

                                     opacity: '0.5',

                                     height: '+=15px',

                                     width: 'toggle'

                            });

                   });

         </script>

</html>

效果图

其他

toArray() 方法

元素集合转换为数组

x=$("li").toArray()

for (i=0;i<x.length;i++){

alert(x[i].innerHTML);
}

index() 方法

获取元素集合中选定元素的下标

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

alert($(this).index());

});

get(index) 方法

获取元素集合中选定元素节点（包括键值对）

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

x=$("p").get(0);

$("div").text(x.nodeName + ": " + x.innerHTML);

});

each() 方法

each() 方法为每个匹配元素规定要运行的函数

$(selector).each(function(index,element))

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

$("li").each(function(I,e){

alert($(this).text())

});

});

serialize() 方法

serialize() 方法通过序列化表单值创建 URL 编码文本字符串。

您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。

序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

语法:

$(selector).serialize()

serializeArray() 方法通过序列化表单值来创建对象（name 和 value）的数组。

您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。

语法:

$(selector).serializeArray()

on()：添加事件

$(selector).on(event,childSelector,data,function)

$(selector).on(map)

参数	描述
event	必需。规定一个或多个事件。由空格分隔多个事件值，也可以是数组。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身）。
data	可选。规定传递到函数的额外数据。在function参数里面接受
function	可选。规定当事件发生时运行的函数。

案例：demo03

<!DOCTYPE html>

<html>

         <head>

                   <meta charset="UTF-8">

                   <title></title>

                   <style type="text/css">

                            .red{

                                     color: red;

                            }

                   </style>

                   <script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

         </head>

         <body>

                   <h2>二级标题</h2>

                   <h3>三级标题</h3>

                   <h4>四级标题<button>点击</button></h4>

         </body>

         <script type="text/javascript">

                   //文档加载完毕事件

                   $(document).ready(function() {

                            //绑定多个事件

                            $("h2").on("mouseover mouseout", function() {

                                     $(this).toggleClass("red");

                            });

                            //使用对象添加多个事件

                            $("h3").on({

                                     mouseover: function() {

                                               $(this).css("background-color", "#E9E9E4");

                                     },

                                     mouseout: function() {

                                               $(this).css("background-color", "#FFFFFF");

                                     }

                            });

                            //向函数传递参数

                            $("h4").on("click", "button", {

                                     msg: "你刚点击了!"

                            }, function(m) {

                                     $("button").text(m.data.msg);

                            })

                   });

         </script>

</html>

效果图

off()：取消事件

$(selector).off(event, childSelector, function(eventObj))

$(selector).off(map)

参数	描述
event	必需。规定一个或多个事件。由空格分隔多个事件值，也可以是数组。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身）。
function(eventObj)	可选。规定当事件发生时运行的函数。

案例：demo04

<!DOCTYPE html>

<html>

         <head>

                   <meta charset="UTF-8">

                   <title></title>

                   <style type="text/css">

                            .red {

                                     color: red;

                            }

                   </style>

                   <script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

         </head>

         <body>

                   <h2>二级标题</h2>

                   <h3>三级标题</h3>

                   <h4><button>点击取消上面的事件</button></h4>

         </body>

         <script type="text/javascript">

                   //文档加载完毕事件

                   $(document).ready(function() {

                            $("body").on("click", "h2", function() {

                                     $(this).animate({

                                               fontSize: "+=3px"

                                     });

                            });

                            $("body").on("click", "h3", function() {

                                     $(this).animate({

                                               letterSpacing: "+=2px"

                                     });

                            });

                            $("body").on("mouseover", "h3", function() {

                                     $(this).animate({

                                               fontSize: "+=3px"

                                     });

                            });

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

                                     $("body").off("click mouseover", "h3");

                            });

                   });

         </script>

</html>

效果图

one()：执行一次事件

$(selector).one(event,data,function)

参数	描述
event	必需。规定一个或多个事件。由空格分隔多个事件值，也可以是数组。
data	可选。规定传递到函数的额外数据。在function参数里面接受
function	可选。规定当事件发生时运行的函数。

案例：demo05

<!DOCTYPE html>

<html>

         <head>

                   <meta charset="UTF-8">

                   <title></title>

                   <style type="text/css">

                            .red {

                                     color: red;

                            }

                   </style>

                   <script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

         </head>

         <body>

                   <h2>二级标题</h2>

         </body>

         <script type="text/javascript">

                   //文档加载完毕事件

                   $(document).ready(function() {

                            $("h2").one("click", {

                                     msg: "你刚点击了!"

                            }, function(m) {

                                     $(this).animate({

                                               fontSize: "+=6px"

                                     });

                                     $(this).text(m.data.msg);

                            });

                   });

         </script>

</html>

效果图

toggle() 方法

toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

该方法也可用于切换被选元素的 hide() 与 show() 方法。

语法

$(selector).toggle(function1(),function2(),functionN(),...)

$("p").toggle(

    function() {

        $("body").css("background-color", "green");

    },

    function() {

        $("body").css("background-color", "red");

    },

    function() {

        $("body").css("background-color", "yellow");

    }

);

contextmenu()：右键单机事件

案例：demo06

<!DOCTYPE html>

<html>

         <head>

                   <meta charset="UTF-8">

                   <title></title>

                   <script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

                   <style type="text/css">

                            div{

                                     background-color: red;

                                     height: 100px;

                            }

                   </style>

         </head>

         <body>

                   <div></div>

         </body>

         <script type="text/javascript">

                   //文档加载完毕事件

                   $(function() {

                            $("div").contextmenu(function() {

                                     event.preventDefault();

                                     $("div").text("处理程序.contextmenu()被调用。并且阻止原本的右键菜单弹出");

                            });

                   })

         </script>

</html>

效果图

[作业实验]

实现轮播图

前端开发工程师-第3章 JQuery AJAX