概念：
-
JavaScript库
-
把一些浏览器兼容性，或者是一些常用的函数封装到一个js文件中，就是JavaScript库
-
我们自己封装的animate.js，就是JavaScript库
-
常见的JavaScript库： jQuery、Prototype、MooTools
JQuery的优点
-
强大的选择器
-
链式编程
-
隐式迭代
-
丰富的插件，可以自己编写插件
-
开源
JQ中的*对象
jQuery中的*对象是$或jQuery
-
获取jQuery对象
-
入口函数
注意：jQuery中的$和jQuery关键字本身为同一对象
JQ中的页面加载事件
使用jQuery的三个步骤：
-
引入jQuery文件
-
入口函数
-
功能实现
关于jQuery的入口函数：
// 第一种写法
$(document).ready(function() {
});
// 第二种写法
$(function() {
});
jQuery入口函数与window.onload的对比（重要）
-
JavaScript的入口函数要等到DOM创建完毕，页面中所有资源（包括图片、文件）加载完成才开始执行。
-
jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。
-
window.onload只能注册一次，jQuery入口函数可以注册多次
-
jQuery的入口函数，封装了DOM中的DOMContentLoaded事件（此事件DOM加载完毕之后就执行）
JQ对象和DOM对象
DOM对象
-
用原生JavaScript获取的DOM对象
-
通过document.getElementById() 返回的是元素(DOM对象)
-
-
通过document.getElementsByTagName()获取到的是什么？
-
伪数组(集合)，集合中的每一个对象是DOM对象
-
JQ对象 （ DOM对象包含JQ对象）
jQuery对象又可以叫做包装集(包装的DOM对象的集合)
-
jQuery对象用$()的方式获取的对象
-
length属性，获取对象内部的DOM元素个数
JQ对象和DOM对象的区别
JQ对象不能调用DOM对象的属性和方法，同样DOM对象也不能调用JQ对象的属性和方法。
两者之间的转换
DOM对象转换成jQuery对象
$(DOM对象)
jQuery对象转换成DOM对象
jQuery对象[索引值] jQuery对象.get(索引值)
$最常用的三种方法
-
$('选择器') 返回jQuery对象
-
$(DOM对象) 返回jQuery对象
-
$(function() {}) 入口函数
选择器
基本选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $('#id') | 获取指定ID的元素 |
| 类选择器 | $('.class') | 获取同一类class的元素 |
| 标签选择器 | $('div') | 获取同一类标签的所有元素 |
| 并集选择器 | $('div,p,li') | 使用逗号分隔，只要符合条件之一就可。 |
| 交集选择器 | $('div.redClass') | 获取class为redClass的div元素 |
与css选择器用法一样
层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $('ul > li') | 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
| 后代选择器 | $('ul li') | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
过滤选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| :eq(index) | $('li:eq(2)').css('color', 'red') | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。equal |
| :odd | $('li:odd').css('color', 'red') | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $('li:even').css('color', 'red') | 获取到的li元素中，选择索引号为偶数的元素 |
筛选选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| children(selector) | $('ul').children('li') | 相当于$('ull > i')，子类选择器 |
| find(selector) | $('ul').find('li') | 相当于$('ul li'),后代选择器 |
| siblings(selector) | $('#first').siblings('li') | 查找兄弟节点，不包括自己本身。 |
| parent() | $('#first').parent() | 查找父亲 |
| eq(index) | $$('li').eq(2) | 相当于 $$('li:eq(2)'),index从0开始 |
| next() | $('li').next() | 找下一个兄弟 |
| prev() | $('li').prev() | 找上一次兄弟 |
JQ样式操作
CSS操作
操作单个样式
// name：需要设置的样式名称
// value：对应的样式值
$obj.css(name, value);
// 使用案例
$('#one').css('background','gray');// 将背景色修改为灰色
操作多个样式
// 参数是一个对象，对象中包含了需要设置的样式名和样式值
$obj.css(obj);
// 使用案例
$('#one').css({
'background-color':'gray',
'width':400,
'height':400
});
获取样式
// name:需要获取的样式名称
$obj.css(name);
// 案例
$('div').css('background-color');
注意：获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。
隐式迭代：
-
设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
Class操作
添加样式类
// name：需要添 加的样式类名，注意参数不要带点.
$obj.addClass(name);
// 例子,给所有的div添加one的样式。
$('div').addClass('one');
移除样式类
// name:需要移除的样式类名
$obj.removeClass('name');
// 例子，移除div中one的样式类名
$('div').removeClass('one');
判断是否有某个样式类
// name:用于判断的样式类名，返回值为true false
$obj.hasClass(name)
// 例子，判断第一个div是否有one的样式类
$('div').hasClass('one');
切换样式类
// name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
$obj.toggleClass(name);
// 例子
$('div').toggleClass('one');
JQuery操作属性
元素固有属性prop()
checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。这些称为元素固有属性。
// 设置属性
$(':checked').prop('checked', true);
// 获取属性
$(':checked').prop('checked');// 返回true或者false
元素自定义属性值 attr()
//设置单个属性
$obj.attr(name, value);
$('img').attr('title','哎哟，不错哦');
//设置多个属性
$obj.attr(obj)
$('img').attr({
title:'哎哟，不错哦',
alt:'哎哟，不错哦',
style:'opacity:.5'
});
//获取属性
$obj.attr(name)
//移除属性
$obj.removeAttr(name);
$('img').removeAttr('title');
val()、text()、html()
$obj.val() 获取或者设置表单元素的value属性的值 $obj.html() 对应innerHTML $obj.text() 对应innerText/textContent，处理了浏览器的兼容性
JQ动画
三组基本动画
-
显示(show)与隐藏(hide)是一组动画toggle：
-
滑入(slideUp)与滑出(slideDown)与切换(slideToggle)，效果与卷帘门类似
-
淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)
$obj.show([speed], [callback]); // speed(可选)：动画的执行时间 // 1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal // 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐) // 3.固定字符串，slow(600)、normal(400)、fast(200)，如果传其他字符串，则默认为normal。 // callback(可选):执行完动画后执行的回调函数 slideDown()/slideUp()/slideToggle();同理 fadeIn()/fadeOut()/fadeToggle();同理
自定义动画
$(selector).animate({params},[speed],[easing],[callback]);
// {params}：要执行动画的CSS属性，带数字（必选）
// speed：执行动画时长（可选），默认400
// easing:执行效果，默认为swing（缓动）慢快慢 可以是linear（匀速）
// callback：动画执行完后立即执行的回调函数（可选）
动画队列与停止动画
在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行
解决方法：在每一次动画执行前添加一个stop()属性，让其停止队列，并清除之前的动画效果。
链式编程
-
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。
$("#dv").html("<p>这是一个p</p>");
$("#dv").css("backgroundColor","red");
//链式写法
$("#dv").html("<p>这是一个p</p>").css("backgroundColor","red");
JQuery节点操作
创建节点
$('<span>这是一个span元素</span>');
添加节点
append appendTo 在被选元素的结尾插入内容 prepend prependTo 在被选元素的开头插入内容 before 在被选元素之后插入内容 after 在被选元素之前插入内容
清空节点与删除节点
-
empty：清空指定节点的所有元素，自身保留(清理门户)
$('div').empty(); // 清空div的所有内容（推荐使用，会清除子元素上绑定的内容，源码）
$('div').html('');// 使用html方法来清空元素。
-
remove：相比于empty，自身也删除（自杀）
$('div').remove();
克隆节点
复制匹配元素
// 复制$(selector)所匹配到的元素（深度复制） // cloneNode(true) // 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。 $(selector).clone();
JQuery尺寸和位置操作
width方法和height方法
设置或者获取高度，不包括内边距、边框和外边距
// 带参数表示设置高度
$('img').height(200);
// 不带参数获取高度
$('img').height();
获取网页的可视区宽高
// 窗口大小发生变化的事件
window.onresize = function () {};
// 获取可视区宽度
$(window).width();
// 获取可视区高度
$(window).height();
innerWidth\innerHeight\outerWidth\outerHeight
innerWidth()/innerHeight() 方法返回元素的宽度/高度（包括内边距）。 outerWidth()/outerHeight() 方法返回元素的宽度/高度（包括内边距和边框）。 outerWidth(true)/outerHeight(true) 方法返回元素的宽度/高度（包括内边距、边框和外边距）。
scrollTop \ scrollLeft
-
设置或者获取垂直滚动条的位置
// 当页面滚动的时候 - 事件
// window.onscroll
// 获取页面被卷曲的高度
$(window).scrollTop();
// 获取页面被卷曲的宽度
$(window).scrollLeft();
// 设置滚动动画
$('body,html').animate({
scrollTop: 0
}, 100)
offset方法与position方法
-
offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素(offsetParent)的位置。
// 获取或设置元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
// 获取相对于其最近的有定位的父元素的位置。
$(selector).position();
on注册事件(重要)
优势：
1、可以绑定多个事件，多个事件处理程序
$("div").on({
mouseenter: function() {
$(this).css("background", "skyblue");
},
click: function() {
$(this).css("background", "purple");
}
});
若事件处理程序相同
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
2、 on可以实现事件委托（委派）
click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
$("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});
3、on可以给未来动态创建的元素绑定事件
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
事件处理 off() 解绑事件
off()方法可以移除通过on()方法添加的事件处理程序
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li");
// 2. one() 但是它只能触发事件一次
$("p").one("click", function() {
alert(11);
})
事件处理 trigger() 自动触发事件
$("div").click();会触发元素的默认行为
// 2. 元素.trigger("事件")
$("div").trigger("click");会触发元素的默认行为
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("div").triggerHandler("click");
$("input").on("focus", function() {
$(this).val("你好吗");
});
Hover
$(selector).hover(fnEnter, fnLeave);
// 下面的简写形式
$(selector).mouseenter(function () {
}).mouseleave(function () {
})
jQuery 事件对象
jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。
element.on(evenets,[selector],function{event}{})
阻止默认行为 ： event.preventDefault() 或者return false
停止冒泡：event.stopPropagation()
each遍历方法
-
jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});
JSON数据
是一种轻量级的数据交换格式，主要用于数据 存储 和 交换。
数据在存储时，只会存储字符串格式，在接收数据时，需要再次转换为数组、对象的格式
对象、数组转为字符串：
JSON.stringify(obj)
字符串转为对象、数组
JSON.stringify(arr);
JQuery常用插件
jQuery 之家 jQuery之家-*分享jQuery、html5、css3的插件库
jQuery 插件使用步骤（比猫画虎）：
1）引入相关文件。（jQuery 文件 和 插件文件）
2）复制相关html、css、js (调用插件)。
瀑布流插件
兼容IE8的响应式网格瀑布流布局jQuery插件_jQuery之家-*分享jQuery、html5、css3的插件库
图片懒加载插件
bootstrap插件
bootstrap官网进行下载操作
全屏滚动插件
jQuery全屏滚动插件fullPage.js演示_dowebok