1. 查找元素的方法太少，麻烦。

2. 遍历伪数组很麻烦，通常要嵌套一大堆的for循环。

3. 有兼容性问题。

4. 想要实现简单的动画效果，也很麻烦

5. 代码冗余。

1. 查找元素的方法多种多样，非常灵活

2. 拥有隐式迭代特性，因此不再需要手写for循环了。

3. 完全没有兼容性问题。

4. 实现动画非常简单，而且功能更加的强大。

5. 代码简单、粗暴。

1. 引入jQuery文件

2. 入口函数

3. 功能实现

// 第一种写法

$(document).ready(function() {

});

// 第二种写法

$(function() {

});

1.	JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。

2.	jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

1. DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。

2. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。

3. jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））

4. DOM对象与jQuery对象的方法不能混用。

var $obj = $(domObj);

// $(document).ready (function (){}); 就是典型的 DOM 对象转 jQuery 对象

var $li = $(“li”);

// 第一种方法（推荐使用）

$li[0]

// 第二种方法

$li.get(0)

$("h1")   //document.querySelectorAll()

$(".tit")

【案例：下拉菜单】this+children+mouseenter+mouseleave

【案例：突出展示】siblings+find

【案例：手风琴】next+parent

【案例：淘宝精品】index+eq

$(".tit").click(function(){

    // 回调函数就是当你的事件触发的时候要执行的事情

})

$("#btn").on("click",function(){

    console.log("呵呵呵呵")

})

$("css选择器").off("事件类型",函数名)

// 如果没有写函数名，就移除所有

// 原生写法

document.querySelector("#btn").addEventListener("click",function(){

	console.log("我被点了");

	document.querySelector("#btn").removeEventListener("click",arguments.callee)

})

//jQ 写法

$("#btn").one("click",function(){

	console.log("我被点了")

})

$(".switch").click(function(){

    $(".box").animate({

        "width":"500px",

        "height":"500px"

    },2000,function(){

        console.log("我完了")

    })

})

var a = $(".box").css("width");

$(".box").hover(function(){

    $(this).css({

        width:"500px",

        height:"500px"

    })

},function(){

    $(this).css({

        width:"300px",

        height:"300px"

    })

})

//name：需要添加的样式类名，注意参数不要带点.

addClass(name);

// 例子，给所有的 div 添加 one 的样式。

$(“div”).addClass(“one”);

//name: 需要移除的样式类名

removeClass(“name”);

// 例子，移除 div 中 one 的样式类名

$(“div”).removeClass(“one”);

//name: 用于判断的样式类名，返回值为 true false

hasClass(name)

// 例子，判断第一个 div 是否有 one 的样式类

$(“div”).hasClass(“one”);

//name: 需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。

toggleClass(name);

// 例子

$(“div”).toggleClass(“one”);

console.log($(this).text());

$(".box").html("<h1>哈哈</h1>")  // 传参表示赋值

$(".box").html()   // 取值

$("input").attr("type");

$("input").attr("type","password")   // 注意低版本无法设置 type 属性

$("input").prop("checked",false)

document.addEventListener("DOMContentLoaded",function(){

    $("#btn").click(function(){

        console.log("haha")

    })

})

$(document).ready(function(){

    $("#btn").click(function(){

        console.log("haha")

    })

})

$(function(){

    $("#btn").click(function(){

        console.log("haha")

    })

})

$.ajax({

	async:true,               // 是否异步，默认 false

	type:"get",               // 请求方法，默认是 get

	url:"",                   // 请求地址

	dataType:"json",          // 返回的数据类型，如果是 json 则自动反序列化

	success:function(data){   

		// 请求成功时，执行的回调，data 相当于 xhr 对象中的 response

	},

	error:function(err){

		// 请求失败时执行的回调，err 错误信息

	}

})

$.get(url,function(data){

})

或者

$.post(url, data, function(response) {

  // 处理响应数据

});

$.extend  === Array.prototype.abc

$.extend  === Array.prototype.abc

$(".ul1>li").each(function(index,ele){

    console.log(index,ele);

})

var result = $(".ul1>li");

$.each(result,function(index,ele){

	console.log(index,ele);

})

$(".ul1>li").toArray();   // 这个时候就变成了一个数组

var lis = document.querySeletorAll(".ul1>li")    // 得到是一个 NodeList 类型的类数组

var arr = Array.prototype.slice.call(lis);

var arr = $(lis).toArray();

var arr = $.makeArray(lis);

$("#btn1").on("click",function(){

	console.log("单击事件")

})

$("#btn1").on("mousedown",function(){

	console.log("鼠标按下事件")

})

$("#btn1").on("mouseup",function(){

	console.log("鼠标松开事件")

})

$("#btn1").on({

	click: function(){

		console.log("单击事件")

	},

	mousedown: function(){

		console.log("鼠标按下事件")

	},

	mouseup: function(){

		console.log("鼠标松开事件")

	}

})

$("#input1").attr("type");

$("#input1").prop("checked",false);

btn2[0];

$("#btn1")[0];   // 这样就得到了原生的 DOM 对象

// 接下来就可以操作对应的原生的 js 方法

$(btn1);   // 这样就得到了 JQuery 的操作对象

// 只要得到了就可以使用 JQ 方法进行操作

$(btn1).text();

// 原生的 DOM 事件对象

event = event || window.event;

// 而 JQuery 里面，直接使用 event 就好了

// 原生 DOM 的事件里面，取消事件传播与冒泡

event.cancelBubble = true；    //IE

event.stopPropagtion();       //W3c

// 在 JQuery 中，直接调用方法即可

event.stopPropagtion();

// 原生 DOM

//0 级事件

// 在事件方法的最后添加

return false

//JQuery 当中，直接调用

event.preventDefault()

$("#btn1").on("click",function(){

    console.log("我是第一次")

}).on("click",function(event){

    console.log("第二次");

    event.stopImmediatePropagation();  // 事件链到这里就断掉了，后面的事件方法不执行

}).on("click",function(){

    console.log("第三次");

})

$(委托者).on(事件类型，事件绑定者,function(){

	// 这里面可以找到真正的 target 触发者

})

$(".box").on("click",".small-box",function(){

    console.log(this);          //small-box

})

$(".box").on("click",function(){

    console.log(this);          //box

})

$(this)   // 这就相当于对当前元素选取之后再操作

(function($){

	if(typeof $ == undefined){

		throw new Error("jQuery is not defined");

		return;

	}

	$.fn.extend({

		addContextMenu: function(menuList){

			var menuUl = document.createElement("ul");

			menuUl.classList.add("context-menu-box");

			for(var i = 0;i < menuList.length;i++){

				var newli = document.createElement("li");

				newli.innerText = menuList[i].text;

				// 判断一下是否有 click 事件

				if(typeof menuList[i].click === "function"){

					$(newli).on("click",menuList[i].click);

				}

				menuUl.appendChild(newli);

			}

			document.body.appendChild(menuUl);

			// 点击自己的时候，把自己隐藏掉

			$(menuUl).click(function(){

				$(this).hide();

			})

			// 绑定右键菜单事件

			this.contextmenu(function(event){

				event.preventDefault();

				var x = event.clientX;

				var y = event.clientY;

				$(menuUl).css({

					left: x + "px",

					top: y + "px"

				}).slideDown("fast");

			})

		}

	})

})(jQuery)   

/*

$ 符号并不是 jQuery 独占的一个标识符，你有可以在实际的工作中

会引入多个框架文件进行使用，有可以在其他的框架文件中也使用了 $ 这个

符号作为它自己的标识符使用，那么这个时候，两个框架文件之间就会

产生冲突，jQuery 在这个情况下，可以使用另外一个标识符来替代 $ 的作用

就是 jQuery

*/