关于jq，可以理解为另一种JavaScript的写法，是用更少的语言实现更多的功能。它大大简化了JavaScript原生代码的繁琐程度（如链式），当然虽然刚开始用可能很不习惯，但它确实让代码行数明显减少了
关于jQuery
1.jQuery核心代码$
实际上jquery是一个工具库，其中包含已经封装好的方法。其核心代码为$以及$()所调用的各类方法
var $obj = $(选择器)
$obj 是jquery对象(实例)
jQuery对象并不直接指向页面元素，用 console.log($obj)测试发现，他返回的是一个伪数组，这里就是他与原生代码 var ele = document.querySelector(选择器)的不同。
// 总结：
// 原生dom对象就是个标签元素，不能直接调用jquery对象的方法
// jquery对象不能直接操作原生dom对象的属性和方法
// 如何js和jq混在一起操作页面元素，就需要dom对象和jquery对象转换
p.s.这里补充一下，应该还有个入口函数的问题。但归纳以后好像有点多，所以放个链接在这里，比较详细。
2.添加元素、删除元素、设置文本、设置样式、设置属性
添加元素
原生代码：Element.appendChild("")
jq代码：
在容器元素的最后的索引位置 添加元素 （父子关系）
$().append("")
在容器元素的索引为0的位置 添加元素（父子关系）
$().prepend("")
在当前的元素之前插入元素(兄弟关系)
$().before("")
在当前的元素之后插入元素(兄弟关系)
$().after("")
删除元素
原生代码：Element.removeChild("")
jq代码：
删除当前元素
$().remove("")
清空元素内容
$().empty("")
【这里也可以用$().html("")将内容设置为空】
设置元素内容
原生代码：
Element.innerHtml("")
Element.innerText("")
Element.style.样式
jq代码：
$().text()
$().html()
$().val() 设置或返回表单字段的值
$obj.css(属性名称，属性值)
$obj.css(属性对象)
例如：
$(".demo-5").css({
width: 200,
height: 80,
backgroundColor: "green"
})
设置属性
原生代码：Element.setAttribute(attribute,value)
jq代码：$().attr()
例如：
// 设置元素的属性( src alt class id href ...)
var src = $("#layout img").attr("src");//获取src属性
console.log(src);
$("#layout img").attr("src","./imgs/2.png");//设置src属性
// $("#layout img").removeAttr("src");//删除src属性
设置多属性
$("button").click(function(){ $("#w3s").attr({ "href" : "http://www.w3school.com.cn/jquery", "title" : "W3School jQuery Tutorial" });});
控制类名
原生代码：
Element.className
Element.classList【其中有.add/.remove/.contains/.toggle】
jq代码：
$().addClass()
.removeClass()
.toggleClass()
.hasClass()
获取指定页面元素
原生代码：
...（这里实在有点多，因为又有父元素的代码如parentElement，又有父节点的代码parentNode，懒癌如我就不写了，详细翻拒绝摆烂第七天的代码）
jq代码：
获取页面所有某元素如container下的按钮
$("#container button")
eq()方法 获取页面第二个按钮
$("#container button").eq(2)
children() 获取#container子元素
$("#container").children()
parent() 获取section标签的父元素
$("section").parent()
prev() 获取当前标签的上一个元素
$("#container .btn-3").prev()
next() 获取当前标签的下一个元素
$("#container .btn-3").next()
获取兄弟元素（除了自身以外）
$("#container .btn-3").siblings(选择器)
获取容器标签的指定的后代元素
$("#container").find(选择器)
3.事件绑定和事件对象
怎么说呢，我的建议是不用记事件绑定，因为和原生代码差不多。但是呢，关于事件对象还是要明白是什么。 事件对象是事件触发时 产生的数据集合。在这个集合中可以获取关于当前事件的信息。（状态、位置、方法）
bind() 方法
这里还是写一下普通情况的绑定做对比：
代码1
// 绑定事件
// $(".btn-1").click(function(){
// console.log("触发点击事件")
// })
代码2
bind 绑定事件（可以绑定多个事件）
// $obj.bind(参数1，参数2)
// $(".btn-1").bind("click mouseenter mouseleave",function(event){
// // 获取事件类型
// var _type = event.handleObj.origType;
// console.log("触发事件类型:",_type);
// })
delegate() 方法
delegate： 委托
该方法用于事件委托，给祖先元素或父元素绑定事件，从而让所有的后代元素都绑定事件。
// $obj.delegate(参数1，参数2，参数3)
// $obj.delegate(选择器，事件类型，回调函数)
$(".container").delegate("button","click",function(){
// 该方法直接可以通过this获取事件源
console.log(this);//事件源
})
on() 方法
别问，问就是用on。该方法集以上两种方法为一体，总之就是直接用就行了好吧。
// 代码一、
// $("button").on('click mouseenter mouseleave',function(event){
// console.log("事件触发了",event.handleObj.origType);
// })
// 代码二、
// $obj.on(参数1，参数2，参数3)
// 参数1：事件类型 ，参数2：选择器，参数3：回调函数
$(".box").on("click","button",function(){
console.log(this);
})
4.动画函数
这里就不写js的原生代码了，这里需要注意的是，以下所有代码都是通过js来实现的。具体实现有空我会整理出来
元素的显示与隐藏（）
直接隐藏显示（脱离文档流）
$dom.show()
$dom.hide()
$dom.toggle()
淡入淡出（脱离文档流）
$dom.fadeIn()
$dom.fadeOut()
$dom.fadeToggle()
下拉收起（脱离文档流）
$dom.slideDown()
$dom.slideUp()
$dom.slideToggle()
然后千呼万唤使出来的函数动画：
//动画函数
$dom.animate()
5.遍历函数
each() 方法
// each()
// 第一种写法：
// index: 代表索引值
// dom: 代表dom元素
// 作用：循环标签数组
// 调用者： $(".btn") jquery对象
// $(".btn").each(function(index,dom){
// // console.log(dom);
// dom.style.backgroundColor = "red";
// dom.style.color = "white";
// })
// 第二种写法：
// 普通数组
var arr = ["red","green","blue","purple","yellow"];
// 作用：循环任意数组
// 调用者： $ jquery函数
$.each(arr,function(index,item){
// console.log(index,item);
$(".btn").eq(index).css("backgroundColor",item);
})
6.关于jq拓展的方法
这里就像在原型上挂自定义方法一样，jq作为一个函数库，一样可以在jq对象或者函数本身上挂自定义方法，区别就是调用者不同。
// 调用者：jquery对象
// 拓展一个bgcolor方法,专门改变元素背景色
// $(".box").bgcolor("red")
// $.fn.extend({
// bgcolor: function(bgc){
// $(this).css("backgroundColor",bgc);
// }
// })
// $(".box-1").bgcolor("red");
$.fn.bgcolor = function (bgc) {
// $(this) 是这个方法的调用者
$(this).css("backgroundColor", bgc);
}
// 分别改变了以下div的背景色
$(".box-1").bgcolor("green");
$(".box-2").bgcolor("orange");
$(".box-3").bgcolor("purple");
// 调用者：$函数
// 拓展getRandom方法，获取随机数
// 一种写法：
// $.extend({
// getRandom: function(min,max){
// return Math.floor(Math.random()*(max-min)+min);
// }
// })
// console.log($.getRandom(50,80));
// 换种写法：
$.getRandom = function(min,max){
return Math.floor(Math.random()*(max-min)+min)
}
console.log($.getRandom(50,80));
这里有两个案例，分别为满屏滚动插件的封装和瀑布流的封装，这里暂且不写，会专门额外写一篇文章介绍
另外再分享一首歌《终章》--Assen捷&橙翼
