jQuery (参考)

来源:互联网 发布:帽子vpn软件下载 编辑:程序博客网 时间:2024/05/29 13:26

参考 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)lableinput(‘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(){}) ==> .onload=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>
0 0
原创粉丝点击