java入门第七篇-JQuery；
【JQuery语法】
1.使用Jquery必须先导入jquery.x.x.x.js文件
2.JQuery中的选择器:
$("选择器名称").方法()。($是JQuery的缩写，也就是说选择器可以是JQuery("选择器名称").方法()。)
present+ next:选定 present节点的下一个相邻节点。
present~ next:选定present节点的后面全部兄弟节点。
3. jQuery中的文档就绪函数:
$(document).ready(function(){
});
简写形式: $(function(){
});
可多次添加。
[JQuery文档就绪函数与window.onload的区别]
1. window.onload必须等待网页资源(包括图片等)全部加载完成后，才能执行;
文档就虚函数只需要等到网页DOM结构加载完成后，即可执行。
2. window.onload在一个页面中，只能写一次。
文档就虚函数在一个页面中，可以有N个。
4.JS对象和JQuery对象:
1.使用$("")取到的节点为JQuery对象,只能调用JQuery方法，不能调用原生JS方法；
$("#div").click(function(){}) √
$("#div").onclick=function(){}; × 使用JQuery调用原生JS
同理，使用getElement系列取到的为JS对象，也不能调用JQuery函数。
【JQuery对象与JS对象的相互转换】
1.JQuery转JS: 使用.get(index) 或 [index] 选中的就是JS对象。
$("#div").get(index).onclick=function(){};
$("#div")[0].onclick=function(){};
2.JS转JQuery: 使用$()包裹变量。
var div = document.getElementByTagName("div");
$(div).click(function(){});
5. 解决多库冲突的方法
JQuery.noConflict();
!function($){
$("div").click(function(){
})
}(JQuery)
【文档处理方法】
1.[内部插入]
1. $("div").apend(content|fn) : 将所有选定的内容追加到节点内部文本后,
如果内部有该内容则改变位置。不录入新内容。
2. $("<p/>").appendTo("选择器名") :将新建的节点添加到选择器内部最后。
3. $("div").prepend(content) :将所有选定的标签追加到节点内部文本前。
如果内部有该内容则改变位置，不录入新内容。
4. $("p").prependTo( $("div") ); :在节点的内部前置p标签。
2.[外部插入]
1.$("p").after("<b>Hello</b>"); :在匹配的选择器后面插入一个内容。
2.$("p").insertAfter("#foo"); :把前一个匹配的插入到后一个匹配的后面。
3.$("p").before("<b>Hello</b>"); :在匹配的选择器前面插入一个内容。
4.$("p").insertBefore("#foo"); :把前一个匹配的插入到后一个匹配的前面。
3.[包裹]
1.$("div").wrap("<section></section>") 为每一个选定的节点都套一个父节点。
2.$("div").wrapAll("<section></section>") 把所有被选中的节点包在同一个父节点中去。
3.$("#div1 p").unwrap(). 删除选中节点的父节点。
4.$("#div1").wrapInner("<div></div>") 将选中节点的所有子元素 包裹在一个新的节点中。
新的元素依然是当前元素的子节点。
4.[替换]
1.$("#div1 p").replaceWith("<p>1</p>") 将后面新建节点替换前面选中节点。
2.$("<p>1</P>").replaceAll("div p") 上面倒过来，前替换后。
5.[删除]
1.$("#div1").empty() 清空当前节点的所有子元素。
2.$("div p").remove() 删除所有选中的节点及它们的子节点。
3.$("div p").detach() 删除所有选中的节点及它们的子节点。
[remove()和detach()的区别]
使用remove()删除的节点，恢复以后，不再保留节点所绑定的事件。
使用detach()删除的节点，恢复以后，可以保留节点所绑定的事件。
6.[克隆]
1.clone()
$("#div1").clone() 传入二个参数，第一个: false表示只克隆当前节点和子节点、不克隆事件，
true克隆事件。
第二个 : false 不传子节点
true 传子节点。
【属性和CSS方法】
[属性]
1. .attr("class","cls") 设置节点的属性
.attr({
"class":"cls1",
"name":"name1",
"style":"font-size:20px"
}); 同时设置多个属性(传入一个对象以键值对的形式同时设置多个属性)
.attr("class") 取到节点的属性
2. .removeAttr("class") 删除节点的属性
3. .prop("checked") 可以取节点属性，但是在读取 disabled checked等"属性名"="属性值"的属性时，
不会取属性值，只会判断有没有该功能返回false和true。
[attr和prop区别]
在读取 disabled checked等"属性名"="属性值"的属性时，prop不会取属性值，只会判断有没有该功能返回false和true。
attr会取属性值，没有返回undefined。
attr只能取到写在标签上的属性，不能判断状态。
4. .removeProp("checked"). 删除节点属性。
[css类]
1. .addClass("class名") 在原有class的基础上，新增class名。
2. .removeClass("cls cls1") 删除class名，其余未删除的依然保留。
3. .toggleClass("div1") 切换class，如果有指定的class就删除该class，没有就新增该class。
[HTML代码/text/值]
1.html("html代码") 不传参取到HTML代码，传参设置HTML代码。
2.text("text文本") 不传参取到Text文本，传参设置Text文本。
3.val("文本框中的值") 不传参取到文本框中的值(就是标签中value属性的属性值)，传参设置。
【CSS方法】
[css]
1. .css("属性名") 取到css样式的属性名的属性值。
.css("属性名","属性值") 给节点添加css样式，属于行级样式表权限。
.css({
"属性名":"属性值",
"属性名":"属性值",
"属性名":function(index,value){
return 属性值。
例如:
return 16 + "px";
}
}); 同时添加多个样式。
2.
1. .offset() 返回节点相对于浏览器左上角的偏移量。margin不算节点的一部分。
返回一个对象{top:20,left:20}
2. .position() 返回节点相对于父节点的偏移量，父节点必须是定位元素，如果不是定位元素，
则依然相对于浏览器左上角进行测量。
测量偏移时，margin属于节点的一部分。
3. scrollTop() 设置或取到指定节点的滚动条的位置。
3. .height() 取到或者设置节点的宽高。
.width()
.innerHeight() 取到节点的内部区域 宽高+padding
.innerwidth()
.outerHeight() 取到节点的外部区域
.outerwidth() (不传参数表示宽高+padding+border，传入true表示宽高+padding+border+margin)
【JQuery对象访问】
1 .each() 遍历数组，传入一个参数function(index,item),
回调函数的返回值return true，相当于continue；
return false，相当于break。
2 .size() 返回数组的长度。
.length属性
3. get() 将JQuery对象 转为JS对象，
传入index表示取出第一个，并转为JS对象;
不传参数，表示将JQuery对象数组中的所有元素，都转为JS对象
【工具】
[数组和对象操作]
1. $.each(对象或数组,function(index,item){
}) 对传入的数组或对象进行遍历，可以是JQuery对象数组，也可以是JS对象数组。
2. $.map() 功能和each一样，不过遍历过程 回调函数中可以返回一个值，对原值进行修改。 最终结果用新的变量接收。
3. $.inArray(obj,数组,fromindex) 从fromindex(可省略)开始查找arr数组中的obj下标。如果没找到返回-1。
4. $.toArray() 将选中的JQuery DOM集合恢复成数组，数组中的每一个是JS对象。
5. $.merge(数组1，数组2) 合并两个数组。
6. $.parseJSON() 把JSON字符串转换成JSON对象。
[测试操作]
1. $.contains(JS父对象,JS子对象) 检测父对象是否包含子对象，返回true或false。
[筛选]
1. .hasclass() 判断节点是否有这个类名。
【事件方法】
[事件绑定的方式]
1.快捷方式绑定
$("button:eq(0)").dblclick(function(){})
缺点:无法取消事件绑定。
2.on方式绑定
① $("button:eq(0)").on("click dbclick mouseover",function(){
alert("hah");
})
② $("button:eq(0)").off("click");
③ $("button:eq(0)").on({
"click":function(){
alert("click");
},
"mouseover":function(){
alert("over");
}
})
④ $("button:eq(0)").on("click",{"name":"zhangsan","age":18},function(e){
console.log(e.data.name);
$("div").on("click","button",{"name":"zhangsan","age":18},function(e){
console.log(e.data.name);
})
优点:可以取消事件绑定。 可以同时绑定多个事件为同一函数。
也可以传入一个对象，传入事件和函数的键值对。传入多个事件的多个函数。
还可以传入对象和参数，参数中形参为e e可以访问对象。
传入一个选择器，委派给选择的节点执行。
[事件委派]
概念:将原本绑定在DOM节点上的事件，改为绑定在其父节点甚至根节点上，然后委派给当前节点执行。
事件委派的作用: 1.将事件直接绑定在根节点上，可以减少事件绑定次数，更加节省资源。
2.新增的符合事件委派选择器的标签，也可以执行事件委派的事件。
[事件处理]
1.on(事件名,事件委派选择器,传入的数据,函数); 绑定事件
2.off(事件名,绑定函数名) 不传参，清除绑定的所有事件；
如果只传入一个事件名，清除所有函数。
3.one(事件名,传入的数据,函数) 使用one绑定的事件只能执行一次。 可以传入三个函数，
4.trigger(事件名,[1,2,3]) 触发节点的事件。而不用执行点击等操作。
第二个参数是个数组，里面的每个值都是传给事件回调函数的参数
注意!!! 事件回调函数的参数第一个必须是事件对象，因此我们传递的参数从第二个开始取值。
传递的参数，可以使用arguments进行读取，下标0依然是事件因子。
5.triggerHandler() 用法与trigger相同
[trigger和triggerHandler的区别]
1. trigger能触发所有事件。
triggerHandler不能触发HTML事件，例如表单的submit事件等。
2. trigger可以全局触发，不限次数
triggerHandler只能触发所有匹配元素中的第一个触发事件。
3. trigger的返回值是调用.trigger()函数的DOM对象，符合JQuery的链式语法。
triggerHandler的返回值是事件回调函数的返回值，如果没有返回值 返回undifined。
[事件切换]
1.hover(mouseover函数,mouseout函数) 接受两个函数，分别表示mouseover和out，
接受一个为mouseover
2.toggle("fast",function(){}) 不传参数切换显示/隐藏当前元素。
传入一个参数，渐变效果。"fast"/"slow"/"ease"等
传入函数，执行完成之后的回调函数
传入一个布尔类型的参数，如果是true，显示，false隐藏
【动画方法】
1. show()方法 不传参，直接显示 不进行动画
传入时间毫秒，或者速度字符串"slow","normal","fast"等将在指定时间完成动画；
也可以传入一个回调函数，表示动画完成后执行的回调函数
其实就是同时修改 width/height/opacity
2.hide()方法 让显示的元素隐藏，效果与show相反;
[滑动]
1 .slideDown():让显示的元素隐藏，修改height属性 参数同show()
2 .slideUp() :让隐藏的元素显示，修改height属性
3 .slideToggle :以修改height的方式切换显示和隐藏
[淡入淡出]
1. .fadeIn() 让隐藏的显示，修改opacity属性 参数同show()
2. .fadeOut() 让显示的隐藏，修改opacity属性
3. .fadeToggle() 切换显示隐藏状态，修改opacity属性
4. .fadeTO() 作用与fadeToggle相同，多了第二个参数，表示动画完成后的最终透明度
[自定义动画]
1. .animate({
fontSize:"68px"
},2000,"liner",function(){}) 第一个参数传入一个对象，里头的是动画结束状态的属性键值对
第二个是完成时间 可不写 可以毫秒 可以"slow" "normal" "fast"
第三个是动画样式 "liner" "swing"
第四个是回调函数 可不写
2. .stop() 停止当前节点的所有动画，后续动画不再执行，回调函数不再调用。
3. .finish() 结束当前节点的所有动画，动画直接进入最后状态，调用回调函数。
4. .delay() 传入一个毫秒值，延时完再执行接下来的动画。
$("#div1").animate({
fontSize:"68px",
}).delay(5000).animate({
width:"50px",
height:"50px"
})
