jQuery

漆雕皓轩
2023-12-01

目录

一、jQuery的引入方式

1.本地js文件直接引入

2.在线引入jQuery文件

二、 jQuery的延迟加载

三、jQueryDom和源生Dom的相互转换

1.原生Dom->jQueryDom

2.jQueryDom->原生Dom

四、 jQuery的六种选择器

1. 基础选择器(x5)

2.层次选择器(x4)

3.伪类选择器(x8)(默认下标从0开始)

4.属性选择器(x3)

5.内容选择器(x3)

6.可见性选择器

五、jQuery遍历

1.兄弟间的遍历(x5)

2.父找子(x2)

3.子找父(x2)

六、jQuery文本

1.innerHTML ==> html()

2.value ==> val()

七、jQuery事件

八、jQuery简单动画

1.基础动画:hide、show、toggle

2.升起落下:slideUp、slideDown、slideToggle

3.淡入淡出:fadeIn fadeOut fadeToggle

九、自定义动画animate

十、页面首尾分离$.load()

十一、$.get()和$.post()

十二、$.getScript()和$.getJson()

十三、 $.ajax()

十四、 Dom属性读写

1.Dom普通属性读写:attr/prop

2.DomStyle属性的读写:css

3.Domoffset相关属性

十五、jQuery各种API

1.回到顶部

2.返回子元素在父元素的下标:index

3.jQueryDom的增删查改

(1)增

(2)插

(3)删

十六、jQuery插件

1、为jQuery对象添加插件

2.为jQueryDom添加插件

3.使用第三方插件(jQueryCookie.js)

十七、瀑布流



一、jQuery的引入方式

jQuery本质就是一个js文件,引入JS文件后就可以直接使用了

1.本地js文件直接引入

<script src="jQuery.js"></script>

2.在线引入jQuery文件

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

二、 jQuery的延迟加载

$(回调函数);

           $是jQuery简写,它们完全等价,jQuery是该框架的核心对象,通常用$符号代替

$(document)作用:将原生document转成jQuery的document

因为jQuery的Dom元素,拥有jQuery相关API

    $(document).ready(function() {

        console.log("heihei");

    });

$(document).ready(function(){})和window.onload的区别?

    ready表示文档已加载完成(不包含图片等非文字媒体文件)

    onload是指页面包含图片在内的所有元素都加载完成

    $(document).ready(function(){})要比window.onload先执行

三、jQueryDom和源生Dom的相互转换

1.原生Dom->jQueryDom

    $(原生Dom):返回的就是jQueryDom

    let oTest = document.getElementById("test");

    console.log(oTest.innerHTML);//123

    console.log($(oTest).html());//123

2.jQueryDom->原生Dom

    let oTest = $("#test").get(0); //get(下标):将包装集中第N个源生Dom返回

注意:此时的get(0)表示:*返回当前下标对应的原生dom*

jQuery的方式获取的元素都存在包装集中,包装集类似于数组,无论单个/多个元素,都存在包装集中。

不同方式获取的Dom元素API不同.

四、 jQuery的六种选择器

1. 基础选择器(x5)

1.ID选择器   2.类选择器   3.标签选择器  4.群组   5.通用选择器

语法举例:$("#box2").css("backgroundColor", "yellow");

或者:    $(".box").css({

                   "backgroundColor":"yellow"

          });

2.层次选择器(x4)

1.子代选择器【$("body div")】

2.后代选择器【$("body>div")】  

3.相邻选择器【$("#box2~div")】

4.兄弟选择器【$("#box2+div")】

语法举例:$("body>div").css("backgroundColor", "yellow");

3.伪类选择器(x8)(默认下标从0开始)

1.获取偶数行:even获取欧属行的元素

    $("div:even").css({

        "backgroundColor":"red"

    });

2.odd 奇数行

3.eq(索引):获取包装集索引对象的jQueryDom

    $("div:eq(2)").css({

        "backgroundColor":"blue"

    });

4.first

5.last

6. not(目标元素) 除了该元素

7. lt 小于

8. gt 大于

4.属性选择器(x3)

1.通过属性名选择元素【$("div[class]")】

2.通过属性值【$("div[class=test]")】

3.通过组合属性名【$("div[class][id]")】  【$("input[type=text]")】

5.内容选择器(x3)

1.获取包含指定内容的元素:*contains(目标字符串)*

    $("div:contains('hello world')").css({

        "backgroundColor":"red"

    });

2.获取包含指定元素的标签:*has*

3.内容为空:*empty*

6.可见性选择器

改变不可见元素的样式

    $("tr:hidden").css("background","green");

改变可见元素的样式

    $("tr:visible").css("background","red")

五、jQuery遍历

1.兄弟间的遍历(x5)

*next* 下一个

    // $("div").eq(2).next().css({

    //     "backgroundColor":"red"

    // });

*nextAll* 下一堆

    // $("div").eq(0).nextAll().css({

    //     "backgroundColor":"yellow"

    // });

*prev* 上一个

    // $("div").eq(2).prev().css({

    //     "backgroundColor":"blue"

    // });

*prevAll* 上一堆

    // $("div").eq(2).prevAll().css({

    //     "backgroundColor":"green"

    // });

*siblings([标签])*

    // $("div").eq(2).siblings().css({

    //     "backgroundColor":"green"

    // });

2.父找子(x2)

*find(后代元素)*

    // $("body").find("ul").css({

    //     "backgroundColor":"green"

    // });

*children([子元素])*

    // $("body").children().css({

    //     "backgroundColor":"green"

    // });

3.子找父(x2)

*parent 找父元素*

    $("p").eq(2).parent().css({

        "backgroundColor":"yellow"

    });

*parents 找爹,爷爷,祖宗*

    $("p").eq(2).parents().css({

        "backgroundColor":"yellow"

    });

六、jQuery文本

1.innerHTML ==> html()

无参为读

console.log($("div").html());

有参为写

$("div").html(666);

2.value ==> val()

读:console.log($("input[type=text]").val());

写:$("input[type=text]").val("嘿嘿嘿");

七、jQuery事件

$("div").click("这位置可以传参数给回调函数",function(evt){

        // $(this).css({

        //     "backgroundColor":"red"

        // });

        console.log(evt.data);     //事件对象.data属性可以接收外外界传递的参数

    });

八、jQuery简单动画

1.基础动画:hide、show、toggle

**$("div").hide(["动画时间"],["实在毛用都没得参数"],["回调函数"]);**

    $("button").eq(0).click(function(){

        $("div").hide(2000,function(){

            console.log("七夕没礼物!");

        });

    });

2.升起落下:slideUp、slideDown、slideToggle

    $("button").eq(0).click(function(){

        $("div").slideUp(2000,function(){

            console.log("七夕没礼物!");

        });

    });

3.淡入淡出:fadeIn fadeOut fadeToggle

    $("button").eq(2).click(function() {

        $("div").fadeToggle(2000, arguments.callee);

    });

九、自定义动画animate

animate:可以对offset相关属性设置动画效果

jQueryDom.animate({配置信息},[时间间隔],[过渡效果],[异步函数])

#### 手风琴效果

mouseenter:鼠标划入(不会冒泡)===等价于mouseover

jQueryDom.stop().animate({配置信息},[时间间隔],[过渡效果],[异步函数])

这里的*stop()*可以让正在处于队列里面的进程停止

十、页面首尾分离$.load()

语法:$("header").load("3.header.html", function() {

        $("li").click(function() {

            console.log($(this).html());

        });

    });

功能:将服务器文件响应的内容,赋值给jQuerydom元素的html

参数:jQuerydom.load(url,[请求参数],[回调函数])

    $("#box").load("3.load.txt");

作用:对于页面的头尾,进行分离

注意:load通常请求的服务器文件只为html文件,所以也不发请求参数;

    当发送请求参数时,用post

    不发送求参数时,用get

十一、$.get()和$.post()

$.get(url,[ data ],[ callback ],[ type ])

如果服务器结构到传递的data数据并成功返回,那么就可以通过回调函数将返回的数据显示到页面上,*data*参数代表请求返回的内容,*textStatus*参数代表请求状态,而且回调函数只有当数据成功*success*后才能被调用

    参数:$.get("url",请求参数,回调函数)

举例:

$.get("test.php", "userName=laowang&userPwd=123456", function(resText, status, xhr) {

      console.log(resText);console.log(status); console.log(xhr);

    });

    返回值:promise对象

举例:

$.get("test.php",{

        userName:"对象",

        userPwd:999

    }).then(function(resText){

        console.log(resText);         //输出:对象   999

    });

urlencoded,键值对

面试题:get和post的区别??

    1.原生ajax中get和post传参的区别?

    2.http协议发请求get和post的区别?

[1]post的安全性高于get:

      如果以get方式请求,请求参数会拼接到url后面,安全性低;

      以post方式请求,请求参数会包裹在请求体中,安全性更高

[2]数量区别:get方式传输的数据量小,规定不能超过2kb,post方式请求数据量大,没有限制。

[3]传输速度:get的传输速度高于post.

十二、$.getScript()和$.getJson()

$.getScript(url,回调函数)

jQuery提供了$.getScript( )方法来直接加载js文件,与加载一个HTML片段一样简单方便,并且不需要对JavaScript文件进行处理,JavaScript文件会自动执行。

$.getJSON(url,回调函数})

$.getJson( )方法用于加载JSON文件.这两种方法多用于提升性能

十三、 $.ajax()

前面用到的$.load(),$.get(),$.post(),$.getScript(),$.getJSON()这些方法,都是基于$.ajax()方法构建的,$.ajax()是jQuery最底层的Ajax实现,因为可以用来代替前面的所有方法。

应用:

$.ajax({

        type: "POST",

        url: "test.php",

        data: "userName=laowang&userPwd=123456",

        success: function(resText) {

            alert(resText);           //laoli   121212

        }

    });

十四、 Dom属性读写

1.Dom普通属性读写:attr/prop

    读    console.log($("#box").attr("id"));

    写    $("#box").attr("id","heihei");

[2]添加自定义属性

    $("#box").attr("a","123");

    $("#box").attr({

        a:1,

        b:2,

        c:3

    });

    console.log($("input[type=checkbox]").attr("checked"));  //checked

    console.log($("input[type=checkbox]").prop("checked"));  //true

2.DomStyle属性的读写:css

    写     $("#box").css({

               width:"100px",

               height:200,

               backgroundColor:"red",

               fontSize:36,

               opacity:0.3

            });

    读     console.log($("#box").css("opacity"));

             console.log($("#box").css(["opacity","fontSize"]));         //批量

3.Domoffset相关属性

    读     console.log($("#box").width());

    写     $("#box").width(200);

left和top

**offset:自带绝对定位**

    写     $("#box").offset({

               left:500,

               top:200

           });

    读     console.log($("#box").offset().left);  //500

           console.log($("#box").offset().top);   //200

十五、jQuery各种API

滚动条高度的读写

    读

    window.onscroll = function(){

        console.log($(window).scrollTop());

    }

1.回到顶部

    $("#btn").offset({

        top:1000

    }).click(function(){

        $(window).scrollTop(0);

    });

2.返回子元素在父元素的下标:index

    $("li").click(function(){

        console.log($(this).index());

    });

3.jQueryDom的增删查改

(1)增

    let oDiv = $("<div>");

    oDiv.html(666);

    let oDiv1 = $("<div>888</div>");

    $("body").append(oDiv);

    $("body").append(oDiv1);

(2)插

    let oLi = $("<li>今天40度</li>");

  a.*尾插*=======>*append  appendTo*

    $("ul").append(oLi);        (把新元素"尾插"至旧元素后)

    $(oLi).appendTo($("ul"));   (新元素被"尾插"至旧元素后)

  b.*头插*=======>*prepend  prependTo*

    $("ul").prepend(oLi);

    $(oLi).prependTo($("ul"));

  c.*插入至指定位置之前*=======>*before  insertBefore*

    $("li").eq(2).before(oLi);

    oLi.insertBefore($("li").eq(2));

  d.*插入至指定位置之后*=======>*after  insertAfter*

    $("li").eq(2).after(oLi);

    oLi.insertAfter($("li").eq(2));

(3)删

    $("li").eq(1).remove();(删除所有匹配的元素)

    $("li").eq(2).empty();(清空元素中的所有子节点)

十六、jQuery插件

jQuery.extend():(把两个或者更多的对象合并到第一个文档中);

jQuery.fn.extend():(把对象挂载到jQuery的prototype属性,来扩展一个新的jQuery实例方法)

[两者区别]

(1)两者调用方式不同:

   jQuery.extend(),一般由传入的全局函数来调用,主要是用来拓展个全局函数,如$.init(),$.ajax();

   jQuery.fn.extend(),一般由具体的实例对象来调用,可以用来拓展个选择器,例如$.fn.each();

(2)两者的主要功能作用不同:

   jQuery.extend(object); 为扩展jQuery类本身,为自身添加新的方法。

   jQuery.fn.extend(object);给jQuery对象添加方法

(3)大部分插件都是用jQuery.fn.extend()

1、为jQuery对象添加插件

    方法一:

     $.fun = function() {

            console.log("heihei");

        }

    $.fun();                   输出:heihei

    方法二:

    $.extend({

        add:function(a,b){

            return a + b;

        }

    });

    console.log($.add(1,2));   输出:3

2.为jQueryDom添加插件

    $.fn.extend({

        changeStyle:function(w,h,color){

            $(this).css({

                width:w,

                height:h,

                backgroundColor:color

            });

        }

    });

    $("#box").changeStyle(100,100,"red");

3.使用第三方插件(jQueryCookie.js)

[增改]

    $.cookie('name', 'laowang');          //创建cookie

    $.cookie('age', '100', {expires: 7}); //创建长生命周期cookie

[查]

    console.log($.cookie("name"));

[删]=============================>*$.removeCookie()*

    $.removeCookie('name');

    $.removeCookie('age');

十七、瀑布流

瀑布流前提条件;必须定宽/定高

  <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            position: absolute;
        }
    </style>
<script src="jQuery.js"></script>
<script>
    // 瀑布流前提条件;必须定宽/定高

    // 定宽
    class WaterFall {
        createDiv() {
            for (let i = 0; i < 14; i++) { //14张图片
                let oDiv = $("<div>"); //创建div
                $("body").append(oDiv); //挂载在大白板
                let rnd = Math.round(Math.random() * 300 + 50); //50~350区间的随机数
                oDiv.css({
                    height: rnd, //每次刷新的高度随机
                    backgroundImage: `url(img/${i}.jpg`, //背景随图片下标变化
                    backgroundSize: `200px ${rnd}px`, //图片尺寸200px  高度px
                });
                oDiv.html(i); //内容是图片的下标
            }
            this.change();
        }
        change() {
            // 一行能排列多少个元素(窗口宽度/图片200px+10px的右边距)
            let n = Math.floor(innerWidth / 210);
            // 需要创建一个数组存储每列的高度
            let arrH = [];
            // 获取所有div
            for (let i = 0; i < $("div").length; i++) {
                if (arrH.length < n) { //第一行元素
                    $("div").eq(i).offset({
                        left: i * 210,
                        top: 0
                    });
                    arrH.push($("div").eq(i).height());
                } else {
                    // 除了第一行
                    // 找到最矮的那一刻
                    let index = this.findMin(arrH);
                    $("div").eq(i).offset({
                        left: index * 210,
                        top: arrH[index] + 10,
                    });
                    arrH[index] += $("div").eq(i).height() + 10;
                }
            }
        }
        findMin(arr) {
            let min = 0;
            for (let i = 0; i < arr.length; i++) {
                if (arr[min] > arr[i]) {
                    min = i;
                }
            }
            return min;
        }
    }
    let wf = new WaterFall();
    wf.createDiv();
</script>

 类似资料: