jQuery--2

JQuery排序

排序

eq()
在 jQuery 对象中通过下标获取某个对象，下标是 jQuery 对象中的大的排序的下标

// 选择所有的 p 标签元素
// var $ps = $("p");
// 生成的 jQuery 对象，内部包含所有的原生 js 对象
// jQuery 对象是一个类数组对象，内部所有的 数据会进行一个大的排序
// 排序与自己原来的父级没有关系，只与 在 jQuery 对象中的新的位置有关
// 重点体现在 eq()  方法中
// 给指定位置的对象添加颜色
// $ps.eq(1).css("background-color","red");

index()
jQuery 对象调用 index() 方法时，得到的是它自己在 HTML 结构中的兄弟中的下标位置。与jQuery 大排序没有关系

// 选择所有的 p 标签元素
var $ps = $("p");
// index() 方法获取下标时，排序跟新生成的 jQuery 对象无关
// 它依赖于自身元素在父级中同级元素之间的位置
// 添加点击事件
$ps.click(function () {
	// 点击输出自己的 index() 的值
	console.log($(this).index())
})

排他思想

在一些事件中，希望自己是特殊的，而它的兄弟们是默认的。

// 获取所有的 span
var $span = $(".tab .title span");
// 添加鼠标移上事件
$span.mouseenter(function () {
// 利用变量存储 this 的下标
	var idx = $(this).index();
   // 自己级别的排他
   // 查找所有对应 ul 时候，不要单独选择所有 ul，要通过当前的 this 的节点关系查找
   // 链式调用方式，找到自己父级中的兄弟中的所有子级 ul
   $(this).addClass("current")
   .siblings().removeClass("current")
   .parent().siblings().children().eq(idx).addClass("current")
   .siblings().removeClass("current");

})

each() 遍历

是对 jQuery 对象中的元素每一个都执行函数内部的操作。

基本原理就是 for 循环，从对象的下标为 0 的项一直遍历到最后一项，然后对每一项进行操作

优点：
1.each 的函数内部，也有一个 this，指向的是进来遍历的每一次的元素。
2.each 的函数可以传一个参数 i，i 表示的是这一次的遍历对象在整体的 jQuery 对象大排队中的下标位置。

$ps.each(function (i) {
// i 记录的是这一次遍历时当前元素在 jQuery 对象大排序中的位置
	$(this).click(function () {
		// 这个内部的this 就是事件源
		console.log(i);
		console.log($(this).index())
	})

})

jQuery 中的入口函数

语法1：
$(document).ready(function(){
// 获取元素
});
语法2：
$(function(){
// 获取元素
});

注意

原生的 window.onload事件，等待所有的页面中的资源（DOM树、图片、视频、音频等外部资源）加载完毕之后，才会执行

jq 的入口函数,仅仅需要等待 DOM 树加载完成就立即执行

jQuery 切换效果方法

显示隐藏方法

hide() 和 show() 方法

• hide()：元素隐藏，隐藏的前提必须是元素 display:block；
• show()：元素显示，显示的前提必须是元素 display:none;
• toggle()：在元素隐藏和显示之间进行切换。
• 这三个方法可以设置元素的显示和隐藏效果，在过程中还可以出现过渡动画。

参数
• 如果不传参数：直接显示和隐藏，没有过渡动画。
• 如果传递参数：
• 单词格式：“slow”,“normal”, “fast”
• 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画。
• 过渡时间内，伴随着宽度和高度以及透明度的变化。

滑动显示隐藏

slideDown() 和 slideUp() 方法

• slideDown()：滑动显示（方向不一定）
• slideUp()：滑动隐藏
• slideToggle()：滑动切换
• 让元素在 display 属性的 block 和 none 之间进行切换。

参数
• 如果不传参数：默认的过渡时间为 400 毫秒。
• 如果传递参数：
• 单词格式：“slow”,“normal”, “fast”
• 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画。

注意
• 如果滑动的元素没有设置宽高，没有滑动效果。
• 如果元素设置了高度和宽度，会进行上下垂直方向的滑动。
• 动画的效果：高度属性在 0 到设置值之间的变化，没有透明度动画。
• 如果元素设置了定位，偏移量方向如果是 bottom 参与了，滑动方向会发生变化。

淡入淡出

fadeIn() 和 fadeOut() 方法

• fadeIn()：淡入，透明度逐渐增大最终显示。
• fadeOut()：淡出，透明度逐渐降低最终隐藏。
• fadeToggle()：切换效果。
• fadeTo()：淡入或淡出到某个指定的透明度。
• 动画效果，执行的是透明度动画。也是在 display 属性的 block 和 none 之间切换。

参数
• 如果不传参数：默认的过渡时间为 400 毫秒。
• 如果传递参数：
• 单词格式：“slow”,“normal”, “fast”
• 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画。

animate() 动画方法

animate() 方法

• 作用：执行 CSS 属性集的自定义动画。
• 语法：$(selector).animate(styles,speed,easing,callback)
• 参数1： css 的属性名和运动结束位置的属性值的集合。
• 参数2：可选，规定动画的速度，默认是 “normal”。其他值“slow”、“normal”、“fast”，数字格式，单位为毫秒。
• 参数3：可选，规定在不同的动画点中设置动画速度的 easing 函数，值包含 swing 和linear。
• 参数4：可选，animate 函数执行完之后，要执行的函数。
• 注意：其他的运动方法比如 slideUp() 等，也有参数3 和参数4.

// 获取元素
var $ps = $("p");
// 习惯会将运动时间存储到一个变量中
var during = 2000;
// 添加点击事件，让元素运动
$ps.click(function () {
    // 让自己的 left 的值变为 500
    // 使用 animate() 方法
    // 参数1： 运动的 css 的属性集，对象格式
    // 参数2： 运动时间，单词格式，数字格式
    // 参数3： 运动速度，可选 swing 和 linear
    // 参数4： 回调函数，在运动结束之后立即执行
    // $(this).animate({"left": 500},during,"swing",function () {
    //     // 在运动结束后，让元素变红色
    //     $(this).css("background","red")
    // })
    // 所有有数值的属性都可以运动
    // $(this).animate({"width": 500})
    // $(this).animate({"opacity": 0.5})
    $(this).animate({"background": "#000"})
})

动画排队

• ①同一个元素对象身上，如果定义了多个动画，动画会排队等待执行。
• ②如果是不同的元素对象都有动画，不会出现排队机制。
• ③如果是的其他非运动的代码，也不会等待运动完成。
• ④之前学习的自带动画的显示隐藏方法，如果设置给同一个元素，也有动画排队。
• 同一个元素身上的运动，可以简化成链式调用的方法。

// 非运动的代码，关于同一个元素对象的，也不会排队
// $box1.css("height",100)

// 注意：其他的运动方法，如果设置给同一个元素，也会发生排队
// $box1.mouseenter(function () {
//     $(this).children().slideUp(2000)
// })
// $box1.mouseleave(function () {
//     $(this).children().slideDown(2000)
// })

// 给同一个元素
的多个运动进行链式调用写法     $box1.children().fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)

delay() 延迟方法

动画延迟
• delay：延迟的意思。
• 将 delay() 设置在某个运动方法之前，表示后面的运动要在规定的时间之后再执行，有延
迟运动的效果。
• 参数：时间的数值，表示延迟的时间。
• 除了 animate 方法之外，其他的运动方法也有延迟效果。stop() 停止动画方法

// 获取元素
var $box1 = $(".box1")
var $box2 = $(".box2")
var during = 2000;
// 延迟
$box1.animate({"left": 500},during);
$box2.delay(2000).animate({"left": 500},during);

stop() 方法

• stop() 作用：设置元素对象身上的排队的动画以何种方式进行停止。
• 有两个参数，都是布尔值。
• 参数1：设置是否清空后面的动画排队，如果是 true 表示清空，如果是 false 表示不清空只停止当前的一个动画。
• 参数2：设置当前动画是否立即完成，如果是 true 表示立即完成，对象会立刻走到结束位置，如果是 false 表示不完成当前动画，立即停止在当前位置。
• 默认情况下，两个参数值默认值为 false。
• 根据两个参数的值，可以得到四种停止方式。

• 实际工作中，一般要求清空后面的排队，停止在当前位置，多使用 stop(true),第二个参数不设置默认为 false。

var $box1 = $(".box1");
var during = 2000;
// box1 有四个运动进行排队
$box1.animate({"left" : 500},during);
$box1.animate({"top" : 500},during);
$box1.animate({"left" : 0},during);
$box1.animate({"top" : 30},during);

// 添加按钮点击事件
// 清空动画，走到结尾
$("#btn1").click(function () {
    $box1.stop(true,true)
})

// 清空动画，停在当前
$("#btn2").click(function () {
    $box1.stop(true,false)
})

// 不清空后面的动画，当前运动立即走到结尾
$("#btn3").click(function () {
    $box1.stop(false,true)
})

// 不清空后面的动画，当前运动立即停止在当前位置
$("#btn4").click(function () {
    $box1.stop(false,false)
})

// 在实际工作中，一般要求会清空后面的动画，当前动画要停止在当前的位置
// 更多时候使用 stop(true)

清空动画排队

动画排队问题

• 如果将开启运动的程序放在一个事件函数中，事件多次被触发，会执行多次函数，就会在一个元素身上添加了多个动画，会进行动画排队。
• 需要去清除排队的动画，进行防骚扰操作。

方法1
• 利用 stop() 方法。
• 在每一个运动函数之前都增加一个 stop(true)，表示在运动执行之前，会将前面排队的动
画清空，然后停止在当前位置。

方法2
• 利用函数节流方法，如果元素在运动，直接 return，不要执行后面的运动代码。
• 每个 jQuery 对象，都能调用一个 is() 方法，作用是显示元素对象的某种状态。
• 如果参数位置是 is(“:animated”),返回值是布尔值，true 表示正在运动，false 表示没有运动。

// <div class="box1"><span></span></div>

var $box1 = $(".box1");
var during = 1000;        

// 将运动设置给事件，事件多次触发会积累动画出现动画排队
// 清除动画排队方法1： 在每一次新的运动开始之前，去停止之前所有的动画排队
// $box1.mouseenter(function () {
//     $(this).children().stop(true).slideUp(during)
// })
// $box1.mouseleave(function () {
//     $(this).children().stop(true).slideDown(during)
// })

// 清空动画排队方法2：使用函数节流方式
$box1.mouseenter(function () {
    // 判断元素自己是否在运动中，如果是，那么直接返回不要往下添加新的运动
    if ($(this).children().is(":animated")) {
        return;
    }
    // 如果走到这里，说明元素没有在运动，就可以添加新运动
    $(this).children().stop(true).slideUp(during)
})
$box1.mouseleave(function () {
    // 判断元素自己是否在运动中，如果是，那么直接返回不要往下添加新的运动
    if ($(this).children().is(":animated")) {
        return;
    }
    $(this).children().stop(true).slideDown(during)
})

JQuery节点操作

创建元素

语法： $(’<li></li>’)

追加元素

• 向父元素最后追加
append()
appendTo()

• 向父元素最前面追加
prepend()
prependTo()

• 向元素后面追加新的兄弟
after()
insertAfter()

• 向元素前面追加新的兄弟
before()
insertBefore()

删除元素

删除谁就让谁调用这个方法
remove()

清空元素

•清空方式1：jQuery对象.empty();
推荐使用， 清空内部的所有元素及元素相关的事件

•清空方式2：jQuery对象.html(’’);
仅仅清空内部的元素，不清清理内存中的元素的事件。

克隆元素
返回克隆好的元素
clone()
参数：默认是false,表示仅仅克隆内容。 true，克隆内容和事件

$(".box").click(function(){
     alert("你好");
 });
 
 // 获取 box 元素
 var $box = $(".box");
 // 克隆 box
 // var $newBox = $box.clone(false); //只克隆内容，不克隆事件
 var $newBox = $box.clone(true); //克隆内容，克隆事件
 // // 添加到 body 最后
 $("body").append($newBox);

jQuery 操作元素的尺寸

width() 和 height() 方法： 操作的大小仅仅时内容部分

innerWidth() 和 innerHeight() 方法： 操作的大小是内容部分 + padding

outerWidth() 和 outerHeight() ： 操作的大小是内容部分 + padding + border

jQuery 操作元素的位置

offset() 获取元素距离文档的位置

返回一个对象，对象中包含了元素的位置
• 注意： offset() 方法获取的元素的位置，永远参照文档,和定位没有关系

position() 距离上级定位参考元素的位置
返回的一个对象，对象中包含了元素的位置
• 注意：position() 方法获取的元素的位置,参照最近的定位元素（和定位有关系）

scrollTop() 操作卷去的页面间距
返回数字

JQuery事件操作

简单方式注册事件

• 语法：jQuery 对象.事件名(事件处理程序);

on 方法注册事件

注册简单事件语法：jQuery 对象.on(‘事件名’,事件处理程序);
事件委托的实现：jQuery 对象.on(‘事件名’,‘选择器’,事件处理程序);
选择器：子孙元素
注意：在事件处理程序中，this 代表的是子孙元素（所点最先触发的）

// 使用 on 方法注册简单事件
// on() 方法的封装的底层实际是 addEventListener()
$("input").on("click",function () {
    alert(2)
})
$("input").on("click",function () {
    alert(3)
})

// jQuery 中的事件委托
// on() 方法传递三个参数
// 参数1： 事件类型
// 参数2： 进行委托的子元素的选择器
// 参数3： 事件处理程序
$("ul").on("click", "li", function () {
    // 在事件委托过程中，事件函数的内部 this 不是指向事件源，而是指向触发事件的 委托子元素
    alert($(this).text())
})

off 方法移除事件

• 解绑简单的事件：jQuery 对象.off(‘click’,事件处理程序名称)
• 解绑事件委托注册的事件：jQuery 对象.off(‘click’,‘选择器’,事件处理程序名称)

// 绑定简单事件
$("input").on("click",fun2)
// 解绑事件
$("input").off("click",fun2)

// 绑定事件委托的事件
$("ul").on("click", "li", fn2)
// 解绑事件委托
$("ul").off("click", "li", fn2)

触发事件
• 语法：jQuery 对象.trigger(‘事件名’);

// Q 中的 trigger 方法，自动执行右按钮事件
 function autoPlay() {
   $(".arrow-right").trigger("click");
 }

jQuery 事件对象

事件对象

• 事件处理程序的第一个形参 e

鼠标事件对象相关的属性

• 事件对象.clientX/Y 参照浏览器
• 事件对象.pageX/Y 参照文档
• 事件对象.offsetX/Y 参照元素

键盘事件对象相关的属性

• 事件对象.keyCode 返回键码数字
• 事件对象.altKey/shiftKey/ctrlKey 返回是布尔值。 检测是否按下（true）

// 键盘按下事件中，获取键码的数字
 $(document).keydown(function (e) {
     console.log(e.keyCode)
 })

公共的属性或方法

• 属性
事件对象.target 最初触发事件的DOM元素
事件对象.currentTarget 在事件冒泡阶段中的当前DOM元素

• 方法：
事件对象.preventDefault(); 阻止默认行为
事件对象.stopPropagation(); 阻止事件冒泡

多库共存

关于 $ 冲突的问题

• 解决方案1：jQuery 中不使用 $,使用 jQuery
• 解决方案2：jQuery 库释放 $ 符合的使用权，用其他简单的符号代替
* jQuery.noConflict(); 释放 $,把 $ 代表的函数返回给用户，用户可以用其他变量接收

// 解决方法1： 使用 jQuery 标识符进行调用
// jQuery("button").click(function () {
//   alert(1);
// })

// 解决方法2：释放 $ 符号
var $1 = jQuery.noConflict();
// console.log($1)
$1("button").click(function () {
  alert(1);
})

jQuery 插件使用

如何获取插件

• 百度搜索、github搜索
• 看技术文章
• 跟别人交流
• jQuery 插件库之家：添加链接描述

插件使用方法

• 找到并且下载插件
• 在项目外写一个 demo（先学会使用，让后再加入项目中）
• 看源码，看文档

注意

1. 复制结构，保证结构关系是一致的。标签名不一致无所谓
2. 样式，可以选择复制，也可以定义自己需要的样式
3. 先引入 jQuery 文件，再引入插件库文件，再去使用
4. 复制源代码或看文档使用