jQuery - 悦读

**$("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>