java入门第七篇-JQuery；

Posted 2020-11-02 lslboy

【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"

})