day56---前端之jQuery框架三

1. jQuery文档操作

添加元素
- 外部添加(添加子标签)：
  - 指定标签前添加：
    - $(A).prepend(B)：把B插入到A的子标签最前面
    - $(A).prependTo(B)：把A插入到B的子标签最前面
  - 指定标签后添加：
    - $(A).append(B)：把B追加到A的子标签最后面
    - $(A).appendTo(B)：把A追加到B的子标签最后
- 内部添加(添加兄弟标签)：
  - 指定标签前添加：
    - $(A).before(B)：在A标签之前插入B标签
    - $(A).insertBefore(B)：把A标签插入到B标签之前
  - 指定标签后添加：
    - $(A).after(B)：在A标签之后插入B标签
    - $(A).insertAfter(B)：把A标签插入到B标签之后
替换元素
- $(A).replaceWith(B)：把A标签替换成B标签
- $(A).replaceAll(B)：把所有的B标签替换成A标签
删除元素
- remove()：删除指定标签，包括子标签
清空元素
- empty()：清空指定标签，只清空子标签，保留当前空标签
文档操作示例：

<!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>day56</title>
    </head>
    <body>
        <div id="number">
            <div id="i1">
                <div>111</div>
                <div>222</div>
                <div>333</div>
            </div>
        </div>
        <hr>
        <div class="letter">
            <div class="c1">
                <p>aaa</p>
                <p>bbb</p>
                <p>ccc</p>
            </div>
        </div>
        <script src="jquery-3.2.1.min.js"></script>
    </body>
</html>

var prependEle = document.createElement("div")
$(prependEle).text("111")
$("#i1").prepend($(prependEle))
$("#i1").html()
// <div>111</div><div>222</div>
//
var prependToEle = document.createElement("p")
$(prependToEle).text("aaa")
$(prependToEle).prependTo($(".c1"))
$(".c1").html()
// <p>aaa</p><p>bbb</p>
//
var appendEle = document.createElement("div")
$(appendEle).text("333")
$("#i1").append($(appendEle))
$("#i1").html()
// <div>000</div><div>111</div><div>222</div>
//
var appendToEle = document.createElement("p")
$(appendToEle).text("ccc")
$(appendToEle).appendTo($(".c1"))
$(".c1").html()
// <p>aaa</p><p>bbb</p><p>ccc</p>
//
var beforeEle = document.createElement("div")
$(beforeEle).text("number:")
$("#i1").before($(beforeEle))
$("#i1").parent().html()
// <div>number:</div><div id="i1"><div>111</div><div>222</div><div>333</div></div>
//
var insertBeforeEle = document.createElement("div")
$(insertBeforeEle).text("letter:")
$(insertBeforeEle).insertBefore($(".c1"))
$(".c1").parent().html()
// <div>letter:</div><div class="c1"><p>aaa</p><p>bbb</p><p>ccc</p></div>
//
var afterEle = document.createElement("div")
$(afterEle).text("123")
$("#i1").after($(afterEle))
$("#i1").parent().html()
// <div>number:</div><div id="i1"><div>111</div><div>222</div><div>333</div></div><div>123</div>
//
var insertAfterEle = document.createElement("div")
$(insertAfterEle).text("abc")
$(insertAfterEle).insertAfter($(".c1"))
$(".c1").parent().html()
// <div>letter:</div><div class="c1"><p>aaa</p><p>bbb</p><p>ccc</p></div><div>abc</div>
//
var replaceWithEle = document.createElement("span")
$(replaceWithEle).text("span-123")
$("#i1").replaceWith($(replaceWithEle))
$("#number").children().html()
// <span>span-123</span>
//
var replaceAllEle = document.createElement("span")
$(replaceAllEle).text("span-abc")
$(replaceAllEle).replaceAll($(".c1"))
// <span>span-abc</span>
//
$(".c1").remove()
// [div.c1, prevObject: r.fn.init(1)]
$(".c1").html()
// undefined
//
$("#i1").empty()
// [div#i1]
$("#i1").html()
// ""

克隆元素
- clone()：克隆标签，但是不克隆事件
- clone(true)：标签和事件都复制
克隆元素示例：

<!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>day56</title>
        <style>
            #cp1 {
                font-size: 20px;
                color: #FFFFFF;
                background-color: deeppink;
                width: 200px;
                height: 50px;
                text-align: center;
            }
            #cp2 {
                font-size: 20px;
                color: #FFFFFF;
                background-color: darkgreen;
                width: 200px;
                height: 50px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div>
            <input type="button" value="click1" id="cp1">
        </div>
        <hr>
        <div>
            <input type="button" value="click2" id="cp2">
        </div>
        <script src="jquery-3.2.1.min.js"></script>
        <script>
            // 克隆click1按钮，只克隆标签，不克隆事件
            $("#cp1").on("click",function () {
                $(this).clone().insertAfter($(this));
                $(this).clone().insertAfter($(this));
                $(this).clone().insertAfter($(this));
                $(this).clone().insertAfter($(this));
                $(this).clone().insertAfter($(this));
            });
            // 克隆click2按钮，即克隆标签，也克隆事件
            $("#cp2").on("click",function () {
                $(this).clone(true).insertAfter($(this));
                $(this).clone(true).insertAfter($(this));
                $(this).clone(true).insertAfter($(this));
                $(this).clone(true).insertAfter($(this));
                $(this).clone(true).insertAfter($(this));
            })
        </script>
    </body>
</html>

2. jQuery事件

常用事件

鼠标事件：

.on(“click”,function(){…})：鼠标点击事件
.on(“dblclick”,function(){…})：鼠标双击事件
.on(“mouseenter”,function(){…})：鼠标指针穿过的事件
.on(“mouseleave”,function(){…})：鼠标指针离开的事件
.on(“mousedown”,function(){…})：按下鼠标按钮的事件
.on(“mouseup”,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>day56</title>
        <style>
            #i1 {
                background-color: deeppink;
                width: 300px;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div id="i1"></div>
        <script src="jquery-3.2.1.min.js"></script>
        <script>
            function yy() {
                var $i1Ele = $("#i1");
                $i1Ele.on("click", function(){
                    $i1Ele.css("background-color","green");
                });
                $i1Ele.on("dblclick", function(){
                    $i1Ele.css("background-color","blue");
                });
                $i1Ele.on("mouseenter",function () {
                    $i1Ele.css("background-color","yellow");
                });
                $i1Ele.on("mouseleave",function () {
                    $i1Ele.css("background-color","red");
                });
                $i1Ele.on("mousedown",function () {
                    $i1Ele.css("background-color","grey");
                });
                $i1Ele.on("mouseup",function () {
                    $i1Ele.css("background-color","black");
                })
            }
            $(function () {
                yy();
            })
        </script>
    </body>
</html>

键盘事件：

.on(“keydown”,function(){…})：按下键盘按键的事件
.on(“keyup”,function(){…})：松开键盘按键的事件
.on(“keypress”,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>day56</title>
    </head>
    <body>
        <div><input type="text" id="i1"></div>
        <script src="jquery-3.2.1.min.js"></script>
        <script>
            function yy() {
                var $i1Ele = $("#i1");
                $i1Ele.on("keydown",function () {
                    $i1Ele.css("background-color", "red")
                });
                $i1Ele.on("keyup",function () {
                    $i1Ele.css("background-color", "yellow")
                });
                $i1Ele.on("keypress",function () {
                    $i1Ele.css("background-color", "green")
                })
            }
            $(function () {
                yy();
            })
        </script>
    </body>
</html>

表单事件：

.on(“focus”,function(){…})：获取焦点的事件
.on(“blur”,function(){…})：失去焦点的事件
.on(“change”,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>day56</title>
        <style>
            .set {
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div><input type="text" id="i1"></div>
        <div id="i2">
            <input type="checkbox" class="c1">
            <input type="checkbox" class="c1">
            <input type="checkbox" class="c1">
            <input type="checkbox" class="c1">
            <input type="checkbox" class="c1">
            <input type="checkbox" class="c1">
        </div>
        <div id="i3">
            <input type="radio" class="c2" name="radio">
            <input type="radio" class="c2" name="radio">
        </div>
        <div id="i4">
            <select id="s1">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>
        <br>
        <div class="set"></div>
        <script src="jquery-3.2.1.min.js"></script>
        <script>
            function yy() {
                var $i1Ele = $("#i1");
                var $setEle = $(".set");
                $i1Ele.on("focus",function () {
                    $setEle.css("background-color", "yellow")
                });
                $i1Ele.on("blur",function () {
                    $setEle.css("background-color", "blue")
                });
                $("#i2").on("change",function () {
                    $setEle.css("background-color", "green")
                });
                $("#i3").on("change",function () {
                    $setEle.css("background-color", "red")
                });
                $("#i4").on("change",function () {
                    $setEle.css("background-color", "pink")
                })
            }
            $(function () {
                yy();
            })
        </script>
    </body>
</html>

绑定事件

语法格式：.on(events [,selector],function(…){})
语法说明：
- events：事件
- selector：选择器(可选项)
- function：事件触发的函数

移除事件

语法格式：.off(events [,selector],function(…){})
语法说明：
- events：事件
- selector：选择器(可选项)
- function：事件触发的函数

终止事件触发的后续动作

说明：事件触发默认返回为true，会一直触发动作(return true)
语法格式：return false
常见应用：阻止表单提交等

页面载入

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

两种写法：

标准方式：

$(document).ready(function(){
    // 代码块
})

简写方式：

$(function(){
    // 代码块
})

说明：html文件会从上到下加载，所以script标签和代码写在body的最后面，即使写了页面载入的方式也建议写最后面，防止逻辑代码较多的情况下造成页面长时间白屏

事件委托

描述：事件委托是通过事件冒泡的原理，利用父标签去触发子标签的事件。当指定的标签不存在时，会往子层级、孙子层级等查找，直到找到为止。常用于给未加载事件的标签绑定事件
语法格式：$(“选择器”).on(事件,子孙后代选择器,function(){事件触发的函数})

事件切换

描述：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态
语法格式：.hover(function(){…})：鼠标指针停止位置的事件

3. jQuery动画效果

显示与隐藏

show([s],[e],[f])：显示元素
hide([s],[e],[f])：隐藏元素
toggle([s],[e],[f])：切换元素
示例：

<!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>day56</title>
        <style>
            #i1 {
                font-size: 30px;
                color: #FFFFFF;
                background-color: deeppink;
                width: 200px;
                height: 200px;
                text-align: center;
                line-height: 200px;
            }
            #show {
                position: fixed;
                top: 220px;
                left: 20px;
            }
            #hide {
                position: fixed;
                top: 220px;
                left: 90px;
            }
            #toggle {
                position: fixed;
                top: 220px;
                left: 160px;
            }
        </style>
    </head>
    <body>
        <div id="i1">显示/隐藏</div>
        <br>
        <div>
            <input type="button" value="显示" id="show">
            <input type="button" value="隐藏" id="hide">
            <input type="button" value="切换" id="toggle">
        </div>
        <script src="jquery-3.2.1.min.js"></script>
        <script>
            function yy() {
                var $i1Ele = $("#i1");
                $("#show").on("click", function(){
                    $i1Ele.show("fast")
                });
                $("#hide").on("click", function(){
                    $i1Ele.hide("slow")
                });
                $("#toggle").on("click", function(){
                    $i1Ele.toggle(3000)
                })
            }
            $(function () {
                yy();
            })
        </script>
    </body>
</html>

滑动

slideDown([s],[e],[f])：向下滑动元素
slideUp([s],[e],[f])：向上滑动元素
slideToggle([s],[e],[f])：切换滑动元素
示例：

<!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>day56</title>
        <style>
            #i1 {
                font-size: 50px;
                color: #FFFFFF;
                background-color: deeppink;
                width: 300px;
                height: 300px;
                text-align: center;
                line-height: 300px;
            }
            #down {
                position: fixed;
                top: 320px;
                left: 20px;
            }
            #up {
                position: fixed;
                top: 320px;
                left: 110px;
            }
            #toggle {
                position: fixed;
                top: 320px;
                left: 200px;
            }
        </style>
    </head>
    <body>
        <div id="i1">上下滑动</div>
        <br>
        <div>
            <input type="button" value="向下滑动" id="down">
            <input type="button" value="向上滑动" id="up">
            <input type="button" value="上下切换滑动" id="toggle">
        </div>
        <script src="jquery-3.2.1.min.js"></script>
        <script>
            function yy() {
                var $i1Ele = $("#i1");
                $("#down").on("click", function(){
                    $i1Ele.slideDown("fast")
                });
                $("#up").on("click", function(){
                    $i1Ele.slideUp("slow")
                });
                $("#toggle").on("click", function(){
                    $i1Ele.slideToggle(3000)
                })
            }
            $(function () {
                yy();
            })
        </script>
    </body>
</html>

淡入淡出

fadeIn([s],[e],[f])：淡入已隐藏的元素
fadeOut([s],[e],[f])：淡出可见的元素
fadeToggle([s],[e],[f])：切换淡入淡出的元素
fadeTo([s],o,[e],[f])：渐变为指定的不透明度
示例：

<!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>day56</title>
        <style>
            #i1 {
                font-size: 50px;
                color: #FFFFFF;
                background-color: deeppink;
                width: 300px;
                height: 300px;
                text-align: center;
                line-height: 300px;
            }
            #in {
                position: fixed;
                top: 320px;
                left: 10px;
            }
            #out {
                position: fixed;
                top: 320px;
                left: 85px;
            }
            #toggle {
                position: fixed;
                top: 320px;
                left: 160px;
            }
            #to {
                position: fixed;
                top: 320px;
                left: 260px;
            }
        </style>
    </head>
    <body>
        <div id="i1">淡入淡出</div>
        <br>
        <div>
            <input type="button" value="淡入效果" id="in">
            <input type="button" value="淡出效果" id="out">
            <input type="button" value="切换淡入淡出" id="toggle">
            <input type="button" value="透明度" id="to">
        </div>
        <script src="jquery-3.2.1.min.js"></script>
        <script>
            function yy() {
                var $i1Ele = $("#i1");
                $("#in").on("click", function(){
                    $i1Ele.fadeIn("fast")
                });
                $("#out").on("click", function(){
                    $i1Ele.fadeOut("slow")
                });
                $("#toggle").on("click", function(){
                    $i1Ele.fadeToggle(3000)
                })
                $("#to").on("click", function(){
                    $i1Ele.fadeTo(1000,0.2)
                })
            }
            $(function () {
                yy();
            })
        </script>
    </body>
</html>

自定义动画
- animate(p,[s],[e],[f]):
参数说明：
- p(params)：指定自定义动画的参数，包含作为动画属性和终值的样式属性和及其值的集合
- o(opacity)：设置透明度，取值范围是0~1之间的数字
- s(speed)：设置动画效果的速度，可以使用三个预定速度，也可以手动设置毫秒值
  - slow：慢速
  - normal：普通
  - fast：快速
- e(easing)：指定切换效果，默认是”swing”，可用参数”linear”
- f(function)：动画完成时执行的函数，每个元素都会执行一次

4. jQuery的each循环

方式一：jQuery.each(collection,function(indexInArray,valueOfElement){…})
- 描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性来迭代数字索引，从0到length – 1。其他对象通过其属性名进行迭代
- 说明：
  - collection：数组对象
  - indexInArray：数组元素的索引
  - valueOfElement：数组元素值
方式二：.each(function(index,Element){…})
- 描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
- 说明：
  - index：循环对象的元素索引
  - Element：循环对象的元素值
描述：用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字this总是指向这个元素
注意：jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 – 被称为隐式迭代的过程
终止each循环：return false;
跳出本地循环，进行下一次循环：return;
return在each中的用法总结：
- return(或return任意一个非false的值)：只跳出本次循环，类似于python中的continue
- return false(return false是js中规定死的一种语法)：跳出整个循环(终止循环)，类似于python中的break
示例：

var arr = [11,22,33,44,55,66];
console.log(arr)
// (6) [11, 22, 33, 44, 55, 66]
jQuery.each(arr, function(i,v){
	    console.log(i,v);
})
// 0 11
// 1 22
// 2 33
// 3 44
// 4 55
// 5 66
// (6) [11, 22, 33, 44, 55, 66]
$(arr).each(function(i,v){
	    console.log(i,v);
})
// 0 11
// 1 22
// 2 33
// 3 44
// 4 55
// 5 66
// (6) [11, 22, 33, 44, 55, 66]
$(arr).each(function(i,v){
    	if (i === 3){
    		return;
    	}
    	console.log(i,v);
})
// 0 11
// 1 22
// 2 33
// 4 55
// 5 66
// (6) [11, 22, 33, 44, 55, 66]
//
$(arr).each(function(i,v){
    	if (i === 3){
    		return false;
    	}
    	console.log(i,v);
})
// 0 11
// 1 22
// 2 33
// (6) [11, 22, 33, 44, 55, 66]

本文链接：https://www.cnblogs.com/yange/articles/8195516.html

day56---前端之jQuery框架三

1. jQuery文档操作

添加元素

外部添加(添加子标签)：

指定标签前添加：

$(A).prepend(B)：把B插入到A的子标签最前面

$(A).prependTo(B)：把A插入到B的子标签最前面

指定标签后添加：

$(A).append(B)：把B追加到A的子标签最后面

$(A).appendTo(B)：把A追加到B的子标签最后

内部添加(添加兄弟标签)：

指定标签前添加：

$(A).before(B)：在A标签之前插入B标签

$(A).insertBefore(B)：把A标签插入到B标签之前

指定标签后添加：

$(A).after(B)：在A标签之后插入B标签

$(A).insertAfter(B)：把A标签插入到B标签之后

替换元素

$(A).replaceWith(B)：把A标签替换成B标签

$(A).replaceAll(B)：把所有的B标签替换成A标签

删除元素

remove()：删除指定标签，包括子标签

清空元素

empty()：清空指定标签，只清空子标签，保留当前空标签

文档操作示例：

克隆元素

clone()：克隆标签，但是不克隆事件

clone(true)：标签和事件都复制

克隆元素示例：

2. jQuery事件

常用事件

鼠标事件：

.on(“click”,function(){…})：鼠标点击事件

.on(“dblclick”,function(){…})：鼠标双击事件

.on(“mouseenter”,function(){…})：鼠标指针穿过的事件

.on(“mouseleave”,function(){…})：鼠标指针离开的事件

.on(“mousedown”,function(){…})：按下鼠标按钮的事件

.on(“mouseup”,function(){…})：松开鼠标按钮的事件

示例：

键盘事件：

.on(“keydown”,function(){…})：按下键盘按键的事件

.on(“keyup”,function(){…})：松开键盘按键的事件

.on(“keypress”,function(){…})：键盘按键被按下并被释放的事件

示例：

表单事件：

.on(“focus”,function(){…})：获取焦点的事件

.on(“blur”,function(){…})：失去焦点的事件

.on(“change”,function(){…})：元素值被修改的事件

示例：

绑定事件

语法格式：.on(events [,selector],function(…){})

语法说明：

events：事件

selector：选择器(可选项)

function：事件触发的函数

移除事件

语法格式：.off(events [,selector],function(…){})

语法说明：

events：事件

selector：选择器(可选项)

function：事件触发的函数

终止事件触发的后续动作

说明：事件触发默认返回为true，会一直触发动作(return true)

语法格式：return false

常见应用：阻止表单提交等

页面载入

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

两种写法：

标准方式：

简写方式：

说明：html文件会从上到下加载，所以script标签和代码写在body的最后面，即使写了页面载入的方式也建议写最后面，防止逻辑代码较多的情况下造成页面长时间白屏

事件委托

描述：事件委托是通过事件冒泡的原理，利用父标签去触发子标签的事件。当指定的标签不存在时，会往子层级、孙子层级等查找，直到找到为止。常用于给未加载事件的标签绑定事件

语法格式：$(“选择器”).on(事件,子孙后代选择器,function(){事件触发的函数})

事件切换

描述：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态

语法格式：.hover(function(){…})：鼠标指针停止位置的事件

3. jQuery动画效果

显示与隐藏

show([s],[e],[f])：显示元素

e(easing)：指定切换效果，默认是”swing”，可用参数”linear”