JQuery学习笔记，加油

JQuery学习笔记

​ jQuery是一个快速、简洁 的javascript库，它的宗旨就是让我们写得更少，做得更多。jQuery封装了javascript的常用功能代码，优化了DOM操作对象、事件处理、动画设计和Ajax交互等，其本质就是学习调用这些函数的方法，加快开发速度。

• 轻量级，核心文件才10几kb，不会影响页面的加载。
• 跨浏览器兼容，基本主流的浏览器都兼容。
• 链式编程和隐式迭代
• 对事件、样式、动画支持，大大简化DOM对象的操作。
• 免费开源。

官网：https://jquery.com/

把下载后的jQuery库引入到你需要的页面就可以使用了。

1、入口函数

当dom对象全部加载完后再执行js代码，通常使用第二种。

语法1：

// 页面加载完后执行js代码，回调函数中是执行的代码
$(document).ready(function () {
    // 代码
});

语法2：

$(function () {
    // 代码
});

2、$ 对象

• $ 是jQuery的别称，在代码中可以使用jQuery来代替 $ 这个符号，但是为了方便，通常使用 $符号。
• $ 是jQuery的顶级对象，相当于原生js中的window对象。

DOM对象和jQuery对象：

• DOM对象：使用原生的js获取的对象。
• jQuery对象：通过jQuery获取的对象，本质是 $ 把DOM对象进行封装，是一个伪数组。

这两个对象不是相同的对象，DOM对象只能使用原生的js的方法和属性，而jQuery对象也只能使用jQuery中的方法和属性，两者不能互相使用。

DOM对象和jQuery对象的相互转换：

由于原生的js比较强大，部分的原生功能在jQuery不能实现，所以需要相互转换。

• DOM对象—》jQuery对象：

语法：

// 原生对象
var obj = document.getElementsByTagName("div");
// 转换成jQuery对象
console.log($(obj));

直接使用 $ 来将一个原生的DOM对象转换成jQuery对象，将DOM对象作为参数传入。

• jQuery对象—》DOM对象：

语法1：

// jquery对象
var jObj = $('div');
// 转换成原生对象
console.log(jObj[0]);

直接将jQuery对象使用下标来将对应的jquery对象转换成js对象，因为jquery对象是一个dom对象封装的伪数组。

语法2：

// jquery对象
var jObj = $('div');
// 转换成原生对象
console.log(jObj.get(0));

3、jQuery基础选择器

​ 我们通过选择器来选择页面中的元素。

语法：

$("css中的选择器"); // 通过该方法就能选择页面中的元素，必须使用引号包裹的，只要是css中的选择器都可以

例如：

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<script>
    // 选择ul下的所有li
    $("ul li");
</script>

4、隐式迭代

​ 遍历内部的dom元素（伪数组的形式存储）的过程成为隐式迭代。

例如：

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<script>
    // 选择ul下的所有li
    var liObj = $("ul li");
    // 将所有的li设置字体颜色为红色
    liObj.css("color","red");
    // 这里就有隐式迭代，我们没有对象这个liObj对象进行遍历，但是可以将所有的li设置对应的css样式，这就不需要遍历去一个个设置
    // 但是这种方式这能设置为同一种方式
</script>

5、jQuery中的筛选选择器

例如：

<div class="box">
   <span>你好</span>
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>
<script>
   // 选择box下的第一个div元素
   $(".box div:first").css("color","red");
   // 选择box下的索引为偶数的元素
   $(".box div:even").css("color","blue");
</script>

6、父子选择器

排它思想：

​ 想要多选一的效果，排他思想，当前的元素设置一个样式，而其它的兄弟元素设置为另一个样式。

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
   $("button").click(function () {
       // 将当前的对象设置为对应的背景颜色
      $(this).css("background","#bfa");
      // 排他思想，其它的兄弟元素设置为另一个背景颜色
      $(this).siblings("button").css("background","");
       });
</script>

7、链式编程

​ 链式编程就是为了节省代码量，让代码看起来更加简练。

语法：

$(this).css("background","#bfa").siblings("button").css("background","red");   

这个表示将当前元素的背景设置为 #bfa，而它的兄弟元素设置为red，这个代码也可以分为两句来写。

// 将当前的对象设置为对应的背景颜色
$(this).css("background","#bfa");
// 排他思想，其它的兄弟元素设置为另一个背景颜色
$(this).siblings("button").css("background","red");

注意：使用链式编程需要注意是哪个对象执行的样式。

8、样式的操作

css()方法：
通过操作css()方法来修改元素的样式。

语法1：用于获取当前元素的指定属性名的属性值，它会返回属性值，不会修改属性值。

$(this).css("属性名");

语法2：用于修改指定元素中指定属性的属性值。

$(this).css("属性名","属性值");

属性名必须使用引号包裹，属性值也需要使用引号包裹，但是当属性值为数字是可以不用引号包裹，也可以后面不跟单位。

语法3：css()方法的参数可以是一个对象，通常用于修改多组样式。

$(this).css({
   属性名1: 属性值1,
   属性名2: 属性值2,
   属性名3: 属性值3
});

属性名可以不使用引号包裹，多组样式之间使用逗号隔开，但是属性值为非数字时需要使用引号包裹，属性名如果时符合属性名，采用驼峰的命名规则。

操作类来修改样式：
通过增删改来修改元素的类名达到不同样式之间的切换。

• addClass()：添加一个类，如果存在该类，就不添加。

语法：

$(this).addClass("类名");

这个方法需要传入一个参数，是添加的类名，使用引号包裹，但是不需要添加 . 点。

• removeClass()：删除一个类，如果不存在就不删除。

语法：

$(this).removeClass("类名"); // 用法和上面类似

• toggleClass()：用于切换类名，当元素有这个类时就把这个类删除，没有这个类时就添加该类。

语法：

$(this).toggleClass("类名"); // 用法和上面类似

9、动画

9.1、显示与隐藏

显示：
我们使用show()方法来使一个元素来显示。

语法：

$(this).show();

这个方法有三个参数，这三个参数可以省略不写，第一个是显示花费的时间单位是毫秒，也可以指定为（fast、slow、normal），第二个参数是显示的方式（linear、swing），第三个参数是回一个回调函数，当元素显示后就执行该回调函数。

隐藏：
通过使用hide()方法来使一个元素隐藏。

语法：

$(this).hide(); // 这个方法也有三个参数，和上面的一样

切换：
通过使用toggle()方法来使一个元素在显示和隐藏之间相互切换。

语法：

$(this).toggle(); // 这个方法有三个参数，和上面一样

上面如果没有参数就不会有动画效果，如果指定参数就会有动画效果，但是这个动画效果很丑，所以在开发中一般不用使用这种方式来制作隐藏和显示的动画效果。

滑动显示和隐藏：
通过滑动的动画效果来隐藏和显示元素。

方法	解释
slideDown()	下拉滑动显示
slideUp()	上拉滑动隐藏
slideToggle()	下拉显示和上拉隐藏之间相互切换

这三个方法都有三个参数，参数和上面的一样。

事件切换：
用于在事件切换之间，鼠标经过和鼠标离开的事件的切换。

语法：

$(this).hover(鼠标经过的回调函数,鼠标离开的回调函数);

liObj.hover(function () {
    // 鼠标经过的事件
    $(this).children("ul").slideDown(200);
},function () {
    // 鼠标离开的事件
    $(this).children("ul").slideUp(200);
})

如果hover()方法只传入一个参数，那么鼠标经过和鼠标离开都会执行这个回调函数。

动画排队现象：
当多次触发动画时，可能之前的动画还没有执行完就触发了第二次动画，这样多次动画就出现了动画排队的现象。

我们使用stop()方法来停止上一次的动画，只会停止上次最新的动画。

语法：

$(this).children("ul").stop().slideUp(200);

注意：这里我们采用链式编程，停止动画必须写在执行动画的前面。

淡入淡出：
通过淡入淡出的效果来显示元素。

方法	解释
fadeIn()	淡入显示
fadeOut()	淡出隐藏
fadeToggle()	淡入显示和淡出隐藏切换
fadeTo	淡入显示为指定的透明度

前三个方法参数与上面一样。

第四个方法的参数有四个参数，第一个是执行动画的时间，第二个是透明度，0-1之间，1表示完全不透明，0表示完全透明，第三个是执行的方式，第四个是动画执行完以后的回调函数。

9.2、animate自定义动画

​ 使用animate()方法来自定义一个动画效果。

$(this).animate(参数1,参数2,参数3,参数4);

参数1是必须写的，以对象的形式传入一个需要改变的样式，和css()方法的参数一样。

后面的三个参数和前面的动画参数相同，也可以省略。

10、属性操作

方法	解释
prop()	修改元素指定的属性，可以传入一个样式对象，也可以直接指定对应属性的属性值。
removeProp()	删除一个元素指定属性
attr()	设置或返回被选元素的属性值，可以传入一个样式对象，也可以直接指定对应属性的属性值。
removeAttr()	删除在匹配的元素集中的所有元素指定的属性。
html()	获取指定元素标签内的内容，相当于原生的的innerHTML属性，可以修改，将修改的内容作为参数传入。
text()	获取元素标签内的文本内容，相当于原生的innerText属性，可以修改，将修改的内容作为参数传入。
val()	用于获取表当中的值，可以修改，将修改的内容作为参数传入。

prop()方法和attr()方法的区别：

• 对于HTML元素本身就带有的固有属性，只存在true/false的属性在处理时，使用prop方法。prop不支持自定义属性。
• 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

prop可以看到在HTML标签中隐藏的属性，例如checked属性，而attr()方法只能看到HTML中显示的属性，所以在开发中我门通才使用prop()方法来获取元素的固有属性，使用attr()方法来获取用户自定义的属性。

11、遍历对象

虽然在jquery中存在隐式迭代这个功能，但是隐式迭代只能将元素设置为相同的样式不能将元素设置为不同的样式，所以我们采用each()方法来实现遍历元素进行元素之间不同的操作。

语法1：

$("li").each(function (index,domElement) {
    // 执行的代码
});

这个方法需要一个回调函数，函数中会传入两个参数，第一个参数是遍历到元素的小标，第二个参数是遍历到这个元素dom对象，如果这个对象需要使用jquery中的方法需要将这个对象转换成jquery对象。

语法2：

$.each(object,function(index,domElement){
    // 执行的代码
});

这个方法需要两个参数，第一个是遍历的对象，这个对象可以是任意的的对象，第二个是回调函数，这个回调函数也有两个参数和上面一样。

语法1通常用于遍历HTML元素对象，而语法2通常用于数据处理，例如遍历数组，对象等。

12、元素操作

创建元素：

语法：

var div = $("<div></div>");

直接使用 $ 符号就可以创建一个元素，这个方法需要一个参数，参数是元素的字符串形式。

添加元素：

• 内部添加

语法1：

$(this).append(创建的新元素); 
// 还有一个方法作用类似
新元素.appendTo(目标元素);

这个方法是在该元素中的内部添加一个新的指定的元素，新元素以参数的形式传入。这个方法是把新元素添加到当前元素内部的最后面，作为一个子元素。

语法2：

$(this).prepend(创建的新元素);
// 还有一个方法作用类似
新元素.prependTo(目标元素);

和上面不同的是，将新元素添加到元素内的最前面。

• 外部添加

语法1：

$(this).after(新元素);

将新元素添加到当前元素的后面，作为一个兄弟元素。

语法2：

$(this).before(新元素);

将新元素添加到当前元素的前面，作为一个兄弟元素。

删除元素：

方法	解释
remove()	$(this).remove()，删除匹配的元素（本身）。
empty()	$(this).empty()，删除匹配元素中的所有子元素。
html("")	$(this).html("")，删除匹配元素中的所有子元素。

13、jQuery中的尺寸和位置

尺寸：

方法	解释
width() / heigth()	获取元素的宽度（高度），只算width（height）值。
innerWidth() / innerHeight()	获取元素的宽度（高度），包含padding值。
outerWidth() / outerHeight()	获取元素的宽度（高度），包含padding、border值。
outerWidth(true) / outerHeight(true)	获取元素的宽度（高度），包含padding、border、margin值。

• 如果参数为空是直接获取该元素对应的值，返回值是数字类型。
• 参数不为空是将当前元素的值设置为参数值，参数可以不带单位。

位置：

方法	解释
offset()	获取当前元素距文档的偏移位置，和父元素没有关系。
position()	获取当前元素距带有定位的父元素的偏移位置。
scrollTop()	获取元素当前被滚动条隐藏的高度。
scrollLeft()	获取元素当前被滚动条隐藏的宽度。

• offset()：返回是一个对象，这个对象中包含top、left两个属性，获取元素距文档的偏移位置，这个方法也可以设置元素距文档的偏移位置，需要传入一个带有top、left属性的对象，属性值不需要带单位。

$(".box").offset({
   top: 100,
   left: 100
});

• position()：返回值和offset()类似，但是这个方法只能回去当前元素距带有定位父元素的偏移位置，不能修改这个偏移位置。

• scrollTop()：返回值是一个数字类型，可以传入一个整数参数用于设置元素被滚动条隐藏的高度。

// 当页面滚动的事件
$(window).scroll(function () {
    // 获取当前文档被滚动条隐藏的高度
    console.log($(document).scrollTop());
});

这个方法可以传入一个参数，用于设置元素到被隐藏的高度。scrollLeft()方法和scrollTop()方法类似。

14、事件

事件的绑定：
通过on()方法来注册一个或多个事件。

语法1：将一个元素绑定一个或多个事件，并且多个事件执行相同的代码。

$(this).on("事件名1 事件名2",function(){
   // 执行的代码 
});

注意第一个参数是事件名，可以指定一个或多个，它们之间必须使用空格隔开，第二个参数是这写事件执行的相同代码。

例如：

$(this).on("mouseenter mouseleave",function () {
    alert("你好");
});

给当前元素绑定了两个事件，鼠标移入和移除，当触发事件后就是执行对应的代码。==

语法2：将一个元素绑定一个或多个事件，这些事件分别指定不同的执行的代码。

$(this).on({
    mouseenter: function () {
        // 鼠标移入执行的代码
    },
    mouseleave: function () {
        // 鼠标移除执行的代码
    }
})

这种方式的on()方法传入了一个对象，对象以 事件名: 回调函数 这个格式组成，每一组使用逗号隔开。

事件委派：
将事件绑定给父元素，大大减少事件的绑定。

语法：

$(this).on("事件名","子元素选择器",function(){
    // 执行的代码
});

• 将事件绑定给父元素，可以减少绑定的次数。
• 可以给动态创建的元素绑定事件，将新创建的子元素也可以绑定事件。

事件解绑：
通过off()方法将一个元素的事件进行解除。

语法：

$(this).off(); // 解除当前元素上的所有事件
$(this).off("事件名"); // 解除元素指定的事件
$(this).off("事件名","子元素"); // 用于解除事件委派的事件

只触发一次的事件：

语法：

$(this).one("事件名",function(){
    // 这个事件只触发一次
}); 
// 用法和on()相同，就是效果不一样

自动触发事件：

方法	解释
元素.事件名()	自动触发元素绑定的对应事件
元素.triggle(“事件名”)	自动触发元素绑定的对应事件，会触发元素的默认行为
元素.triggleHandler(“事件名”)	自动触发元素绑定的对应事件，不会触发元素的默认行为

事件对象：
只要触发了事件，就会产生一个事件对象，事件对象通过参数的形式传入回调函数。

语法：

$(this).on(function(event){
    // 这样就可以操作事件对象来实现功能
});

事件对象的属性和js原生的属性基本相同。

属性/方法	解释
currentTarget	在事件冒泡阶段中的当前DOM元素，相当于this，是DOM元素。
pageX / pageY	鼠标相对于文档的左边缘(上边缘)的位置。
preventDefault()	阻止默认事件行为的触发。
stopPropagation()	取消事件冒泡。
target	最初触发事件的DOM元素。
which	针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。

15、对象的拷贝

语法：

$.extend([deep],target,obj); // 将obj这个对象拷贝给target这个对象

例如：

// 目标对象
var target = {
    id: 0,
    name: "张三"
};
// 拷贝的对象
var obj = {
    id: 1,
    age: 18
};
// 执行拷贝
$.extend(target,obj);
console.log(target);

如果目标对象的属性和被拷贝对象的属性冲突，被拷贝的对象的属性会把目标对象的属性覆盖。

对象的拷贝分为浅拷贝和深拷贝。

• 浅拷贝：对于拷贝对象中的引用类型通过复制一份地址拷贝给目标对象，这样目标对象和拷贝对象中的引用类型是执行同一个对象。
• 深拷贝：对于拷贝对象中的引用类型重新创建一个引用对象拷贝给目标对象。如果引用中的属性重复，也会将引用类型中的属性覆盖，不重复的属性就不会覆盖。