• 注册
  • 前端博客 前端博客 关注:0 内容:404

    《jQuery学习总结》

  • 查看作者
  • 打赏作者
  • 当前位置: 职业司 > 前端开发 > 前端博客 > 正文
    • 前端博客
    • jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作事件处理动画设计和Ajax交互


      以下面的一坨简单的jQuery代码来对今天的jQuery如何获取元素.如何创建元素.链式操作是如何操作的进行一个简单的学习总结 $ = jQuery()

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>jQuery</title>
      </head>
      <body>
      <div id="test">
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
      </div>
      </body>
      </html>
      window.$ = window.jQuery = function(selectorOrArray){
      let elements
      if(typeof selectorOrArray === 'string'){
      elements = document.querySelectorAll(selectorOrArray)
      }else if(selectorOrArray instanceof Array){
      elements = selectorOrArray
      }
      return {
      addClass(className){
      for(let i=0;i<elements.length;i++){
      elements[i].classList.add(className)
      }
      },
      find(selector){
      let array = []
      for(let i=0;i<elements.length;i++){
      const x = Array.from(elements[i].querySelectorAll(selector))
      array = array.concat(x)
      }
      return jQuery(array)
      }
      }
      }
      复制代码
      元素获取
      $('#test') :上述代码中可以通过$('#test')代码获取到id为test的元素
      $('#test').find('.child').addClass('red')也可以是找到test元素里面的所有child元素,然后在child元素里添加上red。
      复制代码
      除此之外一些非以上代码的获取
      $(document) //选择整个文档对象
      $('div.myClass') // 选择class为myClass的div元素
      $('input[name=first]') // 选择name属性等于first的input元素
      $('a:first') //选择网页中第一个a元素
      $('#myForm :input') // 选择表单中的input元素
      复制代码
      jQuery设计思想之二,就是提供各种强大的过滤器,对结果集进行筛选,缩小选择结果。
      $('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的所有子元素
      $('div').siblings(); //选择div的同级元素
      复制代码

      jQuery的链式操作

      jQuery设计思想之三,就是最终选中网页元素以后,可以对它进行一系列操作,并且所有操作可以连接在一起,以链条的形式写出来

      $('#test').addClass('glue').addClass('red')通过此代码可以在最上面那坨代码中找到test元素,在上面添加上glue,然后在后面再此添加上red。
      复制代码

      这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。


      创建元素
      可以直接把需要创建的新元素添加到jQuery的构造函数里
      $('<p>Hello</p>');
      $('<li class="new">new list item</li>');
      $('ul').append('<li>list item</li>');
      复制代码

      如何移动元素

      jQuery设计思想之五,就是提供两组方法,来操作元素在网页中的位置移动。一组方法是直接移动该元素,另一组方法是移动其他元素,使得目标元素达到我们想要的位置。

      假定我们选中了一个div元素,需要把它移动到p元素后面。

      第一种方法是使用.insertAfter(),把div元素移动p元素后面:

      $('div').insertAfter($('p'));
      复制代码

      第二种方法是使用.after(),把p元素加到div元素前面:

      $('p').after($('div'));
      复制代码

      表面上看,这两种方法的效果是一样的,唯一的不同似乎只是操作视角的不同。但是实际上,它们有一个重大差别,那就是返回的元素不一样第一种方法返回div元素第二种方法返回p元素
      还有其他这种操作方法

      .insertAfter()和.after():在现存元素的外部,从后面插入元素
      .insertBefore()和.before():在现存元素的外部,从前面插入元素
      .appendTo()和.append():在现存元素的内部,从后面插入元素
      .prependTo()和.prepend():在现存元素的内部,从前面插入元素
      复制代码

      修改元素属性

      操作网页元素,最常见的需求是取得它们的值,或者对它们进行赋值。

      jQuery设计思想之四,就是使用同一个函数,来完成取值(getter)和赋值(setter),即"取值器"与"赋值器"合一。到底是取值还是赋值,由函数的参数决定。

      $('h1').html(); //html()没有参数,表示取出h1的值
      $('h1').html('Hello'); //html()有参数Hello,表示对h1进行赋值
      复制代码

      其他常见取值和赋值函数(读,写)

      div大部分时候对应了多个div元素
      $div.html() 读写html内容
      $div.text() 读写text内容
      $div.attr('title',?) 读写某个属性的值
      $div.css({color:'red'})读写style
      $div.addClass('blue')
      $div.on('clicl',fn)
      $div.off('click',fn)
      $div.width() 读写某个元素的宽度
      $div.height() 读写某个元素的高度
      $div.val() 读某个表单元素的值
      复制代码

      attr() 方法设置或返回被选元素的属性和值。

      当该方法用于返回属性值,则返回第一个匹配元素的值。

      当该方法用于设置属性值,则为匹配元素设置一个或多个属性/值对。

      返回属性的值:

      $(selector).attr(attribute)
      复制代码

      设置属性和值:

      $(selector).attr(attribute,value)
      复制代码

      使用函数设置属性和值:

      $(selector).attr(attribute,function(index,currentvalue))
      复制代码

      设置多个属性和值:

      $(selector).attr({attribute:value, attribute:value,...})
      复制代码

      一些常用的工具方法
      $.trim() 去除字符串两端的空格。
      $.each() 遍历一个数组或对象。
      $.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中,则返回-1。
      $.grep() 返回数组中符合某种标准的元素。
      $.extend() 将多个对象,合并到第一个对象。
      $.makeArray() 将对象转化为数组。
      $.type() 判断对象的类别(函数对象、日期对象、数组对象、正则对象等等)。
      $.isArray() 判断某个参数是否为数组。
      $.isEmptyObject() 判断某个对象是否为空(不含有任何属性)。
      $.isFunction() 判断某个参数是否为函数。
      $.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。
      $.support() 判断浏览器是否支持某个特性
      复制代码

      日常学习记录,有错误请指正,本文借鉴了阮一峰jQuery设计思想

      请登录之后再进行评论

      登录

      手机阅读天地(APP)

      • 微信公众号
      • 微信小程序
      • 安卓APP
      手机浏览,惊喜多多
      匿名树洞,说我想说!
      问答悬赏,VIP可见!
      密码可见,回复可见!
      即时聊天、群聊互动!
      宠物孵化,赠送礼物!
      动态像框,专属头衔!
      挑战/抽奖,金币送不停!
      赶紧体会下,不会让你失望!
    • 实时动态
    • 签到
    • 做任务
    • 发表内容
    • 偏好设置
    • 到底部
    • 帖子间隔 侧栏位置:
    • 还没有账号?点这里立即注册