Skip to content

jQuery

顶级对象

$是jQuery的别称,也是jQuery的顶级对象,相当于原生JavaScript肿的window,把元素用$包装成jQuery对象,就可以调用jQuery的方法。

入口函数

js
$(document).ready(function () {
    //do something
});
$(function () {
    //do something
})
$(document).ready(function () {
    //do something
});
$(function () {
    //do something
})

DOM对象和jQuery对象

  • 用原生JS获取的对象是DOM对象
  • jQuery方法获取的元素是jQuery对象,本质是$对DOM对象包装后产生的对象(伪数组形式存储)
  • DOM和jQuery对象互相转换
    • DOM对象转jQuery对象:$(dom对象)
    • jQuery对象转DOM对象
      • $('div')[index]
      • $('div').get(index)

jQuery常用API

选择器

  • $("选择器")
  • 筛选选择器
    • $('li:first')
    • $('li:last')
    • $('li:eq(2)'):索引号等于2
    • $('li:odd'):索引号为奇数
    • $('li:even'):索引号为偶数
  • 筛选方法
    • parent()
    • children(selector)
    • find(selector)
    • siblings(selector):查找兄弟节点 不包括本身
    • nextAll([expr]):查找当前元素之后所有同辈元素
    • prevtAll([expr]):查找当前之前所有同辈元素
    • hasClass(class)
    • eq(index)

遍历DOM元素(伪数组形式存储)的过程叫隐式迭代:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用手动进行循环调用

jQuery支持链式编程

样式操作

  • 操作样式:jQuery对象.css(属性, 值)
  • 参数可以是对象形式,设置多组样式:jQuery对象.css({"color": "pink", "font-size": "15px"}) (属性可以不用加引号)
  • 获取样式属性值:jQuery对象.css(属性)
  • 设置类样式:
    • jQuery对象.addClass(className)
    • jQuery对象.removeClass(className)
    • jQuery对象.toggleClass(className)

效果

显示隐藏

  • show([speed, [easing], [fn]])
    • 参数都可以省略,无动画直接显示
    • speed:三种预设速度之一的字符串(slow/normal/fast)或表示动画时长的毫秒数值
    • easing:用来切换指定效果,默认swing,可用参数linear
    • fn:回调函数,在动画完成时执行的函数,每个元素执行一次
  • hide()
  • toggle()

滑动

  • slideDown()
  • slideUp()
  • slideToggle()

动画队列停止排队:stop(),必须写在动画的前面

jQuery对象.children("ul").stop().slideToggle()

淡入淡出

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo([[speed], opacity, [easing], [fn]]):修改透明度

自定义动画

  • animate(params, [speed], [easing],[fn])
  • params:想要更改的样式属性,以对象形式传递,必传。属性名可以不带引号,如果是复合属性需要采取驼峰命名

属性操作

  • prop(属性名):获取元素固有属性
  • prop(属性名, 值):设置元素固有属性
  • attr(属性名):获取元素自定义属性
  • attr(属性名, 值):设置元素自定义属性
  • data():可以在指定元素上存取数据,并不会修改DOM元素结构,页面刷新,存放的数据会被移除,也可以获取h5自定义属性,不用data-开头

文本属性

  • html():相当于原生js中的innerHTML
  • text():相当于原生js中的innerText
  • val():相当于原生js的value

元素操作

txt
- jQuery对象.each(function(index, domElement) { } ):遍历匹配的每一个元素,index是索引号,domElement是DOM元素对象,不是jQuery对象
- $.each(obj, function(index, domElement) { }):遍历指定对象
- 创建元素:var li = $("<li> </li>")
- 添加元素
  - element.append(li):拼接到最后
  - element.prepend(li):插入到最前
  - element.before(li):放到元素之后
  - element.after(li):放到元素之前
- 删除元素
  - element.remove():删除匹配的元素
  - element.empty():删除匹配元素的子节点
  - element.html(""):等价于empty()
- jQuery对象.each(function(index, domElement) { } ):遍历匹配的每一个元素,index是索引号,domElement是DOM元素对象,不是jQuery对象
- $.each(obj, function(index, domElement) { }):遍历指定对象
- 创建元素:var li = $("<li> </li>")
- 添加元素
  - element.append(li):拼接到最后
  - element.prepend(li):插入到最前
  - element.before(li):放到元素之后
  - element.after(li):放到元素之前
- 删除元素
  - element.remove():删除匹配的元素
  - element.empty():删除匹配元素的子节点
  - element.html(""):等价于empty()

尺寸、位置操作

尺寸

  • width()/height():只包含宽高
  • innerWidth()/innerHeight():+padding
  • outerWidth()/outerHeight():+padding、border
  • outerWidth(true)/outerHeight(true):+padding、border、margin

位置

txt
- offset():设置或返回被选元素相对于文档(document)的偏移坐标,跟父级没有关系
    - 有两个属性left、top
    - 修改传递对象{top: 10, left: 30}
- position():返回被选元素相对**带有定位父级**偏移坐标,如果父级都没有定位,以文档为准
- scrollTop()/scrollLeft():被卷去的头部/左侧
    - 可以传递参数直接跳到指定位置
- offset():设置或返回被选元素相对于文档(document)的偏移坐标,跟父级没有关系
    - 有两个属性left、top
    - 修改传递对象{top: 10, left: 30}
- position():返回被选元素相对**带有定位父级**偏移坐标,如果父级都没有定位,以文档为准
- scrollTop()/scrollLeft():被卷去的头部/左侧
    - 可以传递参数直接跳到指定位置

jQuery事件

事件注册

  • element.事件(function(){})

事件处理

on
  • element.on(events, [selector], fn)
    • events:一个或多个用空格分隔的事件类型,如click、keydown
    • selector:元素的子元素选择器
    • fn:回调函数,即绑定在元素身上的侦听函数
js
$("div").on({
    mouseenter: function () {
        $(this).css("background", "skyblue");
    },
    click: function () {
        $(this).css("background", "red");
    }
});

$("div").on("mouseenter mouseleave", function () {
        $(this).toggleClass("current")
    }
);
$("div").on({
    mouseenter: function () {
        $(this).css("background", "skyblue");
    },
    click: function () {
        $(this).css("background", "red");
    }
});

$("div").on("mouseenter mouseleave", function () {
        $(this).toggleClass("current")
    }
);
事件委托

事件绑定在父元素上

js
$("ul").on("click", "li", function () {
    alert('111')
})
$("ul").on("click", "li", function () {
    alert('111')
})
on可以给未来元素绑定事件
事件解绑off
  • element.off()解绑所有
  • element.off(事件1,事件2...)解绑指定
只触发一次的事件one

element.one(事件,fn)

自动触发
  • element.事件()
  • element.trigger(事件)
  • element.triggerHandler(事件):不会触发元素的默认行为

事件对象

事件被触发,就会有事件对象的产生

js
element.on(events, [selector], function (event) {
    console.log(event)
    event.preventDefault();//阻止默认行为
    return false; //阻止默认行为
    event.stopPropagation();//阻止冒泡
})
element.on(events, [selector], function (event) {
    console.log(event)
    event.preventDefault();//阻止默认行为
    return false; //阻止默认行为
    event.stopPropagation();//阻止冒泡
})

其他方法

拷贝对象

$.extend([deep], target, object1, [objectN])

  • deep:true-深拷贝,默认false-浅拷贝

  • target:目标对象

  • object:源对象

  • objectN:第N个源对象,会覆盖前面的相同属性

多库共存

  • $统一改为jQuery
  • 新的名称$.noConflict()/jQuery.noConflict()

jQuery插件

  • 瀑布流
  • 图片懒加载
  • 全屏滚动:fullpage.js
  • Bootstrap组件、插件

jQuery请求

  • $.get(url, [data], [callback])

    js
    $(function() {
      $('#btn').on('click', function() {
          $.get('xxx.com/api/getXxx', 'a=b', function(res) {
              console.log(res)
          })
      })
    })
    $(function() {
      $('#btn').on('click', function() {
          $.get('xxx.com/api/getXxx', 'a=b', function(res) {
              console.log(res)
          })
      })
    })
  • $.post(url, [data], [callback])

    js
    $(function() {
      $('#btn').on('click', function() {
          $.get('xxx.com/api/getXxx', {"a": "b"}, function(res) {
              console.log(res)
          })
      })
    })
    $(function() {
      $('#btn').on('click', function() {
          $.get('xxx.com/api/getXxx', {"a": "b"}, function(res) {
              console.log(res)
          })
      })
    })
  • $.ajax()

    js
    $.ajax({
      type: '',
      url: '',
      data: {},
      success: function(res) {}
    })
    $.ajax({
      type: '',
      url: '',
      data: {},
      success: function(res) {}
    })