New knowledge: JQuery syntax basics and operations

　　 jQuery is a fast and concise JavaScript framework, and another excellent JavaScript codebase ( or JavaScript framework ) after Prototype. The purpose of jQuery design is "write Less, Do More", which advocates writing less code and doing more things. It encapsulates the functional codes commonly used in JavaScript, provides a simple JavaScript design mode, and optimizes HTML document operation, event processing, animation design and Ajax interaction.

NO.1 jQuery syntax foundation

1. To use JQuery, you must first import the jquery.xxxjs file.

2. Selectors in JQuery:

　　$("selector name").function name();

　! ! ! Note: $ is short for jQuery , that is, selectors can use jQuery(":input")

3. JQuery document ready function:

　$(document).ready(function(){
　　　// JQuery代码
　　　console.log(jQuery(":input:disabled"));
　});

　Short form: $( function (){});

[The difference between JQuery document ready function and window.onload]


　① window.onload can only be executed after all webpage resources (including pictures, etc.) are loaded;
　　 Document-ready functions only need to wait until the DOM structure of the web page is loaded before executing.

　② window.onload can only be written once in a page;
　　　There can be N number of document ready functions in a page.

4. JS objects and jQuery objects:

　① The node obtained using $("") is a jQuery object, and only the JQuery method can be called, but the native JS method cannot be called.

　$ ("#div").click( function (){}); 　　　　// √ 
　$( "#div").onclick = function (){};　　  // × JQuery objects cannot call native JS methods

　② In the same way, the JS objects obtained by using the getElement series of functions cannot be called JQuery functions.

　[Conversion between jQuery object and JS object]

① jQuery to JS: Use .get(index) or [index] to select the JS object;
　　　 $("div").get(0).onclick = function(){}
　 或  $("#div1")[0].onclick = function(){} 

② JS to jQuery: Use $() to wrap JS objects.
　　var div = document.getElementsByTagName("div");
　　$(div).click(function(){});

5、解决jQuery多库冲突问题：

　页面中如果同时引入多个JS框架，可能导致$冲突。

　解决办法：

　　① 使用jQuery.noConflict();使用JQuery放弃在全局中使用$；

　　② 使用jQuery关键字替代$，或者使用一个自执行函数：

　　!function($){
　　　　// 在自执行函数中，可以使用$替代jQuery
　　　　// 除自执行函数外的其他区域，禁止jQuery使用$
　　}(jQuery);

　　代码示例：

jQuery.noConflict();    
!function($){
　　$(function(){

　　　　// JS转JQuery
       var div = document.getElementsByTagName("div");
       $(div).click(function(){
       　　alert(1);
       });

       // JQuery转JS
       $("div").get(0).onclick = function(){
     　　  alert(1);
       }
                
   });            
}(jQuery);

NO.2　jQuery文档处理

一、JQuery中的DOM操作

　1、内部最后面添加

　　　append：在div1的内部，最后追加一个图片（在A中添加b）

　　　 $("#div1").append("<img src='../01-HTML基本标签/img/QQ图片1.gif'/>");

　　　appendTo：把一个图片追加到div1的内部最后（将b添加到A中）

　　　$("<img src='../01-HTML基本标签/img/QQ图片2.gif'/>").appendTo("#div1");

　2、内部最前方插入

　　　prepend：

　　　 $("#div1").prepend("<img src='../01-HTML基本标签/img/QQ图片1.gif'/>");

　　　prependTo：

　　　 $("<img src='../01-HTML基本标签/img/QQ图片2.gif'/>").prependTo("#div1");

　3、在div1的外部，后面插入节点

　　　after：

　　　 $("#div1").after("<p>这是一个p</p>");

　　　insertAfter：

　　　 $("<p>11111</p>").insertAfter("#div1");

　4、在div1的外部，前面插入节点

　　　before：

　　　 $("#div1").before("<p>这是一个p</p>");

　　　insertBefore：

　　　 $("<p>11111</p>").insertBefore("#div1");

　　　用JS添加：

　　var div1 = document.getElementById("div1");
　　var first = div1.firstChild;
　　var p = document.createElement("p");
　　p.innerText = "123";
　　div1.appendChild(p);
　　div1.insertBefore(p,first);
　　document.body.insertBefore(p,div1);

　5、为每一个选中的节点，都套一层父节点。

　　　wrap：

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

　　　wrapAll：

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

　6、将选中的所有节点，包裹在同一个父节点中

　　　wrapAll：

　　　 $("p").wrapAll("<section></section>"); 　　// ×

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

　7、删除选中节点的父节点

　　　unwrap：

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

　8、将选中节点中的所有子元素，包裹在一个新的父节点中；

　　　新的父节点依然是当前元素的唯一子节点

　　　wrapInner：

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

　9、将所有选中的节点，重新替换为新的节点

　　　replaceWith：

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

　　　replaceAll：

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

　　　只替换标签：　　　

　　 　$("div p").wrapInner("<span></span>");
　　 $("div p>span").unwrap();

　10、empty：清空当前节点内容，但会保留当前节点标签

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

　　　remove：删除当前节点，以及当前节点的所有子节点

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

　　　detach：删除当前节点，以及当前节点的所有子节点

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

　　【remove和detach的区别】

　　① 使用remove删除的节点，如果恢复以后，将不再保留节点所绑定的事件；
　　② 使用detach删除的节点，在节点恢复以后，可以恢复节点之前所绑定的事件。

　　案例：↓

　　$("#div1").click(function(){
　　　　alert(123);
　　});

　　var div1 = null;
　　$("button:eq(0)").click(function(){
　　　　div1 = $("#div1").remove();
　　});

　　$("button:eq(1)").click(function(){
　　　　div1 = $("#div1").detach();
　　});

　　$("button:eq(2)").click(function(){
　　　　$("#div2").before(div1);
　　});

　11、clone：克隆

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

　　JS中cloneNode() 与 JQuery中clone() 区别：

cloneNode()

a. 如果不传参数或者参数传入false，表示只克隆当前节点，不克隆子节点；

b. 如果参数传入true，表示克隆当前节点以及所有子节点。

clone()

a. 无论传入true还是false都会克隆当前节点以及所有子节点；

b. 传入true表示克隆节点的同时将包括节点所绑定的事件；

c. 否则，只表示克隆节点，而不克隆绑定的事件。

二、CSS和属性操作

　1、设置节点的属性

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

　2、传入对象，以键值对的形式同时设置多对属性

　$("#div1").attr({
　　　"class":$("#div1").attr("class")+"cls1",
　　　"name":"name1",
　　　"style":"font-size:24px;color:blue"
　});

　3、取到节点的属性

　　 console.log($("#div1").attr("id"));

　4、删除节点属性

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

　5、prop 和 attr一样，都可以对节点属性进行读取和设置

　　【两者的不同】

　　　在读取属性名="属性值" 的属性时，attr将返回属性值和undefined；而prop将返回true或false；

　　　也就是说，attr要取到的属性，必须是在标签上已经写明的属性，否则无法取到。

　6、在原有class的基础上，新增class名字

　　 $("#div1").addClass("cls1");

　7、删除指定的class名称，其余未删除的class名，依然保留

　　 $("#div1").removeClass("cls cls1");

　8、 toggleClass 切换class：如果有指定class就删除，如果没有就新增。

　　$("button:eq(0)").click(function(){
　　　　$("#div1").toggleClass("div1");
　　});

　9、.html：取到或设置节点中的html代码；

　　　.text：取到或设置节点中的文本；

　　　.val：取到或设置表单元素的value值；

　　console.log($("#div1").html("<p>11111</p>").html());

　　console.log($("#div1").text("<p>11111</p>").text());

　　console.log($("input:eq(1)").val("<p>11111</p>").val());

　10、.css()：给节点添加css样式，属于行级样式表权限

　　 $("#div1").css("color","green");

　　同时给一个节点添加多对css样式

　　$("#div1").css({
　　　　"color":"yellow",
　　　　"font-size":"24px"
　　});

　　通过回调函数返回值，修改css样式：修改div的宽

　　$("button:eq(0)").click(function(){
　　　　var id = setInterval(function(){
　　　　　　$("#div1").css({
　　　　　　　　"width":function(index,value){
　　　　　　　　　　var v = parseFloat(value) +1;
　　　　　　　　　　if(v>600){
　　　　　　　　　　　　clearInterval(id);
　　　　　　　　　　}
　　　　　　　　　　return v + "px";
　　　　　　　　}
　　　　　　});
　　　　},10);
　　});

　11、取到或者设置节点的宽高

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

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

　12、取到节点的宽度+padding，不包含border和margin

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

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

　13、不传参数，表示宽高+padding+border

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

　　　传入true，表示宽高+padding+border+margin　

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

　14、返回一个节点，相对于浏览器左上角的偏移量

　　　返回一个对象{top: 31, left: 8}

　　　此方法，测量时，会将margin算作偏移量的距离

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

　15、返回一个节点，相对于父容器的偏移量

　　　注意：

　　　　① 使用此方法，要求父元素必须是定位元素，如果父元素不是定位元素，则依然是相对于浏览器左上角测量

　　　　② 此方法，测量偏移量时，将不考虑margin，而会将margin视为当前容器的一部分

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

　16、scrollTop：、设置或取到指定节点的滚动条位置

　　 console.log($("#div1").scrollTop(100));

关于jQuery的基础语法和操作就简单介绍到这里... ...

New knowledge: JQuery syntax basics and operations

Guess you like