jQuery教程语法基础与操作-职坐标

jQuery教程语法基础与操作

沉沙 2018-09-18 来源：阅读 625 评论 0

摘要：本篇教程介绍了jQuery教程语法基础与操作，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

本篇教程介绍了jQuery教程语法基础与操作，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

   　　 jQuery是一个快速、简洁的JavaScript框架，它让我们的代码变得更简捷，大大减少了我们的工作量，今天就来简单学习一下有关jQuery的语法和基础操作 ↓↓↓

NO.1　jQuery语法基础

1、使用JQuery必须先导入jquery.x.x.x.js文件。
　 <script src="js/jquery-3.1.1.js"></script>
2、JQuery中的选择器：
　　$("选择器名称").函数名();
　！！！注意：$是jQuery的缩写，也就是说，选择器可以使用 jQuery(":input")
3、JQuery 文档就绪函数：

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

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

【JQuery文档就绪函数与window.onload的区别】

　① window.onload必须等待网页资源（包括图片等）全部加载完成后，才能执行；
　　文档就绪函数只需等到网页DOM结构加载完成后，即可执行。

　② window.onload在一个页面中，只能写一次；
　　　文档就绪函数在一个页面中，可以有N个。

4、JS对象和jQuery对象：
　① 使用$("")取到的节点为jQuery对象，只能调用JQuery方法，不能调用原生JS方法。

　$("#div").click(function(){}); 　　　　// √
　$("#div").onclick = function(){};　　 // × JQuery对象不能调用原生JS方法

　② 同理，使用getElement系列函数取到的为JS对象，也不能调用JQuery函数。
　【jQuery对象与JS对象的相互转换】

① jQuery转JS：使用.get(index) 或 [index] 选中的就是JS对象；
　　　 $("div").get(0).onclick = function(){}
　或  $("#div1")[0].onclick = function(){}

② JS转jQuery：使用$()包裹JS对象。
　　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));