jQuery

《JavaScript忍者禁术》、《精通JavaScript》

1. jQuery 的介绍

JavaScript 库：把一些浏览器兼容性的代码或者是常用的函数封装在一个 js 文件中，这个文件就是一个 JavaScript 库，common.js 可以看成是一个 js 库

库：封装了很多 js 代码的一个 js 文件

jQuery：就是一个 JavaScript 库中的一种，免费的，所以，咱们才学 jQuery，很多优点

有的 js 库封装的代码很小，小型的 js 库

有的 js 库封装的代码很多，大型的 js 库

有的 js 库是一个人编写的，这样的 js 库可能是免费的

有的 js 库是一个团队（公司）编写，这样的 js 库可能是收费

2. 为什么要学习 jQuery

DOM 中一个简单的功能需要大量的代码

DOM 中兼容的问题很多

DOM 中代码的容错性很差

DOM 中 window.onload 也只能有一个

jQuery 的特点：write less，do more（事半功倍）

• 很好的解决了不同浏览器的兼容问题（IE 6.0+，chrome...）
• 体积小（几十 KB）、链式编程、隐式迭代
• 插件丰富、开源

3. 如何重官网上下载文件

【注】找到需要的版本，右键 链接另存

jQuery 的 js 文件每个版本有两个，第一个文件时正常的，第二个时压缩的，开发的时候使用谁都可以，上线的时候使用压缩的

4. 坑---->隐式迭代

隐式迭代：本身代码没有循环操作，jQuery 中内部帮助我们循环操作的

【注】使用 DOM 需要 document.getElementsByTagName() 得到伪数组，还需要遍历改变 p 标签 中的文本；而使用 jQuery 不需要遍历,标签选择器拿到是多个或者一个元素，jQuery提供隐式迭代不需要循环，直接改变 p 标签 中的文本，这里我有犯错

// 点击按钮，改变所有的 p 中的内容
document.getElementById('btn').onclick = function () {
  var pObjs = document.getElementsByTagName('p');
  for (var i = 0; i < pObjs.length; i++) {
    pObjs[i].innerText = 'hello world!'
  }
}

$('#btn').click(function () {
  /* 我写的错误for (var i = 0; i < $('p').length; i++) {
            $('p').eq(i).html('hello world!!');
        } */
  $('p').text('hello!!')
})

5. 顶级对象

浏览器中的顶级对象：window，浏览器中和页面中所有的东西都是 window 的；

页面中的顶级对象：document，页面中某些东西时 document

jQuery 中的顶级对象：jQuery ---- 可以用 符号下的）；

如果想要使用 jQuery 中的属性或者方法，那么需要 jQuery.属性 或者 jQuery.方法() 来使用；

简单的写法：.方法；

大多数情况下，jquery 中几乎都是方法，属性很少

jQuery 中几乎把 DOM 中的事件都封装成一个方法，在 jQuery 中几乎是把 on 去掉，然后变成方法了

# 对比注册事件写法
document.getElementById('id属性值').onclick = 匿名函数;

$('#id属性值').click(匿名函数);    

6. DOM 对象和 jQuery 对象互转

【注】DOM 转 jQuery ---> (jQuery对象)[0]

• 为什么要把 DOM 对象转 jQuery 对象，为什么又把 jQuery 对象转 DOM 对象

  • DOM 操作很麻烦（兼容，一个功能写好多代码）---> 转 jQuery 对象，操作简单，不需要写兼容；

  • jQuery 操作中，有一些兼容没封装在 jQuery 中，转 DOM 对象，通过原生的 js 代码实现功能，如果后面都解决了，又想简单的写代码操作内容，再转会 jQuery 对象

    // 如果通过 DOM 获取----DOM对象 var btnObj1 = document.getElementById('btn');

    // 如果通过 ('#btn');

    // 两者不是同一对象 console.log(btnObj1 === btnObj2); //false

    // 如果DOM 的操作需要解决一些兼容的问题，jQuery 中的兼容问题都差不多解决了，怎么办？ // DOM 对象----转成 jQuery 对象，那么就可以使用 jQuery 中的方法或者属性了

    DOM 对象调用 jQuery 的方法----不能实现，必须是 jQuery 对象调用 jQuery 的方法

    btnObj1.click(function () { alert(); });

    DOM 对象转----jQuery 对象----$(DOM对象)----jQuery 对象

    $(btnObj1).click(function () { alert(); });

    // jQuery 对象调用 DOM 对象的属性和方法，不能实现 btnObj2.onclick = function () { alert(); } // jQuery 对象转----DOM 对象----jQuery 对象[0]----DOM 对象 btnObj2[0].onclick = function () { alert(); }

    .get(0) 和 [0] 效果一样

7. DOM 和 jQuery 页面加载的区别

【注】DOM 和 jQuery 页面加载事件区别，DOM 是赋值的方式后面的覆盖前面的，所以只加载了一次，而 jQuery 是调用方法，所以执行加载了两次。

// DOM 中页面加载事件---->页面全部加载完毕才触发（标签、文字、图片、引入的文件）
window.onload = function () {
  console.log('dom1')
}
window.onload = function () {
  console.log('dom2')
}

// jQuery 中第一种页面加载事件--->页面全部加载完毕才触发（标签、文字、图片、引入的文件）
$(window).load(function () {
  console.log('jq1')
})
$(window).load(function () {
  console.log('jq2')
})

// jQuery 中第二种页面加载事件--->比上面的快---页面中的基本的元素加载后就触发
$(document).ready(function () {
  console.log('jq01')
})
$(document).ready(function () {
  console.log('jq02')
})

// jQuery 中第三种页面加载事件--->比上面的快---页面中的基本的元素加载后就触发
jQuery(function () {
  console.log('jq001')
})
jQuery(function () {
  console.log('jq002')
})

// jQuery 中第四种页面加载事件--->比上面的快---页面中的基本的元素加载后就触发【推荐】
$(function () {
  console.log('jq0001')
})
$(function () {
  console.log('jq0002')
})

8. jQuery 和 DOM 获取元素的方式

DOM 作用：操作页面的元素

DOM 中获取元素方式：

根据 id 获取元素
document.getElementById('id属性的值')

根据 类样式名字 获取元素
document.getElementsByClassName('类样式的名字')

根据 标签名字 获取元素
document.getElementsByTagName('标签名字')

根据 name属性 获取元素
document.getElementsByName('name属性的值')

根据 选择器 获取元素
document.querySelector('选择器')---->id、类、标签选择器 	一个
document.querySelectorAll('选择器') 多个

jQuery 中获取元素的方式：

$('选择器')---jQuery对象
|-- id ---> $('#btn')
|-- 标签 ---> $('p')
|-- 类 ---> $('.cls')
|-- 交集 ---> $('p.cls') ---> 先找 p 标签，从 p 标签中找应用了 cls 类样式的元素 --> 标签名.类样式的名字
|-- 并集 ---> $('div,p,.cls') --> 选择器，选择器，选择器
|--  （后代）---> $('#div span') --> 获取的是div这个父级元素中所有span标签（直接的子元素，孙子元素）
					$('#div>span') --> 获取的是div这个父级元素中直接的子元素
                    $('#div~span') --> 获取的是div这个父级元素后面的所有的兄弟元素
                    $('#div+span') --> 获取的是div后面直接的兄弟元素
|-- 索引 ---> $('ul>li:eq(1)')
|-- 偶数 ---> $('ul>li:odd')
|-- 奇数 ---> $('ul>li:even')
|-- $('ul:lt(索引)') ---> 获取小于这个索引的元素
|-- $('ul:gt(索引)') ---> 获取大于这个索引的元素
|-- $('ul>li:first') ---> 获取第一个
|-- $('ul>li:last') ---> 获取最后一个
|-- $('option:selected') --> 选择选中的

8.1. 筛选

|-- .eq() ---> 按索引查找，默认从 0 开启
|-- .next() ---> 找下一个兄弟
|-- .nextAll() ---> 获取后面所有的兄弟元素
|-- .prev() ---> 找上一个兄弟
|-- .prevAll() ---> 获取前面所有的兄弟元素
|-- .children() ---> 子选择器（直接子元素）
|-- .find() ---> 后代选择器
|-- .siblings() ---> 查找兄弟节点，不包括自己本身
|-- .parent() ---> 查找父亲

9. jQuery 方法

   . .val() ---> 设置或者是获取表单标签的value属性值 .text() ---> 设置或者获取标签中的文本内容 --- 就相当于DOM中innerText .html() ---> 设置或者获取标签中的html内容 --- 就相当于DOM中innerHTML 重新赋值 .css() ---> 设置元素的css样式属性值，即不能添加类样式，也不能移除类样式，获取的数值是字符串类型 .index() ---> 获取索引值

   .show() ---> 显示 .hide() ---> 隐藏 .stop() ---> 【注】可以解决bug 鼠标进入离开，会出现事件还没结束，又开始新的事件了。 ---> $(this).children('ul').stop().show(500) 两个参数：（clearQueue, jumpToEnd）第一个参数：是否清除队列，第二参数：是否跳转到最终效果

   .addClass() ---> 添加类样式，返回对象 .removeClass() ---> 移除类样式，返回对象 .hasClass() ---> 判读元素是否应用了类样式 .toggleClass() ---> 切换类样式 .end() ---> 修复断链，恢复断链之前的状态 【不推荐使用，影响代码效率】

   .html() ---> 创建一个元素 .append() ---> 创建多个元素 .appendTo() ---> 主动创建 .perpend() ---> 创建元素插入到容器第一个子元素的前面 .perpendTo() ---> 主动创建 .after() ---> 把元素添加到容器后面的位置，成为容器的下一个兄弟元素 .before() ---> 把元素添加到容器前面的位置，成为容器的上一个兄弟元素 .clone() ---> 克隆 .html() ---> 移除元素，清空父元素中子元素 .empty() ---> 移除元素，清空父元素中子元素 .remove() ---> 删除元素，自杀

   .animate() ---> 动画的方法 .slideUp() ---> 滑入 .slideDown() ---> 滑出 .slideToggle() ---> 切换滑入和滑出 .fadeIn() ---> 淡入 .fadeOut() ---> 淡出 .fadeToggle() ---> 切换淡入淡出 .fadeTo() ---> 参数有两个 参数1：时间 参数2：透明值【注】两人参数都需要写

   attr() 针对单选框或者是复选框的是否选中问题，操作起来很麻烦，几乎不用，推荐使用 prop()；主要是操作元素的自定义属性的，但是也可以操作元素的自带的属性（html 中本身就有的属性）

   .attr() ---> 设置和获取属性值 【注】如果标签默认选中了 --- attr('checked') --- 结果：checked；如果标签没有选中 --- attr('checked') --- 结果：undefined .removeAttr() ---> 移除属性 .prop() ---> 设置或者获取元素的选中的问题，值一般是布尔类型

   .parseInt() .width() .height() .offset() ---> 该方法获取的是一个对象，该对象中有两个属性，left 和 top，left 和 top 包含 left 和 margin-left 和 top 和 margin-top 的值 .offset({'left':值,'top':值}) .sroll() .scrollTop() ---> 向上卷曲出去的距离 .scrollLeft() ---> 向左卷曲出去的距离

10. 设置元素样式的方式

第一种写法：

$('#dv').css('width', '200px')
$('#dv').css('height', '200px')
$('#dv').css('border', '1px solid red')
$('#dv').css('backgroundColor', 'pink')

第二种写法：链式编程

$('#dv').css('width', '200px').css('height', '200px').css('border', '1px solid red').css('backgroundColor', 'pink')

第三种写法：键值对的写法 【推荐】

`$('#dv').css({
  'width':'200px',
  'height':'200px',
  'border':'1px solid red',
  'backgroundColor':'pink'
})`

第四种写法：添加类样式写法

$('#dv').addClass('cls')
$('#dv').addClass('cls').addClass('cls2')
$('#dv').addClass('cls cls2')

11. 编写链式编程

链式编程：对象不停的调用方法（如：对象.方法().方法().方法()）

【条件】 对象调用方法，如果返回值还是当前这个对象，那么就可以继续的调用方法

经验：再 jQuery 中，一般情况，对象调用的方法，这个方法的意思是设置的意思，那么返回来的几乎都是当前的对象，就可以继续的链式编程了

断链：对象调用方法之后，返回的已经不是当前的这个对象了，此时再调用方法，就出现了断链

【注】可以使用 .end() 方法 是修复断链，恢复断链之前的状态，不过如果需要修复，那就不推荐使用链式编程了

12. jQuery 动画

    三组基本动画

    参数时间：两种写法：一种数值，另一种关键字 slow 比较慢 normal 一般 fast 比较快

    show()-hide() 显示和隐藏 【注】有两个参数：参数1：时间，参数2：回调函数（动画执行完毕后才执行）

    slideUp()-slideDown() 滑入和滑出（效果与卷帘门类似）参数同上 slideToggle() 切换滑入滑出 参数同上

    fadeIn()-fadeOut 淡入和淡出 参数同上 fadeToggle() 切换淡入和淡出 参数同上 fadeTo() 参数有两个 参数1：时间 参数2：透明值【注】两人参数都需要写

13. animate 方法

    参数1：键值对 --- css 属性和值 参数2： 时间 --- 1000毫秒 --- 1秒 参数3： 回调函数 .animate({ 'width':'300px', 'height':'200px', 'left':'100px', 'top':'100px' }, 2000, function () { alert('完成了') })

14. 坑 ---->元素创建

【注】append() 和 html() 两个方法的区别

<input type="button" value="显示效果" id="btn">
<div id="dv"></div>


$('#btn').click(function () {
  /* 第一种方式，创建的是对像 */
  $('<input type="button" value="这种方式可以创建多个button">').appendTo($('#dv')) 
  /* 第二种方式，类似 innerHTML 重新赋值，所以只能创建一个*/
  $('#dv').html('<input type="button" value="这种方式只能创建一个button">')
}) 


<input type="button" value="显示效果" id="btn">
<div id="dv">
  <p>这是一个p</p>
</div>


$('#btn').click(function () {
  // 把创建的 span 标签这个子元素直接插入到 div 中第一个子元素的前面
  $('#dv').prepend($('<span>this is span</span>'))
  // 主动添加
  $('<span>this is span</span>').prependTo($('#dv'))
  // 把元素添加到 div 的后面的位置，是 div 的下一个兄弟元素了
  $('#dv').after($('<span>this is span</span>'))
  // 把元素添加到 div 的前面的位置，是 div 的前一个兄弟元素了
  $('#dv').before($('<span>this is span</span>'))
}) 

15. 坑---> 元素的value属性操作

    普天之下莫非皇土

    设置文本域中的value值区别

    $('#t1').val('该改朝换代了') // 文本域的value值 在dom树种 没有改

    $('#t1').text('该改朝换代了')

    亚瑟 鲁班 黄忠 赵云

    为 select 标签中 value 属性是 4 的这个 option 标签选中

    $('#s1').val(4)

16. 为元素绑定事件

【注】前两种方式只能为存在的元素绑定事件，后添加的元素没有事件

对象.事件名字(事件处理函数); --- $('#btn').click(function() {}) 普通的写法

对象.bind('事件名字', 事件处理函数); --- $('#btn').bind('click', function() {});

---

【注】下面的两种方式，可以为存在的元素绑定事件，后添加的元素也有事件

父级对象.delegate('子级元素', '事件名字', 事件处理函数); --- $('#dv').delegate('p', 'click', function () {}); 父级元素调用方法，代理子级元素绑定事件

父级对象.on('事件名字'，'子级元素'，事件处理函数); --- $('#dv').on('click', 'p', function () {}); 父级元素调用方法，代理子级元素绑定事件

因为 delegate 方法中是调用的 on 的方法， 所以，以后直接用 on 就可以了

17. 事件冒泡及阻止事件冒泡

    DOM 的写法

    document.getElementById('dv3').onclick = function (e) { e.stopPropagation() // ie 8 不支持 window.event.cancelBubble = true // ie 8 的写法 }

    jQuery 的写法，没有兼容问题，直接 return false

    (this).attr('id')) return false })

18. each方法

    参数1：索引，参数2：对象（DOM 对象，需要转 jQuery 对象）

    对象.each(function (index，ele) { // console.log(arguments.length) // console.log(arguments[0]+'==='+ arguments[1]) $(ele).css() })

19. 事件参数

e.target 这个属性得到的是触发该事件的目标对象，此时是一个 DOM 对象

e.currentTarget 这个属性得到的是触发该事件的当前的对象

e.delegateTarget 这个属性得到的是代理的这个属性