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