jQuery
jQuery
1.JavaScript 库
1.1JavaScript 库：即 library，是一个封装好的特定的集合（方法和函数）。从封装 一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里 面，比如动画animate、hide、show，比如获取元素等。
简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这 样我们可以快速高效的使用这些封装好的功能了。
2. jQuery的概念
jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情
3. jQuery的优点
最重要的两个优点 链式编程、隐式迭代。
4. jQuery的入口函数
jQuery中有两种常见的入口函数
第一种: 简单易用。
$(function () {
... // 此处是页面 DOM 加载完成的入口
}) ;
// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
... // 此处是页面DOM加载完成的入口
});
总结：
- 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
- 相当于原生 js 中的 DOMContentLoaded。
- 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
- 更推荐使用第一种方式。
5.jQuery中的顶级对象$
（1）$是jQuery的别称，在代码中可以和jQuery相互替代
（2）$是jQuery的顶级对象，相当于原生JavaScript中的window
jQuery 对象和 DOM 对象
- 用原生 JS 获取来的对象就是 DOM 对象
- jQuery 方法获取的元素就是 jQuery 对象。
- jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
6. jQuery 对象和 DOM 对象转换
原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
（1）把DOM对象转换成jQuery对象
var box = document.getElementById('box'); // 获取DOM对象
var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象
（2）把jQuery对象转换成DOM对象 ，有两种方法
- $(jQuery对象).get(索引值)
- $(jQuery对象)[索引值]
7.jQuery 选择器
7.1基础选择器
7.2层级选择器
7.3 筛选选择器
8.jQuery筛选方法
8.1获取父元素和父辈元素
$().parent() 获取父元素
$().parent() 获取父辈元素，不带参数获取的是所有的父辈元素，带参数获取的是指定的父辈元素
8.1获取子元素
$().children() 不带参数获取的是所有的亲儿子，带参数获取的是指定的亲儿子
$().find() 不带参数获取的是所有的后代元素（儿子 孙子），带参数获取的是指定的后代元素（儿子 孙子）
8.3获取兄弟元素
$().siblings() 不带参数获取的目标元素所有的兄弟元素（不含目标元素本身）,带参数获取的是指定的兄弟元素
8.4 根据索引值获取对应的元素
$().index() 获取对应的索引值
$().eq(index) 根据索引获取对应的元素
9.隐式迭代和链式编程
9.1 链式编程（节省代码量，看起来更优雅。）
jQuery 里面的排他思想
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
链式编程写法：$(this).css("color","red").siblings(). css("color"," ");
9.2 隐式迭代 对同一类元素做了同样的操作
遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide(); // 页面中所有的div全部隐藏，不用循环操作
10.jQuery 样式操作
10.1 行内样式操作
1.参数只写属性名，则是返回属性值
var strColor = $("li").css('color');
2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');
3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});
10.2 设置内样式
1.添加类
$("div").addClass("current");
2.删除类
$("div").removeClass("current");
3.切换类
$("div").toggleClass("current");
括号里面的参数(类名)不加"."
原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。
11.jQuery 效果
11.1 显示隐藏
显示 $('div').show()
隐藏 $('div').hide()
切换 $('div').toggle()
后面都可以跟三个参数([speed],[easing],[fn])
speed:三种预定速度之一的字符串('slow','normal',or 'fast')或表示动画时长的毫秒数值(如：1000)
easing: (optional)用来指定切换效果，默认是"swing",可用参数"linear"
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次
11.2 滑入滑出
下滑:slideDown()
上滑:slideUp()
切换:slideToggle()
11.3 淡入淡出
淡入 fadeIn()
淡出fadeOut()
切换fadeToggle()
淡化到指定透明度fadeTo()
fadeTo([speed],opacity,[easing],[fn])
opacity透明度必须写，取值0~1之间
speed也是必须写
11.4 自定义动画
自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate() ;
语法:animate(params,[speed],[easing],[fn]
params:想要更改的央视属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性则需要采用驼峰命名法backgroundColor
示例代码 ：
<body>
<button>动起来</button>
<div></div>
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left: 500, // 做动画记得给目标元素加定位，切记切记
top: 300,
opacity: .4,
width: 500
}, 500);
})
})
</script>
</body>
<button>动起来</button>
<div></div>
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left: 500, // 做动画记得给目标元素加定位，切记切记
top: 300,
opacity: .4,
width: 500
}, 500);
})
})
</script>
</body>
11.5 停止动画排队
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
停止动画排队的方法为：stop() ;
stop() 方法用于停止动画或效果。
stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。
12. 事件切换
jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。
语法：hover([over,]out) // 其中over和out为两个函数
out:鼠标移出元素要触发的函数（相当于mouseleave）
如果只写一个函数，则鼠标经过和离开都会触发它
示例代码 ：
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
</ul>
<script>
$(function() {
// 鼠标经过
// $(".nav>li").mouseover(function() {
// // $(this) jQuery 当前元素 this不要加引号
// // show() 显示元素 hide() 隐藏元素
// $(this).children("ul").slideDown(200);
// });
// // 鼠标离开
// $(".nav>li").mouseout(function() {
// $(this).children("ul").slideUp(200);
// });
// 1. 事件切换 hover 就是鼠标经过和离开的复合写法
// $(".nav>li").hover(function() {
// $(this).children("ul").slideDown(200);
// }, function() {
// $(this).children("ul").slideUp(200);
// });
// 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function() {
// stop 方法必须写到动画的前面
$(this).children("ul").stop().slideToggle();
});
})
</script>
</body>
13.jQuery属性操作
1.元素固有属性值（元素本身自带的属性）
1.1 $().prop('属性名') 获取属性值
1.2 $().prop('属性名','属性值') 设置属性
prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。
2. 元素自定义属性 attr()
$().attr('属性名') 获取属性值
$().attr('属性名','属性值') 设置属性
也可以获取H5自定义属性 （H5中自定义属性data-开头）
3. 数据缓存 data()
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
data('name','value') 向被选元素附加数据
data('name') 向被选元素获取数据
还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。
14. jQuery文本属性值
1.普通元素内容html() (相当于原生 inner HTML) 可以识别标签
html() 获取元素的内容·
html('内容') 设置元素的内容
2. 普通元素文本内容 text() (相当于原生 innerText) 不可识别标签
text() 获取元素的文本内容
text('文本内容') 设置元素的文本内容
3. 表单的值 val() (相当于原生 value)
val() 获取表单值
val('内容') 设置表单值
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
// 1. 获取设置元素内容 html()
console.log($("div").html());
// $("div").html("123");
// 2. 获取设置元素文本内容 text()
console.log($("div").text());
$("div").text("123");
// 3. 获取设置表单值 val()
console.log($("input").val());
$("input").val("123");
</script>
</body>
15.jQuery元素操作
1. 遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。
遍历元素对象 ： $().each(function(index,eleDom){.......})
each()方法遍历匹配的每一个元素，主要有DOM处理，each每一个
里面的function回调函数有两个参数：index是每个元素的索引号，eleDom是每个DOM对象，不是jquery对象
使用jquery方法的时候需要把DOM对象转换成jquery对象，$('eleDom')
遍历数据（对象、数组、集合） ： $.each(data,function(params1,params2){......})
data代表你要遍历的元素，是数组还是对象。。。。
如果是遍历数组 params1 代表是索引，params2 代表是索引对应的值
如果是遍历对象 params1 代表是属性名 params2 代表是属性值
如果是遍历对象 params1 代表是属性名 params2 代表是属性值
2.创建、添加、删除
2.1 创建 $('<div></div>')； 动态创建了一个div ，此时创建的元素对象还存在于内存中
2.2 添加
父子关系 element.append($('<div></div>')) 追加子孩子 ，放到父元素里面的最后面，相当于原生里的appendChild
element.prepend($('<div></div>')) 追加第一个子孩子，插入到父元素里面的第一个
兄弟关系 element.after('内容') 把内容放在目标元素的后面
element.before('内容') 把内容放在目标元素的前面
2.3 删除
element.remove() 删除匹配的元素，删除元素本身（自杀）
element.empty() 删除匹配的元素集合中所有的子节点
element.html('') 清空匹配的元素内容
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function() {
// 1. 创建元素
var li = $("<li>我是后来创建的li</li>");
// 2. 添加元素
// 2.1 内部添加
// $("ul").append(li); 内部添加并且放到内容的最后面
$("ul").prepend(li); // 内部添加并且放到内容的最前面
// 2.2 外部添加
var div = $("<div>我是后妈生的</div>");
// $(".test").after(div);
$(".test").before(div);
// 3. 删除元素
// $("ul").remove(); 可以删除匹配的元素 自杀
// $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
$("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
})
</script>
</body>
16.jQuery尺寸、位置操作
16.1 jQuery尺寸操作
<body>
<div></div>
<script>
$(function() {
// 1. width() / height() 获取设置元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($("div").innerWidth());
// 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true));
})
</script>
</body>
16.2 jQuery位置操作
1.offset()设置或获取元素偏移
该方法设置或获取被选元素相当于文档的偏移坐标，跟父级没有关系
$().offset().top 获取距离文档顶部的距离
$().offset().left 获取距离文档左侧的距离
可以设置元素的偏移： offset({top:10,left:30})
2. position()获取元素偏移
用于获取被选元素相对于带有定位的父级偏移坐标，如果父级都无定位，就以文档为准
$().position().top 获取距离定位父级顶部的距离
$().position().left 获取距离定位父级左侧的距离
只能获取，不能设置
3.scrollTop() | scrollLeft() 设置或获取元素被卷去的头部和左侧
不跟参数是获取，跟参数（参数是不带单位的数字）是设置被卷去的头部
案例：带有动画的返回顶部
17.jQuery事件注册
语法： element.事件类型(function(){ })
$('div').click(function(){事件处理程序})
18.jQuery事件处理
18.1事件处理on()绑定事件 有的事件只想触发一次，可以用one()来绑定事件
on()方法优势1 ：
可以绑定多个事件，多个时间处理程序
$('div').on({
mouseover:function(){},
mouseout:function(){},
click:function(){}
});
如果事件处理程序相同
$('div').on("mouseover mouseout",function(){事件处理程序})
on()方法优势2：
可以事件委派操作。事件委派的定义是：把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
$("ul").on("click","li",function(){ //把原来加给子元素li身上的事件绑定在父元素ul身上
alert("hello world")
})
on()方法优势3 ：
动态创建的元素，没有办法绑定事件，on()可以给动态生成的元素绑定事件
$('div').on('click','p',function(){
alert('我可以给动态生成的元素绑定事件 ')
});
$('div').append($("<p>我是动态生成的P</p>"));
18.2事件处理off()解绑事件
$().off() 解绑目标元素所有事件处理程序
$().off("click") 解绑目标元素上的点击事件
$("ul").off("click","li") 解绑事件委派
18.3 事件处理trigger()自动触发事件
第一种 会触发元素的默认行为
element.click()
element.click("事件处理类型")
第二种
element.triggerHandler("事件处理类型") 不会触发元素的默认行为
19.jQuery事件对象
语法： element.on('事件类型'，[selector],function(event){})
阻止默认行为 event.preventDefault() 或者 return false
组织冒泡 event.stopPropagation()
20.jQuery插件
-
-
jQuery 之家 http://www.htmleaf.com/
图片懒加载插件 就是当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。
插件使用 ：
下载插件
引入相关的文件
复制相关html、css、js
浙公网安备 33010602011771号