欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

新知识:jQuery语法基础与操作

程序员文章站 2022-05-03 09:29:59
jQuery是一个快速、简洁的JavaScript框架,它让我们的代码变得更简捷,大大减少了我们的工作量,今天就来简单学习一下有关jQuery的语法和基础操作 ↓↓↓ NO.1 jQuery语法基础 NO.1 jQuery语法基础 1、使用JQuery必须先导入jquery.x.x.x.js文件。 ......

   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));  

 

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