-----好记性不如烂笔头。勤做笔记便于复习加深映像！
-----JQuery虽然有点过时，但仍有借鉴作用。学习时结合了网易云上的课程视频的笔记和菜鸟教程网站的jq文档知识，尽最大可能查漏补缺。so 将学习时的总结和领会记录了下来、便于以后翻阅。
1.引入方式三种（放置位置要在使用地方之前,之后的话需要做一丢丢处理在（4）处已说明）：
2.$函数是全局的且$==jQuery。window.$==window.jQuery==jQuery为true。若其他 JavaScript 框架也使用 $ 符号作为简写怎么办？法一：用jQuery代替。法二：使用noConflict() 方法释放对 $ 标识符的控制。
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作呐!");
});
});
3. 分清js原生对象和jq对象,写的时候容易混用，用原生对象就去调用jq方法了。原生对象无法调用后者方法，调用先转换，转换方式$(需转原生对象)就可以调用jq方法了。
this.html()//报错:Uncaught TypeError: this.html is not a function
$(this).html()//把原生对象的this转为jq对象
var oTest = document.getElementById("test");
//其他js对象转jq对象
console.log($(oTest))
console.log($("#test").get(0))//get(0)jq对象集合里获取的第一个对象值
4.书写位置，代码放在引入jq之前。按照正常写会报错，需这样处理一下
// 书写位置，若要写在查找元素之前
window.onload = function () {}//原生中写法
//jq中写法
//方法一：
$(document).ready(function(){
// 执行代码
});
//方法二：
$(function () {
$("#test")
})
5.jq选择器常用共8种，可根据css选择器，对比记忆呀。另外，选择器中可使用css中的伪类选择器
//1.id选择器
$("#box").html() // 用 #号
//2.类选择器
$(".box").html //用 . 号
//3.标签选择器
$("div").html //直接给标签名
//4.多元素选择器
$("#box,.box,div").html(); // 几种选择器组合
//5.后代选择器
$("#box p").html() // 用空格隔开
//6.子元素选择器
$("#box > p").html() ; // 用> 隔开
//7.伪类选择器
$("p:nth-child(2)").css("background-color"))
//8.属性选择器
$("input[value=men]") ; //找 value=men的input元素
$("input[value*=men]") ; //找 value里面包含men的input元素
$("input[value^=men]") ; //找 value里面以men开头的input元素
$("input[value$=men]") ; //找 value里面以men结尾的input元素
6.过滤方法
:first//用法: $(”tr:first”) ;// 匹配找到的第一个元素 :last //匹配找到的最后一个元素 :not(selector) //去除所有与给定选择器匹配的元素 :even//匹配所有索引值为偶数的元素，从 0 开始计数 :odd//匹配所有索引值为奇数的元素，从 0 开始计数 :eq(index) //匹配一个给定索引值的元素，从 0 开始计数 :gt(index) //匹配所有大于给定索引值的元素，从 0 开始计数 :lt(index) //匹配所有小于给定索引值的元素，从 0 开始计数 $("p").filter(".url")//返回带有类名 "url" 的所有
元素
7.jq中部分常用方法：
（1）addClass() //为每个匹配的元素添加指定的样式名
$('div').addClass('box'); //为页面中所有的div添加一个box样式
（2）removeClass()// 移除集合中每个匹配元素上一个、多个或全部样式
$('p,.box').removeClass('classname')//classname只需类名即可，不需要加"."
（3）toggleClass() //样式切换，如果有就删除，如果没有就添加
$("p").click(function () {
$(this).toggleClass("highlight");
});
（4）$('p').html() //获取p标签里面的内容
$('p').html('床前明月光')；//设置html里面的内容
（5）$('p').text();
$('p').text('床前明月光')；
//tml方法功能和原生方法innerHTML一样 ，text方法功能和原生方法innerText一样。val() 获取或者设置表单元素的值，这里要注意的是 获取的是表单元素的值 不要和html 以及 text方法搞混
（6）$("input").val(text);
//获取属性值 attr()和prop() 方法用于获取属性值。
（7）$("#aa").attr("href")
（8）$("#aa").prop("href")
//相同点：两者获取的属性有值，返回指定属性值
//不同点：没有相应的属性，prop()返回值是空字符串,attr()返回值是 undefined
//HTML元素本身就带有的固有属性用------>prop(),自定义的DOM属性则用---->attr()
//具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，使用attr的话属性效果无法实现。
//用attr（）设置属性值
//1.$("#aa").attr( "href","http://www.baidu.com");
//2.同时设置多个属性,例如href 和 title 属性
$("#aa").attr({
"href" : "http://www.baidu.com",
"title" : "jQuery"
});
//2.回调函数,两参数：第一个为被选元素列表中当前元素的下标，以及原始（旧的）值
$("#aa").attr("href", function(i,origValue){
return origValue + "/jquery";
}）
（9）//removeAttr() 删除属性
$("input").removeAttr("data");
（10）//removeProp()同上
$("input").removeProp("checked");
（11）//设置样式的css()方法
$('div').css('color','red'); //设置所有div字体颜色为红色
$('div').css('color') //获取颜色
//批量设置法一：
//index参数：选中的div的遍历集合，从0开始；item参数：
$('div').css('color',function(index,item){
//console.log(index)打印查看
//console.log(item)
//奇数设置处理if(index%2==0){
if(index<=4){
return 'blue';
}
}) //下标小于4的都设置成蓝色
//批量设置法二：
$('div').css({"color":"yellow","font-size":"25px"})//对象传入设置
（12）//each()方法 后台传来的数据，数组对象。可遍历
$("li").each(function(index, item){
//index 为li的下标 item表示每个li（元素或对象）
console.log(index, item)
]})
8.添加元素：
var txt1="文本。
"; // 使用 HTML 标签创建文本
var txt2=$("").text("文本。"); // 使用 jQuery 创建文本
var txt2=$(""+"拼接加入"+"
"); //拼接动态文本数据进入
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
append/prepend和after/before的区别。两组的意思都为---->从后面插入/从前面插入。两者的区别：
(1).append/prepend 是在选择元素内部嵌入。
(2).after/before 是在元素外面追加。
(3).当选中最小一层的元素或者无嵌套的元素，两者效果一样
//例如，选中ul下的第二个li,前两个和后两个效果一致
$("ul li").get(1).prepend("追加列表项 ");
$("ul li").get(1).append(" 追加列表项 ");
$("ul li").get(1).before("追加列表项 ");
$("ul li").get(1).after("追加列表项 ");
(4).appendTo/prependTo ,insertAfter/insertBefore方法与append/prepend，after/before方法就是小学所学“把”和“被”的关系
$(li).appendTo($("#ul")); //把li元素添加到ul中 ，这个元素被添加到ul中原有元素的后面
$(li).appendTo($("#ul")); //把li添加到ul中 ，这个元素被添加到ul中原有元素的前面
$("#li2").insertAfter($("#li1")); // 把li2 添加到li1 后面
$("#li2").insertBefore($("#li1")); // 把li2 添加到li1 前面
9.删除元素：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
$("#div1").empty();
$("#div1").remove();
//可接受一个参数，允许对被删元素进行过滤
$("p").remove(".italic");//对类名为.italic的p元素删除
10.遍历方法（关系查找方法）,包括兄弟关系（同级同代）、祖先后代关系（隔代）--------应用中最重要的就是可以传入过滤条件进行筛选！！！。
兄弟关系（同级同代）：
（1）prev()和prevAll(),next()和nextAll()，prevtUntil()和nexttUntil()，siblings()方法五个返回的都是jq对象！！
$(".box").prev() //获取前面一个兄弟节点
$(".box").prevAll() //获取前面所有的兄弟节点
$(".box").prevAll("p")//可传入过滤条件，获取上面所有元素的p元素
$(".box2").prevtUntil(".box1");//返回.box1和.box2之间的所有元素,向上找
$(".box").prev() //获取前面所有的兄弟节点
$(".box").next() //获取后面一个兄弟节点
$(".box").nextAll() //获取后面所有的兄弟节点
$(".box1").nextUntil(".box2");//返回.box1和.box2之间的所有元素，向下找
$(".box").siblings() //获取所有的兄弟节点
祖先后代关系（隔代）：
（1）长辈：parent()，parents()，parentsUntil()及closest()方法
$("span").parent()//返回每个 元素的的直接父元素,它爸爸 $("span").parents();//返回所有 元素的所有祖先,它一路向上直到文档的根元素 "" $("span").parentsUntil("div");//返回介于 与元素之间的所有祖先元素,位置不可换，辈分‘小’---->‘大’ $("input").closest('li');//找到input上面最近的li父级
（2）后辈：find()，children()方法；index(),get()，eq()方法（顺便补充）
$(function () { $("li").click(function () { // alert($(this).html()) alert($(this).index()) //快熟获取的当前元素的下标 }) //获取集合中的某个元素,2为获取元素的下标，返回原生的元素，不可用jq方法，需转换 console.log($("li").get(2)) //eq()同上get（）方法一样效果,但返回的是jq对象！ console.log($("li").get(2)) //find()方法返回的是一个jq对象！！！！！ $(".box").find("p"); //找到box类下面所有的p标签 $(".box").find(".aa");//找到box类下面所有的含类名为aa的标签 console.log(111,$(".box").find($(".innerBox")))//找到对象 $("div").children();//返回被选元素的所有直接子元素 $("div").children("p.aa");//返回类名为 "aa" 的所有
元素 })
11.jq中的事件
元素效果事件常用有：
①click() 方法是当按钮点击事件被触发
②dblclick ()方法双击元素时，会发生 dblclick 事件
③mouseenter()方法当鼠标指针穿过元素时，会发生 mouseenter 事件
④mouseleave()当鼠标指针离开元素时，会发生 mouseleave 事件
⑤mousedown()当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
⑥mouseup()当在元素上松开鼠标按钮时，会发生 mouseup 事件
⑦hover()方法当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)
⑧focus()当元素获得焦点时，发生 focus 事件
⑨blur()当元素失去焦点时，发生 blur 事件
键盘事件常用有：
①.keydown：在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码;
②keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符（返回的是空白字符）
③keyup：用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.
$(window).keydown( function(event){
// 通过event.which可以拿到按键代码. 如果是keypress事件中,则拿到ASCII码.
} );
上面的所有事件一般传入函数，实现效果！
事件的绑定方法：
①on方法绑定
$('#box').on('click',function(){//上面的方法都可使用on方法，替换"click"即可
alert("on监听事件");
})
$('#box').on('click mouseleave',function(){//用空格隔开可监听多个事件
alert("on监听多个事件");
}
②直接绑定
$("#box").click(function(){
alert("直接使用"）
})
删除事件：
$("#box").off("blur"); //删除事件
事件冒泡：
事件冒泡就是事件会从元素内部往外传播的一种现象，事件冒泡的好处就是可以节约代码，比如说，有个需求是，点击某个按钮btn1 的时候显示一个div，点击其他元素的时候隐藏div，这个时候，如果没有冒泡机制，要实现这个需求就要给除了btn1 以外的所有元素都绑定上点击事件，如果当前页面有成千上万个元素，那么事件就会被重复绑定成千上万次，如果有了事件冒泡机制就可以把事件绑定给document，通过冒泡机制，点击其他的元素都会触发document身上的点击事件，从而节约代码，此时，只需要把btn1身上的点击事件阻止冒泡就行了
$("#btn1").on("click",function(ev){
ev.stopPropagation();
})
事件委托:
//两中方法，on（）和delegate（）都可
//1.7版本后on() 方法是 bind()、live() 和 delegate() 方法的新的替代品
$("ul").on("click","li",function(){
$(this).css("background","#ccc");
})
$("ul").delegate("li","click",function(){
$(this).css("background","#ccc");
})
阻止默认行为：
浏览器会自带一些默认行为，比如说右键菜单，表单提交等，如果要实现自定义右键菜单或者表单验证这些功能的时候就需要把这些默认行为阻止掉
$("#btn1").on("click",function(ev){
ev.preventDefault();
})
$(function () {
$(document).contextmenu(function (ev) {
// ev.preventDefault()
return false;//既可以阻止默认行为，也可以阻止冒泡
})
- 阻止默认行为总结： 在jquery中可以直接return false ；return false 具有阻止浏览器默认行为和阻止冒泡的功能
11.AJAX相关方法
1.$.ajax() 执行一个异步的ajax请求
$.ajax({
url:'http://www.wp.com/getData.php', //跨域到http://www.wp.com，另，http://test.com也算跨域
type:'GET', //jsonp 类型下只能使用GET,不能用POST,这里不写默认为GET
dataType:'jsonp', //指定为jsonp类型
data:{"name":"Zjmainstay"}, //数据参数
jsonp:'callback', //服务器端获取回调函数名的key，对应后台有$_GET['callback']='getName';callback是默认值
jsonpCallback:'getName', //回调函数名
success:function(result){ //成功执行处理，对应后台返回的getName(data)方法。
$("#myData").html('1、My name is '+result.name+'.I\'m '+result.age+' years old.
');
},
error:function(msg){
alert(msg.toSource()); //执行错误
}
});
2.get()和post()方法
//get()语法：$.get(URL,data,function(data,status,xhr),dataType);
$.get("test.php", function(data){
alert("Data: " + data);
});
//post()语法$(selector).post(URL,data,function(data,status,xhr),dataType)
$("input").keyup(function(){
txt=$("input").val();
$.post("demo_ajax_gethint.html",{suggest:txt},function(result){
$("span").html(result);
});
});
12.jq的效果方法
①hide()、show()、toggle()方法：
语法：
$(selector).hide(速度，动画效果，回调函数);
$(selector).show(速度，动画效果，回调函数);
$(selector).toggle(速度，动画效果，回调函数);
速度以毫秒为单位或fast/slow也行；动画效果jq提供"linear"(匀速)，"swing"(先慢后快，推荐)；回调函数自定义
$("#hide").click(function(){
$(".p1").hide();
$(".p1").hide(1000,"swing");//一秒，先慢后快消失
$(".p1").hide(1000,"swing"，function(){
alert("消失后的事件函数")
});
});
$("#show").click(function(){
$("p").show();//使用方式同上
});
$("button").click(function(){
$("p").toggle();//使用方式同上
});
②fadeIn()、fadeOut()、fadeToggle()、fadeTo()方法：
语法：
$(selector).fadeIn(speed,callback);//用于淡入已隐藏的元素,参数speed可用三种同hide()方法
$(selector).fadeOut(speed,callback);//用于淡出可见元素
$(selector).fadeToggle(speed,callback);//在 fadeIn() 与 fadeOut() 方法之间进行切换
$(selector).fadeTo(speed,opacity,callback);//fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeOut("slow");
$("#div3").fadeToggle(3000);
$("#div3").fadeTo(1000,0.25);//0为全透明了
});
③slideDown()、slideUp()、slideToggle()方法：
语法：
(selector).slideUp(speed,callback);//向上滑动元素
$(selector).slideToggle(speed,callback);//在 slideDown() 与 slideUp() 方
法之间进行切换
$("#flip").click(function(){
$("#panel01").slideDown();
$("#panel02").slideUp(1000);
$("#panel02").slideslideToggle(1000,function(){
alert("来回切换")
});
});
④动画animate()方法：
语法：
$(selector).animate({params},speed,callback);//{params}为要改变的css样式，来形成动画
$("button").click(function(){
//方式一：可以多个属性
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
//方式二：部分效果可以使用相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=;
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
//方式三：使用预定义的值，属性的动画值设置为 "show"、"hide" 或 "toggle"
$("div").animate({
height:'toggle'
});
//方式四：动画队列，给一个对象绑定多个动画，逐步执行。但是使用stop()终止中途某一动画后，之后的动画不在执行。
var div=$("div");//选择需要动画的对象
div.animate({height:'300px',opacity:'0.4'},"slow");//执行顺序：1
div.animate({width:'300px',opacity:'0.8'},"slow");//2
div.animate({height:'100px',opacity:'0.4'},"slow");//3
div.animate({width:'100px',opacity:'0.8'},"slow");//4
});
//animate() 方法几乎可以操作所有 CSS 属性，但要改为驼峰命名的样式
//比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right
⑤停止动画stop()方法：
语法：
$(selector).stop(stopAll,goToEnd);//两个参数都是可选的，stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，下一个动画开始，为true，则停止所有动画效果而不是只停止当前动画； goToEnd 参数规定是否立即完成当前动画。默认是 false；
//默认地，stop() 会清除在被选元素上指定的当前动画
$("#stop").click(function(){
$("#panel").stop();
});