jQuery快速入门

Posted 2020-11-27 maoxinjueluo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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包装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:eq(2)")  $("li:even") $("li:gt(1)")

3.1.4 属性选择器

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

3.1.5 表单选择器

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

实例之左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf8">
    <title>左侧菜单</title>
    <style>
        .menu{
            float:left;
            height:1000px;
            width:30%;
            background:#3666;
        }
        .content{
            float:left;
            height:1000px;
            width:70%;
            background:#366;
        }
        .load{
            color:#1239;
            font-size:20px;
            height:60px;
            border:blue solid 1px;
        }
        .hide{
            display:none;
        }


    </style>


</head>
<body>

<div class="menu">
    <div>
        <div class="load" onclick="show(this)">导航一</div>
        <div class="con hide">
            <li>11111111</li>
            <li>11111111</li>
            <li>11111111</li>
            <li>11111111</li>
            <li>11111111</li>
        </div>
    </div>
    <div>
        <div class="load" onclick="show(this)">导航二</div>
        <div class="con hide">
            <li>22222222</li>
            <li>22222222</li>
            <li>22222222</li>
            <li>22222222</li>
            <li>22222222</li>
        </div>
    </div>
    <div>
        <div class="load" onclick="show(this)">导航三</div>
        <div class="con hide">
            <li>33333333</li>
            <li>33333333</li>
            <li>33333333</li>
            <li>33333333</li>
            <li>33333333</li>
        </div>
    </div>


</div>

<div class="content">


</div>


</body>
<script src="jquery-3.4.1.js"></script>
<script>
    function show(self){
        $(self).next().removeClass("hide");
        $(self).parent().siblings().children(".con").addClass("hide");
    }


</script>


</html>

左侧菜单

3.2 筛选器

3.2.1 过滤筛选器

$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

3.2.2 查找筛选器

 $("div").children(".test")//查找子标签     $("div").find(".test")//查找后代所有标签  
                               
 $(".test").next()//查找下一级    $(".test").nextAll()//查找下面所有    $(".test").nextUntil() //开区间
                           
 $("div").prev()//查找上一级  $("div").prevAll()//查找上面所有   $("div").prevUntil()   
                        
 $(".test").parent()//查找父一级  $(".test").parents()//查找父级所有  $(".test").parentUntil() 

 $("div").siblings()//查找兄弟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf8">
    <title>jQuery对象</title>
</head>
<body>
<div alex="sb">这是一个div标签</div>
<div class="div1">div1div1div1
    <div class="div2">div2div2div2
        <p class="p1">pppppp</p>
    </div>
    <p class="p2">p2p2p2p2</p>
</div>


<ul>
    <li class="li1">1111111111</li>
    <li>2222222222</li>
    <li>3333333333</li>
    <li id="li4">4444444444</li>
    <li id="li5">5555555555</li>
</ul>

<form action="">
    <input type="text">
    <input type="checkbox">
    <input type="submit">
</form>

</body>
<script src="jquery-3.4.1.js"></script>
<script>
    //基本选择器
    // $("div").css("color","red");

    //层次选择器
    // $(".div1 .div2 .p1").css("color","green");

    // 基本筛选器
    // $("li:eq(3)").css("color","red");

    // 属性选择器
    // $("[alex=‘sb‘]").css(‘color‘,‘red‘);

    // 表单选择器
    // $("[type=‘text‘]").css("width","300px");
    // 另一种简便方法
    // $(":text").css("width","600px");

    // 查找筛选器
    // $(".div1").children("p").css("color","red");//找儿子
    // $(".div1").find("p").css("color","red");//找子代

    // 向下找
    // $("li:eq(1)").next().css("color","red");    找下一级
    // $("li:eq(1)").nextAll().css("color","red");     找下面所有
    // $("li:eq(1)").nextUntil("#li5").css("color","red");      找下面区间，开区间

    //向上找
    // $("li:eq(-1)").prev().css("color","red");   向上找一级
    // $("li:eq(-1)").prevAll().css("color","red");    向上找所有
    // $("li:eq(-1)").prevUntil(".li1").css("color","red"); 找上面区间，开区间

    //找父代
    // $(".p1").parent().css("color","red");   找父一级
    // $(".p1").parents().css("color","red");      找所有父级

    // 找兄弟
    // $(".p2").siblings().css("color","red");



</script>

</html>

寻找器和筛选器

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

4.1 属性操作

--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")

注意：

<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>
</head>
<body>

<div class="div1" value="name">div1div1div1</div>
<input type="checkbox" checked="checked">
<input type="text" value="姓名">



</body>
<script src="jquery-3.4.1.js"></script>
<script>
    //  attr 和 prop
    // console.log($(".div1").attr("value"));  //适用于子代定义的属性
    // console.log($(".div1").next().attr("checked")); //适用于子代定义的属性
    // console.log($(".div1").next().prop("checked"));     //返回一个布尔值，适用于固有属性
    // console.log($("div1").prop("value"));
    // console.log($("div1").removeAttr("value"));

    // attr重新赋值
    // $(".div1").attr("value","username");
    // console.log($(".div1").attr("value"));

    // prop 重新赋值
    // $(".div1").next().prop("checked",false);
    // console.log($(".div1").next().prop("checked"));

    // val()
    // $("[type=‘text‘]").val("value","username")

    // 修改HTML
    // $(".div1").html("<h1>这是新加的HTML</h1>");


</script>
</html>

属性操作

each：

当对标签进行for循环遍历时，可以用each

each有两种方法：

方法一：
<script>
    $.each(遍历对象，function(x,y)){
        
        x ：遍历对象的索引；
        y ：遍历对象的值；
    }
</script>

方法二：（推荐这种）
<script>
    $(遍历对象).each(function(){
        $(this) -------> 遍历的每个对象
    })
</script>

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf8">
    <title>正反选练习</title>
    <style>
        table{
            border:1px solid;
        }
        td{
            border:1px solid;
        }
    </style>
</head>
<body>

<table>

    <tr>
        <td><input type="checkbox"></td>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
        <td>4444</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
        <td>4444</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
        <td>4444</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
        <td>4444</td>
    </tr>

</table>

<button onclick="check_all()">全选</button>&nbsp;&nbsp;&nbsp;
<button onclick="check_none()">取消</button>&nbsp;&nbsp;&nbsp;
<button onclick="check_other()">反选</button>

</body>
<script src="jquery-3.4.1.js"></script>
<script>
       // 全选
    function check_all(){
        // console.log($("[type=‘checkbox‘]").prop("checked"));
        $("[type=‘checkbox‘]").prop("checked",true);
    }
    //取消
    function check_none(){
        $("[type=‘checkbox‘]").prop("checked",false);
    }
    //反选,第一种方法，for循环遍历
    // function check_other(){
    //     for (var i=0;i<$("[type=‘checkbox‘]").length;i++){
    //         var res = $("[type=‘checkbox‘]").eq(i).prop("checked");
    //         $("[type=‘checkbox‘]").eq(i).prop("checked",!res);
    //     }
    // }

    // // 第二种方法：each（）
    //    function check_other(){
    //         $.each($("[type=‘checkbox‘]"),function(x,y){
    //             var res = $(y).prop("checked");
    //             $(y).prop("checked",!res);
    //         })
    //    }
       
    // 第三种方法：each（）     ————》  最简单的方法
    // function check_other(){
    //     $("[type=‘checkbox‘]").each(function(){
    //        var res = $(this).prop("checked");
    //        $(this).prop("checked",!res);
    //     });
    // }
    
</script>

</html>

正反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div2{
            position:fixed;
            top:0;
            right:0;
            left:0;
            bottom:0;
            background-color:rgba(100,200,500,0.4);
        }
        .div3{
            height:300px;
            width:300px;
            background-color:gray;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-140px;
            margin-left:-150px;
        }
        .hide{
            display:none;
        }
    </style>

</head>
<body>

<div class="div1">
    <button onclick="show(this)">show</button>
    <p>白日依山尽</p>
    <p>黄河入海流</p>
    <p>欲穷千里目</p>
    <p>更上一层楼</p>
</div>

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

<div class="div3 hide">
    <button onclick="cancel(this)">cancel</button>
</div>


</body>
<script src="jquery-3.4.1.js"></script>
<script>

    function show(self){
        $(self).parent().siblings().removeClass("hide");
    }
    function cancel(self){
        $(self).parent().addClass("hide").prev().addClass("hide");
    }
</script>
</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>
    <button onclick="add(this)">+</button>
    <input type="text">
</div>

</body>
<script src="jquery-3.4.1.js"></script>
<script>
    function add(self){
        $clone_obj = $(self).parent().clone();
        $clone_obj.children("button").html("-").attr("onclick","remove_obj(this)");
        $(self).parent().after($clone_obj);
    }
    function remove_obj(self){
        $(self).parent().empty();
    }


</script>
</html>

复制样式条

4.3 CSS操作

        css

        $("").css(name|pro|[,val|fn])
    位置
        $("").offset([coordinates])　　　　--- 相对于视图的偏移量（left和top）：左：$("").offerset(...).left　　　　上:$("").offerset(...).top
        $("").position()　　　　　　　　　　--- 相对于已定位的父标签的偏移量  
        $("").scrollTop([val])　　　　　　----- 滑轮的位置信息，调用方法：
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　window.onscroll = function(){
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　$(window).scrollTop()　　　}

        $("").scrollLeft([val])　　　　　　------ 左右滑轮
    尺寸
        $("").height([val|fn])　　　　　　---- 内容的长度
        $("").width([val|fn])　　　　　　----- 内容的宽度
        $("").innerHeight()　　　　　　　----- 包括padding的长度
        $("").innerWidth()　　　　　　　　---- 包括padding的宽度
        $("").outerHeight([soptions])　　--- 包括整个标签的长度
        $("").outerWidth([options])　　　---- 包括整个标签的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            margin: 0px;
        }
        .returnTop{
            height: 60px;
            width: 100px;
            background-color: darkgray;
            position: fixed;
            right: 0;
            bottom: 0;
            color: red;
            line-height: 60px;
            text-align: center;
        }
        .div1{
            background-color: orchid;
            font-size: 5px;
            overflow: auto;
            width: 500px;
        }
        .div2{
            background-color: darkcyan;
        }
        .div3{
            background-color: aqua;
        }
        .div{
            height: 1000px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
     <div class="div1 div">
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>

     </div>
     <div class="div2 div"></div>
     <div class="div3 div"></div>
     <div class="returnTop hide" onclick="returnTop();">返回顶部</div>
</body>
<script src="jquery-3.4.1.js"></script>
<script>
    window.onscroll = function(){
        if ($(window).scrollTop()>400){
            $(".returnTop").removeClass("hide");
        }else{
            $(".returnTop").addClass("hide");
        }
    };
    function returnTop(){
        $(window).scrollTop(0);
    };
</script>

</html>

返回顶部

五事件

页面载入
    ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
    $(document).ready(function(){}) -----------> $(function(){})--- 简写形式，就是让页面加载完在加载function函数

事件处理
    $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。-----------格式：$（主语“ul”）.on(事件，委托人“li”，function（）{})
　
    //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
    //  $(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);})就是筛选出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)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
</head>
<body>

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
</ul>

<button>+</button>

</body>
<script src="jquery-3.4.1.js"></script>
<script>
    $("button").click(function(){
        var $ele = $("<li>");
        var len = $("ul li").length;
        $ele.html((len+1)*1111);
        $("ul").append($ele);
    })
    //  新增加的标签没有这个功能
    // $("ul li").click(function(){
    //     alert(666);
    // })

    // on 事件委托
    // 格式：$(主语).on("click",委托人,function(){})
    $("ul").on("click","li",function(){
        alert(666)
    })


</script>
</html>

事件委托

六、动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            margin: 0px;
        }
        .returnTop{
            height: 60px;
            width: 100px;
            background-color: darkgray;
            position: fixed;
            right: 0;
            bottom: 0;
            color: red;
            line-height: 60px;
            text-align: center;
        }
        .div1{
            background-color: orchid;
            font-size: 5px;
            overflow: auto;
            width: 500px;
            height:100px;
        }
        .div2{
            background-color: darkcyan;
        }
        .div3{
            background-color: aqua;
        }
        .div{
            height: 1000px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
     <div class="div1 div">
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>

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

<button onclick="show()">显示</button>
<button onclick="hide()">隐藏</button>
<button onclick="toggle()">切换</button>
</body>
<script src="jquery-3.4.1.js"></script>
<script>
    function show(){
        $(".div").show(1000);   //  显示
    }
    function hide(){
        $(".div").hide(1000);       //隐藏
    }
    function toggle(){
        $(".div").toggle(1000);     //切换
    }
</script>
</html>

显示隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function(){
     $("#slideDown").click(function(){
         $("#content").slideDown(1000);
     });
      $("#slideUp").click(function(){
         $("#content").slideUp(1000);
     });
      $("#slideToggle").click(function(){
         $("#content").slideToggle(1000);
     })
  });
    </script>
    <style>

        #content{
            text-align: center;
            background-color: lightblue;
            border:solid 1px red;
            display: none;
            padding: 50px;
        }
    </style>
</head>
<body>

    <div id="slideDown">出现</div>
    <div id="slideUp">隐藏</div>
    <div id="slideToggle">toggle</div>

    <div id="content">helloworld</div>

</body>
</html>

滑动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function(){
   $("#in").click(function(){
       $("#id1").fadeIn(1000);


   });
    $("#out").click(function(){
       $("#id1").fadeOut(1000);

   });
    $("#toggle").click(function(){
       $("#id1").fadeToggle(1000);


   });
    $("#fadeto").click(function(){
       $("#id1").fadeTo(1000,0.4);

   });
});



    </script>

</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>

</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写插件时，最核心的方两个方法

<script>
    
$.extend(object)      //为JQuery 添加一个静态方法。
$.fn.extend(object)   //为JQuery实例添加一个方法。


    jQuery.extend({
          min: function(a, b) { return a < b ? a : b; },
          max: function(a, b) { return a > b ? a : b; }
        });
    console.log($.min(3,4));

//-----------------------------------------------------------------------
$.fn.extend({
    "print":function(){
        for (var i=0;i<this.length;i++){
            console.log($(this)[i].innerHTML)
        }

    }
});

$("p").print();
</script>