jQuery

最新推荐文章于 2023-05-19 10:43:22 发布

等待戈多的莱昂纳多

最新推荐文章于 2023-05-19 10:43:22 发布

阅读量319

点赞数 1

分类专栏：库，框架。

本文链接：https://blog.csdn.net/weixin_44892520/article/details/100877171

版权

库，框架。专栏收录该内容

8 篇文章 0 订阅

订阅专栏

原生js缺点：

不能添加多个入口函数（window.onload）如果添加了多个，后面的会把前面的覆盖。
原生js的api名字都太长。
原生js代码冗余。
原生js中有些属性或者方法有浏览器兼容问题。
原生js容错率较低，前面代码出了问题，后面代码无法执行。

初学jQuery

优势：

可以写多个入口函数的。
jQuery的api名字都容易记忆。
jQuery代码简洁（隐式迭代）。
帮我们解决了浏览器兼容问题。
容错率较高，前面的代码出了问题，后面的代码不受影响。

什么是jQuery？

是一个封装了很多方法的js库
学习jQuery就是学习这些方法如何使用（调用参数，返回值，方法有什么效果）

如何使用？

引入jQuery文件

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

写一个入口函数

$(document).ready(function () {
        
    });

找到你要操作的元素（jQuery选择器），去操作他（给他添加属性，样式，文本……）

$(document).ready(function () {
    $("div").width(200).height(100).text("哈啊").css("border","solid 1px blue");
    });

jQuery各版本及区别

官网下载jQuery文件
各个版本：1.x支持老浏览器，已经停止更新；2.x不支持老浏览器，已经停止更新；3.x不支持老浏览器，更新中
每一版本又有压缩版和未压缩版compressed 也叫精简版，去掉了格式，体积小，用于发布；uncompressed未压缩也叫原版，有统一格式，体积较大，方便阅读，用于测试，学习和开发

jQuery的入口函数

jQuery入口函数和window.onload入口函数的区别：

window.onload入口函数不能写多个，但是jQuery的入口函数是可以写多个的。
执行时机不同：jQuery入口函数要快于window.onload.jQuery入口函数要等待页面上dom树加载完后执行；window.onload要等待页面上所有资源（dom树/外部css,js链接，图片）都加载完毕后执行。

$函数

$是一个函数，参数传递不同，效果也不一样

如果参数传递的是一个匿名函数-入口函数
如果参数传递的是一个字符串-选择器/创建一个标签
如果参数是一个dom对象，那就会把dom对象转换为jQuery对象

jQuery对象到底是什么？

是一个伪数组，有索引，有length，却不是真正的数组，其实就是dom对象的一个包装集。

var $div1=$("#one");
       console.log($div1);
       console.log($div1.__proto__ === Array.prototype);

在这里插入图片描述
dom对象转换为jQuery对象，直接在前面加$

	var div1=document.getElementById("one");
    var $div1=$(div1);
    console.log($div1);

jQuery对象转换成dom对象

//1.使用下标取出来---前面说了jQuery对象是伪数组
       var $divs=$("div");
       var div1=$divs[0];
       console.log(div1);
    //2.使用jQuery的方法 get()---用下标取
       var div2=$divs.get(2);
       console.log(div2);

设置获取文本内容text(）

 //获取文本
    $(function () {
        $("#btn").click(function () {
            console.log($("div").text());
            console.log($("#one").text());
        })
    })
    //设置文本 会覆盖原有内容 里面有标签也不会解析出来的
    $("#setbtn").click(function () {
        $("#one").text("新设置的文本");
    })
    //所有dom元素都会被设置上，隐式迭代
    $("div").text("全部更改");

设置获取样式css()

 $(function () {
        //1.1获取元素样式
        $("#btn").click(function () {
            console.log($("#one").css("width"));
            console.log($("#one").css("height"));
            console.log($("#one").css("border"));
            //在ie浏览器中，要获取边框要给一个准确的值
            console.log($("#one").css("border-top-width"));
        });
        //1.2获取元素们的样式---只能获取到第一个dom对象的样式
        console.log($("div").css("width"));
        //2.设置样式---设置成行内样式了
        //设置单样式
        $("#setbtn").click(function () {
            $("#two").css("width","100px");
            $("#two").css("height","100px");
            $("#two").css("border","solid 3px yellow");
            $("#two").css("backgroundColor","pink");
        })
        //设置多样式---对象
        $("#three").css({
            width:300,
            height:400,
            border:"solid 10px blue"
        });
        //2.2给标签为div的元素们设置样式
        $("div").css({
            width:200,
            height:100,
            backgroundColor:"green"
        });
        //隐式迭代，把每一个div都设置了相同的样式

    });

class类操作

1.添加类addClass()
2.移除类removeClass()
3.判断类hasClass()
4.切换类toggleClass()

$(function () {
    //1.添加类
    $("#addclass").click(function () {
        $("#div1").addClass("fontsize bgc");
    })
    //2.移除类
    $("#removeclass").click(function () {
        $("#div1").removeClass();
    })

    //3.判断类  返回true,false
    $("#hasclass").click(function () {
        $("#div1").hasClass("fontsize");
    })
    //4.切换类  如果元素有，则删除，没有则添加上
    $("#toggleclass").click(function () {
        $("#div1").toggleClass("fontsize");
    })

})

jQuery动画

1.显示show()
2.隐藏hide()
3.切换toggle()

$(function () {
    //1.显示show()
$("#show").click(function () {
    //1.1要有动画效果，就加参数
    // 参数1：执行时间（毫秒数）
    // 或者代表时长的字符串（fast代表200ms，slow-600ms,normal-400ms）
    //如果代表时长的单词写错，就代表normal
    // 参数二：执行完毕后的回调函数
            $("#div1").show(2000,function () {
                alert("执行完毕");
            });
        }
)
    //2.隐藏hide()
    $("#hide").click(function () {
        $("#div1").hide(2000,function () {
            alert("隐藏了！！")
        });
    })


    //3.toggle隐藏则显示，显示则隐藏
    $("#toggle").click(function () {
        $("#div1").toggle(1000,function () {
            
        });
    })
})

4.滑入slideDown()
5.滑出slideUp()
6.滑动切换slideToggle()

7.淡入fadeIn()
8.淡出fadeOut()
9.切换fadeToggle()

10.自定义动画animate()

动画队列以及stop参数

$(function () {
    //自定义动画animate();
    //参数1：必选的 对象 代表的是需要做动画的属性
    //参数2：可选的 代表执行动画的时长
$("#start").click(function () {
    //1.开始动画，模拟一个动画队列
    $("#start").click(function () {
        $("div").slideDown(2000).slideUp(2000);
    });
    //2.停止动画，执行stop方法
    //第一个参数：是否清除队列
    //第二个参数：是否跳转到最终效果
    //不写参数默认两个false
       $("#stop").click(function () {
        $("div").stop(false,false);
    })
});
});

动态创建节点

1.html(); 设置或者获取内容的。
2.$();可以创建元素，但页面上看不见，只存在于内存中，若要显示需要追加。

$(function () {
//html();   $();
    //1.html(); 设置或者获取内容的
    $("#btn").click(function () {
        //获取内容：html()不给参数 获取所有内容
        console.log($("#div1").html());
        //设置内容：html()方法给参数---内容会覆盖，标签可以解析
        $("#div1").html("我是内容");
    });
    //2.$()---可以创建元素，但页面上看不见，只存在于内存中，若要显示需要追加。
    $("#btn1").click(function () {
        var $link=$("<a href='http://news.baidu.com'> 我是新闻</a>> ");
        console.log($link);
        //追加一下，在页面显示 append()就可以
        $("#div1").append($link);
    })
});

jQuery添加节点的几种方式

1.append() 父元素.append()作为最后一个元素添加
2.prepend()作为第一个子元素添加
3.after()作为兄弟元素，插入在后面
4.before()作为兄弟元素，插入在前面
5.appendTo()子元素点出来的，添加到父元素中去，作为最后一个元素

$(function () {
    //1.append() 父元素.append()作为最后一个元素添加
  $("#btnAppend").click(function () {
//        var $liNew=$("<li>我是新创建的li呀呀呀</li>");
//        $("#ul1").append($liNew);
    //2.把ul1中已存在的li标签添加到ul中，则直接换到最后一个位置
//        var $li3=$("#li13");
//        $("#ul1").append($li3);
      //3.把ul2中已经存在的li添加到ul1里去 剪切直接添加在ul1最后面
      var $li23=$("#li23");
      $("#ul1").append($li23);
  });
    //2.prepend()作为第一个子元素添加
    //3.after()作为兄弟元素，插入在后面
    //4.before()作为兄弟元素，插入在前面
    //5.appendTo()子元素点出来的，添加到父元素中去，作为最后一个元素
});

6.清空元素empty()
7.移除某一个元素remove()

移除ul,但只能获取li3,怎么办？
$("#li3").parent().remove();

8.克隆节点clone()

clone()参数是true,会克隆事件。不给参数默认是false。

$(function () {
    //克隆节点clone() 只在内存里，要显示追加出来
    //参数不管是true还是false，都会克隆到后代节点的
    $("#btn").click(function () {
        var c=$("#ul1").clone();
        console.log(c);
        $("body").append(c);
        //修改克隆节点的id
        c.attr("id","clone2");
        //clone()参数是true,会克隆事件。不给参数默认是false。
    })
    });

表单元素获取设置表单的值

val()方法，不给参数就是获取
val()方法,给参数就是设置

jQuery操作属性

$(function () {
    $("#btn").click(function () {
      //1.操作属性:attr() removeAttr()
        //如果元素本来没有，则会添加该属性
//        $("img").attr("src","./image/6.jpg");//更改属性
//        $("img").attr("aaa","2");//修改自定义属性
//        $("img").attr("bbb","b");//元素之前没有，则添加属性


    //设置多属性
//        $("img").attr({
//            src:"./image/6.jpg",
//            aaa:"3",
//            bbb:"bbb"
//        })

        //2.获取自带的/自定义属性
        $("#btn").click(function () {
                    console.log($("img").attr("src"));
                })

        //3.移除属性 removeAttr()
        //$("img").removeAttr("aaa");//移除单个属性
        $("img").removeAttr("aaa alt");//移除多个属性
    });
    });

prop()操作布尔类型的属性

$(function () {
    //布尔属性不能用attr()只能用prop()
    $("#btn").click(function () {
        //$("#ckbox").attr("checked");//都返回undefined？？只能用prop()
        console.log($("#ckbox").prop("checked"));
    });
    });

宽高

$(function () {
$("#btn").click(function () {
    //width() height() 获取  不包括padding/border/margin

    //1.获取id为one的宽高，想得到具体的数值？如何做？
//    console.log($("#one").width());
//    console.log($("#one").height());
    //设置宽高
//    $("#one").width(20);
//    $("#one").height(20);

    //2.返回宽高（包括内边距）
//    console.log($("#one").innerWidth());
//    console.log($("#one").innerHeight());

    //3.包含内边距，边框
//    console.log($("#one").outerWidth());
//    console.log($("#one").outerHeight());

    //4.outerWidth(true)/outerHeight(true)包含内边距，边框，外边距
    console.log($("#one").outerWidth(true));
    console.log($("#one").outerHeight(true));
    
  //5.页面可视区宽高 window
    console.log($(window).width());
    console.log($(window).height());
})
});

offset()和position()

offset() 得到一个对象，里面包含了top，left值，是元素距离document的位置。
position()得到一个对象，里面包含了top,left值，是距离定位父级的距离。

scrollTop()和scrollLeft()

scrollTop();元素被卷曲的高度
scrollLeft();元素被卷曲的宽度
加参数，设置卷曲距离

$(window).scrollTop();页面被卷曲的高度
$(window).scrollLeft();页面被卷曲的宽度

on注册事件（重点）

动态创建div

 $("#btn").click(function () {
        var $divNew=$("<div class='two'></div>");
        $("body").append($divNew);
    });

on简单注册，不支持动态注册

$("div").on("click",function () {
    alert("点击事件")
})

on委托注册，支持动态注册

$("body").on("click","div",function () {
        console.log("单击事件");
    })

可以加委托的元素
$("body").on("click","div,span",function () {
        console.log("单击事件");
    });

off解绑事件

$(function () {
    $("#btn1").click(function () {
       //1.jQuery用on注册事件，用off解绑事件
       $("#div1").on({
           "click":function () {
               console.log("点击事件");
           },
           "mouseenter":function () {
               console.log("鼠标移入");
           }
       })
    });
    //2.移除事件
    $("#btn2").on("click",function () {
       // $("#div1").off();//解绑所有事件
        $("#div1").off("click");//解绑指定事件
    })
});

trigger触发器

$(function () {
//    $("#div1").on("click",function () {
//        console.log("单击事件");
//    });
//    var i=0;
//    $("#btn1").on("click",function () {
//        i++;
//        if(i==3){
            $("#div1").click();
//            //触发事件
//            $("#div1").trigger("click");
//        }
//    });
    //---------------------------------------
    //给div注册一个自定义事件
    $("#div1").on("ling",function () {
        console.log("我是自定义ling事件");
    });
    //就是要触发，该怎么办？用触发器trigger
    $("#btn2").on("click",function () {
        var res=confirm("hello???");
        if(res){
            //出发自定义的ling事件
            $("#div1").trigger("ling");
        }
    })
});

jQuery事件对象

1.什么是事件对象记录事件触发的信息的对象
2.事件中常用的三个坐标screenX，clientX，pageX
3.事件冒泡e.stopPropagation();
4.阻止浏览器默认行为e.preventDefault();
5.给页面注册键盘按下事件e.keyCode

$(function () {
//1.什么是事件对象
    //注册一个事件，系统就会帮我们生成一个对象，记录事件触发的信息。
    //jQuery对象用事件参数e来获取
    //是对原生js事件对象的一个封装，处理了兼容性
  //  $("#div1").on("click",function (e) {
       // console.log(e);
        //2.事件中常用的三个坐标
//    console.log("screenX"+"e.screenX"+":"+e.screenY);//触发事件那一点对应屏幕最左上角
//    console.log("clinetX"+"e.clientX"+":"+e.clientY);//用户可视区左上角
//    console.log("pageX"+"e.pageX"+":"+e.pageY);//距离页面左上角
//    //3.事件冒泡
        //alert("我是div单击事件");
       // $("#btn").on("click",function (e) {
            alert("我是按钮的单击事件");
        //    e.stopPropagation();//阻止事件冒泡
        })
        //4.阻止浏览器默认行为
      //  $("#a").on("click",function (e) {
            alert("我是a的单击事件");
//            e.stopPropagation()//阻止事件冒泡
//            e.preventDefault();//阻止a跳转
     //       return false;//既能阻止事件冒泡，又能阻止默认行为
      //  })
        //5.给页面注册键盘按下事件
        $(document).on("keydown",function (e) {
            console.log(e.keyCode);
       // });
 //   })
});

链式编程与end方法

$(function () {
    //1.什么时候可以链式编程？
    //如果给元素调用一个方法，有返回值并返回一个jq方法，就可以链式编程
    //$("#div1").width(100).height(100).css("backgroundColor","blue");

    //2.这种情况不行，width()返回一个数值，不能点出jq方法
    //$("#div1").width(100).width().height(100);

    //3.有时确实返回jq对象，但不是我们要的对象，就不要继续点下去了

    //4.end();改变jq对象回到上一个状态

    //5.end()也是jq方法，需要jq方法才能点出来
    //width()返回一个数值，不能点出来end()方法
    $("#div1").width(100).width().end().height(100);
});

显示迭代each

each方法遍历jq对象，每一个对象都执行函数里的事件，每一个对象设置不同的值的时候用。

$(function () {
    //1.让li元素透明度递增
    var $li=$("#ulList").children();
    //2.遍历li
    $li.each(function (index,element) {
        $(element).css("opacity",(index+1)/10)
    });
});

多库共存

    $(function () {
        //1.如何查看jQ的版本？
//        console.log(jQuery.fn.jquery);
//        console.log(jQuery.prototype.jquery);
//        console.log($.fn.jquery);
//        console.log($.prototype.jquery);

        //2.如果引入了多个jQ文件，那使用的$是哪一个文件中的？
        //后面的会覆盖前面的，使用的$是后引入的。

        //3.多库冲突，多库共存
       // $.noConflict();//释放$的控制权，还能使用jQuery
    })

jQ插件

什么是插件？用来做扩展功能的
jQ插件库： jq22.com

省市联动-插件

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="src/distpicker.data.js"></script>
<script src="src/distpicker.js"></script>
<script>
    $(function () {
        $("#one").distpicker(); // 调用的插件方法就是插件名字
    });

自己开发jQ插件

1.1给原型添加方法

//1.这样设置背景色有些麻烦，能不能自己封装一个bgColor()插件呢？
       // $("#div1").width(100).height(100).css("backgroundColor","red");
        //2.我们可以自己封装bgColor方法

        //------2.1给jQ原型添加方法
        //$("#div1").bgColor("green").width(200).height(200);
        $("#div1").width(200).height(200).bgColor("pink");

1.2自己封装的bgColor方法

(function ($) {
    //给原型添加方法
    $.fn.bgColor=function (color) {
        console.log(this);//是调用这个bgColor方法的jQ对象
        this.css("backgroundColor",color)
        //返回调用这个jq对象本身
        return this;
    }
}(jQuery));

2.1直接给对象添加方法

 //------2.2直接给对象添加方法
        console.log($.add(10, 20));

2.2自己封装的add方法

(function ($) {
    $.add=function (num1,num2) {
        return num1+num2;
    }
}(jQuery));

等待戈多的莱昂纳多

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

1. window.onload入口函数不能写多个，但是jQuery的入口函数是可以写多个的。 2. 执行时机不同：jQuery入口函数要快于window.onload.` jQuery入口函数要等待页面上dom树加载完后执行；window.onload要等待页面上所有资源（dom树/外部css,js链接，图片）都加载完毕后执行。`
复制链接

扫一扫