jq概述
JavaScript库：即library，是一个封装好的特定的集合（方法和函数），比如动画animate、hide、show，比如获取元素等
简单理解：就是一个js文件，里面对我们原生js代码进行了封装，存到里面，这样我们可以快速高效的使用这些封装好的功能了
常见的JavaScript库
- jQuery
- prototype
- YUI
- Dojo
- Ext JS
- 移动端的 zepto
jQuery的优点
- 轻量级。核心文件才十几kb，不会影响页面加载速度
- 跨浏览器兼容。基本兼容了现在主流的浏览器
- 链式编程、隐式迭代
- 对事件、样式、动画支持，大大优化了DOM操作
- 支持插件扩展开发。有着丰富的第三方插件，例如：树形菜单、日期控件、轮播图等
- 免费、开源
jQuery的基本使用
DOM对象和jQuery对象相互转换
-
DOM对象转换为jQuery对象：$(DOM对象)
-
jQuery对象转换为DOM对象
-
$(‘div’) [index]
- index是索引号
-
$(‘div’).get(index)
- index是索引号
-
jQuery常用API
jQuery选择器
-
基础选择器
- 全选选择器 ------>$(’*’)
- 类选择器------>$(’.class’)
- 标签选择器------>$(‘div’)
- 并集选择器------>$(‘div,p,li’)
- 交集选择器------>$(‘li.current’)
- id选择器------>$("#id")
-
层级选择器
-
子代选择器
-
$(“ul>li”);
使用>号，获取亲儿子层级元素
-
-
后代选择器
- $("ul li ");
使用空格，代表后代选择器
-
-
筛选选择器
-
:first
- 获取第一个li元素 $(‘li:first’)
-
:last
- 获取最后一个li元素 $(‘li:last’)
-
:ep(index)
- 获取到的li元素中，选择索引号为2的元素 $(‘li:ep(2)’)
-
:odd
- 获取到li元素中，选择索引号为奇数的元素 $(‘li:odd’)
-
:even
- 获取到li元素中，选择索引号为偶数的元素 $(‘li:even’)
-
jQuery筛选方法（重点）
-
语法
用法
说明 -
parent()
$('li').parent( ); 查找父级 -
children(selector)
$('ul').children('li')相当于 $('ul>li'),最近一级（亲儿子） -
find(selector)
$('ul').find('li') 相当于$('ul li'),后代选择器 后代全被选 -
siblings(selector)
$('.first').siblings('li') 查找兄弟节点，不包括自己本身 -
nextAll([espr])
$(.first).nextAll() 查找当前元素之后所有的同辈元素 -
prevtAll([expr])
$('.last').prevAll() 查找当前元素之前所有的同辈元素 -
hasClass(class)
$('div').hasClass('protected') 检查当前的元素是否有某个特定的类，如果有则返回true -
ep(index)
$("li").ep(2); 相当于$('li:ep(2)'),index从0开始
jQuery样式操作
-
jQuery设置样式
- $(‘div’).css(‘属性’, ‘值’)
-
隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
-
操作css方法
-
$(this).css(“color”);
- 参数只写属性名，则返回属性值
-
$(this).css(“color”, “red”);
- 参数是属性名，属性值，逗号分隔，是设置一组样式
-
$(this).css({“color”:“white”, “font-size”:“20px”});
- 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
-
-
设置类样式方法
-
$(“div”).addClass(“current”);
添加类‘
-
$(“div”).removeClass(“current”);
删除类
-
$(“div”).toggleClass(“current”);
切换类
-
jQuery效果
-
显示隐藏效果
-
显示
-
show([speed, [easing], [fn]])
- 参数可以省略
- speed：三种预定速度之一的字符串（“show”，“normal”，or “fase”）或表示动画时长的毫秒数值（如：1000）
- easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
-
-
隐藏
-
hide([speed, [easing], [fn]])
- 参数可以省略
- speed：三种预定速度之一的字符串（“show”，“normal”，or “fase”）或表示动画时长的毫秒数值（如：1000）
- easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
-
-
切换
-
toggle([speed, [easing], [fn]])
- 参数可以省略
- speed：三种预定速度之一的字符串（“show”，“normal”，or “fase”）或表示动画时长的毫秒数值（如：1000）
- easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
-
-
上滑动
- slideDown([speed, [easing], [fn]])
-
下滑动
- slideUp([speed, [easing], [fn]])
-
滑动切换
- slideToggle([speed, [easing], [fn]])
-
-
淡入淡出效果
-
淡入效果
- fadeIn([speed, [easing], [fn]])
-
淡出效果
- fadeOut([speed, [easing], [fn]])
-
淡入淡出切换
- fadeToogle([speed, [easing], [fn]])
-
修改透明度
-
fadeTo([[speed], opacity, [easing], [fn]])
- opacity透明度必须写，取值0~1之间
- speed：三种预定速度之一的字符串（“show”，“normal”，or “fase”）或表示动画时长的毫秒数值（如：1000） 必须写
- 速度和透明度必须要写
-
-
-
自定义动画animate
-
animate(params, [speed], [easing], [fn])
- params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取骆驼命名法
-
-
事件切换
-
hover
-
-
动画队列及其停止排队方法
-
停止排队
-
stop()
- stop()方法用于停止动画或效果
- 注意：stop() 一定要写到动画或者效果前面，相当于停止结束上一次的动画
-
-
jQuery属性操作
jQuery文本属性值
jQuery元素操作
-
遍历元素
- 语法1：
$("div").each(function (index, domEle) {xxx; })
1、each()方法遍历匹配的每一个元素，主要用DOM处理。each每一个
2、里面的回调函数有2个参数：index是每个元素的索引号；demEle是每个DOM元素对象，不是jQuery对象
3、所以要想使用jQuery方法，需要给这个dom元素转换为jQuery对象$(domEle)
- 语法2：
$.each(objact, function (index, element) {xxx; })
1、$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组、对象
2、里面的函数有2个参数：index是每个元素的索引号；element遍历内容
- 创建元素
$("<li></li>");
-
添加元素
-
内部添加
-
element.append(“内容”)
- 放到内容最后面
-
element.prepend(“内容”)
- 放到内容最前面
-
-
外部添加
-
element.after(“内容”)
- 把内容放到目标元素最后面
-
element.before(“内容”)
- 把内容放到目标元素最前面
-
-
内部添加元素，生成之后，他们是父子关系
-
外部添加元素，生成之后，他们是兄弟关系
-
-
删除元素
-
element.remove()
- 删除匹配的元素（本身）
-
element.empty()
- 删除匹配的元素集合中所有的子节点
-
element.html("")
- 清空匹配元素内容
-
jQuery尺寸、位置操作
jQuery事件
事件注册
- element.事件(function() {})
事件处理
-
on() 绑定事件
-
element.on(events, [selector], fn)
- events:一个或多个用空格分隔的事件类型，如click或keydown
- select：元素的子元素选择器
- fn:回调函数 即绑定在元素身上的侦听函数
-
-
off解绑事件
- $(“p”).off() // 解绑p元素所以事件处理程序
- $(“p”).off(“click”) // 解绑p元素上面的点击事件 后面的off是侦听函数名
- $(“p”).off(“click”, “li”) //解绑事件委托
-
自动触发事件
- element.click() // 第一种简写形式
- element.trigger(“type”) // 第二种自动触发方式
- element.triggerHandler(“type”) // 第三种自动触发方式
事件对象
- 阻止默认行为：event.preventDefault() 或者 return false
- 阻止冒泡：event.stopPropagation()
jQuery其他方法
jQuery拷贝对象
-
$.extend([deep], target, object1, [objectN])
- deep:如果设为true为为深拷贝，默认false 浅拷贝
- 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
- 深拷贝，前面加true，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象
- target：要拷贝的目标对象
- object1：待拷贝到第一个对象的对象
- 子主题 6
多库共存
- 如果有冲突，可以把$符号统一改为jQuery
- 或者自己定义,$.noConflict();
jQuery插件
jQuery尺寸和位置操作
jQuery尺寸
-
width() / height()
- 取得匹配元素宽度和高度值 只算width height
-
innerWidth() / innerHieght()
- 取得匹配元素宽度和高度值 包含padding
-
outerWidth() / outerHeight()
- 取得匹配元素宽度和高度值 包含padding 、border
-
outerWidrh(true) / outerHeight(trye)
- 取得匹配元素宽度和高度值 包含padding 、border、margin
jQuery位置
-
offset()设置或获取元素偏移
- offset方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
- 该方法有两个属性left、top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离
- 可以设置元素偏移：offset({top:10, left: 30});
-
position()获取元素偏移
- 这个方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
-
scrollTop()/scrollLeft()设置或获取被卷去的头部和左侧
- scrollTop()方法设置或返回被选元素被卷去的头部