jQuery从入门到放弃

概念

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

jQuery其实就是一个封装了很多方法的 JS 库。

下面我们来说下 JavaScript 的缺点及使用 jQuery 的优势：

JavaScript 缺点：

1. 不能添加多个入口函数（window.onload），如果添加多个，后面的会把前面的覆盖掉；
2. 原生 JS 的 API 名字太长，不容易记住；
3. 原生 JS 有代码冗余；
4. 原生 JS 中有些属性或方法有浏览器兼容问题；
5. 原生 JS 容错率比较低，前面代码出问题了会导致后面代码执行不了；

而jQuery有如下几个优势：

1. 可以写多个入口函数；
2. jQuery 的 API 名字容易记住；
3. jQuery 代码简洁（隐式迭代）；
4. jQuery 解决了浏览器兼容问题；
5. jQuery 容错率较高；

各版本的区别

目前，jQuery 有三个版本，分别为 1.x版、2.x版、3.x版。

这三个版本区别如下：

1. 1.x：兼容老浏览器，例如：IE6、7、8，已停止更新，最终版本：1.12.4；
2. 2.x：不兼容老浏览器，已停止更新，最终版本：2.2.4；
3. 3.x：不兼容老浏览器，目前更新中；

入口函数

jQuery的入口函数写法有如下两种：

// 1. 第一种
$(document).ready(function () {})

// 2. 第二种
$(function(){})

jQuery 入口函数和 window.onload 入口函数的区别：

1. window.onload 入口函数不能写多个，但 jQuery 入口函数可以写多个；
2. 执行顺序：jQuery 入口函数要比 window.onload 快。
   • jQuery 入口函数要等待页面上 DOM 树加载完后执行
   • window.onload 要等待页面上所有的资源都加载完毕后执行

DOM对象与jQuery对象

DOM 对象：

1. 使用原生 JS 获取到的元素就是 JS 对象（DOM对象）；
2. 特点：只能调用 DOM 方法或属性，不能调用 jQuery 的属性或方法；

jQuery 对象：

1. 使用 jQuery 的方式获取到的元素就是 jQuery 对象；
2. 特点：只能调用 jQuery 的方法或属性，不能调用原生 JS DOM 对象的属性或方法；
3. jQuery 对象是一个伪数组；

那么 DOM 对象与 jQuery 对象之间如何相互转换呢？
DOM 对象转换成 jQuery 对象：直接使用 $

$(function () {
  var div = document.getElementById('div')
  console.log(div)    // <div id="div"></div>

  var $div = $(div)
  console.log($div)    // S.fn.init [div#div]
})

jQuery 对象转换成 DOM 对象有如下两种方法：

1. 使用下标来取

$(function () {
  var $div = $('div')
  console.log($div);    // S.fn.init [div#div, prevObject: S.fn.init(1)]
  
  var domDiv = $div[0]
  console.log(domDiv);    // <div id="div"></div>
})

2. 使用 jQuery 的 get() 方法

$(function () {
  var $div = $('div')
  console.log($div);    // S.fn.init [div#div, prevObject: S.fn.init(1)]
  
  var domDiv = $div.get(0)
  console.log(domDiv);    // <div id="div"></div>
})

$符号的实质

$ 其实就是一个函数，用 $ 的时候，要跟小括号。括号里的参数不同，功能就不同，有以下三种用法：

1. 参数是一个 function，入口函数；
2. $(domobj)，把 DOM 对象转换成 jQuery 对象；
3. 参数是一个字符串，用来找对象；

链式编程

$(function () {
  // 设置性操作：可以进行链式编程
  // 获取性操作：不能链式操作，因为获取性操作，返回数值、字符串
  $("div").width(100).height(100).css('background', 'red')
})

选择器

jQuery 选择器返回的是 jQuery 对象。

基本选择器

名称	用法	描述
ID选择器	$('#id')	获取指定ID的元素
类选择器	$('.class')	获取同一类class的元素
标签选择器	$('div')	获取同一类标签的所有元素
并集选择器	$('div,li,span')	使用逗号分隔，获取所有的div、li、span元素
交集选择器	$('div.classdemo')	选择器1与选择器2之间没有空格，获取div下class为classdemo的元素

层级选择器

名称	用法	描述
子代选择器	$('ul>li')	获取儿子层级的元素，不会获取孙子层级的元素
后代选择器	$('ul li')	获取ul下的所有li元素，包括孙子等

过滤选择器

名称	用法	描述
:eq(index)	$('li:eq(2)')	获取到li元素中，选择索引号为2的元素
:odd	$('li:odd')	获取到li元素中，选择索引号为奇数的元素
:even	$('li:even')	获取到li元素中，选择索引号为偶数的元素

操作样式

css操作

获取匹配元素集合中的第一个元素的样式属性的值或设置每个匹配元素的一个或多个 CSS 属性。

获取样式

.css(样式名)

<button id="getbtn">获取</button>
<button id="setbtn">设置</button>
<div class="div1"></div>
<div class="div2" style="200px"></div>
<div class="div3" style="300px"></div>

.div1 {
   100px;
  height: 100px;
  border: 1px solid red;
  background-color: blue;
}

$(function () {
  $('#getbtn').click(function () {
    // 1.
    console.log($('.div1').css('width'));    // 100px
    console.log($('.div1').css('border'));    // 1px solid rgb(255, 0, 0)

    // 在IE浏览器中，要获取边框，必须要给一个准确的边框，否则获取不到
    console.log($('.div1').css('border-top-width'));    // 1px

    // 2.获取所有div元素的样式
    // 获取包含了多个DOM元素的jQuery对象的样式，只能获取到第一个DOM对象的样式
    console.log($('div').css('width'));    // 100px
  })
})

注意：获取样式操作只会返回第一个元素对应的样式值

设置样式

.css(样式名，样式值)

$(function () {
  $('#setbtn').click(function () {
    // 1. 设置单个样式
    $('.div1').css('width', '200px')
    
    // 2. 设置多个样式
    $('.div1').css({
       200,
      'height': '200px',
      backgroundColor: 'yellow',
      'border-left-width': '10px'
    })
    
    // 3. 给所有div元素设置样式
    $('div').css({
      'height': '100px',
      'border': '1px solid yellow'
    })    
  })
})

注意：设置样式是行内样式。

隐式迭代：
• 设置操作的时候：会给 jQuery 内部的所有对象都设置上相同的值；
• 获取的时候：只会返回第一个元素对应的值；

class操作

方法	说明
addClass('类名')	添加一个类
removeClass('类名')	移除一个类
hasClass('类名')	判断是否存在这个类，返回true/false
toggleClass('类名')	切换类，如果存在则移除，不存在则添加

示例代码

操作属性

attr()

获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。

获取属性

.attr(attributeName)

.attr() 方法只获取第一个匹配元素的属性值。要获取每个单独的元素的属性值，需要依靠 jQuery 的 .each() 或者 .map() 方法循环。

<img src="#" alt="默认alt" title="默认title">

$(function () {
  // 获取属性
  console.log($("img").attr("alt"));    // 默认alt
})

设置属性

.attr(attributeName, value)

$(function () {
  // 1. 设置单个属性
  $("img").attr("alt", "修改了")

  // 2. 设置多个属性
  $("img").attr({
    "alt": "修改alt",
    "title": "修改title"
  })
})

prop()

获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。

对于布尔类型的属性，不要使用 attr() 方法，应该用 prop() 方法，用法与 attr() 方法一样。

<input type="button" value="选中">
<input type="button" value="未选中">
<input type="checkbox" id="checkbox">

// 如果使用attr，则只能操作一次，不能进行多次选中/未选中
$(function () {
  $("input").eq(0).click(function () {
    $("#checkbox").prop("checked", true)
  })

  $("input").eq(1).click(function () {
    $("#checkbox").prop("checked", false)
  })
})

案例：全选功能

动画

三组基本动画

显示（show）与隐藏（hide）；滑入（slideUp）、滑出（slideDown）与切换（slideToggle）；淡入（fadeIn）、淡出（fadeOut）与切换（fadeToggle）

show([speed],[callback])
hide([speed],[callback])

1. 如果不传参数，则没有动画；
2. speed 表示动画的持续时间，可以是毫秒值，也可以是固定的字符串（fast：200ms、normal：400ms、slow：600ms）；
3. 可以写个回调函数；

<input type="button" value="显示">
<input type="button" value="隐藏">
<div></div>

$(function () {
  $("input").eq(0).click(function () {
    $("div").show("fast")
  })

  $("input").eq(1).click(function () {
    $("div").hide(1000, function () {
      console.log("执行完毕");
    })
  })
})

滑入（slideUp）、滑出（slideDown）、切换（slideToggle）、淡入（fadeIn）、淡出（fadeOut）、切换（fadeToggle）用法与显示（show）与隐藏（hide）一致。

自定义动画

.animate()：根据一组 CSS 属性，执行自定义动画。

它有四个参数，如下：

1. 第一个参数：对象，里面传需要动画的样式，必填；
2. 第二个参数：动画的执行时间；
3. 第三个参数：动画的执行效果；
4. 第四个参数：回调函数。

$(function () {
  $("input").eq(0).click(function () {
    $("div").animate({
      left: 800
    }, 1000, "linear", function () {
      console.log("执行完毕");
    })
  })
})

动画队列与停止动画

.stop()：停止匹配元素当前正在运行的动画。

它有两个参数：
• 第一个参数：是否清除动画队列；
• 第二个参数：是否跳转到当前动画的最终效果；

节点操作

创建节点

使用 $(htmlStr) 来创建节点。

$("<span>创建节点</span>")

添加节点

.append()：在每个匹配元素里面的末尾处插入参数内容
.appendTo()：将匹配的元素插入到目标元素的最后面
.prepend()：将参数内容插入到每个匹配元素的前面（元素内部）
.prependTo()：将所有元素插入到目标前面（元素内）
.after()：在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
.before()：根据参数设定，在匹配元素的前面插入内容

$(function () {
  var $span = $("<span>这是新创建的节点</span>")
  
  // append、appendTo
  // 添加到子元素最后
  $("div").append($span)
  $span.appendTo($("div"))

  // prepend、prependTo
  // 添加到子元素最前面
  $("div").prepend($span)
  $span.prependTo($("div"))

  // before、after
  $("div").after($span)     // 添加到元素后面，作为兄弟元素
  $("div").before($span)        // 添加到元素前面，作为兄弟元素
})

清空内容与删除节点

.empty()：从DOM中移除集合中匹配元素的所有子节点
.remove()：将匹配元素集合从DOM中删除（同时移除元素上的事件及 jQuery 数据）

$(function () {
  // 1. 这样虽然会清空，但是会导致内存泄漏，里面绑定的事件不会清空，最好不要使用
  $("div").html("")

  // 2. 清空，里面的事件也会清空
  $("div").empty()
  
  // 3. 删除div节点
  $("div").remove()
})

克隆节点

.clone()：创建一个匹配的元素集合的深度拷贝副本

1. 传false：不传参数或传 false，是深度复制，不会复制事件；
2. 传true：深度复制，会复制事件；

特殊属性操作

val()

.val()：获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每个元素的值

<input type="button" value="按钮">

$(function () {
  // 不加参数获取value值
  console.log($("input").val());    // 按钮
  
  // 加参数，改变value值
  $("input").val("改变了")
})

html()、text()

html() 方法相当于 innerHTML，text() 方法相当于 innerText。

html()

.html()：获取集合中第一个匹配元素的 HTML 内容或设置每一个匹配元素的 HTML 内容

<div>
  <h2>标题</h2>
  <h2>内容</h2>
</div>

$(function () {
  console.log($("div").html());    // <h2>标题</h2>	<h2>内容</h2>
  $("div").html("<a href='zhouwanwen.com'>11111</a>")    // 会识别a标签
})

text()

.text()：得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容

text() 不加参数可以获取文本；给参数就是设置文本，参数就是要设置的文本。

获取文本

<button id="getbtn">获取</button>
<button id="setbtn">设置</button>
<div id="div1">
  div1
  <span>span1</span>
</div>
<div>
  div2
  <span>span2</span>
</div>

$(function () {
  $('#getbtn').click(function () {
    console.log($('#div1').text());    // div1 span1
    console.log($('div').text());    // div1 span1       div2 span2
  })
})

设置文本

$(function () {
  $("#setbtn").click(function () {
    // 会覆盖原来的内容，如果文本含有标签，不会解析
    $('#div1').text('新div<a>链接</a>')
    
    $('div').text('哈哈')
  })
})

区别

• html() 方法会识别 html 标签；
• text() 方法不会识别 html 标签，把内容直接当成字符串；

width、height

.width()：为匹配的元素集合中获取第一个元素的当前计算宽度值或给每个匹配的元素设置宽度
.height()：获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值

<div></div>

div {
   100px;
  height: 100px;
  background-color: red;
  padding: 10px;
  border: 10px solid green;
  margin: 10px;
}

$(function () {
  console.log($("div").css("width"));    // 100px
  $("div").css("width", "300px")

  // 获取的宽度不带单位
  // 就是获取width的值
  console.log($("div").width());    // 300
  
  // 获取的是padding + width的值
  console.log($("div").innerWidth());    // 320
  
  // 获取的是padding + border + width的值
  console.log($("div").outerWidth());    // 340
  
  // 获取的是padding + border + margin + width的值
  console.log($("div").outerWidth(true));    // 360
  
  $("div").width("200")
  console.log($("div").width());    // 200
  
  // 获取页面可视区的宽度与高度
  $(window).resize(function () {
    console.log($(window).width());
    console.log($(window).height());
  })
})

scrollTop、scrollLeft

如果不加参数，则是获取。如果加参数，则是设置每个匹配元素的垂直 / 水平滚动条位置。

// 获取页面被卷曲的高度
$(window).scrollTop()

// 获取页面被卷曲的宽度
$(window).scrollLeft()

offset、position

offset() 方法是获取元素距离 document 的距离。

position() 方法是获取元素距离有定位的父元素的位置。

事件机制

事件委托

注册事件有以下几种方式：

1. 简单事件绑定：$("div").click(function(){})
2. bind事件绑定：$("div").bind("click mouseenter",function(){})
3. delegate事件绑定
4. on事件绑定（推荐）

delegate

delegate：委托，给父元素注册委托事件，最终还是由子元素执行。

它有三个参数：
• 第一个参数：事件最终由谁来执行
• 第二个参数：事件类型
• 第三个参数：函数

<button>增加</button>
<div>
  <span>111</span>
  <p>1</p>
  <p>2</p>
</div>

$(function () {
  $("button").click(function () {
    $("<p>111</p>").appendTo("div")
  })

  // delegate：只能注册委托事件
  $("div").delegate("p", "click", function () {
    alert("eee")
  })
})

on

它有四个参数：

1. 第一个参数：绑定事件的名称；
2. 第二个参数：执行事件的后代元素（可选），如果没有后代元素，那么事件将由自己执行；
3. 第三个参数：传递给处理函数的数据，事件触发的时候通过 event.data 来使用（不常使用）；
4. 第四个参数：事件处理函数；

注册简单事件：

$("p").on("click", function () {
  alert("heh1")
})

注册委托事件：

$("div").on("click", "p", function () {
  alert("heh1")
})

事件解绑

事件解绑有三种方式，分别是unbind、undelegate、off。

// unbind方式
$(selector).unbind()    // 解绑所有事件
$(selector).unbind("click")    // 解绑指定事件

// undelegate方式
$(selector).undelegate()    // 解绑所有undelegate事件
$(selector).undelegate("click")    // 解绑所有click事件

// off方式
$(selector).off()    // 解绑所有事件
$(selector).off("click")    // 解绑所有click事件

触发事件

.trigger()：根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。

$(selector).click()    // 触发click事件
$(selector).trigger("click")

事件对象

jQuery 事件对象其实就是 JS 事件对象的一个封装，处理了兼容性。

名称	含义
screenX、screenY	对于屏幕最左上角的值
clientX、clientY	距离页面左上角的位置（忽略滚动条）
pageX、pageY	距离页面最顶部左上角的位置（会计算滚动条的距离）
event.keyCode	按下的键盘代码
event.data	存储绑定事件时传递的附加数据
event.stopPropagation()	阻止事件冒泡行为
event.preventDefault()	阻止浏览器默认行为
return false	既能阻止事件冒泡，又能阻止浏览器默认行为

$冲突

jQuery 使用 $ 作为标识符，但是如果与其他框架中的 $ 冲突时，jQuery 可以释放 $ 的控制权。

// 释放 $ 的控制权,并且把 $ 的能力给了 $$
var $$ = $.noConflict();