三天快速学习jQuery
2021-07-29 11:57:44 1 举报AI智能生成
前端学习必备，暑期带你不走偏三天快速学习jQuery
作者其他创作
大纲/内容
第一天
jQuery 的概念
javaScript库
jQuery的优点
轻量级
基本兼容主流的浏览器
链式编程、隐式迭代
简化DOM操作、对事件,动画,支持
支持插件扩展开发
免费开源
常见的javaScript库
jQuery 基本使用
jQUery的下载
jQuery的入口函数的两种方式
$(function() { )
$(document).ready( function() { } )
jQuery的顶级对象 $
操作jQuery文件提供的属性和方法，
$是jQuery的别称，同时也是jQuery的顶级对象
jQuery对象和DOM对象
1. 用原生 JS 获取的对象就是 DOM对象
2. jQuery 方法获取的元素就是 jQuery 对象
3. jQuery对象本质是: 利用$对DOM对象包装产生的对象(伪数组形式)
4. 只有jQuery对象才能使用jQuery方法,DOM对象则使用原生的JS方法
jQuery对象 和 DOM对象相互转换
1. DOM对象转换jQuery对象: $('div')
2. jQUery对象转换DOM对象
$('div')[ index ]
$('div').get(index)
jQuery 常用的API
jQuery基础选择器
$('里面直接写CSS选择器即可')
jQuery筛选选择器
$(' li:first ') ····
jQuery筛选方法
$(' li ').sibling( selector ) ····
隐式迭代
遍历内部DOM元素的过程叫做隐式迭代
链式编程
多行代码合并成一行代码,前提要认清此行代码返回的是不是对象
获取当前索引index()
index(): 会返回当前元素所在兄弟元素里面的索引
jQuery 样式操作
操作CSS方法
1. 获取属性值: $(this).css(' color ')
2. 设置一组样式: $(this).css(' color ',' red ')
3. 设置多组样式: $(this).css( {"color":"skyblue",width:200 } )
设置类样式方法
作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点
1. 添加类: $('div').addClass(' current ')
2. 移除类: $('div').removeClass(' current ')
3. 切换类: $('div').toggleClass(' current ')
jQuery 效果
显示隐藏效果
1. 显示: show( [speed],[easing],[fn] )
2. 隐藏: hide( [speed],[easing],[fn] )
3. 切换: toggle( [speed],[easing],[fn] )
滑动效果
1. 下滑效果: slideDown( [speed],[easing],[fn] )
2. 上滑效果: slideUp( [speed],[easing],[fn] )
3. 切换滑动: slideToggle( [speed],[easing],[fn] )
动画队列及停止方法
动画队列一旦出发就会执行,如果多次触发,就造成多个动画效果排队执行
停止排队: stop()
stop() 写到动画或者效果的前面,相当于结束上一次动画
淡入淡出效果
1. 淡入效果: fadeIn( [speed],[easing],[fn] )
2. 淡出效果: fadeOut( [speed],[easing],[fn] )
3. 切换淡入淡出: fadeToggle( [speed],[easing],[fn] )
4. 动画形式指定不透明度: fadeTo( speed, opacity ,[easing],[fn] )
自定义动画
animate(params,[time],[easing],[fn])
params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号
speed: 动画时长的毫秒数值
easing: 动画运动曲线
回调函数，在动画完成时执行的函数，每个元素执行一次。
事件
切换事件 hover(over,out)
hover([over],out)
over: 鼠标移入触发的事件
out: 鼠标移出出发的事件
如果只写一个函数，则鼠标经过和离开都会触发他
第二天
jQuery 属性操作
设置/获取元素固有属性 prop()
1. 获取属性值: prop('属性名')
2. 设置自带属性: prop("属性名","属性值")
设置/获取元素自定义属性 attr()
1. 获取自定义属性值: attr("属性名")
2. 设置自定义属性: attr("属性名","属性值")
数据缓存 data()
data() 方法可以在指定的元素存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存储的数据都将移除。
1. 添加数据 : data("key",value) //向元素添加数据,类似变量
2. 获取数据: data("key") //获取元素添加的数据值
jQuery 文本内容
普通元素内容 html()
1. 获取元素的内容: html()
2. 设置元素的内容: html("内容")
普通元素文本内容 text()
1. 获取元素文本的内容: text()
2. 设置元素文本的内容: text("内容")
表单的值 val()
1. 获取表单的值: val()
2. 设置表单的值("内容")
jQuery 元素操作
遍历元素
语法1: $.each(function (index, domEle) { xxx; }
语法2: $.each(object,function (index, element) { xxx;})
遍历DOM对象推荐使用 $("div").each() 遍历数组、对象推荐使用 $.each()
创建元素
添加元素
内部添加
把内容放到元素最后面: ele.append("内容")
把内容放入匹配元素最前面: ele.prepedn("内容")
外部添加
ele.after("内容")
ele.before("内容")
内部和外部区别:
内部添加元素，生成之后，他们是父子关系
外部添加元素，生成之后，他们是兄弟关系
删除元素
element.remove() 删除匹配的元素(本身)
element.empty() 删除匹配的元素集合中所有的子节点
element.html() 清空匹配的元素内容
jQuery 尺寸、位置操作
jQuery 尺寸
width() / height()
innerWidth() / innerHeight()
outerWidth() / outerHeight()
outerWidth(true) / outerHeight(true)
jQuery 位置
offset()
1.获取元素距离文档的top值: ele.offset().top
2. 设置元素的偏移: ele.offset({ top: 10,left 30})
position()
只读,不能设置
1. 返回父级带有定位的偏移坐标,如果父级没有定位,则以文档为主
position().top ···
scrollTop()/scrollLeft()
scrollTop() 方法设置或返回元素被卷曲的头部
不跟参数是获取,参数不带单位则是被卷曲的头部
文档卷曲事件
$(window).scroll(function () { })
获取页面卷曲的top值：$("html,body").scrollTop()
拓展
节流阀
当某段代码当什么时候不想执行，可以使用节流阀：`` var flag = true ``
楼层下滑
点击楼梯：获得当前点击的索引值，根据索引值获得对应的元素，让该元素滚动下来
页面卷曲时(滚轮下滑): 遍历楼层``if(判断页面卷曲的top值 >= 每个元素的top { 获得当前楼层的索引值; })``，根据索引让对应的楼梯应用类样式
第三天
事件注册
单个事件注册
element.事件名 ( function () {} )
事件处理 on() 绑定事件
element.on( events, [ selector ] , fn)
on() 方法优势1：可以绑定多个事件，多个事件处理函数
on() 方法优势2：可以事件委托操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是事件委派给父元素
on() 方法优势3：动态创建的元素，click() 没有办法绑定事件，on() 可以给动态生成的元素绑定事件
事件处理 off() 解绑事件
$("p").off() // 解绑p元素所有事件处理程序
$("p").off("click") //解绑p元素上面的点击事件
$("ul").off("click","li") //解绑事件委托
自动触发事件 tigger()
element.click() // 第一种简写方式
element.trigger("type") // 第二种自动触发模式
案例
element.triggerHandler(type) // 第三种自动触发模式
riggerHandler() 模式不会触发元素地默认行为，这是和前两种地区别
一次性事件 one()
如果有的事件只想触发一次，可以使用 one() 来绑定事件
事件对象
事件被触发，就会有事件对象的产生
element.on(events,[selector],function(event) { })
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡：event.stopPropagation()
jQuery其他方法
jQuery 对象拷贝
如果想要把某个对象拷贝给另一个对象使用，此时可以使用 $.extent( ) 方法
语法: $.extent( [deep], targetObj, Obj, [ objN ] )
1、deep：如果设为true为深拷贝，默认为false 浅拷贝
2、target：要拷贝到的目标对象
3、obj：待拷贝的第一个对象
4、obj：待拷贝的第N个对象
2、target：要拷贝到的目标对象
3、obj：待拷贝的第一个对象
4、obj：待拷贝的第N个对象
一句话总结()：浅拷贝( 拷贝过去的是引用地址 ) 深拷贝( 拷贝过去的是完整的对象 )
多库共存
jQuery使用$作为标识符，随着jQuery的流行，其他js库也会用$作为标识符，这样一起使用会引起冲突
需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫多库共存
jQuery解决方案：
格式转换
1、将数组对象转换字符串
JSON.stringify(对象);//将数组对象转换字符串格式
将对象转换为字符串类型格式
2、将字符串类型转换为对象
JSON.parse(字符串);//将字符串类型转换对象类型
将字符串类型转换对象类
jQuery插件
1. 瀑布流
2. 图片懒加载
3. 全屏滚动
bootstrap JS 插件
0 条评论
下一页
