jQuery知识总结(最全 最精美)

By CaesarChang张旭                 合作: root121toor@gmail.com

~关注我  带你看更多精品技术和面试必备

 

使用: 

 <script src="jquery-3.5.1/jquery-3.3.1.min.js"></script>

注意:  如果<script> 在body前面,应该使用 jQuery独有的预加载

$(function(){

这里写代码

})

jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。

 选择器:

     所有选择器   *
    标签选择器    标签名
    ID选择器      #id
    类选择器      .className
    群组选择器    .one,.two   多个选择器使用逗号分隔,取并集
    复合选择器    .one.two   多个选择器组合使用,取交集

    $(document) //选择整个文档对象

   $('#myId') //选择ID为myId的网页元素

   $('div.myClass') // 选择class为myClass的div元素

   $('input[name=first]') // 选择name属性等于first的input元素

后代选择器       

后代选择器   .one .two   
      两个选择器使用空格隔开,表示可以获取当前元素的子代以及孙子代等等后代元素。
   子代选择器   .one>.two
      两个选择器使用>隔开,表示只能获取当前选中元素的子代元素。

兄弟选择器:

下一个兄弟选择器   .one+.two
      两个选择器使用+隔开,表示可以获取当前元素的下一个兄弟元素,下一个兄弟元素要能符合.two。
   之后所有子代选择器  .one~.two
      两个选择器使用~隔开,表示可以获取当前元素之后的所有兄弟元素,只有所有兄弟元素要能符合.two。

 

过滤器: 

  selector:first  获取所有已选择到的元素中的第一个元素
  selector:last   获取所有已选择到的元素中的最后一个元素
  selector:even    获取所有已选择到的元素中的索引为偶数的元素
  selector:odd     获取所有已选择到的元素中的索引为奇数的元素
  selector:eq(index) 获取所有已选择到的元素中的索引为index的元素
  selector:lt(num)   获取所有已选择到的元素中的索引值小于num的元素
  selector:gt(num)   获取所有已选择到的元素中的索引值大于num的元素
  selector1:not(selector2)  获取所有已选择到的元素中的除了selector2的元素
  selector:header   获取所有已选择到的元素中的标题元素(h1~h6)    
  selector:contains(text) 

            获取所有已选择到的元素中文本包含text的元素
  selector:empty   
            获取所有已选择到的元素中的空元素(没有子节点)
  selector:parent  
            获取所有已选择到的元素中的非空元素(有子节点),如$("div:parent");
  selector1:has(selector2)  
            获取所有已选择到的元素中包含selector2的元素,如$("div:has('span')");
​​​​​​​   selector[attrKey]  
           获取所有已选择到的元素中具有属性attrKey的元素
   selector[attrKey=attrVal]    
           获取所有已选择到的元素中具有属性attrKey,并且属性值为attrVal的元素
   selector[attrKey^=attrVal]  
           获取所有已选择到的元素中具有属性attrKey,并且属性值为以attrVal开头的元素
   selector[attrKey$=attrVal]  
           获取所有已选择到的元素中具有属性attrKey,并且属性值为以attrVal结尾的元素
   selector[attrKey*=attrVal]  
           获取所有已选择到的元素中具有属性attrKey,并且属性值为包含attrVal的元素
   selector[attrKey!=attrVal]  
           获取所有已选择到的元素中具有属性attrKey,并且属性值不为以attrVal的元素或者没有属性attrVal的元素


 

   $('div').has('p'); // 选择包含p元素的div元素

  $('div').not('.myClass'); //选择class不等于myClass的div元素

  $('div').filter('.myClass'); //选择class等于myClass的div元素

  $('div').first(); //选择第1个div元素

  $('div').eq(5); //选择第6个div元素

 

   $('div').next('p'); //选择div元素后面的第一个兄弟 p元素

  $('div').parent(); //选择div元素的父元素

  $('div').closest('form'); //选择离div最近的那个form父元素

  $('div').children(); //选择div的所有子元素
    $('a:first') //选择网页中第一个a元素

  $('tr:odd') //选择表格的奇数行

  $('#myForm :input') // 选择表单中的input元素

  $('div:visible') //选择可见的div元素

  $('div:gt(2)') // 选择所有的div元素,除了前三个

  $('div:animated') // 选择当前处于动画状态的div元素

 

创建元素:

  创建元素节点:var newTd = $("<td></td>")
  创建文本节点:var newTd = $("<td>文本内容</td>")


  1) $A.append(B)
       将B追加到A的末尾处,作为它的最后一个子元素
  2) $A.appendTo(B)
       将A追加到B的末尾,作为它的最后一个子元素
  3) prepend() 
       $A.prependTo(B)
            将A追加到B的前面,作为它的第一个子元素
       $A.after(B)
            在A之后追加B,作为它的兄弟元素
       $A.insertAfter(B)
            在B之后追加A,作为它的兄弟元素
       $A.before(B)
            在A之前追加B,作为它的兄弟元素
       $A.insertBefore(B)
             在B之前追加A,作为它的兄弟元素

删除节点:

   remove([selector])
       从DOM中删除所有匹配的元素,返回值是一个指向已经被删除的节点的引用,可以在以后再使用这些元素。
       该方法会移除元素,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。
   detach([selector])
       与remove()类似,但是detach()保存所有jQuery数据和被移走的元素的相关联事件。
   empty()
       无参数。从DOM中清空集合中匹配元素的所有的子节点。

 

复制节点:

 $("#id").clone(false);
  该方法返回的是一个节点的引用,参数默认为false,为浅复制;
  参数是true,为深复制,含义是:复制元素的同时复制元素中所绑定的事件。

 

替换节点:

   replaceWith(newContent);
        用新内容替换集合中所有匹配的元素,并且返回被删除的元素的集合。
        该方法会删除与节点相关联的所有数据和事件处理程序。
   replaceAll(target);
        用集合的匹配元素替换每个目标元素。颠倒了replaceWith()操作效果。

 

包裹节点

   wrap([wrappingElement])
        在每个匹配的元素外层包上一个html元素
   warpAll([wrappingElement])
        将所有匹配的元素用一个元素来包裹,在所有匹配元素外面包裹一层HTML结构
   warpInner([wrappingElement])
        每个匹配元素里面内容(子元素)都会被这种结构包裹

 

遍历节点:

   children([selector]) 
       children() 方法返回返回被选元素的所有直接子元素。
    $("div").children(".selected").css("color", "blue");
   find(selector)
        在当前对象元素中的子元素查找,和参数所匹配的所有的后代元素
   next([selector])
        取得匹配的元素集合中每一个元素紧邻的后面兄弟元素
   nextAll([selector])
        查找当前元素之后所有的同辈元素
   prev([selector])
         取得匹配元素前面紧邻的兄弟元素
   prevAll([selector])
         取得当前元素之前所有的同辈元素
   silibinng([selector])
         取得匹配元素的前后所有的兄弟元素
   closest(selector)
         取得和参数匹配的最近的元素,如果匹配不上继续向上查找父元素
   filter(selector)
         把当前所选择的所有元素再进行筛选过滤
   parent([selector])
         取得匹配元素的集合中,每个元素的父元素
   parents([selector])
         获得集合中每个匹配元素的祖先元素

 

事件:

   on()
      在选定的元素上绑定一个或多个事件处理函数。
   off()
      移除一个事件处理函数。
   trigger()
      根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。

鼠标事件:

   click()  单击
   dblclick()  双击
   hover()   悬停
   mousedown()  按下
   mouseup()  抬起
   mouseenter()  移入  不支持子元素
   mouseleave()  离开  不支持子元素 
   mouseout()   离开  支持子元素 
   mouseover()  进入  支持子元素 
   mousemove()  移动

键盘事件:

   keypress()   按键按下
   keyup()   按键抬起
   keydown()   按键按下

表单时间:

   focus()  聚焦事件
   blur()    失去焦点事件
   change()  当元素的值发生改变时激发的事件
   select()  当textarea或文本类型的input元素中的文本被选择时触发的事件
   submit()  表单提交事件,绑定在form上

 

方法:

   html()
           无参:获取html的值
           有参数html:设置html的值

   text()
           无参:获取文本值
           有参数text:设置文本值
   val()
           无参:获取value的值
           有参数value:设置value的值

 

   1) get();  //以数组的形式返回DOM节点。
        console.log($('div').get());
        
   2) toArray();  //返回一个包含jQuery对象结合中的所有DOM元素数组。
        console.log($('div').toArray());

   3) eq(index);  //返回index位置上的jQuery对象。
        console.log($('div').eq(1).get(0));

   4) filter(function(index,item){});   //过滤器函数,返回jQuery对象。
        var $result = $('div').filter(function(index,item){
        return index == 2;
      });
         
   5) map(function(index,item){});   //用于获取或设置元素集合中的值。
        var $result = $('div').map(function(index,item){
        return $(item).html()
      });
    
   6) each(function(index,item){});  //遍历一个jQuery对象。
          $('div').each(function(index,item){
        console.log(index,'--',item);
      });

   7) slice(0,3);  //截取
        var $result = $('div').slice(0,3);
      console.log($result.get());
   }); 

  8) not() 
  9) first()
  10) last()
  11) is()
  12) has()

 

属性相关:

   //获取属性值
       attr(key)
       prop(key)
    //删除属性   
       removeAttr(attributeName)
       removeProp(propertyName)
    //批量设置属性   
       css(key)
    //添加类   
       addClass(className)
    //判断有没有指定的类,有,返回true,否则返回false   
       hasClass(className)
    //删除类   
       removeClass(className)
 

动画:

    1.基本效果
      1)隐藏 hide()
      2)显示 show()
      3)隐藏与显示 toggle()

    2.淡入淡出效果
      1)淡入  fadeIn()
      2)淡出  fadeOut()
      3)淡入到 fadeTo()
      4)淡入与淡出 fadeToggle()

    3.滑动效果
      1)滑下 slideDown()
      2)滑上 slideUp()
      3)滑上与滑下 slideToggle()

    4.自定义效果
      animate()     

 
 

位置:

   //获取视口区的宽高:
   1、$(window).height()
   2、$(window).width()

   //获取内容区的宽高:
      $('div').width(); 
      $('div').height();

    pageX() 
属性是鼠标指针的位置,相对于文档的左边缘。



   //获取相对于文档的偏移
   7、.offset()

   //获取相对于定位父元素的偏移
   8、.position()

   //横向滚动条左侧的偏移
   9、.scrollLeft()

   //横向滚动条上侧的偏移
   10、.scrollTop()

   //获取离它最近的父定位元素  
   11、.offsetParent()

 

©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页