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() 方法设置或返回被选元素被卷去的头部。

② 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

jQuery