前端学习C

最新推荐文章于 2024-11-12 11:19:19 发布

GanZzaz

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量240

点赞数

分类专栏：前端文章标签：前端学习 jquery

本文链接：https://blog.csdn.net/GanZzaz/article/details/126368165

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一:jQuery延续
1）层级
1、Child selector
(“parent > child”)子元素选择器
描述∶选择所有指定“parent”元素中指定的"child"的直接子元素。
语法:jQuery( “parent > child” )
parent任何有效的选择器。
child:用来筛选子元素的选择器。

<body>
    <ul class="topnav">
        <li>li1</li>
        <li>li2
            <ul>
                <li>next l1</li>
                <li>next l2</li>
                <li>next l3</li>
            </ul>
        </li>
        <li>li3</li>
    </ul>
</body>
<script>
    $(function(){
        $(".topnav>li").css("border","1px solid red");
    })
</script>

2、descendant selector
(后代选择器)
描述∶选择给定的祖先元素的所有后代元素。
语法:jQuery( “ancestor descendant” )
ancestor:任何有效的选择器。
descendant:一个用来筛选后代元素的选择器。

3、next adjacent selector
(“prev + next”)相邻选择器
描述∶选择所有紧接在“prev”元素后的“next”元素
语法:jQuery( “prev + next” )
注∶
prev.任何有效的选择器。
next:用于筛选紧跟在"prev”后面的元素的选择器。

4、Next Siblings Selector
(“prev ~ siblings”)
描述∶匹配“prev”元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器。
语法:jQuery( “prev ~ siblings” )
(prev + next)和(prev ~ siblings)之间最值得注意的不同点是他们各自的可及之范围。前者只达到紧随的同级元素，后者扩展了该达到跟随其的所有同级元素。

2）可见性过滤
1、hidden selector
描述︰选择所有隐藏的元素。
语法:jQuery( “:hidden”)
补充∶
元素可以被认为是隐藏的几个情况∶
1、CSs display值是none。
2、是type="hidden"的表单元素。
3、宽度和高度都设置为0。
4、一个祖先元素是隐藏的，因此该元素是不会在页面上显示。

2、visible selector
描述∶选择所有可见的元素。
语法:jQuery( “:visible” )
如果元素占据文档中一定的空间,元素被认为是可见的。可见元素的宽度或高度，是大于零。
所以∶元素的visibility: hidden或opacity:0被认为是可见的，因为仍然占用空间布局。
不在文档中的元素是被认为隐藏的jQuery没有办法知道是否是可见的，因为元素可见性依赖于适用的样式。
隐藏元素上做动画，元素被认为是可见的，直到动画结束。显示元素上做动画，在动画的开始处该元素被认为是可见的。

<!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.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        .outter{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #abcdef;
        }
    </style>
</head>
<body>
    <div class="outter">
        <div class="inner">hidder!</div>
    </div>
</body>
<script>
    $(function(){
        $(".outter .inner:hidden").css("display","block");
    })
</script>
</html>

3）鼠标事件
1、 .click()：点击事件
2、 .dblclick()：双击事件
3、 .hover()：鼠标悬停和离开
4、 .mousedown()：鼠标按下
5、 .mouseenter()：鼠标进入元素
6、 .mouseleave()：鼠标离开元素
7、 .mousemove()：鼠标在元素内移动
8、 .mouseout()：鼠标离开元素（支持事件冒泡）
9、 .mouseover()：鼠标进入元素内（支持事件冒泡）
10、 .mouseup()：鼠标按键被释放

<!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.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <p>haha 1</p>
    <p>haha 2</p>
    <p>haha 3</p>
    <p>haha 4</p>
</body>
<script>
    var p = document.getElementsByTagName("p");
    for(var i=0;i<p.length;i++){
        p[i].onclick=function(){
            alert(this.innerHTML);
        }
    }
</script>
</html>

4)键盘事件
1、 .keydown()：
在键盘按下时被触发，它可以绑定到任何元素，但是该事件只是发生在具有焦点的元素上，表单元素是最合适的。
2、 .keypress()：
在敲击键盘时被触发，按下并抬起同一个键。
3、 .keyup()：
在按键被释放时被触发，按下并抬起同一个键。

<!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.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <script>
        $(document).keydown(function(event){
            alert(event.keyCode);
        })
        
    </script>
</body>
<script>
</script>
</html>

5）浏览器事件、文档加载事件、文档加载过程
1.浏览器事件：
.error()
.resize()
.scroll()
2.文档加载事件
3.文档加载过程

<!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.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        p{
            width: 100%;
            height: 2000px;
        }
    </style>
</head>
<body>
    <p>
    <script>
        $(window).scroll(function(){
            alert("jjj")
        })
    </script>
</body>

</html>

<body>
    <div id ="d1">sssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>
    <script>
        $(window).resize(function(){
            alert("页面改变");
        })
    </script>

文档加载
1、复习 js 中 ready 与 onload 事件：

ready 事件： ready 事件在 DOM 结构绘制完成之后就会执行。这样能确保就算有大量的媒体文件没加载出来， JS 代码一样可以执行。
load 事件： load 事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话，则就会出现这种情况：网页文档已经呈现出来，但由于网页数据还没有完全加载完毕，导致 load 事件不能够即使被触发。

ready 的三种写法，一般用后两种写法：

$().ready(function(){

})

$(document).ready(function(){

})

$(function(){

})

2、文档加载过程

（1）解析 HTML 结构。

（2）加载外部脚本和样式表文件

（3）解析并执行脚本代码。

（4）构造 HTML DOM 模型。// ready

（5）加载图片等外部文件。

（6）页面加载完毕。// load

6）绑定事件处理器
.bind()：为元素绑定一个事件处理器。
（1）绑定事件 .bind()，现在已经不推荐使用

<body>
    <button id = "btn">按钮</button>
    <script>
        // $(function(){
        //     $("#btn").bind("click mouseover",function(){
        //         alert("haha");
        //     });
        // })

        $("#btn").bind({
            click:function(){
                alert("click");
            },
            mouseover:function(){
                alert("mouseover");
            }
        })
    </script>
</body>

<!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.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        p{
            width: 100px;
            height: 100px;
            background-color: darkgreen;
            border-radius: 5px;
            text-align: center;
            line-height: 50px;
            margin :0 auto;
            color: #ffffff;
            font-size: 20px;
        }
        .pbtn{
            background-color: green;
        }
    </style>
</head>
<body>
    <p>按钮</p>
    <script>
        $(function(){
            // $("p").bind({
            //     mouseover:function(){
            //         $(this).addClass("pbtn");
            //     },
            //     mouseout:function(){
            //         $(this).removeClass("pbtn");
            //     }
            // })

            $("p").bind("mouseover mouseout",function(){
                $(this).toggleClass("pbtn");
            })


        })
    </script>
</body>
</html>

7）1、 .delegate()：
事件委托，三个参数分别为选择器、事件类型、处理函数。

<!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.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3</li>
        <li>li 4</li>
    </ul>
    <script>
        $(function(){
            $("ul").delegate("li","click",function(){
                alert($(this).html());
            })
        })
    </script>
</body>
</html>

2、 .on()：
添加，可以代替 .bind() 和 .delegate() 。在选定的元素上绑定一个或多个处理函数。

3、 .off()：移除

<!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.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        p{
            width: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button id = "btn">button</button>
    <ul>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3</li>
        <li>li 4</li>
    </ul>
    <div>    <p>haha</p></div>

    <script>
        // $("#btn").on("click",function(){
        //     alert("haha");
        // })
        // $("ul").on("click","li",function(){
        //     alert($(this).html());
        // })

        // $("p").on("mouseover mouseout",function(){
        //     alert("haha");
        // })

        $(function(){
            var fn = function(){
            alert("haha");
        };

        $("div").on("click mouseover","p",fn);

        $("div").off("mouseover","p",fn);
        })


    </script>
</body>
</html>

4、 .one()：
对元素的事件添加处理函数，处理函数在每个元素上，每种事件类型最多执行一次。常用作引导页，因为引导页只执行一次。
5、 .unbind()：是 .bind()的移除事件。
6、 .undelegate()：是 .delegate()的移除事件。

7)事件对象
1、 event.currentTarget ：
当前事件的监听者（/this）
2、 event.target ：
当前事件的目标

<body>
    <div>
        <p>click me</p>
    </div>
    <script>
        $(function(){
            $("div").on("click",function(e){
                console.log($(e.currentTarget));//div
                console.log($(e.target));//p
                console.log($(this));//div
            })
        })
    </script>
</body>

3、 event.delegateTarget ：
当前事件的委托者
4、 event.pageX ：
鼠标相当于文档左边缘的位置
5、 event.pageY ：
鼠标相当于文档上边缘的位置
6、 event.type ：
获取当前的事件类型

<!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.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        #log{
            width: 300px;
            height: 300px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div id="log"></div>
    <script>
        $(function(){
            $("#log").on("mousemove",function(e){
                console.log("pagex =" + e.pageX + " pagey ="+e.pageY);
            	alert(e.type);//mousemove
            })
        })
    </script>
</body>
</html>

7、 event.preventDefault() ：
阻止默认事件

<!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.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        #log{
            width: 300px;
            height: 300px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <a href="www.baidu.com">baidu</a>
    <script>
        $(function(){
            $("a").click(function(e){
                e.preventDefault();
                alert("hahaha");
            })
            })
    </script>
</body>
</html>

8)表单事件
1、 focus() ：获得焦点事件，适用于所有元素
2、 blur() ：失去焦点事件，适用于所有元素
3、 change() ：改变元素值会触发，仅限于 input 、 textarea 、 select 三个元素
4、 select() ：当用户在一个元素中进行文本选择时则会触发，仅限于 input 、 type=”text” 、 textarea 三个元素

<body>
    <form>
        <input id="target" type="text" value="field 1">
        <input type="text" value="field 2">
    </form>

    <script>
        $(function(){
            $("#target").focus(function(){
                alert("获得焦点");
            })
        })
    </script>
</body>

5、 submit() ：当用户试图提交表单时会被触发，只能绑定到 form

<body>
    <form id="target">
        <input type="submit" value="go">
    </form>

    <script>
        $(function(){
            $("#target").submit(function(){
                alert("是否确定提交");
            })
        })
    </script>
</body>

9）DOM属性
1、 .addClass( className )：为每个匹配的元素添加指定的样式类名，给元素添加 class
2、 .attr( attributeName )：获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性。当它为一个参数的时候，后面仅跟一个属性名，为两个参数的时候，即为属性名对应属性值。
3、 .hasClass( className )：确定任何一个匹配元素是否有被分配给定的（样式）类。
4、 .html()：获取集合中第一个元素匹配的 HTML 内容设置每一个匹配元素的 html 内容。没有参数时获取当前元素的内容，有参数时给当前元素添加或更改内容。

<body>
    <a> hahaha </a>
    <p name = "haha"> 哈哈 </p>
    <div></div>
    <h1 class="h11 aa"></h1>
    <script>
        $(function(){
            var name = $("p").attr("name");
            $("div").text(name);
            console.log($("h1").hasClass("aa"));
            console.log($("a").html())
        })
    </script>
</body>

5、prop( propertyName)：一个参数时为获取这个值的数值，两个参数时为设置这个值的数值。
6、removeAttr(attributeName)：为匹配的元素集合中的每个元素中移除一个属性(attribute)。
7、removeClass([className ] )：移除集合中每个匹配元素上一个，多个或全部样式。
8、removeProp(/propertyName )：为集合中匹配的元素删除一个属性(property)
9、toggleClass()：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类取决于这个样式类是否存在或值切换属性如果存在(不存在)就删除(添加)一个类。
10、val():获取匹的元素集合中第一个元素的当前值。设置四配的元素集合中每个元素的值。获取表单元素值

<!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.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <a class="a1"> hahaha </a>
    <input type="checkbox" value="xuanze"/>
    <script>
        $(function(){
            console.log($("input").prop("value"));//xuanze
            $("a").attr("href","http://www.baidu.com");
            $("a").removeAttr("href");
            $("input").removeAttr("type");
            $("a").removeClass("a1");
        })
    </script>
</body>
</html>

10)DOM插入并包裹现有内容
CDN
CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度。

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.4/jquery.min.js" type="application/javascripvt"></script>

( 1 ） .wrap(wrappingElement< 这个参数就是一个元素 >) ：在每个匹配的元素外层包上一个 html 元素
（ 2 ） .unwrap() ：将匹配元素集合的紧挨着的父级元素删除（再上一级就删不了了），保留自身（和兄弟元素，如果存在）在原来的位置（要注意这个方法不接收任何参数）
（ 3 ） .wrapAll(wrappingElement< 这个参数就是一个元素 >) ：在所有匹配元素外面包一层 HTML 结构
（ 4 ） .wrapInner(wrappingElement< 这个参数就是一个元素 >) ：在匹配元素里的内容外包一层结构

<!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.0">
    <title>Document</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.4/jquery.min.js" type="application/javascript"></script>
</head>
<body>

    <div class="d1">
        <div class="d2"> 
            <p>haha</p>
        </div>
    </div>


    <script>
        $(document).ready(function(){
            $("p").unwrap();
        })
    </script>
</body>
</html>

11）DOM插入现有元素内
1.append():在每个匹配元素里面的末尾处插入参数内容
2.appendTo():将匹配的元素插入到目标元素的最后面
3.html():获取集合中第一个匹配元素的HTML内容设置每一个匹配元素的html内容
4.prepend():将参数内容插入到每个匹配元素的前面(元素内部)。
5.prependTo():将所有元素插入到目标前面(元素内)
6.text():得到匹配元素集合中每个元素的合并文本,包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。

<body>
    <span>我是span</span>
    <p>hahaha</p>
    <p>hahaha</p>

    <script>
        $(document).ready(function(){
            // $("p").append("<p>hehe<p>")
            // $("p").append($("span"))
            // $("<p>1111<p>").appendTo($("p"))
            // console.log($("span").html());
            // $("span").html("hahahahahha")
            // $("p").prepend("<div>2333</div>");
            $("span").prependTo($("p"));
        })


    </script>
</body>

12）复制元素、DOM插入到现有元素外
.clone():创建一个匹配的元素集合的深度拷贝副本。

<body>
    <p>hahaha</p>
    <p>hahaha</p>
    <p>hahaha</p>
    <span>我是span</span>

    <script>
        $(function(){
            $("span").clone().appendTo($("p"));
        })
    </script>
</body>

1.after():在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
2.before():根据参数设定,在匹配元素的前面插入内容(译者注：外部插入)
3.insertAfter():在目标元素后面插入集合中每个匹配的元素(注:插入的元素作为目标元素的兄弟元素)
4.insertBefore():在目标元素前面插入集合中每个匹配的元素(注:插入元素作为目标元素的兄弟元素)

<body>
    <p>hahaha</p>
    <p>hahaha</p>
    <p>hahaha</p>
    <span>我是span</span>

    <script>
        $(function(){

            // $("span").clone().appendTo($("p"));

            // $("p").after("<span>11111111111</span>");
            // $("<span>2222222</span>").insertAfter($("p"));

            // $("p").before("<span>span</span>");
            $("<span>1111111</span>").insertBefore($("p"));
        })
    </script>
</body>

13)DOM移除、替换
1.detach():从DOM中去掉所有匹配的元素
2.empty():从DOM中移除集合中匹配元素的所有子节点
3.remove():将匹配元素集合从DOM中删除.（注:同时移除元素上的事件及jQuery数据）
4.unwrap():将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置

    <style>
        .container{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>
            <div>
                <p class="p2">hhhhh</p>
            </div>
        </div>
        <p class="p1">hahaha</p>
        <p>hahaha</p>
    </div>

    <script>
        $(function(){
            // $("p").detach(".p1");//不填写元素，为移除所有p标签
            $(".container").empty();
        })
    </script>

</body>

1.replaceAll():用集合的匹配元素替换每个目标元素
2.replaceWith():用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

<body>
    <div class="container">
        <p>haha</p>
        <p>haha</p>
        <p>haha</p>
        <p>haha</p>
    </div>

    <script>
        $(function(){
            $("<span>2333</span>").replaceAll($("p"));
        })
    </script>

</body>

14)Css属性
1.css()：获取匹配元素集合中的第一个元素的样式属性的值设置每个匹配元素的一个或多个CSS属性。
2.height():获取匹配元素集合中的第一个元素的当前计算高度值。设置每一个匹配元素的高度值。
3.width():为匹配的元素集合中获取第一个元素的当前计算宽度值。给每个匹配的元素设置CSS宽度
4,innerHeight():为匹配的元素集合中获取第一个元素的当前计算高度值，包括padding,但是不包括border
5.innerWidth():为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding，但是不包括border.
6.offset():在匹配的元素集合中,获取的第一个元素的当前坐标,坐标相对于文档。设置匹配的元素集合中每一个元素的坐标，坐标相对于文档。
7.outerHeight():获取元素集合中第一个元素的当前计算高度值,包括padding ,border和选择性的margin。返回个整数(不包含"px" )表示的值，或如果在一个空集合上调用该方法，则会返回null。
8.outerWidth():获取元素集合中第一个元素的当前计算宽度值，包括padding,border和选择性的margin。(注:返回一个整数(不包含“px”)表示的值，或如果在一个空集合上调用该方法，则会返回null.)

    <style>
        div{
            width: 100px;
            height: 200px;
            padding: 100px;
            margin: 100px;
            border: 2px solid green;
        }
    </style>
</head>

<body>
    <div>我是一个div</div>
    <script>
        $(function(){
            var div = $("div");
            // var cssobj = {color:"red","background-color":"green"};
            // $("div").css(cssobj);
            // console.log($("div").css("color"));
            
            div.height(50);
            div.width(50);
            // console.log(div.innerHeight());
            // console.log(div.innerWidth());
        })
    </script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 200px;
            padding: 100px;
            margin: 100px;
            border: 2px solid green;
        }
    </style>
</head>

<body>
    <div>我是一个div</div>
    <script>
        $(function(){
            var div = $("div");
            var zuobiao = {
                top:300,
                left:500
            };
            console.log(div.offset());//返回Object
            console.log(div.offset(zuobiao));//设置坐标的方法
            console.log(div.outerHeight());
            console.log(div.outerWidth(true));//false 不加margin
        })
    </script>
</body>

9.position():获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。(译者注: offset parent指离该元素最近的而且被定位过的祖先元素)
10.scrollLeft():获取匹配的元素集合中第一个元素的当前水平滚动条的位置。设置每个匹配元素的水平滚动条位置。
11.scrolTop():获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位置。设置每个匹配元素的垂直滚动备位置

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            padding: 15px;
            background-color: antiquewhite;
            position: absolute;
            left: 100px;
            top: 150px;
        }
        p{
            margin-left: 10px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div>
        <p>我是内层</p>
    </div>
    <script>
        $(function(){
            var po = $("p").position();
            console.log(po);
        })
    </script>
</body>

    <style>
        .demo{
            width: 200px;
            height: 100px;
            overflow: auto;
            margin: 5px;
            padding: 5px;
            position: relative;
            border: 3px solid #666666;
            background-color: #cccccc;
        }
        p{
            width: 1000px;
            height: 1000px;
            background-color: 10px;
            padding: 5px;
            border: 2px solid #666666;
        }
    </style>
</head>

<body>
    <div class="demo">
        <h1>lalala</h1>
        <p>hello</p>
    </div>
    <script>
        $(function(){
            $(".demo").scrollTop(300);//垂直滚动条
            $(".demo").scrollLeft(300);
        })
    </script>
</body>

15)遍历
1.eq():减少匹配元素的集合为指定的索引的哪一个元素。
2.filter():筛选元素集合中匹配表达式或通过传递函数测试的那些元素集合。
3.first():获取匹配元素集合中的第一个元素
4.last():获取匹配元素集合中最后一个元素
5.has():筛选匹配元素集合中哪些有匹配的选择器或DOM元素的后代元素。
6.is():判断当前匹配的元素集合中的元素，是否为一个选择器,DOM元素,或者jQuery对象,如果这些元素至少一个匹配给定参数,那么返回true.
7.not():从匹配的元素集合中移除指定的元素
8.map():通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象
9.slice():根据指定的下标范围,过滤匹配的元素集合,并生成一个新的jQuery对象

    <style>
        div{
            width: 50px;
            height: 50px;
            background-color: aquamarine;
            float: left;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <ul>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3</li>
        <li>li 4</li>
    </ul>

    <!-- <div></div>
    <div class="middle"></div>
    <div class="middle"></div>
    <div class="middle"></div>
    <div></div> -->

    <!-- <ul>
        <li>li 1</li>
        <li>li 2</li>
        <li>
            <strong>s1</strong>
        </li>
        <li>
            <strong>s2</strong>
            <strong>s3</strong>
        </li>
        <li>li 3</li>
    </ul> -->

    <!-- <ul>
        <li>list<strong>item 1</strong></li>
        <li><span>list item 2</span></li>
        <li>list item 3</li>
    </ul> -->

    <div id = "d1"></div>
    <div id = "d2"></div>
    <div id = "d3"></div>
    <div id = "d4"></div>

    <script>
        $(function(){
            //$("li").eq(-3).css("background-color","red");//索引
            //$("li").filter(":odd").css("background-color","red");//even:顺序，odd：倒序
            // $("div").filter(".middle").css("border","1px solid red");

            // $("li").filter(function(){
            //     return $("strong",this).length == 1;
            // }).css("background-color","yellow");

            // $("li").first().css("background-color","red");
            // $("li").last().css("background-color","red");
            // $("li").has("strong").css("border","1px solid red");

            // $("ul").click(function(even){
            //     var target = $(even.target);
            //     if(target.is("li")){
            //         target.css("background-color","yellow")
            //     }
            // })
            
            // $("li").not(":odd").css("background-color","yellow");

            // $("div").map(function(){
            //     console.log(this.id);
            // })

            // var arr = [0,1,2];
            // console.log(arr.map(function(n){
            //     return n+4;
            // }))

            $("li").slice(1,3).css("background-color","pink");
        })
    </script>

</body>

16）其他遍历
1.add():添加元素到匹配的元素集合
2.contents():获得匹配元素集合中每个元素的子元素,包括文字和注释节点
3.end():终止在当前链的最新过滤操作,并返回匹配的元素的以前状态,

    <style>
        div,p{
            width: 100px;
            height: 100px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <!-- <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div> -->
    <!-- <p>aaaaddddd</p> -->

    <!-- <p>hello<a href="#">John</a>,how are you doing?</p> -->

    <ul>
        <li class="foo">li 1</li>
        <li >li 2</li>
        <li class="bar">li 3</li>
    </ul>


    <script>
        $(function(){
            // $("div").add("p").css("background-color","red");

            // $("div").css("background-color","yellow").add("p").css("border","1px solid green");

            // $("p").contents().filter(function(){
            //     return this.nodeType!=1;
            // }).wrap("<b/>");

                $("ul").find(".foo").css("background-color","yellow").end().find(".bar").css("background-color","red");
        })

    </script>
</body>

17)树遍历
（1）.children()：获得匹配元素集合中每个元素的直接子元素，选择器选择性筛选。
（2）.closest()：从元素本身开始，在DOM树上逐级向上级元素匹配，并返回最先匹配的祖先元素。
（3）.find()：通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代。.find()和.children()方法很类似但是.children()：只能获得匹配元素集合中每个元素的直接子元素，而 .find()可以得到当前匹配的元素集合中每个元素的后代，包括它子元素的后代。

<body>
    <!-- <ul>
        <li>li 1</li>
        <li class="selected">li 2</li>
        <li>li 3</li>
    </ul> -->

    <!-- <ul class="one">
        <li>li 1</li>
        <li class="two">li 2
            <ul class="three">
                <li>item 1</li>
                <li class="inner">item 2</li>
                <li>item 3</li>
            </ul>
        </li>
        <li>li 3</li>
    </ul> -->

    <!-- <p>p1</p>
    <p class="one">p2</p>
    <p>p3</p>
    <div>d1</div> -->

    <!-- <dl>
        <dt id="term-1">d1</dt>
        <dd>1a</dd>
        <dd>1b</dd>

        <dt id = "term-2">d2</dt>
        <dd>2a</dd>
        <dd>2b</dd>

        <dt id = "term-3">d3</dt>
        <dd>3a</dd>
        <dd>3b</dd>
    </dl> -->
<!-- nextUntil() 1个参数: 2个参数 -->

    <div class="c1">
        <ul class="c2">
            <li class="c3">
                <ul class="c4">
                    <li>item 1</li>
                    <li>item 2</li>
                    <li>item 3</li>
                </ul>
            </li>
            <li>li 2</li>
            <li>li 3</li>
        </ul>
    </div>


    <script>
        $(function(){
            // $("ul").children(".selected").css("border","1px solid red");
            // console.log($(".inner").closest("ul"));
            // $(".one").find("li").css("border","1px solid blue");
            
            // $(".one").next().css("background-color","yellow");

            // $(".two").nextAll().css("background-color","pink");

            // $("#term-2").nextUntil("dt").css("background-color","red");

            // var term3 = $("#term-3");
            // $("#term-1").nextUntil(term3,"dd").css("color","green");

            // $(".three").parent().css("border","1px solid green");
            // $("li").parent("ul").css("border","1px solid green");

            // console.log($(".three").parents());
            // console.log($(".inner").offsetParent());

            console.log($(".c4").parentsUntil(".c2"));
            
        })
    </script>
</body>

（4）next()：取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。
（5）.nextAll()：获得每个匹配元素集合中所有下面的同辈元素，选择性筛选的选择器。.nextAll()与.next()的区别，.next()只取得紧邻的后面同辈元素而.nextAll()是选择所有下面的同辈元素。
（6）.nextUntil()：通过选择器， DOM 节点，或 jQuery 对象得到每个元素之后的所有兄弟元素，但不包括匹配的元素。
（7）.parent()：取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器。与 children 方法是类似的，区别是一个选择子元素，一个选择父元素。同样，它们的方法以及参数也是相似的。
（8）.parents()：获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数。.parent()方法只能返回一级父元素，.parents()方法可以返回所有的祖先元素。
（9）.offsetParent()：取得离指定元素最近的含有定位信息的祖先元素。含有定位信息的元素指的是，CSS 的 position 属性是 relative, absolute, 或 fixed 的元素。这个方法的用处是对于计算元素的位置非常方便，计算位置可以帮助实现动画，或者是将元素放在特定的位置。这个方法不接受任何参数。
（10）.parentsUntil()：查找当前元素的所有的前辈元素，直到遇到选择器，DOM 节点或 jQuery 对象匹配的元素为止，但不包括这些元素。此方法与.nextuntil是相似的，以及参数用法等都相似。
（11）.prev ()：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。选择性筛选的选择器。它的参数是可选的，如果有参数，它为一个选择器，如果没有参数，它则是选择默认的前一个同辈元素。
（12）.prevAll():获得集合中每个匹配元素的所有前面的兄弟元素，选择性筛选的选择器。
（13) .prevUntil()：获取每个元素但不包括选择器， DOM 节点，或者 jQuery 对象匹配的元素的所有前面的兄弟元素
(14).siblings()：获得匹配元素集合中每个元素的兄弟元素，可以提供一个可选的选择器。它的参数是一个选择器，可写可不写。

    <style>
        div{
            width: 40px;
            height: 40px;
            margin-left: 10px;
            float: left;
            border: 1px solid blue;
        }
        button{
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <!-- <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div id = "start"></div>
    <div></div>
    <button>go to prev</button> -->

    <!-- <ul>
        <div>d1</div>
        <li> li 1</li>
        <li class="selected">li 2</li>
    </ul> -->

    <!-- <dl>
        <dt id="term-1">d1</dt>
        <dd>1a</dd>
        <dd>1b</dd>

        <dt id = "term-2">d2</dt>
        <dd>2a</dd>
        <dd>2b</dd>

        <dt id = "term-3">d3</dt>
        <dd>3a</dd>
        <dd>3b</dd>
    </dl> -->

    <div>d1</div>
    <p class="selected">p1</p>
    <span class="selected">s1</span>
    <ul>
        <li>li1</li>
        <li>li1</li>
        <li>li1</li>
        <li>li1</li>
    </ul>

    <script>
        $(function(){
            // var start = $("#start");
            // start.css("background-color","#f99");
            // $("button").click(function(){
            //     start=start.prev();
            //     $("div").css("background-color","");
            //     start.css("background-color","#f99");
            // })

            // console.log($(".selected").prevAll("div"));

            // $("#term-2").prevUntil("dt").css("background-color","red");

            // var term1 = $("#term-1");
            // $("#term-3").prevUntil(term1,"dd").css("color","green");

            $("div").siblings(".selected").css("color","red");
        })
    </script>
</body>

18）特效
1、隐藏与显示

    <style>
        div{width:40px;height: 40px;background-color: aquamarine;margin-left: 10px;float: left;}

    </style>
</head>
<body>
    <!-- <p>hello</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">隐藏/显示</button> -->

    <script>
        $(function(){
            // $("#hide").click(function(){
            //     $("p").hide(1000);
            // })
            // $("#show").click(function(){
            //     $("p").show(1000);
            // })
            // $("#toggle").click(function(){
            //     $("p").toggle(1000);
            // })
        
            for(var i=0;i<5;i++){
                $("<div>").appendTo(document.body)
            }
            $("div").click(function(){
                $(this).hide(2000),function(){
                            $(this).remove();
                        };

            })
            
        })
    </script>

2、淡入与淡出

<body>
    <div id="div1" style="width:80px;height:80px;display:none;background-color:aquamarine"></div>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:palegreen"></div>
    <div id="div3" style="width:80px;height:80px;display:none;background-color:palevioletred"></div>
    <button id = "in">fade in</button>
    <button id = "out">fade out</button>
    <button id = "toggle">fade taggle</button>
    <button id = "to">fade to</button>
    <script>
        $(function(){
            $("#in").on("click",function(){
                $("#div1").fadeIn(1000);
                $("#div2").fadeIn(1000);
                $("#div3").fadeIn(1000);
            })
            $("#out").on("click",function(){
                $("#div1").fadeOut(1000);
                $("#div2").fadeOut(1000);
                $("#div3").fadeOut(1000);
            })
            $("#toggle").on("click",function(){
                $("#div1").fadeToggle(1000);
                $("#div2").fadeToggle(1000);
                $("#div3").fadeToggle(1000);
            })
            $("#to").on("click",function(){
                $("#div1").fadeTo(1000,0.5);
                $("#div2").fadeTo(1000,0);
                $("#div3").fadeTo(1000,1);
            })
        })
    </script>
</body>

3.滑动

    <style>
        #content{
            padding: 50px;
            display: none;
        }
        #flipshow,#content,#fliphide,#fliptoggle{
            padding: 5px;
            text-align: center;
            background-color: aquamarine;
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div id = "flipshow">点击显示</div>
    <div id = "fliphide">点击隐藏</div>
    <div id = "fliptoggle">隐藏或显示</div>
    <div id = "content">hello world</div>
    <script>
        $(function(){
            $("#flipshow").click(function(){
                $("#content").slideDown(1000);
            });

            $("#fliphide").click(function(){
                $("#content").slideUp(1000);
            })
            
            $("#fliptoggle").click(function(){
                $("#content").slideToggle(1000);
            })
            
        })
    </script>
</body>

4.回调

    <style>
        #content{
            padding: 50px;
            display: none;
        }
        #flipshow,#content,#fliphide,#fliptoggle{
            padding: 5px;
            text-align: center;
            background-color: aquamarine;
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <p>hello world</p>
    <button>隐藏</button>
    <script>
        $(function(){
            // $("button").click(function(){
            //     $("p").hide(1000,function(){
            //         alert("动画完毕,此方法为回调");
            //     })
            // })
            
            $("p").css("color","red").slideUp(1000).slideDown(1000);

        })
    </script>
</body>

5.自定义

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            position: absolute;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        $(function(){
            $("div").click(function(){
                $(this).animate({
                    opacity:0.2,width:400,left:100
                }),"2000","swing",function(){
                    alert("动画执行完毕");
                }
                $(this).animate({
                opacity:1,
                width:200,
                left:8
            },2000,"linear",function(){
                alert("动画执行完毕");
            })
            })

        })
    </script>
</body>

1、.animate( ) :根据一-组CSS属性,执行自定义动画。
2、.clearQueue( ) : 从列队中移除所有未执行的项。
3、.delay( ) :设置-个延时来推迟执行队列中后续的项。
4、.finish( ) : 停止当前正在运行的动画,删除所有排队的动画,完成匹配元素所有的动画。
5、.stop( ) :停止匹配元素当前正在运行的动画。

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            position: absolute;
        }button{
            position: absolute;
        }
    </style>
</head>
<body>
    <div></div>
    <button>停止动画</button>
    <script>
        $(function(){
            var div = $("div");
            div.click(function(){
                $(this).animate({
                    width:"500px",opacity:0.2,left:200
                },4000,"linear")
                $(this).animate({
                    width:200,opacity:1,left:8
                },2000,"swing",function(){
                    alert("动画执行完毕");
                })
            });
            $("button").click(function(){
               // div.clearQueue();
               //div.finish();
               div.stop();
            });
        })
    </script>
</body>

19）幽灵按钮

<!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.0">
    <title>Document</title>
    <link rel="stylesheet" href="app.css" type="text/css"/>
    
</head>
<body>
    <div class="box">
        <div class="link link-miss" >
            <span class="icon"></span>
            <a href="#" class="button" data-text="My mission is clear">
                <span class="line line-top"></span>
                <span class="line line-left"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                MISSION
            </a>
        </div>
        <div class="link link-play" >
            <span class="icon"></span>
            <a href="#" class="button" data-text="This is my playground">
                <span class="line line-top"></span>
                <span class="line line-left"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                PLAY
            </a>
        </div>
        <div class="link link-touch" >
            <span class="icon"></span>
            <a href="#" class="button" data-text="Lest do something together">
                <span class="line line-top"></span>
                <span class="line line-left"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                TOUCH
            </a>
        </div>
        <div class="tooltip">
            <em></em>
            <span></span>
        </div>
    </div>
    <script src="jquery.min.js"></script>
<script>
    $(function(){
        $(".button").hover(function(){
            var titleText = $(this).attr("data-text")
            // console.log(titleText);
            $(".tooltip em").text(titleText);
            var leftLoc = $(this).offset().left;
            var addleft = ($(".tooltip").outerWidth()-$(this).outerWidth())/2;
            $(".tooltip").css({
                left:leftLoc-addleft,
                top:140
            }).animate({
                top:195,
                opacity:1
            },300)
        },function(){

        })
    })
</script>
</body>
</html>

*{
    margin: 0;
    padding: 0;

}

body{
    background-color: #333;
}
a{
    text-decoration: none;
}
.box{
    width: 1000px;
    height: 220px;
    margin: 50px auto;
}

.box .link{
    float: left;
    margin: 0 20px;
    width: 205px;
    height: 280px;
    position: relative;
}

.link-miss .icon{
    background-image: url("游戏手柄.png");
    background-position: center center;
    background-repeat: no-repeat;
}

.link-play .icon{
    background-image: url("火箭.png");
    background-position: center center;
    background-repeat: no-repeat;
}

.link-touch .icon{
    background-image: url("地图\ \(3\).png");
    background-position: center center;
    background-repeat: no-repeat;
}
.box .link .icon{
    display: inline-block;
    width: 100%;
    height: 190px;
    transition: 0.2s linear;
}
.box .link .icon:hover{
    transform: rotate(360deg) scale(1.2);
     transform: rotate(360deg) scale(1.2);
}
.box .link .button{
    display: block;
    width: 180px;
    height: 50px;
    border: 2px solid rgba(255,255,255,0.8);
    line-height: 50px;
    color: #2dcb70;
    font-size: 18px;
    font-weight: 700;
    padding: 0 0 0 20px;
    box-sizing: border-box;
    margin: auto;
    background: url("箭头_向右.png") no-repeat 130px center;
    transition:0.4s ease;
    -webkit-transition: 0.4s ease;
    position: relative;
}
.box .link .button:hover{
    background-position: 140px center;
    border-color: rgba(255,255,255,1);
}
.box .link .button .line{
    position: absolute;
    display: block;
    background: none;
    transition: 0.4s ease;
    -webkit-transition: 0.4s ease;
}

.box .link .button .line-top{
    left: -100%;
    top: -2px;
    width: 0;
    height: 2px;
}

.box .link .button .line-left{
    bottom: -100%;
    left: -2px;
    width: 2px;
    height: 0;

}

.box .link .button:hover .line-left{
    height: 50px;
    background: #fff;
    left: -2px;
    bottom:  -2px;
}


.box .link .button:hover .line-top{
    width: 180px;
    background-color: #fff;
    position: absolute;
    left: -2px;
    top: -2px;
}

.box .link .button .line-right{
    top:-100%;
    width: 2px;
    height: 0;
    right: -2px;
}

.box .link .button:hover .line-right{
    height: 50px;
    background: #fff;
    right: -2px;
    top: -2px;
}

.box .link .button .line-bottom{
    right: -100%;
    width: 0;
    bottom: -2px;
    height: 2px;

}
.box .link .button:hover .line-bottom{
    height: 2px;
    width: 180px;
    background-color: #fff;
    bottom: -2px;
    right: -2px;
}
.box .tooltip{
    position: absolute;
    padding: 0 15px;
    height: 35px;
    background-color: #2dcb70;
    border-radius: 5px;
    line-height: 35px;
    margin: 0 auto;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    opacity: 0;
}
.box .tooltip span{
    position: absolute;
    width: 0;
    height: 0;
    top: 35px;
    border: 8px solid transparent;
    border-top-color: #2dcb70;
    left: 50%;
    margin-left: -4px;
    
}

20）瀑布流

$(document).ready(function(){
    $(window).on("load",function(){//图片加载完成之后显示
        imgLocation();
        var dataImg = {"data":[{"src":"i1.jpg"},{"src":"i2.jpg"}]};
        $(window).scroll(function(){
            //获取最后一张图片距离顶端的高度-他自身的一半
            if(getSideHeight()){
                $.each(dataImg.data,function(index,value){
                    var pin = $("<div>").addClass("pin").appendTo("#main");
                    var box = $("<div>").addClass("box").appendTo(pin);
                    var img = $("<img>").attr("src","image/"+$(value).attr("src")).appendTo(box);
                });
                imgLocation();
            }
        })
    })
});

function getSideHeight(){
    var box = $(".pin");
    var lastImgHeight = (box.last().get(0)).offsetTop-Math.floor(box.last.height()/2);
    var documentHeight=$(document).height();//获取当前窗口的一个高度
    var scrollHeight = $(window).scrollTop();//获取滚动的距离
    return (lastImgHeight<documentHeight+scrollHeight)?true:false;
}

function imgLocation(){
    var box = $(".pin");//返回一个数组
    var boxWidth = box.eq(0).width();//每张图片的宽度
    var num = Math.floor($(window).width()/boxWidth);//一行能放的图片格式
    var numArr = [];
    box.each(function(index,value){
        var boxHeight = box.eq(index).height();//获取每张图片的高度
        if(index<num){
            numArr[index]=boxHeight;//第一排
        }else{
            var minboxHeight = Math.min.apply(numArr,numArr);//找到第一排最低的高度
            var minIndex = $.inArray(minboxHeight,numArr);//找到最低高度的索引
            $(value).css({//改变CSS样式
                position:"absolute",
                top:minboxHeight,
                left:box.eq(minIndex).position().left
            });
            numArr[minIndex]+=box.eq(index).height();//把最低高度的图片加上刚加入图片的高度
        }
    })
}