前端笔记5 JQuery 语法及应用

原創 linyuancsdn 2019-08-28 22:12

JQuery 概念

jQuery是一个快速、简洁的JavaScript框架 , (JavaScript代码库 )

	jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
	jQuery的核心特性可以总结为：
	1- 具有独特的链式语法和短小清晰的多功能接口；
	2- 具有高效灵活的css选择器，并且可对CSS选择器进行扩展；
	3- 拥有便捷的插件扩展机制和丰富的插件。
	4- jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

2006年1月14日，John正式宣布以jQuery的名称发布自己的程序库

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

JQurey 基本语法

文件下载

JQuery的版本下载 (jquery下载所有版本（实时更新）)

http://www.jq22.com/jquery-info122

JQuery的版本 类似于 Inter 芯片版本号

jquery.js (开发版)和 jquery.min.js(发布版) 区别
内容完全一致 , 区别在于文本格式
jquery.js 格式 良好的, 有利于程序员进行阅读 适用于测试、学习和开发
jquery.min.js 省略了多余的换行和空格 , 使文件尽量的做到体积最小
文件体积小, 有利于加快文件在网络中的传输速度(适用于发布的产品和项目)

文件引入

<!-- 引入外部JQuery 文件 -->
<script src="js/jquery.js" type="text/javascript"></script>

页面加载函数

主要在页面加载完毕之后, 再去执行函数中的内容

使用加载函数的原因

script 标签 在对象标签之前 , 获取对象不起作用

<script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        alert(123);
    }
</script>
<button id="btn">测试</button>

script 标签 在对象标签之后,才起作用

<button id="btn">测试</button>
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        alert(123);
    }
</script>

出现这种情况的原因

程序从上到下开始解释运行

对象标签还未加载, 就是用 JS代码 获取该对象 , 失败

window.onload JS原生页面加载函数

// 使用window.onload 优化代码
<script>
    // 页面加载完毕之后, 执行该函数
    window.onload = function(){
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            alert(123);
        }
    }
</script>
<button id="btn">测试</button>

JQuery 的页面加载函数

JQuery(document).ready(匿名函数);

$(document).ready(匿名函数);

$(匿名函数);

<!-- 引入外部JQuery 文件 -->
<script src="js/jquery.js"></script>
<script>
$(function(){
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        alert(123);
    }
});
</script>
<button id="btn">测试</button>

页面加载函数对比

JQuery 和 window.onload

区别 JQuery window.onload
执行顺序 先执行 后执行
执行时机 网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完 必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行
编写个数 可以书写多个页面加载函数, 按顺序执行 只能书写一个, 如果存在多个, 后写的覆盖之前的

语法

工厂函数

$() 具有多种用法

选择器

selector $(“CSS选择器”) 获取指定的 DOM 元素

支持CSS 选择器 $("#id") $(".class") $(“标签”)

方法action()

核心方法
文档处理
效果方法

事件方法

语法 和 DOM的区别 没有 on 关键字

$("").click(function(){
    // 事件绑定的内容
});

操作样式常用方法

addClass() 添加类名

css() 给元素设置样式

// 给div 添加 一组样式
$(".dv").css("height","300px");
// 添加多组样式
$(".dv").css({"height":"300px","width":"300px"});

添加一组样式

$("").css("a","a1")

添加多组样式

$("").css({"a":"a1","b":"b1","c":"c1"})

jQuery代码风格

“$”等同于“ jQuery ”

链式操作

对一个对象进行多重操作，并将操作结果返回给该对象

隐式迭代

通过 选择器获取对象之后, 如果获取的是一个数组对象, 无需手动遍历, 自行迭代

<ul>
    <li>宫骏腾来电话啦</li>
    <li>宫骏腾来电话啦</li>
    <li>宫骏腾来电话啦</li>
    <li>宫骏腾来电话啦</li>
    <li>宫骏腾来电话啦</li>
    <li>宫骏腾来电话啦</li>
</ul>
</body>
<script>
// 原始JS 的书写方式
    var lis = document.getElementsByTagName("li");
    for(let i in lis){
        lis[i].style.backgroundColor = "green";
    }
// 使用JQ 的方式
	$("li").css("background-color","red");
</script>

DOM对象和jQuery对象

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

命名的时候, 最好养成习惯如果一个对象是使用Jquery 的方式获取的, 最好在变量前添加 $ , 表示这是一个JQuery对象

变量名取值
DOM对象  var p = document.getElememtById("pid");
JQuery   var $p = $("#pid");

$("#title").html( );
等同于
document.getElementById("title").innerHTML;

对象之间相互转换

DOM 转换为JQ对象

$(Dom对象)  就成为了 JQuery 对象

JQ 对象 转换为 DOM对象

$("p")[0]  就转换成为了 DOM对象
$("p").get(0);

JQuery 选择器

CSS选择器

基本

分类

标签
类
id
全局
并集
交集

<script>
    $(function(){
        /*$("h1").css("background-color","red");
        $(".dv").css("background-color","green");
        $("#pid").css("background-color","blue");*/
        $(".dv,#pid").css("background-color","green");
        $("h1.dv").css("background-color","green");
    });
</script>
</head>
<body>
    <div class="dv">人间四月天</div>
    <p id="pid">人间四月天</p>
    <h1>人间四月天</h1>
    <h1 class="dv">人间四月天</h1>
</body>

层级

后代选择器
子选择器
相邻元素选择器
同辈元素选择器

环境准备

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body>div,p{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            float: left;
            margin-left: 20px;
        }
        div>div,p>div{
            width: 40px;
            height: 40px;
            border: 1px solid blue;
            float: left;
            margin-left: 5px;
        }

    </style>

</head>
<body>
<br><br>
    <button id="btn1">后代选择器</button>  &nbsp; &nbsp; &nbsp; &nbsp;
    <button id="btn2">子选择器</button>  &nbsp; &nbsp; &nbsp; &nbsp;
    <button id="btn3">相邻元素选择器</button>  &nbsp; &nbsp; &nbsp; &nbsp;
    <button id="btn4">同辈元素选择器</button>  &nbsp; &nbsp; &nbsp; &nbsp;
    <br><br>
    <hr>
    <br><br>
    <div class="father1">
        <div class="son11"></div>
        <div class="son12"></div>
    </div>
    <div class="father2">
        <div class="son21"></div>
        <div class="son22"></div>
    </div>
    <div class="father3">
        <div class="son31"></div>
        <div class="son32"></div>
    </div>
    <div class="father4">
        <div class="son41"></div>
        <div class="son42"></div>
    </div>

    <p class="father5">

    </p>
</body>

案例代码


<script src="js/jquery.js"></script>
<script>
   $(function(){
       $("#btn1").click(function(){
           $("body div").css("background-color","gold");
       });
       $("#btn2").click(function(){
           $("div>div").css("background-color","gold");
       });
       $("#btn3").click(function(){
           $(".father1+div").css("background-color","gold");
       });
       $("#btn4").click(function(){
           $(".father2~div").css("background-color","gold");
       });
   });

属性

环境准备

<br>
<button id="btn1">包含属性</button>  &nbsp; &nbsp; &nbsp; &nbsp;
<button id="btn2">属性以什么开头</button>  &nbsp; &nbsp; &nbsp; &nbsp;
<button id="btn3">属性以什么结尾</button>  &nbsp; &nbsp; &nbsp; &nbsp;
<button id="btn4">属性包含什么</button>  &nbsp; &nbsp; &nbsp; &nbsp;
<br><br>
<hr>
用户 <input type="text" name="username"> <br><br>
密码 <input type="password" name="userpassword">  <br><br>
邮箱 <input type="email" name="email">    <br><br>
电话 <input type="text">  <br><br>
地址 <input type="text">  <br><br>

案例代码

    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("input[name]").css("background-color","red");
            });
            $("#btn2").click(function(){
                $("input[name^='user']").css("background-color","red");
            });
            $("#btn3").click(function(){
                $("input[name$='word']").css("background-color","red");
            });
            $("#btn4").click(function(){
                $("input[name*='a']").css("background-color","red");
            });

        });
    </script>
</head>
<body>
<br>
<button id="btn1">包含属性</button>  &nbsp; &nbsp; &nbsp; &nbsp;
<button id="btn2">属性以什么开头</button>  &nbsp; &nbsp; &nbsp; &nbsp;
<button id="btn3">属性以什么结尾</button>  &nbsp; &nbsp; &nbsp; &nbsp;
<button id="btn4">属性包含什么</button>  &nbsp; &nbsp; &nbsp; &nbsp;
<br><br>
<hr>
    用户 <input type="text" name="username"> <br><br>
    密码 <input type="password" name="userpassword">  <br><br>
    邮箱 <input type="email" name="email">    <br><br>
    电话 <input type="text" name="word">  <br><br>
    地址 <input type="text">  <br><br>
</body>

条件过滤选择器

基本过滤

:first
:last
:even
:odd
:eq(index)
:gt(index)
:lt(index)
:not(选择器)

环境准备

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body>div,p{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            float: left;
            margin-left: 20px;
        }
        div>div,p>div{
            width: 40px;
            height: 40px;
            border: 1px solid blue;
            float: left;
            margin-left: 5px;
            background-color: blue;
        }
    </style>
<body>
<br><br>
    <button id="btn1">测试first last</button>&nbsp;&nbsp;
    <button id="btn2">指定位置 </button>&nbsp;&nbsp;
    <button id="btn3">取反</button>&nbsp;&nbsp;
    <button id="btn4">间隔</button>&nbsp;&nbsp;
    <br><br>
    <hr>
    <br><br>
    <div class="father1">
        <div class="son11"></div>
        <div class="son12"></div>
    </div>
    <div class="father2">
        <div class="son21"></div>
        <div class="son22"></div>
    </div>
    <div class="father3">
        <div class="son31"></div>
        <div class="son32"></div>
    </div>
    <div class="father4">
        <div class="son41"></div>
        <div class="son42"></div>
    </div>

    <p class="father5">

    </p>
</body>

代码案例

<script src="js/jquery.js"></script>
<script>
   $(function(){
       $("#btn1").click(function(){
           // $("body div:first").css("background-color","gold");
           $("body div:last").css("background-color","gold");
       });
       $("#btn2").click(function(){
           // $("div:eq(8)").css("background-color","gold");
           // $("div:lt(8)").css("background-color","gold");
          $("div:gt(9)").css("background-color","gold");
       });
       $("#btn3").click(function(){
           $("div:not(.father3)").css("background-color","gold");
       });
       $("#btn4").click(function(){
           // $("div:even").css("background-color","gold");
           $("div:odd").css("background-color","gold");
       });
   });
</script>

可见性过滤

:visible
:hidden

表单元素选择器

:input
:text
:enabled
:disabled
:checked
:selected

筛选方法

使用一些方法来替代 选择器的使用

获取子代元素

children(选择器);

获取同辈元素

next(选择器);
prev(选择器);
siblings(选择器);

获取父辈元素

parent(选择器);

JQuery 事件

基础事件

鼠标事件

click()
mouseover()
mouseout()
mouseenter()
mouseleave()

    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("ul>li").mouseover(function(){
                // 鼠标指向高亮显示
                //  this 是dom 对象
                $(this).css("background-color","skyblue");
            });
            $("ul>li").mouseout(function(){
                // 鼠标指向高亮显示
                //  this 是dom 对象
                $(this).css("background-color","#fff");
            });
        });
    </script>
</head>
<body>
<ul>
    <li>今天是中伏第一天</li>
    <li>今天是中伏第一天</li>
    <li>今天是中伏第一天</li>
    <li>今天是中伏第一天</li>
    <li>今天是中伏第一天</li>
    <li>今天是中伏第一天</li>
    <li>今天是中伏第一天</li>
    <li>今天是中伏第一天</li>
</ul>
</body>

对比两个方法

案例

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $(".father").mouseover(function(){
                alert("移入father");
            });

        });
    </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

区别

mouseover : 在子父容器之间进行切换, 也可以触发

mouseenter : 在子父容器之间进行切换, 不会触发

键盘事件

使用浏览器的调试功能 查看如下图片
在这里插入图片描述

window事件

resize() 调整页面大小的时候触发

scroll 当滚动轴滚动时触发

表单事件

blur

focus

change

复合事件

鼠标光标悬停

hover 相当于鼠标移入和移除事件

语法: $() .hover( function(){鼠标移入操作},

​ function(){鼠标移除操作});

如果两个方法完全一致, 可以省略其中一个

 $("ul>li").hover(function(){
     // 鼠标指向高亮显示
     $(this).css("background-color","skyblue");
 },function(){
     // 鼠标移除恢复到原来颜色
     $(this).css("background-color","#fff");
 });

鼠标连续点击

toggle() 1.9 版本之后失效

事件冒泡

案例

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $(".father").mouseover(function(){
                alert("移入father");
            });
            $(".son").mouseover(function(){
                alert("移入son");
            });
        });
    </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

子级容器有事件, 父级容器也有事件, 先执行子级容器的事件, 再执行父级容器的时间

防止事件冒泡 event.stopPropagation()

$("p").click(function(event){  // 把事件函数作为参数传递到 function 中
    event.stopPropagation();    // do something
  });

绑定事件

bind

bind(事件类型,[可选数据],处理函数)

绑定单个事件

$("#btn").bind("click",function(){alert("单击弹窗")});

绑定多个事件

// $("#btn").bind({事件1, 事件2});
$("#btn").bind({
    click:function(){
        alert("单击弹窗");
    },
    mouseover:function(){
        alert("移入弹窗");
    }});

unbind

浏览器中, 双击标签页 是关闭标签页,

取消设置双击没有任何作用, 就相当于解绑事件

   <script>
        $(function() {
            $("#bindTest").click(function(){
                $("#btn").bind("click",f1);
            });
            $("#unbindTest").click(function(){
                $("#btn").unbind("click",f1);
            });
        });
        function f1(){
            alert("弹窗");
        }
    </script>
</head>
<body>
<button id="bindTest">bindTest</button> <button id="unbindTest">unbindTest</button>
<hr>
    <button id="btn">测试按钮</button>
</body>

事件委派 dalegate

事件的触发> 当一些标签元素, 在事件定义的时候还未出现, 事件绑定不能成功

语法 $(“父选择器”).delegate(“子选择器”,“事件”,函数);

1- 可以给还未出现在页面上的 标签添加事件

2- 把事件绑定在父容器上, 批量给子标签添加事件 效率高

   <script>
        function f1(){
            alert("弹窗");
        }
        $(function(){
            // $(".btn").bind("click",f1);
            // 1- 选择器, 父元素中的哪些子元素
            // 2- 事件
            // 3- 执行函数
            $("body").delegate(".btn","click",f1);

            $("#add").click(function(){
                // 1- 创建一个button 对象
                // 2- 把该对象添加到 body 中
                var $btn =  $("<button class=\"btn\">测试按钮</button>");
                $("body").append($btn);

            });
        });

    </script>
</head>
<body>
    <button id="add">add</button>
    <hr>
    <button class="btn">测试按钮</button>
</body>

on 最根本的绑定事件

看源码, 以上所有方法都是建立在on上的

// $(".btn").bind("click",f1);
// $(".btn").on("click",f1);

// $("body").delegate(".btn","click",f1);
// on 和  delegate 参数顺序不同
// 1- 事件 2- 子选择器  3- 执行函数
$("body").on("click",".btn",f1);

on 和 delegate 参数顺序不同

效果

显示隐藏

show

show([speed],[callback]) 速度, 回调函数

speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

fn:在动画完成时执行的函数，每个元素执行一次。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("#btn").bind("click",function(){
                $("div").show(5000,function(){
                    // 显示完成之后执行的内容
                    // alert("我完全显示出来了");
                    $(this).hide(4000);
                });
            });
           /* $("#btn1").bind("click",function(){
                $("div").hide(5000);
            });*/

        });
    </script>
</head>
<body>
    <button id="btn">显示图片</button><button id="btn1">隐藏图片</button>
    <hr>
    <div style="width: 500px;height: 400px;display: none;">
        <img src="img/1.jpg" alt="" style="height: 100%;width: 100%;">
    </div>
</body>

使用toggle 来优化代码

当隐藏的时候 就显示, 当显示的时候就隐藏

fadeIn / out / to

淡入淡出

slideDown / up

滑动

animate 自定义动画

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("#btn").bind("click",function(){
                $("div>img").animate({right:"0"},5000,function(){
                    $(this).animate({bottom:"0"},5000,function(){
                        $(this).animate({left:"0"},5000,function(){
                            $(this).animate({top:"0"},5000,function(){});
                        });
                    });
                });
            });
           /* $("#btn1").bind("click",function(){
                $("div").hide(5000);
            });*/
            
        });
    </script>
</head>
<body>
    <button id="btn">显示图片</button><button id="btn1">隐藏图片</button>
    <hr>
    <div style="width: 500px;height: 400px;position: relative;border: 1px solid red;">
        <img src="img/1.jpg" alt="" style="height: 10%;width: 10%;position:absolute">
    </div>
</body>

导航栏滑动 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .main{
            width: 500px;
            margin-top: 50px;
            margin-left: auto;
            margin-right: auto;
            font-size: 20px;
        }
        .main ul{
            background-color: pink;
            display: none;
        }
        .main>li{
            float: left;
            margin-left: 5px;
            background-color: skyblue;
        }

    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            // 1- 给.main>li 添加鼠标移入和移除事件
            $(".main>li").mouseover(function(){
                $(this).children("ul").slideDown(1000);
            });
            $(".main>li").mouseout(function(){
                $(this).children("ul").slideUp(1000);
            });
            // 2- 当前的li 中ul 显示出来

        });
    </script>
</head>
<body>
<ul class="main">
    <li>李白的诗
        <ul>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
        </ul>
    </li>
    <li>李白的诗
        <ul>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
        </ul>
    </li>
    <li>李白的诗
        <ul>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
        </ul>
    </li>
    <li>李白的诗
        <ul>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
        </ul>
    </li>
    <li>李白的诗
        <ul>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
            <li>静夜思</li>
        </ul>
    </li>
</ul>
</body>
</html>

动画排队机制

stop()

停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行

$(function(){
    // 1- 给.main>li 添加鼠标移入和移除事件
    $(".main>li").mouseover(function(){
        $(this).children("ul").stop().slideDown(1000);
    });
    $(".main>li").mouseout(function(){
        $(this).children("ul").stop().slideUp(1000);
    });
});

代码优化

第一次优化

$(".main>li").hover(function(){
    $(this).children("ul").stop().slideDown(500);
},function(){
    $(this).children("ul").stop().slideUp(500);
});

第二次优化

$(".main>li").hover(function() {
    $(this).children("ul").stop().slideToggle(500);
});

DOM操作

样式操作

css() 给元素设置样式

添加一组样式

$("").css("a","a1")

添加多组样式

$("").css({"a":"a1","b":"b1","c":"c1"})

// 给div 添加 一组样式
$(".dv").css("height","300px");
// 添加多组样式
$(".dv").css({"height":"300px","width":"300px"});

样式类 class 的操作

addClass()  添加类名
removeClass() 移除类名
hasClass( ) 
toggleClass() 自动切换

#团购模块案例
 /* $(".box").mouseover(function(){
	    $(this).addClass("hoverstyle");
	});
	$(".box").mouseout(function(){
	    $(this).removeClass("hoverstyle");
	});*/
 简化
$(".box").hover(function(){
    $(this).toggleClass("hoverstyle");
});

内容和value值操作

HTML 内容操作

html() 可以对HTML代码进行操作，类似于JS中的innerHTML
html() 如果没有参数是  获取选择器标签中所有的代码文本, 包括标签
	获取的是 第一个匹配元素的内容
html(字符串参数) 如果有参数 设置选择器中的所有代码 为参数的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
        // 查看标签内容
        // var s =  $("ul").html();
        // 设置标签内容
           var s =  $("ul").html("<li>hello</li>");
           console.log(s);
        });
    </script>
</head>
<body>
    <ul>
        <li>今天0802</li>
        <li>今天0802</li>
        <li>今天0802</li>
        <li>今天0802</li>
        <li>今天0802</li>
        <li>今天0802</li>
    </ul>
</body>
</html>

text()

text() 如果没有参数是  获取选择器标签中所有的代码文本, 不包括标签
	获取的是 所有匹配元素的内容
text(字符串参数) 如果有参数 设置选择器中的所有代码 为参数的值

val()

val()可以获取或设置元素的value属性值
有参数 为设置值
没有参数 为获取值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            // 在鼠标移除文本行的时候, 获取输入框中的内容
            $("input").blur(function(){
                // 获取 input\ 对象的 val属性值
                // $(this).val()
                // 如果用户输入的内容超过 6 个字符, 在文本框中提示, 不能超过6 个字符
                var value = $(this).val();
                if(value.length <= 6){
                    alert(value);
                }else{
                    $(this).val("不能超过6位");
                }
            });
        });
    </script>
</head>
<body>
    用户名 : <input type="text" >
</body>
</html>

节点操作

查找

根据CSS 选择器 获取指定对象

创建

工厂函数$() 的三个作用:

$(css选择器) 获取指定对象

$(DOM对象) 把DOM 对象转换为 JQery 对象

$(Html 标签文本) 创建该标签对象

$("<button class='add'>新增的按钮</button>");

插入

内部插入子节点

$("A").append($("B"))   将B 标签添加到 A 标签的尾部
$("A").appendTO($("B"))	将A 标签添加到 B 标签的尾部
$("A").prepend($("B"))	将B 标签添加到 A 标签的头部
$("A").prependTO($("B"))将A 标签添加到 B 标签的头部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
               // $(".sup").append($(".sub"));
              //  $(".sup").prepend($(".sub"));
              //  $(".sub").appendTo($(".sup"));
                $(".sub").prependTo($(".sup"));
            });
        });
    </script>
</head>
<body>
    <button id="btn">添加按钮</button>
    <hr>
    <div class="sup" style="height: 200px;width: 200px;background-color: skyblue; ">
        <p style="height: 30px;width: 100%;background-color: pink; ">我就是来凑数的</p>
    </div>
    <div class="sub" style="height: 100px;width: 100px;background-color: gold; "></div>
</body>
</html>
元素外部插入节点
$(A).after (B) 将B 添加到A之后
$(A).before(B) 将B 添加到A之前
$(A).insertAfter (B) 将A添加到B之后
$(A).insertBefore (B) 将A添加到B之前 
$(function(){
    $("#btn").click(function(){
       // 1- 创建新的div 对象
        var $dv = $("<div></div>");
        $dv.css({"height": "100px","width": "100px","background-color": "blue"});
       // 将新建的 div 块添加到 sub 之后
        // $(".sup").after($dv);
        // 主从调换 方法 由 after  切换为 insertAfter
        //  $dv.insertAfter($(".sup"));
        // 将新建的 div 块添加到 sup 之前
        // $(".sup").before($dv);
    });
});

删除

方法名
empty() 空的 删除匹配的元素集合中所有的子节点。
remove() 从DOM中删除所有匹配的元素。
detach() 从DOM中删除所有匹配的元素。

detach()与remove()不同的是，

remove()但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。detach()所有绑定的事件、附加的数据等都会保留下来。

演示案例 detach() 保留事件函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        var $sup;
        $(function(){
            $(".sup").bind("click",function(){
                alert("这是 sup 的点击事件");
            });

            $("#btn1").click(function(){
                $(".sup").empty();
            });
            $("#btn2").click(function(){
                // 会把绑定的事件 移除 , 即使恢复对象, 事件无法恢复
                $sup =  $(".sup").remove();
            });
            $("#btn3").click(function(){
                // 不会把绑定的事件移除 , 恢复对象, 事件一并恢复
                $sup = $(".sup").detach();
            });
            $("#btn4").click(function(){
                $("body").append($sup);
            });

        });
    </script>
</head>
<body>
<button id="btn1">删除按钮</button>
<button id="btn2">remove按钮</button>
<button id="btn3">detach按钮</button>
<button id="btn4">恢复按钮</button>
<hr>
<div class="sup" style="height: 100px;width: 100px;background-color: skyblue; ">
</div>
</body>
</html>

替换

方法名
A.replaceWith(B) 使用 B 替换 A
A.replaceAll(B) 使用 A 替换 B 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                var $li = $("<li>你好 毕吉伦</li>");
               //  $("ul li:eq(3)").replaceWith($li);
                $li.replaceAll($("ul li:lt(3)"));
            });
        });
    </script>
</head>
<body>
<button id="btn">替换按钮</button>
<hr>
<ul>
    <li>你好 中国</li>
    <li>你好 中国</li>
    <li>你好 中国</li>
    <li>你好 中国</li>
    <li>你好 中国</li>
</ul>
</body>
</html>

复制

clone() 没有参数 和参数为false 相同 只复制 标签本身

clone() 参数为true 除了复制 标签本身外, 还复制标签的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $(".clone").click(function(){
                alert(123);
            });
            $("#btn").click(function(){
                $(".clone:first").clone(true).appendTo($("body"));
            });
        });
    </script>
</head>
<body>
<button id="btn">复制按钮</button>
<hr>
<button class="clone">按钮测试</button>
</body>
</html>

节点属性操作

方法名
attr() 只有一个参数, 获取指定属性的值
有两个参数, 设置指定属性的值
prop() 只有一个参数, 获取指定属性的值
有两个参数, 设置指定属性的值
1.8.3 版本之后 新设计的
removeAttr() 移除指定属性 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                // 一个参数为查看
               // var s =  $("img").attr("src");
               // alert(s);
                // l两个参数为修改
                // $("img").attr("src","img/2.jpg");
                $("img").prop("src","img/2.jpg");
            });
        });
    </script>
</head>
<body>
    <button id="btn">修改属性按钮</button>
    <hr>
    <img src="img/1.jpg" alt="" style="height: 200px;">
</body>
</html>

节点遍历

each()

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

以每一个匹配的元素作为上下文来执行一个函数。

意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)。

function(一个参数){} i 意思为 下标

function(两个参数){} i 意思为 下标 e 为 每一个遍历到的 对象 (this)

// 隔两行换色案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            width: 200px;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            // 使用原生 JS的 方式
            /*var lis = document.getElementsByTagName("li");
            for(let i = 0 ; i < lis.length ; i++){
                if(i % 3 == 0){
                    lis[i].style.backgroundColor = "blue";
                }
            }*/
            // 使用 JQ
            $("ul>li").each(function(i){
                // i 是 下标   this 指代当前对象
                if(i % 3 == 0){
                    $(this).css("background-color","skyblue");
                }
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>又有台风要过境啦</li>
        <li>又有台风要过境啦</li>
        <li>又有台风要过境啦</li>
        <li>又有台风要过境啦</li>
        <li>又有台风要过境啦</li>
        <li>又有台风要过境啦</li>
        <li>又有台风要过境啦</li>
        <li>又有台风要过境啦</li>
        <li>又有台风要过境啦</li>
        <li>又有台风要过境啦</li>
        <li>又有台风要过境啦</li>
        <li>又有台风要过境啦</li>
        <li>又有台风要过境啦</li>
        <li>又有台风要过境啦</li>
        <li>又有台风要过境啦</li>
    </ul>
</body>
</html>

返回false

// 使用 JQ
$("ul>li").each(function(i){
    // i 是 下标   this 指代当前对象
    if(i % 3 == 0){
        $(this).css("background-color","skyblue");
    }
    if( i == 9){
    	// 当 i = 9 的时候 , 循环停止运行
        return false;
    }
});

index

子元素数组.index(子元素) 子元素在数组中的下标

get

获取指定下标的元素, 注意 会把 JQuery 对象转换为 DOM 对象

end()

结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

JQuery 可以支持 链式编程

案例 : 把ul 列表中 的 第一个li 和 最后一个li 都改变样式为XXX

想要表达的意思为 
我的电脑的颜色 和 我的键盘的颜色
我的电脑的键盘的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            width: 200px;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            // 使用两条语句
            // $("ul li").first().css("background-color","skyblue");
            // $("ul li").last().css("background-color","gold");
            // $("ul li").first().css("background-color","skyblue").last().css("background-color","gold");

            // .end 可以让主语 回归到原始状态, 结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态
            $("ul li").first().css("background-color","skyblue").end().last().css("background-color","gold");
        });
    </script>
</head>
<body>
    <ul>
        <li>又有台风要过境啦</li>
        <li>又有台风要过境啦</li>
        <li>又有台风要过境啦</li>
        <li>又有台风要过境啦</li>
    </ul>
</body>
</html>

Css-Dom操作

语法
css() 设置或返回匹配元素的样式属性
height() 设置或返回匹配元素的高度
width() 设置或返回匹配元素的宽度
offset() 返回以像素为单位的top和left座标。仅对可见元素有效 (返回的是一个对象)
设置座标 对象.offset({left:20,right:30})
offsetParent() 返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素
position() 返回第一个匹配元素相对于父元素的位置
scrollLeft() 参数可选。设置或返回匹配元素相对滚动条左侧的偏移
scrollTop() 参数可选。设置或返回匹配元素相对滚动条顶 ect

案例

鼠标移入高亮显示功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            width: 200px;
        }
        .gold{
            background-color:gold;
        }
    </style>
    <script src="js/jquery.js"></script>
    
</head>
<body>
<ul>
    <li>电脑鼠标键盘音响</li>
    <li>电脑鼠标键盘音响</li>
    <li>电脑鼠标键盘音响</li>
    <li>电脑鼠标键盘音响</li>
    <li>电脑鼠标键盘音响</li>
    <li>电脑鼠标键盘音响</li>
    <li>电脑鼠标键盘音响</li>
    <li>电脑鼠标键盘音响</li>
    <li>电脑鼠标键盘音响</li>
    <li>电脑鼠标键盘音响</li>
</ul>
</body>
</html>

五种方式 完成案例功能

<script>
        $(function(){
            // 第一种方式
           /* $("ul>li").mouseover(function(){
                $(this).css("background-color","gold");
            });
            $("ul>li").mouseout(function(){
                $(this).css("background-color","#fff");
            });*/
            // 第二种方式
           /* $("ul>li").mouseover(function(){
                $(this).css("background-color","gold").siblings().css("background-color","#fff");
            });*/
           // 第三种方式
            /*$("ul>li").mouseover(function(){
                $(this).addClass("gold");
            });
            $("ul>li").mouseout(function(){
                $(this).removeClass("gold");
            });*/
            // 第四种方式
            /*$("ul>li").mouseover(function(){
                $(this).toggleClass("gold");
            });
            $("ul>li").mouseout(function(){
                $(this).toggleClass("gold");
            });*/
            // 第五种方式
            $("ul>li").hover(function(){
                $(this).toggleClass("gold");
            });
        });
    </script>

图片轮播器

带有 小圆点切换功能的 轮播器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 600px;
            height: 400px;
            margin: 30px auto ;
            position: relative;
        }
        .main img{
            width: 100%;
            height: 100%;
        }
        .main ul{
            width: 100px;
            height: 20px;
            position: absolute;
            left: 250px;
            bottom: 50px;
            background-color: skyblue;
            list-style: none;
        }
        .main ul>li{
            width: 12px;
            height: 12px;
            float: left;
            margin: 4px 4px;
            background-color: #ccc;
            border-radius: 10px;
            text-align: center;
        }
    </style>

    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            // 第一张图片显示 其他隐藏
            $(".main img").first().siblings("img").hide();

            //给ul中的 所有li 添加 鼠标移入事件
            $(".main ul>li").mouseover(function(){
                // 获取鼠标移入的小圆点的下标
                var index1 = $(".main ul>li").index(this);
                // 指定该下标位置的img 显示, 其它隐藏
                // alert(index1);
                $(".main img").eq(index1).show().siblings("img").hide();
               
               // 当前小圆点 样式改变
                $(this).css("background-color","orange").siblings().css("background-color","#ccc");
            });
        });
    </script>
</head>
<body>
    <div class="main">
        <img src="img/1.jpg" alt="">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt="">
        <img src="img/5.jpg" alt="">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

二级联动

基础数据 pro_city.js 文件

// 创建省份数组
var province = ["请选择", "北京", "上海", "天津", "重庆", "山东", "河南", "湖北", "湖南", "广东", "河北", "山西", "辽宁", "吉林", "内蒙古", "黑龙江", "江苏", "浙江", "安微", "福建", "江西", "四川", "贵州", "云南", "陕西", "甘肃", "青海", "广西", "西藏", "宁夏", "新疆", "海南", "香港", "澳门", "台湾"];
var city = [[],
    ["", "东城", "西城", "海淀", "朝阳", "丰台", "石景山", "通州", "顺义", "房山", "大兴", "昌平", "怀柔", "平谷", "门头沟", "密云", "延庆"],
    ["", "黄浦", "浦东", "徐汇", "长宁", "静安", "普陀", "闸北", "虹口", "杨浦", "闵行", "宝山", "嘉定", "金山", "松江", "青浦", "奉贤", "崇明"],
    ["", "和平", "河西", "南开", "河东", "河北", "红桥", "东丽", "津南", "西青", "北辰", "滨海新区"],
    ["", "万州", "黔江", "涪陵", "渝中", "大渡口", "江北", "沙坪坝", "九龙陂", "南岸", "北碚", "渝北", "巴南", "长区", "江津", "合川", "永川", "南川", "綦江", "大足", "铜梁"],
    ["", "济南", "青岛", "淄博", "枣庄", "东营", "烟台", "潍坊", "济宁", "泰安", "威海", "日照", "滨州", "德州", "聊城", "临沂", "菏泽", "莱芜"],
    ["", "郑州", "开封", "洛阳", "平顶山", "安阳", "鹤壁", "新乡", "焦作", "濮阳", "许昌", "漯河", "三门峡", "商丘", "周口", "驻马店", "南阳", "信阳", "济源"],
    ["", "武汉", "黄石", "十堰", "荆州", "宜昌", "襄阳", "鄂州", "荆门", "黄冈", "孝感", "咸宁", "仙桃", "潜江", "恩施", "神农架", "天门", "随州"],
    ["", "长沙", "株洲", "湘潭", "衡阳", "邵阳", "岳阳", "常德", "张家界", "益阳", "娄底", "郴州", "永州", "怀化", "湘西"],
    ["", "广州", "深圳", "珠海", "汕头", "佛山", "东莞", "中山", "潮州", "惠州", "湛江", "肇庆", "江门", "茂名", "韶关", "揭阳", "云浮", "梅州", "汕尾", "河源", "阳江", "清远"],
    ["", "石家庄", "保定", "沧州", "衡水", "邢台", "邯郸", "张家口", "廊坊", "唐山", "秦皇岛", "承德"],
    ["", "太原", "大同", "阳泉", "长治", "晋城", "朔州", "晋中", "运城", "忻州", "临汾", "吕梁"],
    ["", "沈阳", "大连", "鞍山", "抚顺", "本溪", "丹东", "锦州", "营口", "阜新", "辽阳", "盘锦", "铁岭", "朝阳", "葫芦岛"],
    ["", "长春", "吉林", "四平", "辽源", "通化", "白山", "白城", "松原", "延边", "长白山", "梅河口", "公主岭"],
    ["", "呼和浩特", "包头", "乌海", "赤峰", "通辽", "鄂尔多斯", "呼伦贝尔", "巴彦淖尔", "乌兰察布", "兴安盟", "锡林郭勒", "阿拉善"],
    ["", "哈尔滨", "齐齐哈尔", "鸡西", "鹤岗", "双鸭山", "大庆", "伊春", "佳木斯", "七台河", "牡丹江", "黑河", "绥化", "大兴安岭"],
    ["", "南京", "无锡", "徐州", "常州", "苏州", "南通", "连云港", "淮安", "盐城", "扬州", "镇江", "秦州", "宿州"],
    ["", "杭州", "宁波", "温州", "绍兴", "湖州", "嘉兴", "金华", "衢州", "舟山", "台州", "丽水"],
    ["", "合肥", "芜湖", "蚌埠", "马鞍山", "宿州", "安庆", "淮南", "铜陵", "黄山", "宣城", "池州", "滁州", "淮北", "阜阳", "六安", "毫州"],
    ["", "福州", "厦门", "漳州", "泉州", "三明", "莆田", "南平", "龙岩", "宁德", "平潭"],
    ["", "南昌", "九江", "上饶", "抚州", "宜春", "吉安", "赣州", "景德镇", "萍乡", "新余", "鹰潭"],
    ["", "成都", "绵阳", "自贡", "攀枝花", "泸州", "德阳", "广元", "遂宁", "内江", "乐山", "资阳", "宜宾", "南充", "达州", "雅安", "阿坝", "甘孜", "凉山", "广安", "巴中", "眉山"],
    ["", "贵阳", "六盘水", "遵义", "铜仁", "黔西", "毕节", "安顺", "黔东", "黔南"],
    ["", "昆明", "曲靖", "玉溪", "保山", "昭通", "丽江", "普洱", "临沧", "德宏", "怒江", "迪庆", "大理", "楚雄", "红河", "文山", "西双版纳"],
    ["", "西安", "宝鸡", "咸阳", "渭南", "铜川", "治中", "安康", "商洛", "榆林", "延安", "汉中", "杨陵"],
    ["", "兰州", "嘉峪关", "金昌", "白银", "天水", "酒泉", "张掖", "武威", "定西", "陇南", "平凉", "庆阳", "临夏", "甘南"],
    ["", "西宁", "海东", "海北", "黄南", "海南", "果洛", "玉树", "海西"],
    ["", "南宁", "柳州", "桂林", "梧州", "北海", "防城港", "钦州", "贵港", "玉林", "百色", "贺州", "河池", "来宾", "崇左"],
    ["", "拉萨", "昌都", "日喀则", "山南", "那曲", "阿里", "林芝"], ["", "银川", "石嘴山", "吴忠市", "固原市", "中卫"],
    ["", "乌鲁木齐", "克拉玛依", "吐鲁番", "哈密", "昌吉", "博尔塔", "巴音郭楞", "阿克苏", "克孜勒苏柯尔克", "喀什", "和田", "伊犁", "塔城", "阿勒泰", "石河子", "阿拉尔", "图木舒克", "五家渠", "北屯", "铁门关", "双河市"],
    ["", "海口", "三亚", "三沙"],
    ["", "中西区", "湾仔区", "东区", "南区", "油尖旺", "深水埗", "九龙城", "黄大仙", "观塘", "葵青", "荃湾", "屯门", "元朗", "北区", "大埔", "沙田", "西贡", "离岛"],
    ["", "花地玛堂", "圣安多尼堂", "大堂", "望德堂", "风顺堂", "嘉模堂", "圣方济各堂"], ["", "台北", "新北", "桃园", "台中", "台南", "高雄", "基隆", "新竹", "嘉义"]
];

html 页面数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/pro_city.js"></script>

</head>
<body>
    省份: <select id="province"></select> &nbsp;&nbsp;&nbsp;&nbsp; 
    城市 : <select id="city"></select>
</body>

</html>

添加 JQuery 支持

<script src="js/pro_city.js"></script>
<script src="js/jquery.js"></script>
<script>
    $(function(){
        // 1- 获取数组中的每一个数据
        for(let i in province){
            // 创建数据对象
            // 2- 使用pro对象 添加所有数据对象
            $("<option value='"+i+"'>"+province[i]+"</option>").appendTo($("#province"));
        }
        // 切换事件
        $("#province").change(function(){
            // 清空标签 内的 所有内容
            $("#city").empty();
            var index1 = $(this).val();
            for(let i in city[index1]){
                $("<option value='"+i+"'>"+city[index1][i]+"</option>").appendTo($("#city"));
            }
        });
    });
</script>

广告跟随 滚动轴案例

案例准备

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 200px;
            height: 600px;
            position: absolute;
        }
        #leftImg{

            top: 60px;
            left: 0;
        }
        #rightImg{
            top: 60px;
            right: 0;
        }
        body{
            text-align: center;
            font-size: 20px;
            line-height: 30px;
        }
    </style>
    
</head>
<body>
<img src="img/竖图.png" id="leftImg">
<img src="img/竖图.png" id="rightImg">

<br>谁敢横刀立马, 唯我彭大将军
<br>谁敢横刀立马, 唯我彭大将军
<br>谁敢横刀立马, 唯我彭大将军
<br>谁敢横刀立马, 唯我彭大将军
<br>谁敢横刀立马, 唯我彭大将军
<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马,
唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马,
唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马,
唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马,
唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马,
唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马,
唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马,
唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马,
唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马,
唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马,
唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马,
唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马,
唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马,
唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马,
唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军<br>谁敢横刀立马, 唯我彭大将军
</body>
</html>

JQuery代码实现

<script>
    $(function(){
        // 滚动轴滚动的事件
        $(window).scroll(function(){
            // 获取 滚动轴 离顶部的距离
            var top1 = $(this).scrollTop();
            // 图片 使用动画效果 向下滚动
            $("img").stop().animate({"top":(top1+60)+"px"},1000);
        });
    });
</script>

优化

var offset = $("#rightImg").offset();
// 滚动轴滚动的事件
$(window).scroll(function(){
    // 获取 滚动轴 离顶部的距离
    var top1 = $(this).scrollTop();
    // 图片 使用动画效果 向下滚动
    $("img").stop().animate({"top":(top1+offset.top)+"px"},1000);
});

图片跟随鼠标案例

当鼠标移动的时候 一张图片需要跟随鼠标移动

案例准备

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 40px;
            height: 40px;
            position: absolute;
        }
    </style>
</head>
<body>
<img src="img/笑脸.jpg" alt="">
</body>
</html>

Event对象

event.pageX

event.pageY

JQuery 代码实现

<script src="js/jquery.js"></script>
<script>
    $(function(){
        // 鼠标移动 图片也移动, 鼠标移动触发事件
        // 绑定一个事件, 事件对象就会 自动生成, 可以作为方法的参数 传入到方法中
        $(document).mousemove(function(eve){
            // 获取鼠标的当前位置
            var x = eve.pageX;
            var y = eve.pageY;
            // 根据鼠标位置 设置 图片位置
            $("img").offset({left:x-20,top:y-20});
        });
    });
</script>

新闻向上滚动案例

环境准备

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .news{
            width: 650px;
            margin: 100px auto;
        }
        .news .title{
            background-color: skyblue;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .news .content{
            font-size: 22px;
            line-height: 30px;
        }
        .news .content ul{
            list-style-position: inside;
        }
    </style>

</head>
<body>
    <div class="news">
        <div class="title">
            <h3>热点新闻</h3>
        </div>
        <div class="content">
            <ul>
                <li>国家远程会诊及互联网中心肝胆专家委员会湖南分会成立..</li>
                <li>支付宝：全国5省市上线电子结婚证</li>
                <li>人人车联合创始人王清翔卸任法定代表人及执行董事</li>
                <li>知存科技完成近亿元A轮融资，用于存算一体AI芯片量..</li>
                <li>达能内地首个跨境电商自有仓南沙开张</li>
                <li>支付宝锦鲤信小呆刷爆信用卡，一年过去锦鲤真的那么美..</li>
                <li>滨州48个村入选淘宝村、9个乡镇入选淘宝镇</li>
                <li>携程生死符</li>
                <li>消息称腾讯投资快手金额将在10至15亿美元</li>
                <li>当代互联网造车术：用爱发电？</li>
            </ul>
        </div>
    </div>
</body>
</html>

JQuery代码实现


 $(function(){
     /*
     1- 第一个li 动画效果 慢慢向 上 隐藏
     2- 当完全隐藏之后 把第一个li 样式回归到原始状态
     3- 把已经完全看不见的该li 添加到 ul的末尾
     4- 让该过程循环执行
      */
     // 获取当前 li的高度
     window.setInterval("myScroll()",50);
 });
 // 第一行li 的margin-top的值
 var marginTop1 = 0;
function myScroll(){
     $(".content ul li").first().animate({"margin-top":marginTop1--},0,function(){
         var $first=$(this);
         if ((-marginTop1) >= $first.height()) {
             // 当动画完成之后 执行的代码
             $(this).css("margin-top", 0).appendTo($(this).parent());
             marginTop1 = 0;
         }
     });
 }

添加鼠标移入移除效果

 $(function(){
     // 获取当前 li的高度
     window.setInterval("myScroll()",50);
     // 给大的 main div 添加事件
     $(".news").mouseover(function(){
         stop1 = true;
     }).mouseout(function(){
         stop1 = false;
     });
 });
 // 第一行li 的margin-top的值
 var marginTop1 = 0;
 var stop1 = false;
function myScroll(){
    if(stop1) return;
     $(".content ul li").first().animate({"margin-top":marginTop1--},0,function(){
         var $first=$(this);
         if ((-marginTop1) >= $first.height()) {
             // 当动画完成之后 执行的代码
             $(this).css("margin-top", 0).appendTo($(this).parent());
             marginTop1 = 0;
         }
     });
 }

设置 div 遮盖之下的文字

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

前端笔记6 表单校验与正则表达式

linyuancsdn 2019-08-28 22:12:59

前端笔记4 JS BOM&DOM

linyuancsdn 2019-07-30 22:19:44

JavaScript-day02

CXY_ZPH 2018-08-20 20:44:04

jQuery01

CXY_ZPH 2018-08-20 20:44:04

JavaScript-day01

CXY_ZPH 2018-08-20 20:44:04

JavaScript04

CXY_ZPH 2018-08-20 20:44:04

HTML02

CXY_ZPH 2018-08-20 20:43:53

HTML03

CXY_ZPH 2018-08-20 20:43:53

Jquery02

CXY_ZPH 2018-08-20 20:43:53

HTML-day01

CXY_ZPH 2018-08-20 20:43:17

JavaScript03

CXY_ZPH 2018-08-20 20:43:16