JQuery基础
- jquery获取元素的方法：$()
在 jQuery 中，只有一个全局变量 $,这是 jQuery 的一大特点，避免了全局变量的污染 - jquery对象：$() 方法获取到的内容叫做 jQuery 对象
- jQuery 对象中原生 js 对象的个数：
1.$().length
2.$().size() - 原生对象与jQuery相互转换
1.jQuery 转原生：直接利用数组下标方式，得到 jQuery 封装的原生对象。
2.原生转 jQuery：将原生对象用 $() 方法包裹即可
jQuery选择器
- css2.1和css3选择器
参数：必须是字符串格式的选择器 - jQuery筛选选择器
用法：在基础选择器后面增加一些筛选的单词，筛选出前面选择器的选中内容中一部分。
常用：$(":first") 第一个
$(":last") 最后一个
$(":first") 第一个
$(":last") 最后一个
$(":eq(index)") 下标为 index 的项
$(":gt(index)") 大于下标为 index 的项
$(":lt(index)") 小于下标为 index 的项
$(":odd") 下标为奇数的项
$(":even") 下标为偶数的项
$(":not(selector)") 去除所有与给定选择器匹配的元素 - 筛选方法
常用: $("p").first()
$("p").last()
$("p").eq(3)
Jquery常用方法
- jQuery操作标签内容的方法
- html()方法
html() 方法相当于原生 JS 中的 innerHTML 属性，用来获取或设置标签内部内容。
- 获取：文本和内部标签 语法：jQuery对象.html();
- 设置：若设置标签时，标签会被渲染 语法：jQuery对象.html('文本内容');
// html() 方法，如果传递参数，批量更改元素内部的内容
// 如果内部的字符串包含了标签的语法的字符，会按照 html 语法进行加载
$box.html('这是新增加的子级<p>这是段落</p>')
// html() 方法不传递参数，是获取元素内容
// 获取时只能获取第一个元素内部的文案
$box.html() //html语法加载
- text()方法
text() 方法相当于原生 JS 中的 innerText 属性，用来获取或设置标签内部文字。
- 获取：仅仅是文本 （语法：jQuery对象.text();）
- 设置：若设置标签时，标签会被当做普通文本 （语法：jQuery对象.text('文本内容');）
// 获取所有的标签内部的文字内容，忽略标签
// 设置,会将书写的内容都当成普通文字，不会按照标签加载
$box.text("普通文本<p>段落</p>") // 会显示标签
- val() 方法
val() 方法相当于原生 JS 中的 value 属性，用来获取或设置表单元素内容
- 获取：表单元素的 value 语法：jQuery对象.val();
- 设置：表单元素的value 语法：jQuery对象.val('文本内容')
jQuery 操作标签的属性
- attr() 方法：用来获取或者设置标签的属性值
设置标签的属性：jQuery对象.attr(name,value)
获取标签属性值：jQuery对象.attr(name) - removeAttr() 方法：移除标签的属性 removeAttr(name)
- prop() 方法：针对selected、checked、disabled 等表单元素的属性。此类属性的属性值与属性名相同
获取：$('input').prop('属性名') 设置：$('input').prop('属性名',值)
jQuery 操作样式方法
- css()方法：用于调用 css 属性值或者更改 css 属性值
语法：jQuery对象.css(name,value)
// css() 传一个参数：获取对应的属性值
$box.css("width")
// css() 传入两个参数：设置或更改对应的属性值
$box.css("width","400px")
// 设置多条属性，可以使用对象形式的参数
$box.css({
"width": 200,
"height": 300
})
• 一个参数：表示调用 css 属性的值，得到的是某个元素的计算后样式，值为字符串格式。
• 两个参数：表示设置 css 样式属性，第二个参数可以是字符串格式的属性值，如果带单位的数字的
属性值，可以写成带单位的字符串格式、不带单位的字符串、纯数字、带 += 等赋值运算的字符串。
• css() 方法的第一个参数，复合属性的单一属性写法可以是驼峰命名法，也可以是横线写法。
• 可以给同一个对象同时设置多条 css 属性，将多条属性的属性和属性值写成对象格式，传给 css()
的参数
jQuery 操作类名方法
- addClass() 添加类名
- removeClass() 移除类名
• 不传参数，表示删除所有的类名 - toggleClass() 类名切换
若这个类名存在，则会移除该类名。否则添加该类名 - hasClass() 检测类名是否存在（返回值：true 和 false）
// 判断一个类名在标签中是否加载
console.log($box.hasClass("demo"))
// 模拟一下 切换 类名的效果
$btn3.click(function () {
// 判断 box 是否有 demo 的类名
if ($box.hasClass("demo")) {
// 如果有 demo，就删除
$box.removeClass("demo")
} else {
// 如果没有 demo，就添加一个
$box.addClass("demo")
}
})
jQuery 常用事件方法
- click() 方法：点击事件
- mouseenter() 方法：鼠标进入一个元素触发的事件
- mouseleave() 方法：鼠标离开一个元素触发的事件
注意：mouseenter 和 mouseleave 没有事件冒泡。
在使用时替换 mouseover 和 mouseout 更加合适
- hover() 方法：hover 事件相当于将 mouseoenter 和 mouseleave 事件进行了合写
参数：有两个参数，第一个参数是鼠标移上执行的事件函数，第二个参数是鼠标离开执行
事件函数。
// hover() 方法，对mouseenter 和 mouseleave 进行了合并书写
$box.hover(function () {
// 鼠标移入
$box.addClass("demo")
},function () {
// 鼠标离开
$box.removeClass("demo")
})
jQuery 关系查找方法
- $(this) 自己的jQuery 对象
在 jQuery 中将 this 关键字传递给 $() 方法，得到就是指向自己的 jQuery 对象，就可以使用 JQ 的方法 - parent() 父级
jQuery 对象都有一个 parent() 方法，得到的是自己的父亲级 - children() 子级
jQuery 对象内部有一个 children() 方法，可以得到自己的所有子级元素组成的 jQuery对象 - siblings() 兄弟
jQuery 对象通过调用 siblings() 方法可以得到除了自己以外所有同级元素（兄弟）组成 jQuery 对象，找到的只能是亲的兄弟，不能是叔叔家的兄弟
链式调用
- jQuery 对象调用任何方法（除了节点关系方法）执行完后，方法都会有一个返回值，返回
值就是 jQuery 对象自己，这个现象给我们提供了便利，可以对执行结果继续打点调用 JQ
的方法和属性。 - 可以使用 jQuery 对象进行连续打点调用
// 获取所有的 p 标签
var $ps = $("p")
var $box = $(".box")
// 批量添加事件
$ps.click(function () {
// 让点击的自己 颜色变红色
// jQuery 对象调用除了节点关系的方法之外，其他的方法执行后，返回值就是 对象自己
// 可以继续链式调用其他的 jQuery 对象的方法和属性
// 好处：简化代码书写
// console.log($(this).css("background-color","red").html("哈哈"))
$(this).css("background-color", "red") // 自己变红色
.siblings().css("background-color", "gold") // 兄弟变金色
.parent().css("background-color", "pink") // 父级变粉色
.siblings().css("background-color", "blue") // 父级的兄弟变蓝色
.children().css("background-color", "yellowgreen") // 父级的兄弟的子级变黄绿色
})
jQuery 其他关系查找方法
- find() 后代元素
• jQuery 对象可以利用 find() 方法，传递一个参数，参数部分规定的选择器，查范围是jQuery 对象的所有后代。
• 参数是字符串格式的选择器。 - 兄弟元素
next() 下一个兄弟
prev() 上一个兄弟
nextAll() 后面所有兄弟
prevAll() 前面所有兄弟 - parents() 祖先级
parents() 查找包含body在内的祖先级
Jquery排序和动画
jQuery 排序和方法
- eq() 方法（大排序）
- jQuery 中获得的对象，内部包含选择的一组原生 js 对象，在 jQuery 对象中会进行一个大的排序，这个排序与原来的 HTML 结构没有关系
- eq() 方法在 jQuery 对象中通过下标获取某个对象，下标是 jQuery 对象中的大的排序的下标
- index() 方法（在兄弟中的排序）
得到的是它自己在 HTML 结构中的兄弟中的下标位置。与jQuery 大排序没有关系。 - 排他思想：在一些事件中，希望自己是特殊的，而它的兄弟们是默认的
- 排它方法：jQuery 中可以让 this 特殊设置，让兄弟 siblings 设置成默认
-自己的级别的排他：给自己this添加 current 类名，让其他的兄弟删除 current 类。 - 对应的部分的排他：给对应位置的元素添加 current，其他的兄弟删除 current 类。
- 找对应关系，使用的是自己的 index() 下标，让另一组中下标相同的项作为对应项。
- 通过选中另一组的对应项利用 eq() 方法选择下标项
// 获取所有的 span
var $span = $(".tab .title span");
// 添加鼠标移上事件
$span.mouseenter(function () {
// 利用变量存储 this 的下标
var idx = $(this).index();
// 自己级别的排他
$(this).addClass("current").siblings().removeClass("current");
// 对应级别的排他
$(".tab .detail ul").eq(idx).addClass("current").siblings().removeClass("current");
})
• 以上方式在一个 tab 栏效果中没有问题。
• 在一个网页中，可能会出现多个相同 tab 栏结构，只有第一个 tab 栏中的列表项会进行
切换
- Tab 栏优化
<script>
// 获取所有的 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");
})
</script>
解决方法：span 和 ul 的查找全部使用链式调用，通过节点关系查找
- each() 遍历
- each()方法
参数是一个函数。
作用：就是对 jQuery 对象中的元素每一个都执行函数内部的操作。
each 方法的基本原理就是 for 循环，从对象的下标为 0的项一直遍历到最后一项，然后对每一项进行操作
1.each 的函数内部，也有一个 this，指向的是进来遍历的每一次的元素
2.each 的函数可以传一个参数 i，i 表示的是这一次的遍历对象在整体的 jQuery 对象大排队中的下标位置
jQuery 中的入口函数
- 原生的 window.onload
- jQuery 中的入口函数
- 语法1：
$(document).ready(function(){
// 获取元素
}); - 语法2：
$(function(){
// 获取元素
});
• onload 事件，等待所有的页面中的资源（DOM树、图片、视频、音频等外部资源）加载完毕之后，才会执行
• jq 的入口函数,仅仅需要等待 DOM 树加载完成就立即执行
jQuery 切换效果方法
- 显示隐藏方法
hide()：元素隐藏，隐藏的前提必须是元素 display:block；
show()：元素显示，显示的前提必须是元素 display:none;
toggle()：在元素隐藏和显示之间进行切换。
- 如果不传参数：直接显示和隐藏，没有过渡动画
-
如果传递参数：
- 单词格式："slow","normal", "fast"
- 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画
• 这三个方法可以设置元素的显示和隐藏效果，在过程中还可以出现过渡动画。
- 滑动显示隐藏
slideDown()：滑动显示（方向不一定）
slideUp()：滑动隐藏
slideToggle()：滑动切换
让元素在 display 属性的 block 和 none 之间进行切换
- 如果不传参数：默认的过渡时间为 400 毫秒。
-
如果传递参数：
- 单词格式："slow","normal", "fast"
- 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画。
• 如果滑动的元素没有设置宽高，没有滑动效果。
• 如果元素设置了高度和宽度，会进行上下垂直方向的滑动。
• 动画的效果：高度属性在 0 到设置值之间的变化，没有透明度动画。
• 如果元素设置了定位，偏移量方向如果是 bottom 参与了，滑动方向会发生变化。
- 淡入淡出
fadeIn()：淡入，透明度逐渐增大最终显示。
fadeOut()：淡出，透明度逐渐降低最终隐藏。
fadeToggle()：切换效果。
adeTo()：淡入或淡出到某个指定的透明度。
动画效果，执行的是透明度动画。也是在 display 属性的 block 和 none 之间切换
- 如果不传参数：默认的过渡时间为 400 毫秒。
-
如果传递参数：
- 单词格式："slow","normal", "fast"
- 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画
animate() 动画方法
- animate()方法
• 语法：$(selector).animate(styles,speed,easing,callback)
• 参数1： css 的属性名和运动结束位置的属性值的集合。
• 参数2：可选，规定动画的速度，默认是 "normal"。其他值，“slow”、“normal”、“fast”，数字格式，单位为毫秒
参数3：可选，规定在不同的动画点中设置动画速度的 easing 函数，值包含 swing 和 linear
• 参数4：可选，animate 函数执行完之后，要执行的函数
• 注意：其他的运动方法比如 slideUp() 等，也有参数3 和参数4
$(this).animate({"left": 500},during,"swing",function () {
// 在运动结束后，让元素变红色
$(this).css("background","red")
})
- 动画排队
- ①同一个元素对象身上，如果定义了多个动画，动画会排队等待执行。
// 排队执行下面动画代码
$box1.animate({"left": 400,"top": 400},during)
$box1.animate({"left": 400},during)
$box1.animate({"top": 400},during)
$box1.animate({"left": 0},during)
$box1.animate({"top": 0},during)
$box2.animate({"top": 400},during)
• ②如果是不同的元素对象都有动画，不会出现排队机制。
//不需要排队，同时执行动画代码
$box1.animate({"top": 0},during)
$box2.animate({"top": 400},during)
• ③非运动的代码，关于同一个元素对象的，也不会排队
$box1.css("height",100)
• ④之前学习的自带动画的显示隐藏方法，如果设置给同一个元素，也有动画排队。
$box1.mouseenter(function () {
$(this).children().slideUp(during)
})
$box1.mouseleave(function () {
$(this).children().slideDown(during)
})
• 同一个元素身上的多个运动，可以简化成链式调用的方法。
$box1.children().fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)
delay() 延迟方法
- 动画延迟
• 将 delay() 设置在某个运动方法之前，表示后面的运动要在规定的时间之后再执行，有延迟运动的效果。
• 参数：时间的数值，表示延迟的时间。
• 除了 animate 方法之外，其他的运动方法也有延迟效果
// 延迟
$box1.animate({"left": 500},during);
$box2.delay(2000).animate({"left": 500},during);
- stop() 停止动画方法
• stop() 作用：设置元素对象身上的排队的动画以何种方式进行停止。
• 有两个参数，都是布尔值。
• 参数1：设置是否清空后面的动画排队，如果是 true 表示清空，如果是 false 表示不清空只停止当前的一个动画。
• 参数2：设置当前动画是否立即完成，如果是 true 表示立即完成，对象会立刻走到结束位置，如果是 false 表示不完成当前动画，立即停止在当前位置。
• 默认情况下，两个参数值默认值为 false。
• 根据两个参数的值，可以得到四种停止方式
// 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)，,第二个参数不设置默认为 false
- 清空动画排队
- 动画排队问题
• 如果将开启运动的程序放在一个事件函数中，事件多次被触发，会执行多次函数，就会在一个元素身上添加了多个动画，会进行动画排队。
• 需要去清除排队的动画，进行防骚扰操作 - 解决方案一：
• 利用 stop() 方法。
• 在每一个运动函数之前都增加一个 stop(true)，表示在运动执行之前，会将前面排队的动
画清空，然后停止在当前位置。
$box1.mouseenter(function () {
$(this).children().stop(true).slideUp(during)
})
$box1.mouseleave(function () {
$(this).children().stop(true).slideDown(during)
})
- 解决方案二：
• 利用函数节流方法，如果元素在运动，直接 return，不要执行后面的运动代码。
• 每个 jQuery 对象，都能调用一个 is() 方法，作用是显示元素对象的某种状态。
• 如果参数位置是 is(“:animated”),返回值是布尔值，true 表示正在运动，false 表示
没有运动
// 清空动画排队方法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)
})
