day01
1.1 jQuery
作用:写的少,做的多
1.2使用步骤
引入 jQuery 文件
添加入口函数(非必须,可以写在html上面,提高安全性,每个入口都是独立的)
加钱干活($),在入口函数中调用封装好的api实现页面效果
1.3jQuery 的基本使用
1.$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替 $,但一般为了方便,通常都直接使用 $ 。
2.$ 是jQuery 的顶级对象,把元素利用$包装成jQuery对象,就可以调用jQuery 的方法。
3.它的常用方式:
添加入口函数
获取元素
dom元素转换为jQuery对象
创建元素
注意:只有jQuery对象才能调用jQuery封装的方法
1.4jQuery 对象和 DOM 对象
1.用原生 JS 获取来的对象就是 DOM 对象
2.jQuery 方法获取的元素就是 jQuery 对象。
3.jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)。
注意:
只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法。它们的api不能混用哦。
4.DOM 对象与 jQuery 对象之间是可以相互转换的。
\1. DOM 对象转换为 jQuery 对象: $(DOM对象)
$('div')
\2. jQuery 对象转换为 DOM 对象(两种方式)
$('div') [index] index 是索引号
$('div') .get(index) index 是索引号
2.jQuery 选择器
2.1 jQuery 基础选择器
2.2jQuery 筛选选择器
2.3 jQuery 筛选方法(重点)
重点记住: parent() children() find() siblings() eq() next()
3.jQuery 样式操作
3.1样式操作方法
单个:css('属性名','属性值')
多个:css({属性名:'属性值';属性名2:'属性值2'})
3.2类操作
addClass()添加类
removeClass()移除类
toggleClass()切换类
hasClass()判定是否存在类
4.jQuery 效果
参数1:速度,默认normal(400),常用三种(slow(200)、normal(400)、fast(600);
参数2:变化规则,默认是“swing”,可用参数“linear”;
参数3:回调函数,在动画完成时执行的函数,每个元素执行一次。
自定义动画 animate
animate({CSS样式},参数1,参数2,参数3)
动画队列及其停止排队方法
stop()写到动画或者效果的前面, 相当于停止结束上一次的动画。
day02
1.jQuery 属性操作
1.设置或获取元素固有属性值:prop(''属性'')
设置属性语法:prop(''属性'', ''属性值'')
2.设置或获取元素自定义属性值:attr(''属性'') // 类似原生 getAttribute()
设置属性语法:attr(''属性'', ''属性值'') // 类似原生 setAttribute()
注意:
操作状态值的时候(如'checked','selected','disabled'等)只能使用prop,否则无法获取到想要的结果
3.数据缓存 data()
data(''name'',''value'') // 向被选元素附加数据
data() // 获取元素所有自定义属性,返回一个对象
data(''name'') // 向被选元素获取抒写名称的自定义属性数据
2.jQuery 内容文本值
1. 普通元素内容 html()( 相当于原生inner HTML)
html() // 获取元素的内容
html(''内容'') // 设置元素的内容
2.普通元素文本内容 text() (相当与原生 innerText)
text() // 获取元素的文本内容
text(''文本内容'') // 设置元素的文本内容
3. 表单的值 val()( 相当于原生value)
val() // 获取表单的值
val(''内容'') // 设置表单的值
3.jQuery 元素操作
1.遍历元素
jq对象遍历:jq对象.each(回调函数(下标,形参))
普通对象遍历:$.each(普通对象,回调函数(下标,形参))
2.创建元素
$(''<li></li>'');
3.添加元素
内部添加:
元素.append(''内容'') //添加在内部最后面
元素.prepend(''内容'') //添加在内部最前面
外部添加:
元素.after(''内容'') //添加在目标元素后面
元素.before(''内容'') //添加在目标元素前面
4.删除元素
元素.remove() //删除本身元素
元素.empyt() //删除元素里面的所有节点
元素.html('''') //值为空时是删除所有,有值时为改修内容
4.jQuery 尺寸、位置操作
4.2jQuery 位置
位置主要有三个: offset()、position()、scrollTop()/scrollLeft()
1. offset() 设置或获取元素偏移
① offset() 方法设置或返回被选元素相对于**文档**的偏移坐标,跟父级没有关系。
② 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离,offset().left 用于获取距离文档左侧的距离。
③ 可以设置元素的偏移:offset({ top: 10, left: 30 });
2. position() 获取元素偏移
① position() 方法用于返回被选元素相对于**带有定位的父级**偏移坐标,如果父级都没有定位,则以文档为准。
② 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离,position().left 用于获取距离定
位父级左侧的距离。
③ 该方法只能获取。
3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧**
① scrollTop() 方法设置或返回被选元素被卷去的头部。
② 不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部。