jQuery (参考)

最新推荐文章于 2023-05-08 14:49:22 发布

维克多噗噗

最新推荐文章于 2023-05-08 14:49:22 发布

阅读量1.2k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_26766283/article/details/70341550

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详述jQuery 3.2.1的核心特性，包括属性、CSS操作、事件处理、DOM操作、筛选和动画效果。讲解了如offset()、position()、on()、append()、remove()等关键方法，并提醒读者注意jQuery对象与JavaScript对象的区别，以及它们之间的转换和混用注意事项。

摘要由CSDN通过智能技术生成

参考 jQuery API 3.2.1 速查表 –作者：Shifone

核心

    认识
        jquery是由javascript语法组成的一个插件
        jquery目前有三个大版本：
            1.0 支持所有浏览器，代码量比较多
            2.0 不再支持IE6,7,8 代码精简很多
            3.0 在2.0的基础上删除很多不再使用的代码，使用更好的运动框架等等，某些版本没有ajax

    核心
    jquery插件库对外提供唯一的接口 jQuery 或者 $

    jQueryAPI操作完后，有的是有固定返回的，
    没有固定返回的API，基本上都是返回jQuery对象本身

    关于jquery的遍历：
        在处理节点的时候jquery默认遍历
        each()

    jQuery对象和JS对象互相转换
        jQuery => JS
            [] ,get()
        eg:
            $("div")[0].style.color = "#f60";
            $("div").get(1).style.color = "#d00";
        Js => jQuery
        eg:
            var Doms = document.querySelectorAll("div");
            $(Doms).css("color","#f60");

    .eq()
        接受数字参数，筛选出第几个，返回一个jQuery对象
        $("div").eq(0).css("background","#f60");

    .length / .size() (在3.0以上版本没有size了)
        不需要参数，返回一个数字，代表包含的节点的个数
        alert( $obj.length );

    index();
        没参数时,返回在父级所属的序列号.
        接受选择器参数,返回所选择的集合内的所在的序列号

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>Document</title>
        <style type="text/css">
            * {margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li {list-style: none;}
            body {font-family: "Microsoft yahei";}
        </style>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    </head>
<body>
    <div id="box">
        <p>000</p>
        <div>001</div>
        <div>002</div>
        <div>003</div>
        <div>004</div>
    </div>
<script type="text/javascript">
    /*
        jQueryAPI操作完后，有的是有固定返回的，
        没有固定返回的API，基本上都是返回jQuery对象本身
     */
     // $("div").each(function(i){   //通过each()遍历选中的元素集合
     //    // i  ==>下标
     //    // console.log(i);
     //    // console.log(this);
     //    this.style.color = "#f60";
     // });
     // $("div")[0].style.color = "#f60";
     // $("div").get(1).style.color = "#d00";
     // var Doms = document.querySelectorAll("div");
     // $(Doms).css("color","#f60");

     // $('div').each(function (i) {
     //     //this.style.fontSize = 12 + i*2 + 'px';
     //     $(this).css('fontSize' , 14 + i*2 + 'px');
     // });


     // $("div").eq(0).css("background","#f60");
     //

     $("#box div").click(function(){
        // alert($(this).index());
        alert($(this).index('#box div'));

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

属性

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>Document</title>
        <style type="text/css">
            * {margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li {list-style: none;}
            body {font-family: "Microsoft yahei";}
        </style>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    </head>
<body>
    <div id="box" goudan="123">
        <div>001</div>
        <div>002</div>
        <div>003</div>
        <div>004</div>
    </div>
    <input type="text" name="">
<script type="text/javascript">
    /*
        属性

        .attr()
            设置/获取自定义标签属性，参数类似于css()
        .prop()

        .removeAttr()
        .removeProp()

        //$('#box').attr('afei' , '123');
        //alert( $('#box').attr('goudan') );
        //$("#box").css('color' , 'red').attr('afei' , '123').css('fontSize' , '12px');
        //$("#box").removeAttr('goudan');
     */


    /*
        类名
            addClass()
            removeClass()
            toggleClass()  有和无 替换.

        html() .
            接受一个字符串参数：设置html内容
            不传参数，获取html内容
        text()

        val()
            $('input').val('1230');

     */
      $('input').val('1230');
</script>
</body>
</html>

CSS

offset() position()

        .offset()
            返回一个对象，拥有left 和 top 属性
            元素到浏览器窗口的距离
            参数.  ==>设置
            $("#box2 p").offset({left: 30,top: 50});
        .position()
            返回一个对象，拥有left 和 top 属性
            元素到定位父级的距离（!!! 不包含margin）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="Author" content="Fly">
        <style type='text/css'>
            *{ margin:0; padding:0; font-family:Microsoft yahei,serif;}

            #box{
                height: 50px;
                background-color: pink;
                padding-top: 50px;
                position: absolute;
                top: -10px;
                width: 500px;
            }
            #box ul{
                margin-left: 50px;
                height: 30px;
                background-color: #cccccc;

            }
            #box ul li{
                float:left;
                width: 100px;
                height: 20px;
                margin: 0 20px;
                background-color: #1806ff;
                list-style: none;
                position: absolute;
            }
            #box2 {
                position: relative;
                top: 200px;
                left: 50px;
                width: 100px;
                height: 100px;
            }
            #box2 p {
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div id="box2">
            <p>123</p>
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script>

            var $obj = $('#box ul li').eq(0);

            //console.log( $obj.offset() );
            console.log( $obj.position() );
            // $("#box2 p").offset({left: 30,top: 50});
            console.log($("#box2 p").offset());
        </script>
    </body>
</html>

scrollTop() scrollLeft()

            滚动高度.
            同样.  没参数->获取.
                    有参数->设置

width() innerWidth() outerWidth()

    (高度同理)

    width() --->元素宽度.
    innerWidth() ---> width+padding
    outerWidth() ---> width+padding+border
    返回值.(没单位)

    传参数. ==>设置. !!number   
    eg:  $("#box").height(50);

事件

jquery事件都是通过 addEventListener 的方法添加的

事件名省略了on.

            $(document).ready(function () {

            });
            //一样的意思   ===>dom加载时就触发了. 比window.onload早.
            $(function () {

            });

on(events,[selector],[data],fn)

//[selector],[data] 可选.

多个事件.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>多个事件</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style>
        * {margin: 0; padding: 0;}
        body {font-family: 'Microsoft yahei';}
        a {text-decoration: none; color: #000;}
        ul,li {list-style: none;}
    </style>
</head>
<body>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491904122317&di=e0925dddd0f6a1676f4215f6cefecf82&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201506%2F20%2F20150620224348_ajx2z.jpeg" alt="" width="600" height="auto">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=150122633,3407456585&fm=23&gp=0.jpg" alt="">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 1
            // $("img").on("mouseover mouseout",fn);
            // function fn(e){
            //     var e = e||window.event;
            //     if(e.type == "mouseover"){
            //         $(this).css({"transition": "all .5s","transform":"scale(1.5)"});
            //     };
            //     if(e.type == "mouseout"){
            //         $(this).css("transform","scale(0.7)");
            //     };
            // };


            // 2==>用对象存事件
            $("img").on({
                "mouseover":function(e){
                     $(this).css({"transition": "all .5s","transform":"scale(1.5)"});
                },
                "mouseout":function(e){
                     $(this).css("transform","scale(0.7)");
                }
            });
        })
    </script>
</body>
</html>

传递data.

// 用json传递数据data在事件后
json == 事件event.data

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style>
        * {margin: 0; padding: 0;}
        body {font-family: 'Microsoft yahei';}
        a {text-decoration: none; color: #000;}
        ul,li {list-style: none;}
    </style>
</head>
<body>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491904122317&di=e0925dddd0f6a1676f4215f6cefecf82&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201506%2F20%2F20150620224348_ajx2z.jpeg" alt="" width="600" height="auto">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=150122633,3407456585&fm=23&gp=0.jpg" alt="">

    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 用json传递   数据data在事件后
            $("img").on("click",{"title":"gakki","width":800},function(e){
                var e = e||window.event;   //
                console.log(e);
                $(this).attr("title",e.data.title).css("width",e.data.width);
            });
        });
    </script>
</body>
</html>

off()解绑事件

//$('#box ul li').off('click');

文档处理(Dom操作)

append prepend

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>prepend append</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style>
        * {margin: 0; padding: 0;}
        body {font-family: 'Microsoft yahei';}
        a {text-decoration: none; color: #000;}
        ul,li {list-style: none;}
    </style>
</head>
<body>
    <div id="wrap">
        <h1>Dom树</h1>
        <p>1</p>
        <p>2</p>
    </div>
    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*
                append      在元素最后插入内容
                appendTo    插入目标内
                prepend     插入元素内最前面
                prependTo
             */
             var $div = $("<div style='width:100px;height:100px;background:pink'>我是被创建的</div>");//创建
             // $("#wrap").append($div);
             $div.appendTo($("#wrap"));  //插入目标内
             var $p = $("<p>123</p>");
             // $("#wrap").prepend($p);
             $p.prependTo($("#wrap"));

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

after before (插入兄弟元素) remove(可以自杀) detach() empty()删除儿子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>添 删</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style>
        * {margin: 0; padding: 0;}
        body {font-family: 'Microsoft yahei';}
        a {text-decoration: none; color: #000;}
        ul,li {list-style: none;}
        img { width: 600px; height: auto; vertical-align: top;}
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*
                insertAfter --->after
                ===>        语法相当于appendTo
                insertBefore --->  before
             */
            $("#box img").after($("<h2>标题2</h2>"));  //在匹配的元素之后插入内容.
            // $("<h2>标题2</h2>").insertAfter($("#box img"));  //在目标值之后插入$("<h2>标题2</h2>")
            $("#box img").before($("<h2>标题1</h2>"));  //在匹配的元素之前插入内容.

            /*
                        返回被删的元素
                    remove   删除
                    detach   分离  保留数据 可再添加

                    empty    清空元素里面的内容
            */
            $("#box ul li:first").remove();  //选择-删除
            $("#box ul li:last").empty();  //选择 清空元素内容
            var img = $("#box ul li:eq(2)").detach();  //选择 移除==>  <li></li>
            $("body").click(function(){
                $('#box ul').append(img);
            })

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

wrap wrapAll wrapInner upwrap

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style>
        * {margin: 0; padding: 0;}
        body {font-family: 'Microsoft yahei';}
        a {text-decoration: none; color: #000;}
        ul,li {list-style: none;}
        .wrap {width: 100px; height: 100px; background-color: pink;}
    </style>
</head>
<body>
    <button id="box1">外包</button>
    <button id="box3">内包</button>
    <p>003 <span>123</span></p>
    <p>003</p>
    <button id="box2">总包</button>
    <button id="box4">卸包</button>
    <p>003</p>
    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $("#box1").click(function(){
            $("p").wrap("<div class='wrap'>内容</div>");  //外包.选择元素，外面包裹html元素；单独添加爸爸
        })
        $("#box2").click(function(){
            $("p").wrapAll("<div class='wrap'></div>");  //总包  顺序会自动调整 包裹选择匹配的所有元素p， 同一添加共同爸爸
        });
        $("#box3").click(function(){
            // 内包  选择元素里面包裹一层html元素  里面的内容被包裹
            $("p").wrapInner("<a href='javascript:void(0)'>a标签</a>");
        });
        $("#box4").click(function(){
            // 卸包  删除爸爸 保留兄弟节点
            $("p").unwrap();
        });
    })
    </script>
</body>
</html>

clone(bool)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>cloneNode</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style>
        * {margin: 0; padding: 0;}
        body {font-family: 'Microsoft yahei';}
        a {text-decoration: none; color: #000;}
        ul,li {list-style: none;}
    </style>
</head>
<body>
    <p id="js">对象</p>
    <p id="jq" style="color: #f60;">对象</p>
    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    <script type="text/javascript">
        var body = document.querySelector("body");
        var pDom = document.querySelector("#js");
        body.onclick = function(){
            /*
                   js cloneNode(bool)    true false 是否拿属性和所有子节点(文本)
                    jq   clone(bool)
             */
            var cloneDom = pDom.cloneNode(true);
            pDom.parentNode.appendChild(cloneDom);

            var $clone = $("#jq").clone();
            $("#js").before($clone);
        }
    </script>
</body>
</html>

筛选

hasClass("className") .查看元素是否有这个类名.返回boolen
//alert( $('#goudan').hasClass('box') );

filter()  再次过滤.
//$obj.filter('.box').css('color' , 'red');
not()   反义.再次过滤.选择除了元素本身的其他元素
//$obj.not('.box').css('color' , 'red');

children()  选中儿子. 孙子不行.
//$('div').eq(1).children().css('color' , 'red');

find("") 必须有参数."*"选中全部后代元素.
//$('div').eq(1).find('*').css('color' , 'red');

siblings()   选中兄弟元素.  参数(可以筛选) eg: "div"
//$("#goudan").siblings('div').css('color' , 'red');

parent()  选中爸爸.

parents()  选中全部父级元素.   (参数) 可以筛选  
$("#goudan").parents('html').css('color' , 'red');

效果(动画)

hover() stop()

hover()   移入移出   参数 1 移入 mouseenter  2移出 mouseleave  参数2可省缺
hover(function(){},function(){})

stop()   停止所有在指定元素上正在运行的动画.

要指定元素上立刻完成运行的动画. stop(true,true);

eg:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="Author" content="Fly">
    <style type='text/css'>
        *{ margin:0; padding:0; font-family:Microsoft yahei,serif;}

        #box ul li{
            width: 100px;
            height: 30px;
            background-color: pink;
            float: left;
            border-right: 1px solid #ff6600;
            cursor: pointer;
            list-style: none;
        }
    </style>
</head>
<body>
<div id="box">

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>

    // $("#box ul li").hover(function () {
    //     $(this).stop().animate({
    //         height : '500px'
    //     },500);
    // },function () {
    //     $(this).stop().animate({
    //         height : '20px'
    //     },500);
    // });

    /*
    $("#box ul li").animate({
        height : '500px'
    } , 3000 );

    $(document).click(function () {
        $("#box ul li").stop(true,true);
    });*/
</script>
</body>
</html>

animate(param,[time],[easing],[callBack])

    .fn([time],[easing],[callBack])
    显示/隐藏  
    .show() ---- .hide() ---- .toggle()
    淡入淡出
    .fadeIn() ---- .fadeOut() ---- .fadeToggle()  ---- fadeTo(0.8 , 2000)
    下拉/收回
    .slideDown() ---- .slideUp() ---- .slideToggle()
    .animate()

eg:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="Author" content="Fly">
    <style type='text/css'>
        *{ margin:0; padding:0; font-family:Microsoft yahei,serif;}
        #box{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="box"></div>

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

    /*
        .show() ---- .hide() ---- .toggle()
        .fadeIn() ---- .fadeOut() ---- .fadeToggle()  ---- fadeTo(0.8 , 2000)
        .slideDown() ---- .slideUp() ---- .slideToggle()
        .animate()
     */

    $(document).click(function () {
        /*
        $('#box').show( 2000 , function () {
            alert('动画完成了！');
        });
        */
        //$('#box').fadeIn( 1000 );
        //$('#box').slideDown( 2000 );

        $('#box').animate({
            width : '500px',
            height : '500px',
            marginLeft : '200px'
        } , 2000 , function () {
            alert("完成！");
        });

    });


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

参考文档:

2.X版本不兼容ie 6 7 8
1.X版本可以兼容ie 6 7 8

jQuery CDN
百度 cdn cdn.code.baidu.com
boot cdn http://www.bootcdn.cn/jquery/

jQuery API
http://www.shifone.cc/
jQuery引用

jQuery选择器

$(”) css样式能怎么选中 jq选择器也可以但是jq选择器不能选择伪元素例如 ::after :befor

举例说明: $('div')$ (‘#box’) $('.wrap')$ (‘#box ul li , .wrap ul li’) $('#box ul>li')$ (‘li’)
$(‘lable+input’) 紧跟在lable之后的input$ (‘form~ input’)所有和form同级的input元素
$(‘#div ul:not([id=’a’])’)

jq对象, 通过$()获取的对象,就是jq对象,
jq方法和原生js方法不能随意混用,需要进行js<==>jq对象转换

js对象独有方法 document.getElementById(“img”).src = “test.jpg”

js对象转换成jq对象 $li=$ (oLi)
jq对象转换成js对象 $Li.get(0) 或者$ Li[0]

js对象和jq对象区别

.css()获取时当多个对象节点的时候. 只会获取第一个的
添加时所有的节点都会被添加上,多个参数时为json形式两个参数都是字符串
.eq() 根据下标选中某一个js对象筛选符合参数值的下标的对象并且组成新的jq对象
.size() .length 返回对象的长度/数量
.attr() .removeAttr() 设置或删除/返回被选元素的属性值。
.prop() 全选input checkbox checked
.removeProp()
.addClass() .removeClass() .toggleClass()
.val()

jq选择器 js
* jq 对象方法不能随意混用 js jq对象的互相转换
* .css() .size()
* .click() .mouseenter() .mouseover() 参数=>需要执行的函数
* .attr() 参数1 参数2 只传递一个参数获取对象内部指定属性值
* .removeAttr() 移除指定元素中的指定属性
* .prop() 获取/设置标签属性(标签的合法属性)
* .removeProp() //只能移除我们自定义的属性
* .addClass() //为节点对象添加class名称
* .removeClass() //移出节点指定class名称
* .toggleClass() //切换添加/删除class名称有就删掉没有就加上
* .val() .value //获取/设置value值

jq css
* .offset() 获取元素到页面的距离并且返回一个对象这个对象有两个属性 .top .left
* .position() 获取元素到相对定位父级的距离并且返回一个对象对象拥有两个属性 .top .left
* .scrollTop() 获取/设置滚动条高度传递参数进行设置滚动条距离顶部高度
* .scrollLeft() 左右方向滚动条用法同上
* .scroll() 当对象滚动条正在滚动的时候
* .width() .height() 获取/设置对象元素的宽度和高度
* .innerHeight() .innerWidth() 获取宽高+padding
* .outerHeight() .outerWidth() 获取宽高+padding+border
* .outerHeight(true) .outerWidth(true) //传递参数true 获取宽高+padding+border+margin

jq dom操作
* .append() 在指定对象内部最后插入节点对象
* 向元素中添加节点传参:{1:文本,2:对象:{ 1:创建对象,2:节点对} }
* a.append(b) 将b添加到a中
* .appendTo()
* b.appendTo(a) 将b添加到a中
* .prepend() 在指定对象内部最前方插入节点对象
* 将元素添加到指定节点集合最前方
* .prependTo() 同上
* after() before() insertAfter() insertBefor() 操作的必须是同级节点
* .after() 在指定节点之后插入节点对象
* .before() 在指定节点之前插入节点对象
* a.insertAfter(p); 与after相反将a插入到p之后
* a.insertBefore(p); 与after相反将a插入到p之前
* .wrap() 创建一个容器将制定元素包裹起来如果参数对象是已有节点对象,会将已有节点对象
* 连同内容一起克隆一份并将我们指定元素放入最后
* .unwrap() 删除除去body之外的直接父级元素
* .remove() 移除自身谁不想活了,把自己删除掉了
* .empty() 删除匹配的元素集合中所有的子节点比如硬盘格式化
* .clone() 克隆指定节点并且返回一个对象

 each()   //遍历 $('a').each(function(i){alert($('a').eq(i).html())})

jq 筛选
* .eq() 在对象集合中选定指定索引或下标的单个对象并且返回它
* .index() 返回对象节点在同级节点中的索引
* .first() .last() 选取指定对象节点集合中的第一个/最后一个并返回一个它
* .hasClass() 检测对象中是否含有class名称为参数的节点,返回true/false
* .is() 判断指定元素是否是参数指定,只要有一个就返回true
* .find() 在指定对象中寻找到指定元素并且返回它具有穿透力
* .children() 寻找直系后代
* .not() 对象中除了谁
* .parent() 选择对象父级
* .parents() 选择所有父级祖先直到html 直系爸爸爷爷们
* .siblings() 除了自身的同级元素,传参数可以指定元素类型注意不能找到旁亲
* .next() 紧邻的下一个
ja 事件
* ready(funciton(){}) ==> .οnlοad=funciton(){}
* .on() 事件绑定参数 1 事件 2 data:传递数据 3 执行的函数
* .off() 事件解绑参数解绑的事件
* .hover() 移入移出参数 1 移入 mouseenter 2移出 mouseleave 参数2可省缺
* .blur() 失去焦点
* .change() 当改变之后
* .click() 点击事件
* .dblclick() 双击事件
* focus() 获取焦点事件
* keydown() 按下按键事件
* keypress() 当键盘或按钮被按下时
* keyup() 键盘按键抬起时
* mousedown() 按下鼠标按键
* mouseenter() 当鼠标指针穿过元素时
* mouseleave() 当鼠标指针离开元素时
* mousemove() 当鼠标指针在指定的元素中移动时
* mouseout() 当鼠标指针从元素上移开时
* mouseover() 当鼠标指针位于元素上方时
* mouseup() 当在元素上放松鼠标按钮时
* resize() 当调整浏览器窗口的大小时
* scroll() 当用户滚动指定的元素时
* select() 当 textarea 或文本类型的 input 元素中的文本被选择时
* submit() 当提交表单时.
jq 效果
* 传递参数 1->speed 400,’slow’,’fast’ 2-> 运动方式 3->回调函数
* .show() .hide() 显示/隐藏
* .toggle() 切换隐藏/显示状态
* .slideDown() 向下展出时显示
* .slideUp() 向上移动后隐藏
* .slideToggle() 切换slide状态
* .fadeIn() 显示后元素淡入改变透明度到1
* .fadeOut() 元素淡出最终隐藏改变透明度到0
* .fadeToggle() 淡入淡出切换
* .fadeTo() 参数可选传递目标透明度值 $.fadeTo(500,0.3)
* .animate() jq动画参数 1值 2时间 3运动形式 4回调函数后三个参数可省缺
* .stop() 停止当前动画队列可选参数 1 true 2 true
* 只传递一个true 会停止其他动画队列并且保持停止时的状态
* 两个true 会停止动画队列并且直接让动画到达完成时的状态
*
* .delay() 动画队列可传递参数延时执行 .delay(500)
* .finish() 直接完成清空所有队列并且将效果显示为完成时的效果

$()选择节点是新建了个对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="Author" content="Fly">
    <style type='text/css'>
        *{ margin:0; padding:0; font-family:Microsoft yahei,serif;}

    </style>
</head>
<body>
<div id="goudan" class="box">box</div>


<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    //   new $.selection
    alert($("#box") == $("#box"));//false
    alert($("#box").get(0) == $("#box")[0]);//true

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