jQuery就是一个封装了很多方法的js库,学习jQuery就是i学习方法的使用。
使用jQuery:
- 引入jQuery文件
- 写一个入口函数
2.1$(document).ready(function(){ });
2.2.$(function(){ alert("jQuery") });
jQuery版本:
- 1.*** 支持老浏览器比如ie678 停止更新
- 2.***不支持 停止更新
- 3.***不支持 更新中
- compressed 压缩版 用于发布 uncompressed 为压缩版,用于学习,开发
jQuery特性
- 隐式迭代
- 链式编程:一个方法返回的是一个jQuery对象,既然是jQuery对象就可以继续点出jQuery方法来
jQuery入口函数和window.onload的区别
- windows.onload不能有多个,jq入口函数可以有多个
- 执行时机不同:jq要快于windows.onload
a.jQuery入口函数要在Dom树加载完毕后执行
b.windows.onload要等页面上所有资源(Dom树/外部css/js链接/图片)加载完毕后执行
jQuery文件结构:
- 引入一个js文件,是会执行这个js文件中的代码的
- jQuery文件是一个自执行函数
- 这个自执行文件就是给windows对象添加一个jQuery属性和$属性
- $和jQuery是等价的,是一个函数
- $是一个函数,传递参数不同,效果也不一样
5.1如果参数传递的是一个匿名函数–入口函数
5.2如果参数传递的是一个字符串(’#one’)/(123456789)–选择器/创建一个标签
5.3如果参数传递的是dom对象,就会把dom对象转换成jQuery对象
dom对象和对象Query
-
dom对象:原生js选择器获取到的对象
特点:只能调用dom方法或者属性,不能调用jQuery的属性或者方法 -
jQuery对象:用jQuery选择器获取到的对象,jQuery变量用$开头,是一个伪数组,是dom对象的一个包装集
特点:只能调用jQuery的方法或者属性,不能调用dom对象的属性或者方法 -
dom对象转换成jQuery对象:
-
jQuery对象转换成dom对象
4.1使用下标取出来:
4.2使用jQuery的方法 get():
获取、设置文本 text()
-
获取文本–text()方法不给参数:
1.1会获取到这个标签中所有的文本,包括后代元素的文本
1.2获取标签为div元素们的文本:包含多个dom元素的jQuery对象,通过text()方法获取文本,会把所有dom元素的文本获取到 -
设置文本–text()方法给参数,参数就是要设置的文本:
2.1 设置文本会覆盖原来的内容,如果设置的文本包含标签,是不会把标签解析出来的
2.2 设置标签为div元素们的文本:包含多个dom元素的jQuery对象,通过text()方法设置文本,会把所有dom元素都设置上
获取、设置样式 css()
- 获取样式–css()方法设置参数为要获取的样式名:
1.1获取标签为div元素们的样式:包含多个dom元素的jQuery对象,只能获取第一个dom对象的样式
- 设置样式–css(样式名,样式值),设置的样式是行内样式:
2.1 设置id为div1的样式
2.2 设置标签为div元素们的样式:包含多个dom元素的jQuery对象,通过css()方法设置样式,隐式迭代会把所有dom元素都设置上
获取、设置表单内容 val()
- val()方法,不给参数就是获取
- val()方法,给参数就是设置
选择器
jQuery选择器是jQuery为外卖提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象
show() hide()
show()方法本质上是改变display属性为block
hide()方法本质上是改变display属性为none
mouseover 事件 mouseenter 事件
mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。
mouseenter 事件只在鼠标移动到选取的元素上时触发。
mouseleave 事件只有在鼠标指针离开被选元素时被触发。
mouseout 事件在鼠标指针离开任意子元素时也会被触发。
class类操作
- addClass(‘类名 类名’) - 向被选元素添加一个或多个类
- removeClass(‘类名 类名’) - 从被选元素删除一个或多个类,没有参数,移除全部类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- hasClass() - 判断一个元素有没有某个类,如果有返回true,如果没有返回false
jQuery动画
显示show()与隐藏hide()
- 显示 show()
参数1:代表执行动画的时长 毫秒数,也可以是代表时长的字符串(fast normal slow )
参数2:代表动画执行完毕后的回调函数
1.1. 如果show()这个方法没有参数,那就没有动画效果
- 隐藏 hide()
参数1:代表执行动画的时长 毫秒数,也可以是代表时长的字符串(fast normal slow )
参数2:代表动画执行完毕后的回调函数
2.1没有参数,没有动画效果 - 切换 toggle()
如果隐藏就显示,如果显示就隐藏
滑入slideDown()与滑出slideUp
- 滑入 slideDown() 参数不填,默认400毫秒
- 滑出 slideUp() 参数不填,默认400毫秒
- 切换 slideToggle()
淡入fadeIn()与淡出fadeOut
- 淡入 fadeIn() 参数不填,默认400毫秒
- 淡出 fadeOut 参数不填,默认400毫秒
- 切换 fadeToggle()
- 淡入到哪里 fadeTo() 参数1:时间 参数2:透明度
自定义动画animate
参数1:必选的 对象 代表的是需要做动画的属性
参数2:可选 代表执行动画的时长
参数3:可选 easing 代表缓动还是匀速 swing linear默认swing
参数4:代表动画执行完毕后的回调函数(可以调动画)
动画队列与停止动画
stop()方法:停止动画效果
参数1:是否清除队列 是否停止其他动画
参数2:是否跳转到最终效果 是否完成当前动画
默认stop(false,false)
动态创建元素
原生js中创建节点:document.write(); innerHTML; document.createElement()
jQuery创建节点:html() $()
11. html():设置或者获取内容
1.1获取内容:html() 方法不给参数,获取到元素的所有内容
1.2设置内容:html()方法给参数 会把原来内容给覆盖,如果设置的内容中包含标签,是会把标签解析出来的
12. $():能创建元素,但是创建的元素只存在与内存中,如果要在页面上显示,就要追加
jQuery节点
添加节点
- append()
父元素.append(子元素) 作为最后一个子元素添加 - prepend()
父元素.prepend(子元素) 作为第一个子元素添加 - before()
元素A.before(元素B) 把元素B插入到元素A前面,作为兄弟元素添加 - after()
元素A.after(元素B) 把元素B插入到元素A后面,作为兄弟元素添加 - appendTo()
子元素.append(父元素) 作为最后一个子元素添加
清空节点
父元素.empty();
移除节点
自己元素.remove();
克隆节点
clone(); 只存在内存中,如果要在页面上显示,就要追加
clone()方法参数不管是true还是false,都是会克隆后代节点的
clone()方法参数是true表示会把事件一起克隆到,如果是false就不会克隆事件 不给参数默认是false