jQuery

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
1、三种类似于js中window.onload的三种写法

$(document).ready(function () {
        console.log(1);
    });
    $(function () {
        console.log(2);
    });
    jQuery(function () {
        console.log(3);
    });

2、jQuery获取dom元素

$(function () {
        //代码
        //jquery选择器  ---css1   css2  css3选择器来匹配元素
        //jquery代码获取的dom对象都是集合型
        console.log($("*"));//* 指获取所有对象元素
        console.log($("button"));//tagName获取dom元素
        console.log($("#btn"));//id获取dom元素
        console.log($(".btnlist"));//class获取dom元素
        console.log($("body>button"));//>获取dom元素
        console.log($("body button"));//空格获取dom元素

        console.log($("body>button#btn"));//混合使用
        console.log($("#btn,#btn1"));

        //获取当前元素的子元素  第一个或者最后一个元素
        console.log($("ul>li:first"));
        console.log($("ul>li:last"));
        console.log($("ul>li:last-child"));
        console.log($("ul>li:first-child"));
        //:not  除了谁  获取其他的
        console.log($("ul>li:not(#li4)"));
        //:even  偶数获取元素
        console.log($("ul>li:even"));
        //:odd  奇数获取
        console.log($("ul>li:odd"));
        //:eq  根据索引来获取元素
        console.log($("li:eq(0)"));
        //:lt   :gt   获取小于或者大于
        console.log($("li:lt(3)"));
        console.log($("li:gt(3)"));
        //:focus  获取获得焦点元素  :header 获取h标签
        //:has  获取当前的元素里面必须的有谁
        console.log($("ul:has(#li4)"));
        //:parent  获取的元素必须有子集  元素 或者文本
        console.log($("li#li4:parent"));

        //属性选择器
        console.log($("li[id][class]"));
        console.log($("li[id='li4']"));
        //:nth-child(3)  根据序号获取元素
        console.log($("ul>li:nth-child(3)"));
        //:checked  匹配checkbox  radio  被选择元素
        console.log($("input:checked"));
    });

3、jQuery操作dom元素的属性和方法

$(function () {
        /*
         * jquery可以进行隐式迭代  操作一堆
         * */
        //设置元素的文本  innerHTML innerText
        //html text   获取或设置元素的文本或者html值
        //$("button.btn").html("<span>html</span>");
        console.log($("button.btn").html());
        //eq(index)   根据索引获取元素
        for (var i = 0; i < $("button.btn").length; i++) {
            console.log($("button.btn").eq(i).html());
        }

        //获取或设置元素值   val()
        //console.log($("input").val());
        $("input").val("321");

        //给元素添加类  addClass
        $("input").addClass("txt txt1");
        //给元素移除类名称 removeClass
        $("input").removeClass("txt1");

        //类别的切换 toggleClass  有则删没有则加
        $("input").toggleClass("txt");

        //设置属性的方法 attr 参数1  名称  参数2  值  设置或者获取
        $("input").attr("id", "user");

        console.log($("input").attr("id"));

        $("input").attr("data-user", "maodou");
        console.log($("input").attr("data-user"));

        //移除属性
        $("input").removeAttr("id");
        $("input").removeAttr("data-user");
        $("input").removeAttr("class");

        /*
         * 一次性设置多个属性
         * */
        $("input").attr({
            id: "username",
            "data-list": "list"
        });
        //prop  设置属性  获取
        console.log($("input[type=checkbox]").prop("checked"));
        //$("input[type=checkbox]").prop("checked", true);
        $("input[type=checkbox]").prop("checked", function (index, value) {
            console.log(index);
            return !value;
        });

        $("input[type=checkbox]").prop("id", "checked");

        $("input[type=checkbox]").removeProp("id");

        //css()  设置或者获取元素的样式  设置一个或者多个
        //$("#block").css("border","1px solid black");
        $("#block").css({
            width: "100px",
            height: "100px",
            border: "1px solid black",
            backgroundColor: "red"
        });

        console.log($("#block").css("backgroundColor"));
        console.log($("#block").css("border"));


        //offest  //获取当前的相对偏移量   返回值是对象  left top
        console.log($("#block").offset());
        console.log($("#block").position());
        //scrollTop  当前元素 相对滚动条到顶部的距离 （谁有滚动条就谁）  y
        //scrollLeft 当前元素 相对滚动条到左边的距离 （谁有滚动条就谁）  x
        console.log($(window).scrollTop());

        //height  width  带回调函数 在旧高上重新设置
        console.log($("#block").height());
        console.log($("#block").width());
        //带回调函数  width  height  一致
        $("#block,#block1").height(function (index, oldheight) {
            return oldheight + (index + 1) * 100;
            /* if(index==0){
             return oldheight + 100;
             }
             else{
             return oldheight + 200;
             }*/
        });
        //innerheight   innerwidth


    });

4、jquery 动态创建dom元素以及添加

$(function () {
        /*
         * 如何动态创建dom
         * */
        var r = "<div></div>";
        var str = document.createElement("div");
        var s = $("<div></div>");
        console.log(str, s);
        s.addClass("txt");
        /*
         * 创建的元素显示到界面
         * appendchild
         *
         * jquery里面有大量的追加  包裹方法
         * append  appendTo   追加到当前元素的内容之后
         *
         * prepend  prependTo  追加到当前元素的内容之前
         *
         * after  before  追加到当前元素之后或之前
         * insertafter  insertbefore   追加到当前元素之后或之前
         *
         *
         * 包裹的方法
         * wrap  包裹当前匹配元素
         * unwrap
         * unwrap  移除当前匹配元素的包裹元素
         *
         * wrapAll  将所有匹配元素用一个包裹
         *
         * wrapInner  用标签包裹匹配元素的内容
         *
         *
         * replaceWith  用元素替换匹配元素
         * replaceAll  写法颠倒
         * */
        //$("button").append(s);
        //s.appendTo($("button"));

        //$("button").prepend(s);
        //s.prependTo($("button"));

        //$("button").after(s);
        //$("button").before(s);
        //s.insertAfter($("button"));
        //s.insertBefore($("button"));

        //$("button").wrap(s);

        //$("button").unwrap();

        $("button").wrapAll(s);

        $("button").wrapInner("<span></span>");


        //$("button").replaceWith( $("<span></span>"));
        //$("<span></span>").replaceAll($("button"));

        /*
         * 清空当前匹配元素的所有内容  empty
         *
         * remove()  移除元素
         * */
        //$("body").empty();
        //$("button").remove();

        /*
         * clone  不写浅克隆   false
         * true
         * */
        /*
         $("button").click(function (){
         console.log(1);
         });
         $("button").clone(true).appendTo($("#clo"));*/
    });

5、jQuery筛选

    $(function () {
        /*
         * jquery  里面对象的过滤
         *
         * eq(index)   按照所有来过滤元素
         * first()  last()  获取当前元素里面子集元素的第一个最后一个
         *
         * hasClass()  检测当前元素有没有固定的类   true  flase
         *
         *
         * filter()  过滤元素
         * */
//        console.log($("li").eq(3));
//        console.log($("li").first());
//        console.log($("li").last());
//
//        console.log($("li").eq(2).hasClass("liinfo"));
//
//        console.log($("li").filter(".liinfo"));
//        console.log($("li").filter($("li").eq(2)));

        //$("选择器",作用域)
        /*$("div").filter(function (index) {
         if ($("ol", this).length) {
         // $(this).remove();
         console.log(this);//js对象
         console.log($(this));//jquery对象
         this.remove();
         }
         });*/

        /*
         * is
         * */
        /* console.log($("button").is(".btn"));

         $("button").is(function (index){
         console.log(index,this,$(this));
         });*/

        /*
         * map  映射  将一个集合元素转化为另一个元素集合
         * */
        /* var a=[1,2,3];
         console.log(a.map(function (value, index) {
         return value * value;
         }));*/
        // jquery 里面的map  返回的值为jquery  key:value  通过get()  转化为集合
        /*console.log($("input").map(function (index, obj) {
         return $(this).val();
         }).get().join(""));*/


        /*
         * has  找当前匹配元素里面谁具有这么个元素
         * */
        /* $("div").has("ol").css("border","1px solid black");*/


        /*
         *  not(selector)
         *  当前匹配元素中除去特定元素  获取其余的元素
         * */
        //console.log($("div").not($("div").eq(0)));


        /*
        * slice 选取jquery集合里面的一部分
        * */
        //console.log($("button").slice(0, 2));

        /*
        * children()  获取当前元素所有子集
        * */
        //console.log($("body").children());


        /*
        * find()  查找元素  元素匹配器
        * */
        console.log($("body").find(".btn1"));


        /*
        * next()  下一个元素
        * prev()   上一个元素
        * */
        console.log($(".btn1").next());
        console.log($(".btn1").nextAll());
  

6、jQuery特定的方法

/*
     * jquery  核心代码
     * $("#btn")   selector
     * $("#btn",this)  确定获取元素的作用域
     *
     *
     *动态创建dom元素
     * $("<span></span>");
     *
     * dom元素渲染完成之后
     * $(function(){
     *
     * })
     *
     * each  集合遍历  参数是索引
     *
     * get(index)  根据索引获取指定对象   不加参数直接获取整个集合
     *
     * index()  获取当前元素的索引值  或者  直接在一个集合里面获取特定元素的索引值
     *
     *
     * 扩展jquery的方法
     * jQuery.fn.extend();
     * jQuery.extend();
     * */
    $(function () {
        $("button").each(function (index) {
            /*$(this).click(function (){
             console.log(index);
             });*/

        });

        /* console.log($("button").get(0));*/

        /* console.log($("button").index($("button:nth-child(3)")));*/

        /* jQuery.fn.extend({
         mySort: function () {
         $(this).each(function (index) {
         $(this).html("我在修改");
         });
         }
         });*/
        jQuery.fn.extend({
            mymin: function () {
                //找传入值里面最小的
                return $(this).map(function (index, obj) {
                    return parseInt($(this).val());
                }).get().sort(function (n1, n2) {
                    return n1 - n2;
                })[0];
            }
        });
        /* $("button").mySort();*/


        $("#btn").click(function () {
            console.log($("input").mymin());
        });

        /*
         * jQuery.extend()  直接是给jquery顶级变量  $  jQuery
         * */
        jQuery.extend({
            mylits: function () {
                console.log(1);
            }
        });
        $.mylits();
    });

7、jQuery事件绑定

/*
     * dom元素加载完成
     * ready()
     * */
    //    $(document).ready(function (){
    //        //dom元素加载完成的时候去执行
    //    });
    /*$(function () {

     });*/
    /*
     * jquery 里面的常规事件  js里面内置的事件  on****
     * jquery 在写的时候不带on  直接是函数的写法
     * click(data,fn)  data传递给事件的数据   事件里面获取传递的数据  e.data
     * 其他事件类似于click事件绑定
     *
     * 在jquery里面对象可以链式操作
     * 写链式操作的时候尽量链式操作标准写到三次
     * 链式操作针对同一个对象进行多次操作
     * 链式操作针对多个对象进行多次操作
     *
     *
     * 事件都哪些：mouseover   mouseenter mousedown mouseleave  mousemove  mouseout   mouseup
     * keyup keydown keypress
     * resize
     * scroll
     * select
     * submit
     * focus
     *focusin
     * blur
     * focusout
     * change
     * dbclick
     *
     * jquery封装   事件绑定  one  指定事件类型执行一次
     * on  可以绑定一个或者多个事件
     * */
    $(function () {
        var count = 1;
        /*$("#btn").click(function (e) {
         console.log(e);
         }).mousedown(function () {
         console.log(1);
         }).mouseleave(function () {
         console.log(2);
         });*/
        /* $("#btn").one("mouseleave", function () {
         alert(1);
         });*/
        /* $("button").on("click mouseleave", function (e) {
         console.log(e.type);
         });*/

        /*
         * on  为事件的绑定    事件的委托
         * type  selector data fn
         * */
        /*  $("ul").on("click","li", 1,function (e) {
         console.log(e.target,$(this), e.data);
         });*/
        /*
         * off() 事件
         * type  selector fn
         * 不带参数  事件全部移除   带参移除指定事件
         * */
        /*  $("ul").on("click mouseleave", "li", function () {
         console.log(1);
         $("ul").off("click mouseleave");
         });*/
        /*
         * bind  事件绑定 类似于on
         *
         * 3.0+  弃用  on
         * type  data  fn
         * */
        /*$("ul").bind("click",function (){
         console.log($(this));
         });*/

        /*
         * 事件的移除
         * unbind
         * 3.0+  弃用  off()
         * 参数如果没有 则所有事件全部移除   有参数  移除指定事件
         * */
        /* $("ul").bind("click mouseleave", function () {
         console.log(1);
         //事件移除
         $(this).unbind("click");
         });*/

        /*
         * trigger  为指定元素添加触发事件  和传递数据
         *
         * 传递数据  []集合传
         * 取值在事件方法上 a,b,c,d,e,f
         * */
        /*  $("button").click(function (e,a,b) {
         console.log(e,a,b);
         }).trigger("click",[1,2]);*/
        /*
         * hover  事件切换
         * mouseover  mouseout  事件在切换
         * */
        /*$("ul").hover(function (){
         //over
         console.log(1);
         },function (){
         //out
         console.log(2);
         });*/

        /*
         * jquery处理事件冒泡
         *      return false;
         * */
        /*$("body,ul").on("click", function () {
            console.log(1);
            return false;
        });*/

    });

8、jQuery里面的动画

 $(function () {
        /*
         *  里面的参数  fn  动画执行完成之后去执行的
         *  显示隐藏动画  show   hide  toggle
         * 参数  时间  linear  fn
         *
         * 上下滑动  slidedown  slideup  slideToggle
         * 参数  时间  linear  fn
         *
         *
         * fadeIn  fadeOut  淡入淡出动画   fadeToggle
         *参数  时间  linear  fn
         * fadeTo  透明度变化
         *speed  opacity linear fn
         *
         *
         * 自定义动画  aminate
         * 属性   speed  ease=linear   fn
         *
         * */
        /*$("#disbtn").click(function () {
         if ($(this).is(".showbtn")) {
         /!* $(".block").hide();*!/
         /!* $(".block").slideUp(1000);*!/
         /!*$(".block").fadeOut(5000);*!/
         $(".block").fadeTo(500, 0);
         }
         else {
         /!* $(".block").show();*!/
         /!*$(".block").slideDown(1000);*!/
         /!*$(".block").fadeIn(5000);*!/
         $(".block").fadeTo(500, 1);

         }
         $(this).toggleClass("showbtn hidebtn");
         /!*$(".block").slideToggle();*!/
         /!*$(".block").fadeToggle(1000);*!/
         });*/

        /*
         *自定义动画
         *
         * animate
         *
         * stop  停止当前正在执行的动画
         * */
        $("#disbtn").click(function () {
            $(".block").delay(1000).animate({
                marginLeft: 400,
                marginTop:400
            }, 1000, "linear", function () {
                console.log("1");
            }).delay(1000).animate({
                marginTop: 400
            }, 1000, function () {
                console.log(2);
            }).delay(1000).animate({
                marginLeft: 0
            }, 1000, function () {
                console.log(3);
            }).delay(1000).animate({
                marginTop: 0
            }, 1000, function () {
                console.log(4);
            });
        });
        $("#stopbtn").click(function () {
            $(".block").stop();
        });
    });