jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）
jQuery里面对我们原生js代码进行了封装，这样我们可以快速高效的使用这些封装好的功能了。
jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
jQuery的优点:
1. 轻量级。核心文件才几十kb，不会影响页面加载速度。
2. 跨浏览器兼容，基本兼容了现在主流的浏览器。
3. 链式编程、隐式迭代。
4. 对事件、样式、动画支持，大大简化了DOM操作。
5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
版本介绍：
1x ：兼容 IE 678 等低版本浏览器， 官网不再
2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新
3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本
<!-- 1.引入jQuery文件 -->
<script src="jquery.min.js"></script>
<!-- 2.入口函数： -->
1. 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
2. 相当于原生 js 中的 DOMContentLoaded。
$(function() {
$('div').hide(); // 此处是页面 DOM 加载完成的入口
})
// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
... // 此处是页面DOM加载完成的入口
});
<!-- jQuery中的顶级对象$ -->
1. $是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。
2. $是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。
<!-- jQuery 对象和 DOM 对象 -->
1. jQuery 方法获取的元素就是 jQuery 对象。
2. jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
DOM对象转换成jQuery对象:
var box = document.getElementById('box'); // 获取DOM对象
var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象
jQuery 对象转换为 DOM 对象有两种方法：
var domObject1 = $('div')[0] // 2.1 jQuery对象[索引值]
var domObject2 = $('div').get(0) // 2.2 jQuery对象.get(索引值)
<!-- 3.jQuery 选择器 -->
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
// 基础选择器:
$("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加引号 //$(".nav")
//层级选择器:
后代选择器和子代选择器。 //$("ul li") $("ul>li")亲儿子
//筛选选择器:
$("ul li:first")
$("ul li:last") 获取最后一个li
$("ul li:eq(2)") 获取li中索引为2的元素,索引号index从0开始
$("ol li:odd") 获取到li元素,选择索引号为奇数的元素
$("ol li:even") 获取到li元素,选择索引号为偶数的元素
$("li").parent() 查找父级
$("ul").children("li") 亲儿子
$("ul").find("li") 后代选择器
$(".first").siblings("li") 查找兄弟节点
$(".first").nextAll() 查找当前元素之后所有同辈元素
$(".first").preAll() 查找当前元素之前所有同辈元素
$("div").hasClass("protected") 检查当前元素是否包含某个特定的类.protected 如果有返回true
<ul>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
</ul>
<div class="current">俺有current</div>
<script>
$(function() {
$("ol .item").siblings("li").css("color", "red"); // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
// $("ul li:eq(2)").css("color", "blue"); // (1) 我们可以利用选择器的方式选择
// $("ul li").eq(2).css("color", "blue"); // (2) 更推荐这种写法
console.log($("div:first").hasClass("current")); // 判断是否有某个类名
});
</script>
<!-- 4.jQuery 设置样式css -->
$('div').css('属性', '值')
//A:操作 css 方法:
1.参数只写属性名，则是返回属性值
//var strColor = $(this).css('color');
2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');
3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});
//B:设置类样式方法:
1.jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。
$("div").addClass("current"); // 1.添加类
$("div").removeClass("current"); // 2.删除类
$("div").toggleClass("current"); // 3.切换类
<script>
$(function() {
$("div").click(function() {
$(this).toggleClass("current"); // 切换类 toggleClass()
});
})
</script>
<!--5. jQuery 里面的排他思想 -->
// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
<!-- 6.隐式迭代 -->
// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
$('div').hide(); // 页面中所有的div全部隐藏，不用循环操作
<script>
$("ul li").css("color", "red"); // 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
</script>
<!-- 7.链式编程 -->
// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');
####################操作################################################
<!--1. jQuery 属性操作 -->
jQuery 常用属性操作有三种：prop() / attr() / data()
<!-- A 元素固有属性值 prop() -->
prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。
prop("属性") //获取 prop("属性","属性值")
<a href="http://www.taobao.com" title="都挺好">都挺好</a>
设置元素本生自带属性:$("a").prop("title", "我们都挺好");
<!-- B 元素自定义属性值 attr() -->
自定义属性。 比如给 div 添加 index =“1”
attr("属性") //获取属性
attr("属性","属性值")
<div index="1" data-index="2">我是div</div>
设置元素自定义属性: $("div").attr("index", 4);
<!-- C 数据缓存 data() -->
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除
注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型
data("name", "value") //向被选元素附加数据
date("name") //向被选元素获取数据
<script>
$("span").data("uname", "andy"); //给span添加一个 uname = "andy" 属性
</script>
<!--2. jQuery内容文本值 -->
html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<!-- A. 获取设置元素内容 html() -->
html() //获取元素内容 //$("div").html() //结果:<span>我是内容</span>
html("内容") //设置元素内容 //$("div").html("123")
<!-- B.获取设置元素文本内容 text() -->
$("div").text() //获取元素文本内容 //结果:我是内容
$("div").text("123"); //设置元素文本内容
<!-- C.获取设置表单值 val() -->
$("input").val() //获取设置表单值 //结果:请输入内容
$("input").val("123"); //设置表单值
<!-- D.outerHTML -->
利用jQuery.prop("outerHTML")获取包含自身在内的HTML元素的HTML代码
jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码，
然而我们有时候的确需要，可以通过jQuery.prop("outerHTML")的方式设置。
1.jquery获取outerhtml
<div class="test"><p>hello，你好！</p></div>
<script>
$(".test").prop("outerHTML");
</script>
2.jquery设置outerhtml
$('.test').prop('outerHTML', '<input>');
<!-- 3.jQuery 元素操作 -->
A. 遍历元素 .each()
给同一类元素做不同操作，就需要用到遍历。
$("div").each(function (index,domEle) {})
1.each()方法遍历匹配每一个元素,主要用DOM处理
2.index是每个元素索引,domEle是每个Dom元素对象,不是jquery对象
3.想要使用jquery方法,需转换$(domEle)
$.each(object,function (index,element) {})
1.$.each()方法可用于遍历任何对象,主要处理数据,数组.对象
2.index索引,element遍历内容
<div>1</div>
<div>2</div>
<script>
$(function() {
// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
var arr = ["red", "green", "blue"];
// 1. each() 方法遍历元素
$("div").each(function(i, domEle) {
// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称
// 回调函数第二个参数一定是 dom 元素对象，也是自己命名
// 使用jQuery方法需要转换 $(domEle)
$(domEle).css("color", arr[i]);
})
// 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
// $.each($("div"), function(i, ele) {
// console.log(i);
// console.log(ele) });
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 输出的是 name age 属性名
console.log(ele); // 输出的是 andy 18 属性值
})
})
</script>
<!-- 4. 创建、添加、删除 -->
A. 动态创建:
$("<li></li>")
B. 内部添加: 父子关系
element.append("内容") //追加元素最后面
element.prepend("内容") //放在最前面
C. 外部添加: 兄弟关系
element.after("内容") //把内容放入目标元素后面
element.before("内容") //把内容放入目标元素前面
D. 删除元素:
element.remove() //删除匹配的元素(本身)
element.empty() //删除匹配的元素集合中所有子节点
element.html("") //清空匹配的内容
<ul> <li>原先的li</li> </ul>
<div class="test">我是原先的div</div>
<script>
$(function() {
var li = $("<li>我是后来创建的li</li>"); // 1. 创建元素
// 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>
<!-- 5.jQuery 尺寸操作 -->
jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。
可以快速获取和子的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。
A. width() / height() 获取设置元素 width和height大小
$("div").width()
$("div").width(300);
B. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
$("div").innerWidth()
C. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
$("div").outerWidth()
D. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
$("div").outerWidth(true)
<!-- 6.jQuery 位置操作 -->
jQuery的位置操作主要有三个：
A. offset()
$(".son").offset() //1. 获取设置距离文档的位置（偏移
$(".son").offset().top
$(".son").offset({top: 200,left: 200});
B. position()
获取距离带有定位父级位置（偏移） position 如果没有带有定位的父级，则以文档为准, 这个方法只能获取不能设置偏移
$(".son").position() //position().left 和 position().top 获取到左侧,顶部距离
C. scrollTop()/scrollLeft()
设置或获取元素被卷去的头部和左侧
$(document).scrollTop()
<!-- 7,$(window).height() 和 $(document).height()的区别 -->
$(window).height()代表了当前可见区域的大小，
$(document).height()则代表了整个文档的高度，可视具体情况使用.
当浏览器窗口大小改变时(如最大化或拉大窗口后) ，
$(window).height() 随之改变，但是 $(document).height()是不变的。
##############################事件###########################################
- 优点: 操作简单，且不用担心事件覆盖等问题。
- 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。
<!-- 1.jQuery 事件注册 -->
element.事件(function(){})
$("div").click(function() {事件处理程序} //其它事件同原生
$("div").click(function() {
$(this).css("background", "purple");
});
<!-- 2. jQuery 事件处理 -->
因为普通注册事件方法的不足，jQuery又开发了多个处理方法:
- on(): 用于事件绑定，目前最好用的事件绑定方法
- off(): 事件解绑
- trigger() / triggerHandler(): 事件触发
<!-- A.事件处理 on() 绑定事件 -->
on()方法优势1: 可以绑定多个事件
$("div").on({
mouseover: function(){},
mouseout: function(){}
})
如果事件处理程序相同
$("div").on("mouseover mouseout",function(){
$(this).toggleClass("current")
})
on()方法优势2: 可以事件委派,把原来加给子元素事件绑定在父元素上
$('ul').on('click','li',function(){
alert('abc')
})
on()方法优势3: 可以给动态生成的元素绑定事件
$("div").append($("<p>我是动态创建的p</p>"))
$('div').on("click","p",function(){
console.log(123)
})
<!-- B. 事件处理 off() 解绑事件 -->
当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑
off()方法可以移除on()方法添加的事件处理程序
$("p").off() //解绑p元素所有事件处理程序
$("p").off("click") //解绑p元素上面的点击事件
$("ul").off("click","li") //解绑事件委托
<!-- C. one()方法 只能触发事件一次 -->
$("p").one("click", function() {
alert(11);
})
<!-- D.trigger() 自动触发事件 -->
jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler()
第一种:
element.click() //自调用,立即执行 会触发元素的默认行为 // $("div").click();会触发元素的默认行为
第二种:
element. trigger("type") //$("input").trigger("focus"); 自动获取焦点
第三种:
element.triggerHandler(type) //不会触发元素默认行为 input框不能自动获取焦点 // $("div").triggerHandler("click");
<!-- 3.jQuery 事件对象 -->
jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。
element.on(events,[selector],function(event){})
阻止默认行为: event.preventDefault(); 或者return false
阻止冒泡: event.stopPropagation()
<body>
<div></div>
<script>
$(function () {
$(document).on("click", function () {
console.log("点击了document");
})
$("div").on("click", function (event) {
// console.log(event); 事件对象e
console.log("点击了div");
event.stopPropagation(); //阻止了冒泡行为,只弹出一次
})
})
</script>
</body>
<!-- 4.jQuery 拷贝对象 -->
把一个对象(合并)拷贝给另一个对象使用
$.extend([deep],target,obj1,[objN])
1.deep:为true深拷贝,false浅拷贝
2.target:要拷贝的目标对象
3.obj1待拷贝到的对象, objN待拷贝到的N个对象
4.浅拷贝修改目标对象会影响被拷贝对象,深拷贝则不会
// 1.合并数据
var targetObj = {};
var obj = {
id: 1,
name: "andy"
};
$.extend(targetObj, obj);
<!-- jQuery 插件 -->
jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的，所以必须要先引入
1. jQuery 插件库 http://www.jq22.com/
2. jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步骤：
1. 引入相关文件。（jQuery 文件 和 插件文件）
2. 复制相关html、css、js (调用插件)。
注意：实际开发，一般复制文件，然后在文件中进行修改和添加功能。
图片懒加载插件: 当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。
全屏滚动插件: 全屏滚动插件比较大，所以，一般大型插件都会有帮助文档，或者网站
<!-- dom动态生成的html代码操作 -->
$(document).on("click",".test",function(){//修改成这样的写法
$(".test").css("background-color","pink");
});
<!-- js比较年月日或者日期年月日时分秒大小 -->
// 直接传进开始时间很结束时间
function compareTime(startTime,endTime) {
// var start_time=startTime.replace(/-|s|:|//g,'').replace(' ', ''); //用这个加强版也可以
var start_time = startTime.replace(/-|s|:|//g,'');
var end_time = endTime.replace(/-|s|:|//g,'');
if (start_time < end_time) { return true; } else { return false; }
#################################效果################################################
<!-- jQuery 给我们封装了很多动画效果，最为常见的如下： -->
- 显示隐藏：show() / hide() / toggle() ;
- 划入画出：slideDown() / slideUp() / slideToggle() ;
- 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
- 自定义动画：animate() ;
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
jQuery为我们提供另一个方法，可以停止动画排队：stop() ;
<!-- 1. 显示隐藏 -->
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]])
1.参数都可以省略,无动画直接显示
2.speed可以是 "slow","normal","fast",或者动画时长毫秒数 1000
3.easing是切换效果,默认 "swing",可选 "linear"
4. fn回调函数,动画完成时执行,每个元素执行一次
5.一般情况下,不带参数直接显示与隐藏
$("button").eq(0).click(function() {
$("div").show(1000, function() {
alert(1);
});
})
<!-- 2. 滑入滑出 -->
下滑/上滑 用法同上
slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]])
$("div").stop().slideToggle(500); //阻止上一个动画,防止动画队列
$("button").eq(2).click(function() {
// 滑动切换 slideToggle()
$("div").slideToggle(500);
});
<!-- 3. 淡入淡出 -->
用法同上
fadeTo([speed],opacity,[easing],[fn])
//opacity 透明度必须写,取值0~1之间
<!-- 4.自定义动画animate() -->
自定义动画非常强大，通过参数的传递可以模拟以上所有动画
slideDown(params,[speed],[easing],[fn])
params想要更改的样式属性,以对象形式传递,必须写. 属性名可以不用 "" 驼峰命名式 其余参数可省
$(function() {
$("button").click(function() {
$("div").animate({
left: 500,
top: 300,
opacity: .4,
500
}, 500);
})
})
<!-- 5 停止动画排队 -->
总结: 每次使用动画之前，先调用 stop() ,在调用动画。
<!--6. 事件切换 hover() -->
事件切换 hover() 就是鼠标经过和离开的复合写法 //功能类似 css 中的伪类 :hover