JS-jQuery

jQuery介绍

1. 什么是jQuery：

jQuery是JavaScript的一个库，里面是由JS代码封装好的各种函数，可以利用这些函数实现对页面中元素的操作，如操作CSS样式，也可以操作从后台获取数据等等。
jQuery宗旨：write less， do more，写的更少，做的更多
jQuery官网：https://jquery.com/

2. jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM遍历和修改
AJAX

3. jQuery文档的下载：

方式1：先找jQuery官网—download-最下面的链接（jquery cdn）–在跳转到的页面中点击下载
注：jQuery-1.12.4版本的具有兼容性
方式2：从https://www.bootcdn.cn/jquery/，将jQuery的链接地址直接粘贴到HTML的script的src后面

4. jQuery的使用

第一步：在html文档中创建一个script标签，将src属性的值设置为jQuery文档的路径
第二步：再创建一个script，在给script中写js代码

5. jQuery的入口函数

方式1：$(function() { 函数体 });
方式2：$(document).ready(function() {函数体});
注：当jQuery框架中的$()与其他框架冲突时，使用jQuery代替$

6. $符号：

它指向了一个函数，就是jQuery的构造函数，它可以用来选取页面中的元素，也可以将DOM对象转换为jQuery对象，还可以用来写入口函数。
注意：jQuery中除了用$代表jQuery的构造函数，还可以用jQuery关键字来代表，即$ === jQuery。如果项目中有其它的框架里面也有$符号，那么为了避免冲突，我们这时就不要使$符号，而改用jQuery关键字

7. load事件和ready事件的区别

load事件：原生JS的事件
ready事件：jQuery中的事件
区别

1. ready事件的触发时间要早于load事件，ready事件是在DOM树渲染完毕后触发，而load事件是在页面中的节点加载完毕后触发，如页面中的图片都加载完毕了才会触发该事件
2. 页面中可以有多个ready事件同时存在，它们不会产生覆盖现象，而load只能有一个，后面加的会覆盖前面加的（即jQuery可以加载多个框架，而JS只能加载一个框架，其他框架会被覆盖）

8. DOM对象与jQuery对象的区别

DOM对象：用原生JS的方式选取到的页面元素被称为DOM对象
jQuery对象：用jQuery的方式获取到的页面元素被称为jQuery对象
jQuery对象和DOM对象的相互转换

1. jQuery对象转换为DOM对象：jQuery对象[下标]
2. DOM 对象转换为jQuery对象：$(DOM对象)

    var div=document.querySelector("div");          //dom对象
    //    dom转换成jquery
    console.log($(div));
    
    var $div=$('div');                              //jQuery对象
//    jQuery转换成dom
    console.log($div[0]);

jQuery选择器

• 基本选择器

1. id选择器：$(#id)
2. 类选择器：$(.class)
3. 元素选择器：$(ele)
4. 组合选择器：$(ele,#id)
5. 特殊选择器：this：表示当前对象$(this)；*：表示全部对象$(*)

• 层次选择器

1. 后代元素选择器：father child
2. 子元素选择器：father>child
3. 相邻元素选择器：me+next
4. 兄弟选择器：me~brothers

• 过滤选择器（操作下标）

1. 选择容器中的第一个元素：:first
2. 选择容器中的最后一个元素：:last
3. 选择容器中下标为n的元素：:eq(n)
4. 选择容器中的下标为偶数的元素：:even
5. 选择容器中下标为奇数的元素：:odd
6. 选择容器中下标大于n的元素：:gt(n)
7. 选择容器中下标小于n的元素：lt(n)
   注：eq(n),gt(n),lt(n)中n为变量时，要采用:eq("+n+")的形式，因为:eq(n)是选择器，里面括号内应为字符串，而n是个变量,要字符串解析

• 子元素选择器

1. 不限制元素类型（不同标签）：:nth-child()
   1） :first-child：第一个子元素
   2）:last-child：最后一个子元素
   3）nth-child(even)：索引值为偶数的子元素
   4）nth-child(odd)：索引值为奇数的子元素
   5）nth-child(n)：第n个子元素
   6）nth-last-child(n)：倒数第n个子元素
2. 限制元素类型（同一个标签）：ele:nth-of-type()
   1） ele:first-of-type：第一个ele元素
   2）ele:last-of-type：最后一个ele元素
   3）ele:nth-of-type(n)：第n个ele元素
   4）ele:nth-last-of-type(n)：倒数第n个ele元素

• 表单过滤选择器

（1）:input：过滤所有的输入框
（2）:text：过滤所有的文本框
（3）:password：过滤所有的密码框
（4）:radio：过滤所有的单选框
（5）:checkbox：过滤所有的复选框框
（6）:submit：过滤所有的提交按钮
（7）:reset：过滤所有的重置按钮
（8）:button：过滤所有的点击按钮

• 表单对象属性选择器

:checked：匹配所有选中的 复选框、单选按钮 元素
$(':checkbox:checked')；$(':radio:checked')
:selected：匹配所有选中的选项元素
$('option:selected')

jQuery对元素的操作

• 属性操作：attribute:属性-attr()；property:属性-prop()

1. 查询属性
   attr('属性名')；prop('属性名')
2. 设置属性
   attr(属性名,属性值)；prop(属性名,属性值)
   注：设置多个属性：
   jQuery对象.attr或prop({
属性名：属性值，
属性名：属性值
....
});
3. 删除属性
   removeAttr(‘属性名’) 删除单个属性
   注：删除多个属性加空格
   removeProp(‘属性名’) 删除单个属性,将属性值设置为undefined
4. jquery中attr和prop的区别
   1）对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
   2）对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

• 内容操作：text方法和html方法;val方法：用于表单

1. text方法
   1. 作用：获取或者设置jQuery对象中的内容
   2. 格式：jQuery对象.text()或jQuery对象.text(内容);
2. html方法
   1. 作用：获取或者设置jQuery对象中的内容
   2. 格式：jQuery对象.html()或jQuery对象.html(内容);
3. 区别：
   1.text方法在获取jQuery对象下面内容的时候，返回的是所有文本内容拼接的字符串
   2.html方法在获取jQuery对象下面内容的时候，返回的是文本内容和后代节点
   3.在设置时，text不解析标签，而html解析标签
   4.如果jQuery对象有多个元素构成，那么text在执行时会有隐式迭代，而html只取jQuery对象中第一个元素的内容
4. val方法
   1.作用：获取或者设置表单元素中的值
   2.格式：表单元素.val()或表单元素.val(值)；

<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
</ul>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
    var $li=$('li');
    console.log($li.text());   //隐式迭代 我是第1个li我是第2个li我是第3个li我是第4个li我是第5个li
    console.log($li.html());    //只取第一个元素的内容 我是第1个li
</script>

• css样式操作

（1）css(属性名)：读取一个css属性的值
（2）设置一个css样式：css(css属性名,属性值)
（3）设置多个css样式：css({css属性:值})
（4）addClass(class)：添加某个类
（5）removeClass(class) ：删除某个类
（6）toggleClass(class)：切换样式，如果有class则删除，如果没有则添加

• 尺寸操作

（1）width()：方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
（2）height()：方法设置或返回元素的高度（不包括内边距、边框或外边距）。
（3）innerWidth() 方法返回元素的宽度（包括内边距）。
（4）innerHeight() 方法返回元素的高度（包括内边距）。
（5）outerWidth() 方法返回元素的宽度（包括内边距和边框）。
（6）outerHeight() 方法返回元素的高度（包括内边距和边框）。

• 位置操作

1. scrollLeft() 方法设置或返回被选元素的水平滚动条位置。
2. scrollTop() 方法设置或返回被选元素的垂直滚动条位置。

jQuery Dom对象的操作

1. 创建jQuery对象

格式1：$('<开始标签名称>')
格式2：$('<开始标签>内容</结束标签>')
格式3：$('<开始标签 属性名称="属性值" 属性名称="属性值"...>内容</结束标签>');

2. Dom 内部追加

Js:appendChild(),insertBefore()
jQuery：

1. append方法和appendTo方法
   1.作用：将jQuery对象以尾部追加的方式添加到容器内部
   2.格式：
   1) 容器.append(被添加的jQuery对象或标签形成的字符串);
   2) 被添加对象.appendTo(代表容器的jQuery对象或选择器);
2. prepend方法和prependTo方法
   1.作用：将jQuery对象添加到容器的前端
   2.格式：
   1) 容器.prepend(被添加的jQuery对象或标签形成的字符串);
   2) 被添加对象.prependTo(代表容器的jQuery对象或选择器);

3. Dom外部追加

1. after方法、insertAfter方法
   1.作用：在目标元素的后面插入新的jQuery对象
   2.格式：
   1)目标元素.after(要插入的新的jQuery对象)
   2)要插入的新的jQuery.insertAfter(目标元素)
2. before方法、insertBefore方法
   1.作用：在目标元素的前面插入新的jQuery对象
   2.格式：
   1)目标元素.before(要插入的新的jQuery对象)
   2)要插入的新的jQuery.insertbefore(目标元素)
3. 注：如果要操作的节点是页面中已有的，那么append、appendTo、prepend、prependTo、after、before、insertAfter、insertBefore方法具有移动节点的功能

4. 删除页面中的元素

1. empty方法
   1.作用：清空某个容器下面的所有的内容
   2.格式：容器.empty();
2. remove方法（彻底）
   1.作用：删除页面中的某个jQuery对象
   2.格式：要被删除的jQuery对象.remove(‘选择器’);
   3.注意：如果被删除的元素身上有事件，那么事件会被删除

5. 克隆节点

1. clone方法
   1. 作用：克隆页面中的元素
   2. 格式：要被克隆的元素.clone(true/false);false为默认值，表示不克隆元素的事件
   3. 返回值：被克隆出来的节点
2. js:cloneNode方法
   a.作用：克隆节点
   b.格式：要被克隆的节点.cloneNode(参数);
   c.参数说明：true（克隆该节点下面的所有的后代节点）、false（默认，只克隆当前节点）
   d.返回值：克隆出来的节点
   注意：如果元素身上有事件，那么事件不会被克隆

jQuery Dom遍历

1. 获取祖先元素的方法

1. Js:parentNode
2. jQuery:
   （1）parent()：返回被选元素的直接父元素。
   （2）parents()：返回被选元素的所有祖先元素，直到根元素html。
   （3）parentsUntil()：返回两个被选元素之间的所有祖先元素。

2. 获取后代节点的方法

1. Js:chiren(),childNodes
2. jQuery:
   1）children()：返回被选元素的所有直接子元素。
   2）find()：返回被选元素的后代元素，一路向下直到最后一个后代。

3. 获取兄弟元素的方法

1. Js:nextSibligs(),previousSiblings()
2. jQuery
   （1）siblings()：返回被选元素的所有同胞元素。
   （2）next()：返回被选元素的下一个同胞元素。
   （3）nextAll()：返回被选元素的所有跟随的同胞元素。
   （4）nextUntil()：返回介于的两个参数之间的所有跟随的同胞元素。
   （5）prev()：返回被选元素的上一个同胞元素，同胞元素就是其他的元素。不一定是同一个标签。
   （6）prevAll()：返回被选元素的所有前面的同胞元素。
   （7）prevUntil()：返回介于的两个参数之间的所有前面的同胞元素。

4. jQuery对象的过滤

1. first()：返回被选元素的首个元素。
2. last()：返回被选元素的最后一个元素
3. eq(index)：返回被选元素中带有指定索引号的元素
4. filter(expr) ：筛选出与指定选择器匹配的元素集合

5. 其他

1. addBack方法
   1.作用：将目标元素添加到jQuery对象集合中
   2.示例：$(’#box’).nextAll().addBack()
2. end方法
   1.作用：返回链式结构被破坏之前的那个jQuery对象
   2.示例：$(’#box’).next().end()

jQuery 事件

1. jQuery中事件的添加方式

1. 格式：
   jQuery对象.事件名称(数据，function() {
//事件被触发时的操作
});
   注意：如果同一元素被添加了多个相同的事件，事件不会覆盖
2. bind方法
   1.格式 (绑定一个事件)：jQuery对象.bind('事件名称', function() {
// 事件触发时要执行的操作
});
   2.格式 (绑定多个事件，对应操作相同)：jQuery对象.bind('事件名称1 事件名称2
事件名称3...', function() {
// 事件触发时要执行的操作
});
   3.格式 (绑定多个事件，对应操作不相同)：jQuery对象.bind({
事件名称: function() {},
事件名称: function() {}
});
   4.格式 (在为元素绑定事件的时候，给它传递数据)：jQuery对象.bind('事件名称', 数据, function() {})。
   注：如果要在事件处理函数中获取到传递过来的数据，可以使用事件对象的data属性来获取
3. on方法
   1.格式1：jQuery对象.on('事件名称', function() {});
   2.格式2：jQuery对象.on('事件名称1 事件名称2 事件名称3', function() {});
   3.格式3：jQuery对象.on({
事件名称1: function() {},
事件名称2: function() {}
});
   4.格式4：jQuery对象.on('事件名称', '后代元素', 数据, function() {});
4. delegate方法：
   1.格式：祖先元素.delegate(后代元素，事件名称，数据，function() {
// 事件被触发时要执行的操作
})
   注意，该方法在为元素绑定事件的时候只能用事件委托的形式来绑定
5. hover合成事件
   hover方法
   1.作用：为元素添加移入和移出事件
   2.格式：jQuery对象.hover(function() {//移入事件}, function() {//移出事件});
6. 一次性事件 one方法
   one方法
   1.作用：给元素添加一次性事件
   2.格式：jQuery对象.one('事件名称', function() {});
7. 适用于表单 change方法
   change方法
   1.作用：当元素的值改变时发生 change 事件**（仅适用于表单字段）**
   2.格式：jQuery对象.change('事件名称', function() {});

2. jQuery中事件的删除方式

1. unbind方法
   1.作用：删除jQuery对象身上的事件
   2.格式1(表示删除所有事件)：jQuery对象.unbind();
   3.格式2(删除指定的事件)：jQuery对象.unbind('事件名称');
2. off方法
   1.作用：删除jQuery对象身上的事件
   2.格式1(表示删除所有事件)：jQuery对象.off();
   3.格式2(删除指定的事件)：jQuery对象.off('事件名称');
3. undelegate方法
   1）作用：删除通过delegate方法绑定的事件
   2）格式：jQuery对象.undelegate();

3. jQuery中事件对象

1. 事件对象的属性
   1） type:事件的类型
   2）target:哪个元素的事件(.nodeName)
   3）which:返回鼠标的按键或者是键盘的按键的值（ascii值）（js：keyCode)
   4）pageX:返回鼠标指针的位置，相对于文档的左边缘。
   5）pageY:返回鼠标指针的位置，相对于文档的上边缘。

   $('button').click(function (e) {
//        console.log($(e.target));
        console.log(e.target);          //返回Dom对象 <button>按钮</button>
        console.log(e.target.nodeName); //BUTTON
        console.log($(e.target).text());//按钮
    })

2. 事件的默认阻止和冒泡
   （1）事件的默认阻止
   event.preventDefault() 方法阻止元素发生默认的行为。
   （2）事件的冒泡
   event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。

<a href="http://www.baidu.com">点击跳转</a>
<script>
    <!-- 阻止链接跳转-->
    $('a').click(function(e){
//        e.preventDefault();   //方式一
        return false;           //方式二
    })
</script>

jQuery动画特效

• 基本动画效果

1. hide：
   作用：隐藏动画
   格式：jquery对象.hide(动画执行所需时间【毫秒值】, function() {})
2. show：
   作用：显示动画
   格式：jquery对象.show(动画执行所需时间【毫秒值】, function() {})
3. toggle：
   作用：显示/隐藏动画
   格式：jquery对象.hide(动画执行所需时间【毫秒值】, function() {})

• 滑动动画效果

1. slideDown()：
   作用：向下滑动
   格式：jquery对象.slideDown(动画执行所需时间【毫秒值】, function() {})
2. slideUp()：
   作用：向上滑动
   格式：jquery对象.slideUp(动画执行所需时间【毫秒值】, function() {})
3. slideToggle()：
   作用：向上和向下滑动切换
   格式：jquery对象.slideToggle(动画执行所需时间【毫秒值】, function() {})

• 淡入淡出动画效果

1. fideIn()：
   作用：淡出效果
   格式：jquery对象.fideIn(动画执行所需时间【毫秒值】, function() {})
2. fideOut()：
   作用：淡入效果
   格式：jquery对象.fideOut(动画执行所需时间【毫秒值】, function() {})
3. fideToggle()：
   作用：淡出淡入切换效果
   格式：jquery对象.fideToggle(动画执行所需时间【毫秒值】, function() {})
4. fideTo()：
   作用：淡入为给定的透明值（0-1）
   注意，即使透明度为0，那么元素也是占位的，因为元素并没有被设置display：none

格式：jquery对象.fideTo(动画执行所需时间【毫秒值】, 透明值,function() {})

<button>fadeIn</button>
<button>fadeOut</button>
<button>fadeToggle</button>
<button>fadeTo</button>
<div>1</div>
<script>
    <!-- 淡入淡出的效果-->
    $('button').eq(1).click(function () {
        $('div').fadeIn(1000,function () {
            console.log('淡出显示效果');
        })
    })
    $('button').eq(2).click(function () {
        $('div').fadeOut(1000,function () {
            console.log('淡入消失效果');          //不占据位置
        })
    })
    $('button').eq(3).click(function () {
        $('div').fadeToggle(1000,function () {
            console.log('淡入淡出切换效果');          
        })
    })
    $('button').eq(4).click(function () {
        $('div').fadeTo(1000,0.2,function () {
            console.log('淡入为给定透明值');         
        })
    })

</script>

• 停止动画效果

stop方法
1.作用：停止动画
2.格式：jQuery对象.stop(参数1，参数2);
3.参数说明
1)参数1：值为布尔值，默认为false（结束当前动画，执行下一次动画），如果为true（结束当前，清空动画队列，即删除剩余的动画） 【是否进行下一个动画】
2)参数2：值为布尔值，默认为false（当前动画没有完成，开始执行下一次动画），如果设置成true，表示立即完成当前动画，并完成队列（即完成其它动画）【对当前动画如何处理，是没完成还是立即完成】

• 自定义动画效果

animate方法
1.作用：jQuery中用来创建自定义动画的方法
2.格式：jQuery对象.animate(参数1，参数2，参数3，参数4);
3.参数说明
参数1：该参数通常是一个对象，里面一键值对的形式封装了要达到的CSS样式，注意：animate的修改样式时只对属性值中包含数值的样式敏感，属性值可以不带单位
参数2：动画执行所需时间，单位为毫秒，该参数也可以是字符串，如fast（200毫秒）、normal（默认，400毫秒）、slow（600毫秒），如果是任意的字符串，如‘abc’表示normal
参数3：动画在执行时的状态（即是匀速的，还是慢-快-慢），只支持两个值linear、swing(默认)
参数4：回调函数，动画执行完毕后执行该回调函数

• 链式动画效果

在相同的元素上运行多条 jQuery 命令

jQuery中的each方法和$.each方法

• each方法
  1.作用：可以利用each方法对jQuery对象集合中的每个元素做单独的处理
  2.格式：jQuery.each(function(index, ele) {
在函数内部可以对jQuery对象集合中的每个对象做单独的处理
})
  3.说明：index表示jQuery对象集合中DOM对象的下标，ele表示该集合中的DOM对象
• $.each方法
  1.作用该方法是$的一个静态方法，可以用该方法去处理数组或对象
  2.格式：$.each(数组/对象，function() {})

    <!-- each-->
    $('li').each(function (index, ele) {
        console.log(index);                //li下标
        console.log(ele);                  //li元素
    });
    <!-- $.each-->
    var arr = [10, 20, 30, 40, 50];
    var obj = {
        a: 1,
        b: 2,
        c: 3
    };

    $.each(obj, function(index, val) {
        console.log(index + '....' + val);
    });