JQuery 相关用法和操作

Posted 2020-10-06 Mr.TongYu、

01-JQuery 基础语法：

1、使用JQuery必须先导入JQuery.x.x.xjs文件。

 

2、JQuery中的选择器：

$(选择器).函数()

① $是JQuery的缩写，既可以使用JQuery("选择器").函数()；

② 选择器，可以是任何的css支持的选择符；

3、文档就绪函数：防止在文档未完全加载完成之前，运行JQuery代码；

$(document).ready(function(){

// JQuery代码

});

 

简写形式：$(function(){ });

 

[文档就绪函数 和 window.onload区别]

① window.onload必须等到网页中的所有内容加载完成后，才会执行代码(包括图片、视频等资源)

文档就绪函数，只需要在网页DOM结构加载完毕后，就可以执行代码；

② window.onload只能写一个，写多个只会执行最后一个；

文档就绪函数，可以写多个，并且不会被覆盖。

4、原生js对象与JQuery对象：

① 使用("")选中的是JQuery对象，只能调用JQuery的函数，er不能使用元素js的事件与函数；

$("#p").click(); √

$("#p").onclick=function(){} ×

解释：$("#p")是JQuery对象， onclick是原生js事件

 

同理，使用document.getElement系列获取的是原生js对象，也不能使用JQuery相关对象。

 

② 原生js对象转为JQuery对象

可以使用$()包裹原生js对象，即可转为JQuery对象。

var p = document.getElementsByTagName("p");

$(p).click(); √ 原生js对象p已转为JQuery对象

③ JQuery对象转为原生js对象 。使用 .get(index) 或 [index]

$("#p").get(0).onclick=function(){} √

$("#p").(0).onclick=function(){} √

5、JQuery 解决多库冲突

由于其他的js库，也可以使用$作为自身标识，导致其他js库与JQuery冲突。

要解决冲突，可以放弃使用$,直接使用JQuery对象。

[使用自执行函数传入JQuery对象简化写法]

jQuery.noConflict();//调用这个函数，将$控制让给其他类库，即JQuery不能在使用$

 

！function(j){

//函数之中，就可以用字母j，代替JQuery对象1

}(JQuery);

 

 

 

02-JQueryDOM操作及其他函数

 

// 使用$()直接创建一个标签节点

 

// 将创建好的节点，插入到指定位置。

// 在#div1内部的最后，直接插入一个节点。

$("#div1").append("<p>这是被插入的p标签</p>");

 

// 把新节点插入到#div1中

$("<p>这是被插入的p标签</p>").appendTo("#div1");

 

// 在#div1内部的开头，直接插入一个节点。

$("#div1").prepend("<p>这是被插入的p标签</p>");

 

$("#div1").after("<p>这是被插入的p标签</p>");

$("<p>这是被插入的p标签</p>").insertBefore("#div1");

 

// 把每个p标签外面，都包裹一层div

$("p").wrap("<div></div>");

 

// 把所有的p标签，包裹在同一个div中

$("p").wrapAll("<div></div>");

 

// 把#div1里面的所有子元素，用<div>包裹起来

$("#div1").wrapInner("<div></div>");

 

// 删除元素的父标签

$("#p").unwrap();

 

// 将所有匹配的p标签，全部换为span标签

$("p").replaceWith("<span>111</span>");

 

// 用span元素，替换掉所有p标签

$("<span>111</span>").replaceAll("p");

 

// 删除#div1中的所有子元素。 但是#div1依然保留空标签

$("#div1").empty();

 

// 直接从DOM中，删除#div1以及所有子元素

$("#div1").remove();

 

// 直接从DOM中，删除#div1以及所有子元素

$("#div1").detach();

 

 【remove和detach异同】

1、相同点：

① 都会把当前标签，以及当前标签的所有子节点，全部删除；

② 都可以在删除时，把当前节点返回。并可以使用变量接受返回的节点，以便后期恢复；

 

2、 不同点：

使用接受的节点，恢复原节点时。

remove只能恢复节点的内容，但是事件绑定，不能再恢复；

detach不但恢复节点的内容，还能再恢复 事件的绑定；

 

 

案例 ↓

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

　　alert(1);

})

var div1 = null;

$("button:eq(0)").click(function(){

　　div1 = $("#div1").remove();

})

$("button:eq(1)").click(function(){

　　div1 = $("#div1").detach();

})

$("button:eq(2)").click(function(){

$("button:eq(2)").after(div1);

});

 

 [JS中 .cloneNode() 和 JQ中 .clone() 区别]

两者都接受传入true/false的参数。

.cloneNode() 不传参数或传入参数false，表示只克隆当前节点，而不克隆子节点。 传入true表示可隆全部子节点。

.clone() 无论传入哪个参数，都会克隆所有子节点。但是，不传参数或者传入false，表示只克隆节点，不克隆节点绑定的事件。 传入true表示同时克隆及诶单绑定的事件。

 

 

 

/*CSS和属性相关操作*/                                                                         

 

使用attr()设置或者取到元素的某个属性。

$("#div1").attr("class","cls1");

 

$("#div1").attr({    使用attr一次性设置多个属性

　　"class" : "cls1",

　　"name" : "name1",

　　"style" : "color:red;"

});

console.log($(".p").attr("id"));

 

 删除元素属性

$("#div1").removeAttr("class");

 

 

 prop与Attr区别。

对于checked/disabled等属性名等于属性值的属性，使用prop返回的将是true或false， 使用attr返回的将是属性名或者undefined

所以，对于属性名等于属性值，或者属性是true/false的特殊属性，通常使用prop选取。 其他的属性，通常使用attr选取。

 

console.log($("button:eq(2)").attr("disabled"));

console.log($("button:eq(2)").prop("disabled"));

 

●给元素添加class属性，与attr添加class的不同是，使用addClass添加的新类名，将会保留原来已有的class名。

$("p").addClass("selected1 selected2");

 

●删除掉元素指定的class

$("p").removeClass("selected1");

 

●元素有指定class名，则删除； 元素没有指定class名，则新增。

$("p").toggleClass("selected1");

 

●取到或设置元素里面的html，相当于innerHTML

console.log($("#div1").html());

$("#div1").html("<h1>我是新的h1</h1>");

 

●取到或设置元素里面的文字内容，相当于innerText

console.log($("#div1").text());

$("#div1").text("<h1>我是新的h1</h1>");

 

●获取或设置 元素的Value值

console.log($("input[type=‘text‘]").val());

$("input[type=‘text‘]").val("姜浩特别帅！");

 

 ●给元素设置CSS样式属性 属于style行级样式表权限

$("#div1").css({

　　 "color":"red",

　　 "user-select":"none",

　　 "text-stroke":"0.5px blue"

 });

var id = setInterval(function(){

$("#div1").css({

　　"width":function(index,value){

　　if(parseFloat(value)+10 >= 600){

　　clearInterval(id);

}

return parseFloat(value)+10+"px";

}

});

},500);

 

●获取和设置元素的width和height属性

console.log($("#div1").height());

console.log($("#div1").width());

$("#div1").width("400px");

 

●获取元素的内部宽度。 包括宽高和padding

console.log($("#div1").innerHeight());

console.log($("#div1").innerWidth());

 

● 获取元素的外部宽高。 包括宽高+padding+border

传入参数为true时，还要包括margin

console.log($("#div1").outerHeight(true));

console.log($("#div1").outerWidth());

 

offset():

获取元素，相对于浏览器窗口左上角的偏移位置。

这个位置，包括margin/position等。

返回的是一个对象，包含两个属性，分别是left和top

 

position():

获取定位元素，相对于父元素的偏移位置(父元素必须是定位元素)。

这个位置，只包括top/left等定位属性。 而margin将被视为当前元素的一部分，并不会视为偏移量范畴。

如果父元素有定位属性。则相对于父元素padding左上角定位；

如果父元素没有定位属性，则与offerSet一样 ，相对于浏览器左上角定位（但是，只是两者的定位原点都在浏览器左上角。 在计算偏移量时，offerSet会计算margin和top. 而position只计算top）。

 

 

 

[绑定事件的方式]

1、事件绑定的快捷方式

缺点：绑定的事件无法取消

$("button").eq(0).click(function(){

alert("2");

});

 

2、使用on()绑定事件

①使用on()单事件绑定

$("button:eq(0)").on("click",function(){

　　alert("1");

});

②使用on，一次性给同一节点，添加多个事件执行一个函数,多个事件之间空格分隔

$("button:eq(0)").on("click monseover dblclick",function(){

　　console.log("触发了事件");

});

③使用on，一次性给同一节点添加多个事件，分别执行不同函数

$("button:eq(0)").on({

　　"click":function(){

　　console.log("执行click");

},

"monseover":function(){

　　console.log("执行monseover");

}

});

④调用函数时，同时给函数

$("button:eq(0)").on("click",{name:"jredu",age:14},function(evn){

　　console.log(evn);

　　console.log(evn.data.name);

　　console.log(evn.data.age);

});

⑤使用on,进行事件委派：

>>>将原本需要绑定在本元素上的事件，改为绑定到祖先节点乃至根节点上，然后委派给当前节点生效

eg:$("p").on("click",function(){});

事件委派

$("document").on("click","p",function(){});

 

>>>作用：

不使用事件委派的绑定方式，只能绑定到页面初始化时的标签上，当页面新增同类型标签，这些新增的标签，不能够绑定事件

但如果使用事件委派，当页面新增同类型标签时，这些新增的标签也能够绑定已有的事件

$("button:eq(0)").on("click",function(){

　　$(this).after("<p>新增的p标签<p/>");

});

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

　　alert("没有事件委派");

});

$(document).on("click","p",function(){

　　alert("这是事件委派");

});

 

3、off()取消on事件绑定

$("p").off("click"):取消单个事件绑定；

$("p").off("click mouseover dbliclick"):取消多个事件绑定

$(document).off("click","p");:取消委派事件绑定

$("p").off();取消所有事件绑定

 

使用.one()绑定事件只能执行一次

$("button").one("click",function(){

　　alert("生效一次");

});

 

.trigger()自动触发某元素的事件

第一个参数：是需要触发的事件类型

第二个参数：可选数组格式，表示传递给对应事件函数的参数

>>>传递进来的参数，可以在事件函数中，定义形参获取(形参第一个必须是event事件，从第二个开始为传递的参数。)

>>>也可以直接在函数中，使用arguments对象数组，读取参数

 

.triggerHandler():功能同上，区别如下：

①triggerHandler不能够触发浏览器默认的HTML事件，如submit等...

而trigger可以触发任何事件

②trigger可以触发页面中所有匹配元素的事件

而triggerHandler只能触发第一个匹配元素的事件

③trigger的返回值，返回的是调用当前函数的对象，符合JQuery的可链式语法

而triggerHandler返回的是事件函数的返回值，如果事件函数没有返回值，则范围是undefined。

$("p").on("click",function(evn,n1,n2){

　　for(var i=1;i<arguments.length;i++){

　　console.log(arguments[i]);

　　}

　　alert("这是p标签的click事件");

});

$("p").trigger("click",["lll",1,2,3,4]);

 

[JQuery中的动画]

 

.show() 让隐藏的元素显示

效果为：同时修改元素的宽度、高度、opacity属性

①不传参数：直接显示，不进行动画

②参数时间毫秒数，表示多少毫秒内完成函数

③传入(时间，函数)表示动画完成后，执行回调函数

 

.hide() 让显示元素隐藏，与.show()相反

 

.slideDown() 让隐藏的元素显示，效果为从上到下，增加高度

.slidUp() 让显示的元素隐藏，效果为从下到上，减少高度

.slidToggle() 让显示的元素隐藏，让隐藏的元素显示

 

.fadeOut() 让显示的元素淡出隐藏，该透明度

.fadeIn() 让隐藏的元素淡入显示

.fadeToggle() 让显示的元素淡出隐藏，让隐藏的元素淡入显示

.fadeTo(时间，最终透明度，函数) 同fadeToggle,接受第二个参数，表示最终达到的透明度

 

.animate({最终的样式属性，键值对对象}，动画事件，动画效果("linear"或"swing"),动画执行完后的回调函数)

自定义动画函数注意事项：

①参数一的对象中，键必须使用驼峰命名法。(fontSize : "18px")

②只有数值类型的属性能够使用动画，非数值类型属性不能应用动画。