前端学习之jQuery

一、 jQuery是什么？

<1> jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择

点击下载：jQuery 插件库下载地址

二、什么是jQuery对象？

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

$("#test").html()

       //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

       // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 

       //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

       //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 

var $variable = jQuery 对象

var variable = DOM 对象

$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

jquery的基础语法：$(selector).action()

三、寻找元素(选择器和筛选器)

3.1 选择器

3.1.1 基本选择器

$("*")  
$("#id")   
$(".class")  
$("element")  
$(".class,p,div")

3.1.2 层级选择器

$(".outer div")　　//后代选择器 所有后代
$(".outer>div")   //子代选择器 直接关系的子代
$(".outer+div")   //向下毗邻选择器 必须向下紧挨着的兄弟
$(".outer~div")　　//向下兄弟选择器 必须是向下的兄弟 不必毗邻

3.1.3 基本筛选器

$("li:first")  //第一个li标签
$("li:last")　　//最后一个li标签
$("li:eq(2)")  //从0开始 eq(0) 是第一个
$("li:even")　　//所有的偶数行 第0 2 4 ...行
$("li:odd")　　//所有的奇数行 第1 3 5 ... 行
$("li:gt(1)")　　//选择大于该行之后的所有行 从第2行之后开始
$("li:lt(1)")　　//选择小鱼该行之前的所有行

3.1.4 属性选择器

$('[id="div1"]')   
$('["alex="sb"][id]')

3.1.5 表单选择器

$("[type='text']")----->$(":text")         注意只适用于input标签  : $("input:checked")

实例之左侧菜单

实例之tab切换

3.2 筛选器

3.2.1 过滤筛选器

$("li:eq(3)").css("color","red");

$("li").eq(2).css("color","red");   //推荐使用第二种方法

$("li").first().css("color","red");

$("li").last().css("color","red");

3.2.2 查找筛选器（重要！！！）4类必记

$(".outer").next().css("color","blue");  //下面一个

$(".outer").nextAll().css("color","blue");   //下面所有

$(".outer").nextUntil(".li555").css("color","blue"); //选择下面的一个区间 两边开区间

$("outer").prev().css("color","blue");   //前一个

$("outer").prevAll().css("color","blue");    //前一个及所有

$("outer").prevUntil("li222").css("color","blue");  //前面的一个区间 两边开区间

console.log($(".outer .inner p").parent().html());    //找到父亲

$(".inner").parents().css("color","blue");   //找到父亲及父亲的所有兄弟

$(".li222").parentUntil(".outer").css("color","red");

    $(".outer").siblings().css("color","red");   //所有兄弟(除掉自己)

练习：收缩左侧菜单栏

效果：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>左侧菜单栏练习</title>

    <style>

        .outer{width: 100%;height: 1080px}

        .content{

            display: inline-block;

            width: 69%;

            height: 100%;

            margin-left: 2px;

            background-color: #1E1E1F;

            border: 1px solid darkred;

        }

        .menu-box{

            float: left;

            width: 30%;

            height: 100%;

            background-color: #00bc6f;

        }

        .menu .title{

            width: 400px;

            background-color: #0d354b;

            color: white;

            font-size: 22px;

            font-weight: 700;

            height: 50px;

        }

        .hide{display: none}

    </style>

</head>

<body>

<div class="outer">

    <div class="menu-box">

        <div class="menu box1">

            <button class="title" onclick="expand_menu(this)">菜单一</button>

            <div class="conn">

                <div>111</div>

                <div>111</div>

                <div>111</div>

                <div>111</div>

            </div>

        </div>

        <hr/>

        <div class="menu box2">

            <button class="title" onclick="expand_menu(this)">菜单二</button>

            <div class="conn hide">

                <div>222</div>

                <div>222</div>

                <div>222</div>

                <div>222</div>

            </div>

        </div>

        <hr/>

        <div class="menu box3">

            <button class="title" onclick="expand_menu(this)">菜单三</button>

            <div class="conn hide">

                <div>333</div>

                <div>333</div>

                <div>333</div>

                <div>333</div>

            </div>

        </div>

    </div>

    <div class="content">内容页面</div>

</div>

<script src="jquery-3.3.1.js"></script>

<script>

    function expand_menu(self){

        $(self).next().removeClass("hide");

        $(self).parent().siblings().children(".conn").addClass("hide")

    }

</script>

</body>

</html>

四、操作元素(属性，css，文档处理)

.hasClass() 方法

//$("div").hasClass("div1") 判断一个标签中是否有某个class属性

console.log($("div").hasClass("div1"));    //true

4.1 属性操作

--------------------------属性

$("").attr();

$("").removeAttr();

$("").prop();

$("").removeProp();

HTML标签：

<div class="div1" id="dd1" con="connect"></div>

<input type="checkbox" checked="checked">是否选择

<input type="checkbox">是否选择

练习：

// --------------------------属性

    // $("").attr();   //重要！ attr()中一个参数 提取属性，两个参数是替换

    // $("").removeAttr();

    // $("").prop();   //重要！ prop中一个参数 提取属性，两个参数是替换

    // $("").removeProp();

    // ---------------------------

    // $("").css("color","red")

    //attr 不能找到input ->checkbox 是否是checked，prop能检测出checked 且返回true

    // console.log($("[type='checkbox']:first").attr("checked"));

    // console.log($("[type='checkbox']:last").attr("checked"))

    // console.log($(":checkbox:first").prop("checked"))

    // console.log($(":checkbox:last").prop("checked"))

    //attr 能找到标签固有的属性 如class id属性 也能找到自定义的属性 如con

    //prop 只能找到标签固有的属性

    console.log($("div").attr("class"))     //div1

    console.log($("div").attr("id"))        //dd1

    console.log($("div").attr("con"))       //connect

    console.log($("div").prop("class"))     //div1

    console.log($("div").prop("id"))        //dd1

    console.log($("div").prop("con"))       //undefined

--------------------------CSS类

$("").addClass(class|fn)

$("").removeClass([class|fn])

HTML标签：

<span id="aaa">

    spanspanspan

    <p class="ip1">spspspsp</p>

</span>

练习：

// --------------------------CSS类

    // $("").addClass(class|fn)    //添加 class属性

    // $("").removeClass([class|fn])

    console.log($("#aaa").addClass("bcbcbc").hasClass("bcbcbc"))    //true

    console.log($("#aaa p").removeClass("ip1").hasClass("ip1"))     //false

--------------------------HTML代码/文本/值

$("").html([val|fn])     //获取HTML标签，参数是标签则替换

$("").text([val|fn])     //只获取内容

HTML标签：

<input type="text" value="1234">

<div class="vava" value="111222">添加css样式</div>

练习：

console.log($("#aaa").html())

    $("#aaa").html("<h1>hello h1</h1>")

    console.log($("#aaa").text())

    // $("").val([val|fn|arr])  //获取标签中有value固有属性的 取出value值 如input select option 表单标签都有

    console.log($(":text").val())

    console.log($(".vava").val())   //div 标签固有属性中没有 value

    console.log($(":text").val(6789))

---------------------------

$("").css("color","red")

$("#vava").css({"color":"red","background-color":"gray"})

注意：

<input id="chk1" type="checkbox" />是否可见

<input id="chk2" type="checkbox" checked="checked" />是否可见

<script>

//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此

//需要使用prop方法去操作才能获得正确的结果。

//    $("#chk1").attr("checked")

//    undefined

//    $("#chk1").prop("checked")

//    false

//  ---------手动选中的时候attr()获得到没有意义的undefined-----------

//    $("#chk1").attr("checked")

//    undefined

//    $("#chk1").prop("checked")

//    true

    console.log($("#chk1").prop("checked"));//false

    console.log($("#chk2").prop("checked"));//true

    console.log($("#chk1").attr("checked"));//undefined

    console.log($("#chk2").attr("checked"));//checked

</script>

attr和prop

实例之全反选

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-1.11.3.min.js"></script>

    <script>

             function selectall(){

                 $("table :checkbox").prop("checked",true)

             }

             function cancel(){

                 $("table :checkbox").prop("checked",false)

             }

             function reverse(){

                 //                 var idlist=$("table :checkbox")

//                 for(var i=0;i<idlist.length;i++){

//                     var element=idlist[i];

//

//                     var ischecked=$(element).prop("checked")

//                     if (ischecked){

//                         $(element).prop("checked",false)

//                     }

//                     else {

//                         $(element).prop("checked",true)

//                     }

//

//                 }

//    jquery循环的两种方式

                 //方式一

//                 li=[10,20,30,40]

//                 dic={name:"yuan",sex:"male"}

//                 $.each(li,function(i,x){

//                     console.log(i,x)

//                 })

                 //方式二

//                    $("tr").each(function(){

//                        console.log($(this).html())

//                    })

                 $("table :checkbox").each(function(){

                     $(this).prop("checked",!$(this).prop("checked"));

//                     if ($(this).prop("checked")){

//                         $(this).prop("checked",false)

//                     }

//                     else {

//                         $(this).prop("checked",true)

//                     }

                     // 思考:如果用attr方法可以实现吗?

                 });

             }

    </script>

</head>

<body>

     <button onclick="selectall();">全选</button>

     <button onclick="cancel();">取消</button>

     <button onclick="reverse();">反选</button>

     <table border="1">

         <tr>

             <td><input type="checkbox"></td>

             <td>111</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>222</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>333</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>444</td>

         </tr>

     </table>

</body>

</html>

实例之模态对话框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .back{

            background-color: rebeccapurple;

            height: 2000px;

        }

        .shade{

            position: fixed;

            top: 0;

            bottom: 0;

            left:0;

            right: 0;

            background-color: coral;

            opacity: 0.4;

        }

        .hide{

            display: none;

        }

        .models{

            position: fixed;

            top: 50%;

            left: 50%;

            margin-left: -100px;

            margin-top: -100px;

            height: 200px;

            width: 200px;

            background-color: gold;

        }

    </style>

</head>

<body>

<div class="back">

    <input id="ID1" type="button" value="click" onclick="action1(this)">

</div>

<div class="shade hide"></div>

<div class="models hide">

    <input id="ID2" type="button" value="cancel" onclick="action2(this)">

</div>

<script src="jquery-1.11.3.min.js"></script>

<script>

    function action1(self){

        $(self).parent().siblings().removeClass("hide");

    }

    function action2(self){

        //$(self).parent().parent().children(".models,.shade").addClass("hide")

        $(self).parent().addClass("hide").prev().addClass("hide")

    }

</script>

</body>

</html>

4.2 文档处理

//创建一个标签对象

    $("<p>")

//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");

    $("").appendTo(content)       ----->$("p").appendTo("div");

    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");

    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");

    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");

    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");

    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换

    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

    $("").empty()

    $("").remove([expr])

//复制

    $("").clone([Even[,deepEven]])

文档处理小练习：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="div1">

    <p>hello ppp</p>

</div>

<div class="div2">

    <button>add</button>

</div>

<script src="jquery-3.3.1.js"></script>

<script>

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

////内部插入------------------

        //方式一 写死了不推荐使用

        $(".div1").append("<h1>HELLO WORLD!</h1>")

        $(".div1 h1").css("color","red")

        //方式二 推荐 var $ele 注意$ele $与ele之间不能有空格，并且ele不能用括号括起来

        var $ele=$("<h1></h1>")

        $ele.html("HELLO PIG")

        $ele.css("color","red")

        $(".div1").append($ele)

        $ele.appendTo($(".div1"))

        $(".div1").prepend($ele)

        $ele.prependTo($(".div1"))

////外部插入------------------

        $(".div1").after($ele)

        $ele.innerAfter(".div1")

        $(".div1").before($ele)

        $ele.innerBefore(".div1")

////替换-----------------------

        $("p").replaceWith($ele)

////删除与清空-----------------------

        $("p").empty()

        $("p").remove()

////复制-----------------------

        $("p:first").clone().appendTo($(".div1"))

    })

</script>

</body>

</html>

实例之复制样式条

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div class="outer">

        <div class="item">

            <button onclick="add(this)">+</button>

            <input type="text">

        </div>

    </div>

    <script src="jquery-3.3.1.js"></script>

    <script>

        function add(self) {

            var $ele=$(self).parent().clone()

            $ele.children("button").html("-").attr("onclick","delete_item(this)")

            $(".item:first").after($ele)

            // $(".outer").append($ele)

        }

        function delete_item(self) {

            $(self).parent().remove()

        }

    </script>

</body>

</html>

补充：

document.createElement方法的使用

我们在使用createElemen方法t创建一个元素节点的时候，似乎在IE下面怎么写都可以，但切换到FF等其它浏览器却总是会报错。

　　比如我们要创建一个input元素，那么在IE下，我们可以有多种写法：

要测试某种情况，请将其它情况注释：

<script type="text/javascript">

//第一种，连同属性一起被创建

var x = document.createElement("<input  type='text' size='30' />");

//第二种，以空标签形式创建

var x = document.createElement("<input  />");

//第三种，以tagName形式创建

var x = document.createElement("input ");

document.body.appendChild(x);

</script>

　　以上3种方式在IE中均可以通行，然后再非IE核心的浏览器中（如FF,OP,SF等），前2种写法均会报错，无法正确创建这个input元素。

　　标准写法为第3种，放之各浏览器而皆准。

　　由于在IE中使用createElement方法创建元素节点时，该元素的属性可以一起被创建，但这在其它浏览器中是行不通的，所以我们还得通过其它的方式来创建其属性。

创建一个带属性的元素节点的标准写法：

<script type="text/javascript">

var x = document.createElement("input");

x.setAttribute("type","text");

x.setAttribute("size","30");

document.body.appendChild(x);

</script>

　　增加一个属性就document.setAttribute("attribute","value")一次。

　　后来发现其实还可以这样来写：

<script type="text/javascript">

var x = document.createElement("input");

x.type = "text";

document.body.appendChild(x);

</script>

　　但使用这种来创建属性，好像并不是素所有的属性都能被创建，比如input的size,value,class等用这种方式就无法创建，至于具体原因我还不大清楚。所以推荐使用前面那种写法。

4.3 css操作

CSS

        $("").css(name|pro|[,val|fn])

    位置

        $("").offset([coordinates])

        $("").position()

        $("").scrollTop([val])

        $("").scrollLeft([val])

    尺寸

        $("").height([val|fn])

        $("").width([val|fn])

        $("").innerHeight()

        $("").innerWidth()

        $("").outerHeight([soptions])

        $("").outerWidth([options])

实例返回顶部

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .outer{width: 100%;height: 100%}

        .item1{

            width: 80%;

            height: 800px;

            background-color: #00bc6f;

            margin: 0 auto 0 auto;

            border: 1px solid darkred;

            overflow: auto;

        }

        .item2{

            width: 80%;

            height: 800px;

            background-color: #bc42a0;

            margin: 0 auto 0 auto;

            border: 1px solid darkblue;

        }

        .item2 button{

            height: 60px;

            width: 90px;

            background-color: #1E1E1F;

            color: white;

            text-align: center;

            line-height: 60px;

            position: relative;

            margin-right: 30px;

            margin-bottom: 30px;

        }

        .returnTop{

            height: 60px;

            width: 90px;

            background-color: #1E1E1F;

            color: white;

            text-align: center;

            line-height: 60px;

            position: fixed;

            right: 30px;

            bottom: 30px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

<div class="outer">

    <div class="item1">第一部分

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    <h1>111111111111111</h1>

    </div>

    <div class="item2">

        第二部分

        <button onclick="item1goTOP()">item1返回顶部</button>

    </div>

    <div class="returnTop hide" onclick="goTOP()">返回顶部</div>

</div>

<script src="jquery-3.3.1.js"></script>

<script>

    //监听事件-->只要鼠标滑轮一动就会触发事件

    window.onscroll=function (){

        // console.log($(window).scrollTop())

        if($(window).scrollTop()>100){

            $(".returnTop").removeClass("hide")

        }else{

            $(".returnTop").addClass("hide")

        }

    }

    function goTOP() {

        $(window).scrollTop(0)

    }

    function item1goTOP() {

        $(".item1").scrollTop(0)

    }

</script>

</body>

</html>

五、事件

事件委托介绍：

JavaScript(jQuery)中的事件委托

一：什么是事件委托？

    事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。

二：为什么要用事件委托？

    1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。为什么呢？因为，每个事件处理函数都是对象，对象会占用内存，内存中的对象越多，性能就越差。此外，必须事先指定所有的事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。

    2.对有很多个数据的表格以及很长的列表逐个添加事件，简直就是噩梦。所以事件委托，能极大地提高页面的运行性能，减少开发人员的工作量。

// 页面载入：

    ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

    $(document).ready(function(){}) -----简写方式------> $(function(){})

// 简单的事件绑定方法：

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

            alert("hello world")

        });

// 事件绑定--->事件委托：

    $("").on(event,[selector],[data],function)  // 在选择元素上绑定一个或多个事件的事件处理函数。

        //.on 的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：

        //$('ul').on('click', 'li', function(){console.log('click');})

        //(.on 是临时的给ul标签绑定事件，当触发click后再选择给ul下的li标签绑定function事件) 就是筛选出ul下的li给其绑定click事件；

    // [selector]参数的好处:

    //     好处在于.on方法为动态添加的元素也能绑上指定事件；如：

        $('ul li').on('click', function(){console.log('click');})   //的绑定方式和

        $('ul li').bind('click', function(){console.log('click');}) //一样；

        // 我通过js给ul添加了一个li 如：

        $('ul').append('<li>js new li<li>')； //这个新加的li是不会被绑上click事件的

        //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加

        //li:$('ul').append('<li>js new li<li>'); 这个新生成的li被绑上了click事件

    // [data]参数的调用:

         function myHandler(event) {

            alert(event.data.foo);

            }

         $("li").on("click", {foo: "bar"}, myHandler)

事件绑定--->事件委托概念：

1、事件委托与事件绑定概念

事件绑定：将普通的事件event绑定在DOM节点上，当DOM节点被选中时，将事件与之绑定，方便用户提供相应的操作。
比如：在button按钮上绑定click鼠标事件，在input中绑定focusin焦点事件等等，具体的例如：常常在代码中这样写$('.bn1').click(function(){...})就是普通的事件绑定。

事件委托：是指在事件绑定的基础上补充与扩展事件绑定，具体就是指：通过子节点元素绑定事件来传递给父元素DOM节点（祖先节点）来统一管理其全部后代子元素。
这样遇到需要绑定很多事件的子元素时，就避免了很多麻烦重复绑定事件的工作，提供了访问效率。具体代码 $('要绑定标签的上级标签').on('click','要绑定的标签',function(){...})

　　
在网上有这样的例子：事件委托好比学校门卫收发室代收快递,100个学生快递都到了，不可能都挤到学校大门口去拿快递，这时候就需要门卫快递收发室进行委托代收快递，
　　之后一一核实，学生们就可以去领快递了。不会造成拥堵的情况出现，也不会出现拿错了快递等情况，期间如果有新的学生加入到该学校，他也需要拿快递，门卫收发室就核实他的身份，
　　同样的一视同仁委托代收他的快递。

https://blog.csdn.net/Mynewclass/article/details/78959785

实例之面板拖动

实例之放大镜

六、动画效果

显示|隐藏|切换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.3.1.js"></script>

    <style>

        .item h1{

            height: 100px;

            width: 200px;

            background-color: #0d354b;

            color: white;

            font: 25px 700;

            text-align: center;

            line-height: 100px;

        }

    </style>

</head>

<body>

<div class="item">

    <h1>hello world</h1>

</div>

<button onclick="f1()">显示</button>

<button onclick="f2()">隐藏</button>

<button onclick="f3()">切换</button>

<script>

    function f1(){

        $("h1").show()

        // $("h1").show(1000)      //1000ms 之后显示

    }

    function f2(){

        // $("h1").hide()

        $("h1").hide(1000)

    }

    function f3(){

        // $("h1").toggle()

        $("h1").toggle(1000)

    }

</script>

</body>

</html>

滑动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.3.1.js"></script>

    <style>

        .item h1{

            height: 100px;

            width: 200px;

            background-color: #0d354b;

            color: white;

            font: 25px 700;

            text-align: center;

            line-height: 100px;

        }

    </style>

</head>

<body>

<div class="item">

    <h1>hello world</h1>

</div>

<button onclick="f1()">向下滑动</button>

<button onclick="f2()">向上滑动</button>

<button onclick="f3()">切换</button>

<script>

    function f1(){

        $("h1").slideDown()

        // $("h1").slideDown(1000)      //1000ms 之后向下滑动

    }

    function f2(){

        // $("h1").slideUp()

        $("h1").slideUp(1000)

    }

    function f3(){

        // $("h1").slideToggle()

        $("h1").slideToggle(1000)

    }

</script>

</body>

</html>

淡入淡出

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.3.1.js"></script>

    <style>

        .item h1{

            height: 100px;

            width: 200px;

            background-color: #0d354b;

            color: white;

            font: 25px 700;

            text-align: center;

            line-height: 100px;

        }

    </style>

</head>

<body>

<div class="item">

    <h1>hello world</h1>

</div>

<button onclick="f1()">淡入</button>

<button onclick="f2()">淡出</button>

<button onclick="f3()">切换</button>

<button onclick="f4()">透明度调节</button>

<script>

    function f1(){

        $("h1").fadeIn()

        // $("h1").fadeIn(1000)      //1000ms 之后向下滑动

    }

    function f2(){

        // $("h1").fadeOut()

        $("h1").fadeOut(1000,function () {      //--->1000ms淡出之后触发回调函数

            alert("淡出啦！666")

        })

    }

    function f3(){

        // $("h1").fadeToggle()

        $("h1").fadeToggle(1000)

    }

    function f4(){

        $("h1").fadeTo(1000,0.4)    //1000ms后透明度变为0.4

    }

</script>

</body>

</html>

回调函数（动画效果完成之后触发）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-2.1.4.min.js"></script>

</head>

<body>

  <button>hide</button>

  <p>helloworld helloworld helloworld</p>

 <script>

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

       $("p").hide(1000,function(){

           alert($(this).html())

       })

   })

    </script>

</body>

</html>

七、扩展方法 (插件机制)

一、用JQuery写插件时，最核心的方两个方法

【Python全栈-jQuery】jQuery基础知识的更多相关文章

Python全栈day10（基础知识练习题）
一,执行python的两种方式 1,写在脚本里面调用python执行,例如python test.py 2, 输入python在命令行交互执行,例如 python >>> pri ...
Python全栈开发【基础四】
Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理迭代器三元表达式列表解析与生成器表达式生成器匿名函数 lamb ...
Python全栈开发【基础三】
Python全栈开发[基础三] 本节内容: 函数(全局与局部变量) 递归内置函数函数一.定义和使用函数最重要的是减少代码的重用性和增强代码可读性 def 函数名(参数): ... 函数体 . ...
Python全栈开发【基础二】
Python全栈开发[基础二] 本节内容: Python 运算符(算术运算.比较运算.赋值运算.逻辑运算.成员运算) 基本数据类型(数字.布尔值.字符串.列表.元组.字典) 其他(编码,range,f ...
Python全栈开发【基础一】
Python全栈开发[第一篇] 本节内容: Python 的种类 Python 的环境 Python 入门(解释器.编码.变量.input输入.if流程控制与缩进.while循环) if流程控制与wh ...
python全栈字典数据类型相关知识及操作
python 全栈开发一.字典 1. 字典的概念: 字典 : dict 用 {} 来表示, 键位值数据. { key , value } 具有唯一性. 键:都必须是可哈希的不可变 ...
Python全栈之jQuery笔记
jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...
python 全栈开发，Day32(知识回顾,网络编程基础)
一.知识回顾正则模块正则表达式元字符 : . 匹配除了回车以外的所有字符 \w 数字字母下划线 \d 数字 \n \s \t 回车空格和 tab ^ 必须出现在一个正则表达式的最开始,匹配开 ...
Python全栈-day4-语法基础2
一.字符串 1.字符串基础 1)作用:用于描述姓名.性别.地址等信息 2)定义方式:单引号或者双引号以及三引号内添加字符注:day3中介绍 name = 'zhang' user_name = &q ...
Python全栈开发-Day1-Python基础1
目录 Python介绍 Python 2 or 3? 安装 Hello World程序变量用户输入模块初识 .pyc是个什么鬼? 数据类型初识数据运算表达式if ...else语句表达式f ...

随机推荐

开源网络库ACE、Boost的ASIO、libevent、libev、ZeroMQ
开源C/C++网络库:ACE C++语言跨平台Boost的ASIO C++语言跨平台libevent C语言主要支持linux,新版增加了对windows的IOC ...
MySQL 查询in操作，查询结果按in集合顺序显示
MySQL 查询in操作,查询结果按in集合顺序显示 select * from test where id in(3,1,5) order by find_in_set(id,'3,1,5'); ...
[SLAM] ***AR Tracking based on which tools?
SLAM虽然小复杂,但对于开发者而言,ar sdk通常会解决这个问题. 所以相对于识别,跟踪是个看上去高大上但实则不需要关注细节的部分. 识别,要技术深耕:跟踪,需行业深耕. 在此了解下常见的ar s ...
两种简单实现菜单高亮显示的JS类(转载)
两种简单实现菜单高亮显示的JS类近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web ...
Qt编写echart仪表盘JS交互程序支持webkit和webengine（开源）
Echart是百度研发团队开发的一款报表视图JS插件,功能十分强大,是本人用过的国产作品中最牛逼的,记得四五年前就在qt中使用过,当时用的浏览器控件是webkit,由于5.6以后的版本不再支持webk ...
day_6.10 tcp三次握手四次挥手
tcp和udp对比 tcp比udp稳定断开连接的四次挥手
A - Wall
Once upon a time there was a greedy King who ordered his chief Architect to build a wall around the ...
有关 PHP 的 10 道问题
1.简述面向对象的三大特性答:封装 -- 继承 -- 多态封装的目的:为了让类更安全继承的概念:子类可以继承父类的一切多态的概念:当父类引用指向子类实例,由于子类里面对父类的方法进行了重 ...
Jexus .Net at System.Net.Sockets.Socket.Connect (System.Net.IPAddress[] addresses, System.Int32 port)
环境:Jexus(独立版)+MVC(5.2.3) +Redis+EF(6.0) Application Exception System.Net.Sockets.SocketException Con ...
Arrays 类的一些常见用法
package cn.ljs; import java.util.Arrays; public class ArrayDemo { public static void main(String [] ...

【Python全栈-jQuery】jQuery基础知识

前端学习之jQuery

一、 jQuery是什么？

点击下载：jQuery 插件库下载地址

二、 什么是jQuery对象？

三、寻找元素(选择器和筛选器)

3.1 选择器

3.1.1 基本选择器

3.1.2 层级选择器

3.1.3 基本筛选器

3.1.4 属性选择器

3.1.5 表单选择器

实例之左侧菜单

实例之tab切换

3.2 筛选器

3.2.1 过滤筛选器

3.2.2 查找筛选器（重要！！！）4类必记

练习：收缩左侧菜单栏

四 、操作元素(属性，css，文档处理)

4.1 属性操作

4.2 文档处理

补充：

document.createElement方法的使用

4.3 css操作

五、事件

六、动画效果

显示|隐藏|切换

滑动

淡入淡出

回调函数（动画效果完成之后触发）

七、扩展方法 (插件机制)

一、用JQuery写插件时，最核心的方两个方法

【Python全栈-jQuery】jQuery基础知识的更多相关文章

随机推荐

热门专题

二、什么是jQuery对象？

四、操作元素(属性，css，文档处理)