jQuery导入

<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>

jQuery的入口函数

等着页面DOM加载完毕再执行js代码，相当于原生js中的DOMContentLoaded

$是jQuery的别称，$同时也是jQuery的顶级对象，相当于原生的window

1. $(document).ready(function(){})
2. $(function(){})建议使用

jQuery对象：利用$把DOM元素进行了包装$('div');，用伪数组存储

DOM对象只能使用原生的js属性和方法，jQuery对象只能使用jquery方法

1. DOM对象转换为jQuery对象 $('div');
2. jQuery对象转换为 DOM对象（两种方法）
   • $('div')[index];
   • $('div').get(index);

jQuery选择元素

单引号或者双引号都可以，跟css选择器差不多

基本选择器

1. $("#id") ID选择器
2. $("p") 标签选择器
3. $(".class") 类选择选择器
4. 交集(紧贴)、并集(,)、全选择器(*) ……
5. $(this) 选择当前元素，this不要加引号

层级选择器

1. $("ul>li") 子代选择器(亲儿子)
2. $("ul li") 后代选择器

筛选选择器

1. $("li:first") 获取第一个li
2. $("li:last") 获取最后一个li
3. $("li:eq(index)") 获取索引号为index（从0开始的）的li
4. $("li:odd") 获取索引号为奇数的li
5. $("li:even") 获取索引号为偶数的li

筛选方法（重点）

剩下的再去查

1. $(".son").parent()返回亲爸爸 （重点记住）
   $(".son").parents('选择器')返回指定祖先元素（重点记住）
2. $(".nav").children("p") 亲儿子；（重点记住）
   $("nav").find("p") 所有孩子 （重点记住）
3. $(".first").siblings("li") 查找兄弟节点不包括自己本身 （重点记住）
4. $(".first").nextAll() 查找当前元素之后的所有同辈元素
5. $(".first").preAll() 查找当前元素之前的所有同辈元素
6. $("li").eq(index) 这个相比下更容易放变量进去 相当于$("li:eq(index)") （重点记住）

jQuery隐式迭代（重要）

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代

简单理解：给匹配到的所有元素进行循环遍历并执行相应的方法，而不用我们再进行循环

$("div").css("background","pink") 直接就是给所有div设置了样式，原生js则需要循环

案例：jQuery中的排他思想

案例：淘宝服饰精品案例分析

1. jQuery得到当前元素索引号：$(this).index()
2. 通过eq(index)的方法就可以选择对应第几张图片显示出来
3. jQuery中.show()显示元素，hide()隐藏元素

jQuery链式编程

$(this).css('color','red').sibling().css('color','');

jQuery样式操作

操作css方法

1. 参数只写属性名，则是返回属性值 $(this).css('color');
2. 参数是属性名，属性值(逗号分隔)，则是设置一组样式 $(this).css('color','red');。属性必须加引号，值如果是数字可以不跟单位和不加引号
3. 参数是对象，则可以设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号。$(this).css("color":"red",width:30 )。如果是复合属性，采用驼峰命名法，如backgroundColor

修改样式操作类（建议使用）

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点

1. 添加类：$("div").addClass("current"); 相当于追加类名。不覆盖，下同。
2. 删除类：$("div").removeClass("current");
3. 切换类：$("div").toggleClass("current"); 有这个类名就给你去掉，没这个类名就给你加上

案例：tab栏切换

jQuery效果

隐藏hide()、显示show()、切换toggle()。很少用参数。

向下滑动slideDown()、向上滑动slideUp()、切换slideToggle()

• 可以给参数，如slideDown([speed],[easing],[callback])

推荐好用方法！！！：事件切换

如果里面只写一个函数，表示鼠标经过和鼠标离开都会触发这个函数

$(selector).hover(inFunction,[outFunction])它是鼠标经过和离开的复合写法

• inFunction 必需 规定 mouseenter 事件发生时运行的函数。
• outFunction 可选 规定 mouseleave 事件发生时运行的函数。

案例：导航栏菜单下拉&上收

停止动画排队stop （短时间多次触发，会造成多个动画排队并做完）

• stop()写在动画或者效果的前面。触发时，停止上一个动画效果，只执行现在的动画。

淡入fadeIn(speed,callback)、淡出fadeIn(speed,callback)、切换fadeToggle(speed,callback)、渐变为给定的不透明度fadeTo(speed,opacity,callback)，这里的速度和不透明度必写

案例：高亮显示

自定义动画animate(params,[speed],[easing],[callback])

• params为想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，若是复合属性要用驼峰命名法
• 可选的 speed 参数规定效果的时长。它可以取以下值：slow、fast 或毫秒。
• 可选的 callback 参数是动画完成后所执行的函数名称。

案例：王者荣耀手风琴

• 布局 ul->li->a{small图,big图}

jQuery属性操作

设置或获取元素固有属性值

获取prop("属性") 设置prop("属性","属性值")

设置或获取元素自定义属性值

获取attr("属性") 设置attr("属性","属性值")

数据缓存data()

• data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据将被移除

获取数据data("name") 附加数据`data(“name”,”value”)

data("index")还可以获取H5自定义属性data-index，得到的是数字型

购物车案例

• 上有一个全选按钮，下也有一个全选按钮

• :checked选择器 查找被选中的表单元素

jQuery内容文本值

注意得到的是字符串，要计算前记得parseInt或者parseFloat

获取设置元素文本内容text() 相当于原生innerText

• 获取$("div").text()
• 设置$("div").text("123")

获取设置元素内容html() 相当于原生innerHTML

• 获取$("div").html()
• 设置$("div").html("123")

获取设置表单值val() 相当于原生value

• 获取$("input").val()
• 设置$("input").val("123")

jQuery元素操作

• 主要是遍历、创建、添加、删除元素操作

遍历元素

• 如果是对同一类元素做相同操作，隐式迭代即可
• 但如果对同一类元素做不同操作，需要用到遍历元素（类似for，但比for强大）

$(selector).each(function(index,domEle){})

• domEle是DOM元素对象，如果要想使用jQuery方法，需要转换为jQuery对象

$.each($(selector),function(index,element){})

• 遍历任何对象,主要用于遍历数据，处理数据，比如遍历数组，对象。

创建元素

• var li= $("<li></li>") 动态创建了一个[HTML_REMOVED]

添加元素

• 内部添加：父子关系
element.append(li)后面添加。类似于原生jsappendChild()
element.prepend(li)orelement.prepend("<li></li>")前面添加。类似于原生jsprependChild()
• 外部添加：兄弟关系
element.after(li)后面添加
  element.before(li)前面添加

删除元素

• $("ul").remove()删除匹配元素本身
• $("ul").empty()删除匹配元素集合内所有子节点
• $("ul").html("")清空匹配元素内容

jQuery尺寸

如果参数为空则为获取（返回数字型），参数为数字则是修改相应值。参数不必写单位。

• width()、height() 只算width、height
• innerWidth()、innerHeight() 包含padding
• outerWidth()、outerHeight() 包含padding、border
• outerWidth(true)、outerHeight(true) 包含padding、border、margin

jQuery位置操作

• 获取设置距离文档的位置（偏移）offset()
offset.top获取距离文档顶部 offset().left获取距离文档左侧
  offset({ top:10; left:30 })设置元素的偏移
• 只能获取距离带有定位父级位置（偏移）position()
$(".son").position()

scrollTop() scrollLeft() 获取设置元素被卷去的头部和左侧

• 没参数是获取，有参数是设置。
• 注意是元素做动画。animate动画函数里面有个scrollTop属性，可以设置位置。
  $(document).stop().animate({scrollTop:0;})是错的，不能是文档
  $("body,html").stop().animate({scrollTop:0;})是对的，要进行包装一下

注意区别：$(window).scroll(function(){}) 页面滚动事件
$(document).scrollTop() 页面滚动距离

案例：电梯导航

• 点击按钮滚动到目标位置

• 滚动到页面对应按钮高亮

• 修复bug，单纯上面两个这样搭配的话，就会出现点击按钮的时候触发滚动事件（使得点击5再点击3时，5，4，3都亮了一遍）
  即当我们点击了小li 此时不需要再执行页面滚动事件里面的 li添加current操作
  处理办法：节流阀 互斥锁

jQuery事件

jQuery事件注册

基本事件与原生基本一致。

比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等

单个事件注册

• element.事件(function(){})
• $("div").click(function(){})

jQuery事件处理

新的绑定事件方法：事件处理on()绑定事件。

优势1：可以绑定多个事件

element.on(events,[selector],fn)

• events:一个或多个用空格分隔的事件类型，如”click”或”keydown”
• selector:元素的子元素选择器（可用于事件委派中）

优势2: 可以事件委派

在此之前有bind()、live()、delegate()、等方法来处理事件绑定或委派，最新版本请用on替代他们。

注意：事件委派时，this指向的是ul里面触发到click的“具体”元素，也就是li。等同于event. target

优势3: 动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件

案例：微博发布

• 动态创建小li后，小li记得让li.slideDown()，让新建评论后有滑动出来的效果。
• 点击删除按钮后，让此小li上滑之后remove

事件处理 off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序

• $("p").off() 解绑p元素所有事件处理程序
• $("p").off("click") 解绑p元素上面的点击事件
• $("ul").off("click","li") 解绑事件委托

如果有的事件只想触发一次，可以使用one()来绑定事件

• $("p").one("click",function(){})那点击p一次之后再点击就无效了

自动触发事件trigger()

• 有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致，可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
• element.click()第一种简写方式
• element.trigger("click")第二种自动触发模式
• element.triggerHandler("click")第三种自动触发模式。不会触发元素的默认行为

jQuery事件对象

• 事件被触发，就会有事件对象的产生

  element.on(events,[selector],fn(e){})

• 阻止默认行为：event.preventDefault()或者return false
• 阻止冒泡：event.stopPropagation()

jQuery其他方法

对象拷贝

$.extend( [deep ], target, object1 [, objectN ] )

会覆盖object里面原来的数据

• deep 可选。默认flase 浅拷贝。true深拷贝。浅拷贝是把被拷贝对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
• target 要拷贝的目标对象
• object1 可选。 待拷贝到第一个对象的对象
• objectN 可选。 待拷贝到第N个对象的对象

多库共存

1. 如果$符号冲突，我们就用jQuery代替$
jQuery.each()
2. 可以让jQuery释放对$的控制权，让用户自己决定
   var suibian= jQuery.noConflict()
suibian.each()相当于$.each()

jQuery插件

jQuery插件常用网站

1. jQuery插件库
2. jQuery之家

图片懒加载技术 插件EasyLazyload.js

注意：必须在DOM元素（图片）最后面引用懒加载js文件和js调用

vscode里ctrl+h可以实现替换功能

全屏滚动 插件fullPage.js

• github网址
• 中文翻译网站

Bootstrap 组件

引入bootstrap里的css、jquery.js、boostrap.js文件后，再去选你喜欢的东西，复制它的html结构过来就行了

案例：todolist

• 要保证生命周期永久生效，除非手动删除，否则关闭页面也会存。采用本地存储localStorge
• 本地存储localStorge只能存储字符串格式，因此需要把对象转换为字符串JSON.stringify(data)
• 获取过来后，要把字符串数据转换为对象格式JSON.parse(data)
  • 存储数据：
    localStorage.setItem(key,value);
  • 获取数据：
    localStorage.getItem(key);
• 存储的数据格式：todolist=[ {title:”xxx”,done:false} ]，到时候获取过来就是var data=localStorge.getItem("todolist");然后再JSON.parse(data)获得这个数组。

• 本地存储数据渲染加载到页面中，注意每次渲染前需要清空ol元素内容再渲染。页面加载要load一次，换行事件完成最后要load一次，如果load里渲染前不清空元素再渲染，会导致重复加载元素。

{:height=”50%” width=”50%”}