JQueryDOM操作和一些其他函数

Posted 2020-10-07

一、JQuery语法：

 1、使用JQuery必须先导入JQuery.x.x.js文件
 2、JQuery中的选择器：
 $("选择器").函数();
 ①$时JQuery的缩写，即可以使用JQuery("选择器").函数();
 ②选择器，可以是任何的CSS支持的选择符

 3、文档就绪函数：防止在文档未完全加载完成之前，运行JQuery代码：
 $(document).ready(function(){
 //JQuery代码
 });

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

 [文档就绪函数&window.onload区别]
 ①window.onload必须等到网页中的所有内容加载完成后，才会执行代码（包括图片、视频等资源）。

 文档就绪函数，只需要在网页DOM结构加载完毕后，就可以执行代码
 ②window.onload只能写一个，写多个只会执行最后一个;
 文档就绪函数，可以写多个，并且不会被覆盖。

 4、原生JS对象与JQuery对象：
 ①使用：$("")选中的是JQuery对象，只能调用JQuery的函数，而不能使用元素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对象
 }(jQuery);

 

二、JQuery的dom操作和其他函数

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

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

 在#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不但恢复节点的内容，还能再恢复 事件的绑定；

 

[JS中.cloneNode() 和 JQ中 .clone()区别]
 两者都接受传入true/false的参数。

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

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

//$("#div1").clone(true).empty().insertBefore("button:eq(0)");

************************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）。
 

console.log($("#div1").offset().top);
console.log($("#p1").offset());

console.log($("#p1").position());


var top = $("#div1").offset().top;
var docHeight = $(window).height();
$(document).scroll(function(){
var scrollTop = $(document).scrollTop();
console.log(scrollTop);
if(scrollTop>=800){
$("#div1").css("display","block");
}
});