1、 为什么使用 jQuery(遇到的问题)
选择器功能弱DOM操作繁琐之极浏览器兼容性不好动画效果弱2、 什么是 jQuery(概念) jQuery （javaScriptQuery） JavaScript 代码库 官方网站： http://jquery.com/
3、 目前 jQuery 有三个大版本：
1.x： 兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本： 1.12.4 (2016年5月20日) 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。 如果不考虑兼容低版本的浏览器可以使用2.x，最终版本： 2.2.4 (2016年5月20日) 3.x： 不兼容 ie678，只支持最新的浏览器。除非特殊要求，一般不会使用 3.x 版本的， 很多老的 jQuery 插件不支持这个版本。 目前该版本是官方主要更新维护的版本。 最新版本：3.2.1（2017 年 3 月 20 日）作用 1： $(function) 1.相当于 window.οnlοad=function(){} 2.功能比window.onload更强大 1) window onload一个页面只能写一个,但是可以写多个$() 而不冲突 2) window onload要等整个页面加载完后再执行(包括图片、超链接、音视频等)，但是$的执行时间要早 3.完整形式是$(document).ready(…….);
作用 2： $(selector) 选择器 jQuery具有强大的选择器功能,其他作用后续用到再总结
对象之间的转换 DOM对象：直接使用JavaScript获取的节点对象
className innerHTML valuejQuery对象：使用jQuery选择器获取的节点对象，它能够使用jQuery中的方法
addClass() html() val()DOM对象和jQuery对象分别拥有一套独立的方法， 不能混用
DOM对象转换成jQuery对象
$(DOM对象)jQuery对象转换成DOM对象
jQuery对象[index]jQuery对象.get(index)基本选择器
标签选择器 $(“a”)ID选择器 $(“#id”) $(“p#id”)类选择器 $(“.class”) $(“h2.class”)通配选择器 $("*")//只是第一行变颜色
$("ul li:first").css("background-color","red");
$("ul li").first().css("background-color","red");
//最后一行变颜色
$("ul li:last").css("background-color","green");
$("ul li").last().css("background-color","green");
//获得索引是奇数对象 索引从0开始
$("ul li:odd").css("background-color","green");
//获得索引是偶数对象 索引从0开始
$("ul li:even").css("background-color","green");
//获得索引下标位3的对象
$("ul li:eq(3)").css("background-color","green");
//获得大于指定索引下标的对象
$("ul li:gt(3)").css("background-color","green");
//获得小于指定索引下标的对象
$("ul li:lt(3)").css("background-color","green");
/**子选择器****/
$("ul li:nth-child(1)").css("background-color","green");
$("ul li:first-child").css("background-color","darkred");
$("ul li:last-child").css("background-color","darkred");
$("ul li:only-child").css("background-color","#00A40C");
//type属性等于text
$("input[type=text]").css("background-color","#00A40C");
// name属性用z开头的
$("input[name^=z]").css("background-color","#FF0000");
// name属性同d结尾的
$("input[name$=d]").css("background-color","green");
//name属性中包含p 的元素
$("input[name*=p]").css("background-color","green");
//复合属性选择器，需要同时满足多个条件时使用
$("input[type=text][name^=z]").css("background-color","deeppink");
// √ 获得form表单中的所有的表单项 √
var inp= $(":input")
//获得标签名称是input 的所有的标签对象
var inp2=$("input"); alert(inp.length+"----"+inp2.length);
$("input[type=text]")
// √ input标签 type属性等于text所对应的对象 √
$(":text").css("background-color","green");
$(":password").css("background-color","red");
/** 表单属性选择器***/
//获得input标签中含有disabled属性的对象
var but= $("input:disabled"); alert(but.val());
//√ 获得含有checked属性的对象 √
var ch =$("input:checked");
//获得div对象
var div =$("#div1");
//获得css样式
var wid=div.css("width");
var hi=div.css("height"); console.log(wid+"----"+hi);
//操作元素对象的
css div.css("width","400px");
div.css("height","500px");
div.css("background-color","red");
div.css("backgroundColor","red");
//以上内容的综合---{key1:value1,key2:value2}---json数据格式
div.css({'width':'300px','height':'300px','background-color':'red'});
如果当页面中的css样式比较多的时候可以通过添加类的方式添加样式，方法如下：两种 $("#bu1").click(function(){
//获得div对象 --通过添加类的方式添加css样式
//第一种
$("#div1").attr("class","div");
//第一种
$("#div1").addClass("div");
})
$("#bu1").click(function(){
//获得元素对象
var tex=$("#inp1");
//获得元素对象的属性
var te=tex.attr("type");
var cl =tex.attr("class");
//获得元素固有的属性值
var val =tex.attr("value");
console.log(te+"------"+cl+"-----"+val);
//获得文本框实时输入的值
var val2=tex.val();
//alert(val2);
}
tex.attr("type","button");
tex.attr("value","测试按钮");
//支持json数据格式
tex.attr({"type":"button","value":"测试按钮"});
var ch= $("#fav").attr("checked");
var flag=$("#fav").prop("checked",true);
//获得div元素对象
var div =$("#div1");
//获得元素的内容 含有HTML的标签的
var ht=div.html(); console.log(ht);
//只是获得文本内容， 不含有HTML标签
var te =div.text(); console.log(te);
//获得文本框的值
var val=$("#inp1").val();
console.log(val);
可以识别里面的html代码
div.html("我们都爱笑");
识别不了里面的HTML代码
div.text(div.text()+"我们都爱笑");
获得文本的值 $("#inp1").val("sxt");
注意特殊情况：
Select 、 textarea 两个标签获得值得时候需要用val()
//创建了新的元素 var p=$("
List Item0
")
//增加子元素 ---现有元素之后
$("#div1").append(p);
//把p元素增加到 div里面
p.appendTo("#div1");
//添加内部的子元素 ---现有元素之前
$("#div1").prepend(p); p.prependTo("#div1");
//平级的添加元素---现有元素之前
p.insertBefore("#div1");
$("#div1").before(p);
//平级的添加元素---现有元素之后
p.insertAfter("#div1");
$("#div1").after(p);
/**替换指定的节点**/
$("div p:nth-child(1)").replaceWith(p);
p.replaceAll("div p:nth-child(5)");
/**删除指定的节点元素**/
//删除指定的元素
$("#div1").remove();
$("div p:nth-child(3)").remove();
//清空内容
$("#div1").empty();
$("div p:nth-child(2)").empty();
/页面加载完执行的操作/
$(function(){}) jQuery(function(){})
$(document).ready(function(){})
$(function(){
/***事件的基础绑定***/
$("#bu1").click(function(){
alert("单击事件");
})
$("#bu1").dblclick(function(){
alert("双击事件");
})
/***bind事件绑定***/
$("#bu2").bind('click',function(){
alert("单击事件绑定");
})
//内容还支持json数据格式
$("#bu2").bind({
'click':function(){},
'dblclick':function(){},
'blur':function(){}
})
/***one一次事件绑定***/
$("#bu3").one('click',function(){
alert("一次事件绑定");
})
/*trigger事件操作**/
$("#bu4").click(function(){
$("#bu1").trigger('dblclick');
$("#bu3").trigger('click');
})
/**事件的解绑***/
$("#bu5").click(function(){
//事件的解绑
//解绑指定对象上的所有事件
$("#bu1").unbind();
//解绑指定的事件
$("#bu1").unbind("dblclick");
})
$(".bu6").click(function(){
alert("单击事件的绑定");
})
$(".bu6").live('click',function(){
alert("单击事件绑定");
})
$("body").append('');
//获得div对象
var div1 =$("#div1");
//3s隐藏动画
div1.hide(3000);
div1.show(3000);
//隐藏的显示 ---显示的隐藏
//$("div").toggle(3000);
//滑动上 div1.slideUp(3000);
//滑动下 div1.slideDown(3000);
//滑动上--滑动下 滑动下---滑动上
$("div").slideToggle(3000);
//淡出
div1.fadeOut(3000);
//淡入
div1.fadeIn(3000);
//获得div对象
var div1 =$("#div1");
//3s隐藏动画
div1.hide(3000); div1.show(3000);
//隐藏的显示 ---显示的隐藏
//$("div").toggle(3000);
//滑动上 div1.slideUp(3000);
//滑动下 div1.slideDown(3000);
//滑动上--滑动下 滑动下---滑动上
$("div").slideToggle(3000);
//淡出
div1.fadeOut(3000);
//淡入
div1.fadeIn(3000);
jQuery中的封装原理
匿名函数的自调用
闭包原理
闭包的优点：
1、可以减少全局变量的对象，防止全局变量过去庞大，导致难以维护
2、 防止可修改变量， 因为内部的变量外部是无法访问的，并且也不可修改的。安全
3、 读取函数内部的变量， 另一个就是让这些变量的值始终保持在内存中。
参考网址： https://www.cnblogs.com/sq45711478/p/5990347.html
