javaScript库
- 即library,是一个封装好的特定的集合(函数和方法),里面封装了很多预先定义好的函数再里面,利用它我们可以高效的使用这些封装好的功能. 如jQuery ,就是对原生的javaScript的封装,内部都是用javaScript实现的.
- 学习jQuery就是学习调用里面的函数和方法;
- jQuery的优点:轻量级,核心文件只有十几kb.跨浏览器兼容,基本兼容了现在主流的浏览器,链式编程,隐式迭代.
- 隐式迭代:给匹配到的所有元素进行循环遍历,执行相应的方法,不用再进行循环,每个都会有效果.
- 链式编程:为了节省代码量,规划了更简约的写法
jQuery的顶级对象
- $的别称就是jQuery, 同时也是jQuery的顶级对象,相当于javaScript原生中的window
DOM对象和jQuery对象
- DOM对象就是利用原生js获取的对象
- document.querySelector(‘div’)等
- jQuery对象就是通过jQuery的方式获取的对象
- $(‘div’);
- 通过伪数组的方式进行存储
- jQuery对象只能使用jQuery的方法, 同理DOM对象只能使用原生js的属性和方法 两者不能越界,否则会报错.
DOM对象和jQuery对象的相互转换
- 有些原生的属性和方法 jQuery并没有封装,所以要进行转换才能使用
- DOM对象转换为jQuery对象
- $(‘video’) 直接获取
- $(myvideo) 将获取好了的DOM对象转化为jQuery对象 不用加引号
- jQuery对象转换为DOM对象
- $(‘video’)[0] 因为是个伪数组 可以通过使用索引转换为DOM对象
- $(‘video’).get(0)
jQuery选择器
- $(’#id’) id选择器
- $(’*’) 通配符选择器
- $(’.class’) 类名选择器
- $(‘div’) 标签选择器
- $(‘div,p,li’) 并集选择器
- $(‘li.current’) 交集选择器
- $(‘ul>li’) 子代选择器
- $(‘ul li’) 后代选择器
- 简单选择器 复合选择器 属性选择器 筛选选择器 结构伪类选择器
jQuery筛选选择器
- $(‘li:first’) 获取第一个li元素
- $(‘li:last’) 获取最后一个li元素
- $(‘li:eq(索引)’) 获取第索引个li元素 索引号从0开始
- $(‘li:odd’) 获取索引为奇数的li元素
- $(‘li:even’) 获取索引为偶数的li元素 0也算
- $(‘input:checked’) 获取input多选框API(根据length可以得知几个被选中了)
- 可以利用change事件 来做全选案例 配合prop修改属性和值
jQuery筛选方法
- 语法: $(‘li’).parent() 选择器的方法
- parent() 查找父级
- parents(‘选择器’) 返回指定祖先元素
- children(selector) 相当于子代选择器 只选择最近一级
- 参数填 标签 就会选择某一类标签的 否则选择所有子元素
- find(selector) 相当于后代选择器 选择所有子孙元素
- siblings(selector) 选择除了自己的所有同级元素
- nextAll(expr) 选择当前元素所有之后的同级元素
- prevtAll(expr) 选择当前元素所有之前的同级元素
- hasClass(class) 判断是否含有某个类名,返回的是布尔值
- eq(index) 和筛选选择器 $(‘li:eq(索引)’) 一样 但是这个更好插入变量
- $(“ul li”).eq(index)
jQuery 事件
$('.nav>li').mouseover(function(){ //添加鼠标经过事件
$(this).children('ul').shou() //这个元素的子元素ul 的方法显示
or
$(this).children('ul').hide() //这个元素的子元素ul 的方法隐藏
})
jQuery排他思想
- 利用jQuery的隐式迭代 可以给所有button创建点击事件 然后利用筛选方法siblings可以很方便的选择其他同级元素
$('button').click(function(){
$(this).css('background','pink'); //当前元素高亮
$(this).siblings('button').css('background',''); //其他元素取消高亮
})
tab栏切换
- 设置一个变量保存当前元素的索引 var index = $(this).index()
- 再运用eq(index) 将对应的 元素显示和隐藏即可
jQuery的样式操作
- style方式操作
- $(this).css(‘color’,‘red’)
- 参数只写属性 返回值(有单位) ,参数写属性和值 就是修改值
- $(this).css( { “color” : “red” , “width” : 400 , “height”: “200px”} )
- 如果要修改多组样式 需要传递一个 对象 数字可以不用引号 多个之间用逗号隔开
- class方式操作
- 添加类 删除类
设置class类样式
- $(‘div’).addClass(‘current’) 添加类 (里面的类名不要加点)
- $(‘div’).removeClass(‘current’) 删除类
- $(‘div’).toggleClass(‘current’) 切换类(有则删,无则加)
- 这里的参数类名不要加点
jQuery 效果
显示隐藏效果 block / none
- show([speed,[easing],[fn]]) hide([speed,[easing],[fn]]) toggle([speed,[easing],[fn]])
- 参数可以都省略,无动画直接显示
- speed 三种预定义字符串或动画时长毫秒数 (动画执行时间)
- easing 用来指定切换效果 (动画轨迹)
- fn 回调函数 动画结束时执行
- 一般情况 都不加参数 直接显示隐藏
滑动效果
- slideToggle([speed,[easing],[fn]]) 切换滑动划出
- slideDown([speed,[easing],[fn]]) 滑出
- slideUp([speed,[easing],[fn]]) 滑入
- 参数和上面的显示隐藏效果一样
事件切换
- hover([over],out)
- over 鼠标经过到元素上要触发的函数(相当于mouseenter)
- out 鼠标移出元素上是要触发的函数(相当于mouseleave)
- 如果只写一个函数 , 鼠标经过和移出都会触发这个函数,可以配合toggle效果 简约代码 一般用于单个元素
stop() 停止排队
- 动画或效果一旦多次触发就会造成多个动画或者效果排队执行
- 所以要把上一次的动画停止掉 stop() 要写在动画前面 执行了它再执行动画
淡入淡出效果fade
- fadeIn([speed,[easing],[fn]]) 淡入(盒子隐藏了后从透明度0逐渐变化为透明度1)
- fadeOut([speed,[easing],[fn]]) 淡出(盒子显示时从透明度1逐渐变化为透明度0)
- fadeToggle([speed,[easing],[fn]]) 淡入淡出切换
- fadeTo([speed,opacity,[easing],[fn]]) 渐进方式调整到指定透明度
- speed 定义的速度 必写
- opacity 透明度 必写 取值0~1之间
自定义动画 animate
- 语法: animate(params,[speed],[easing],[fn])
- params:想要修改的样式属性,以对象的方式传递,必须写.属性名可以不带引号,复合属性要采取驼峰命名 其他参数可选
- 其他和上面的一样
- 只有元素才能做动画,不能是文档如(body,html) 不能是document
jQuery属性操作
设置获取固有属性和自定义属性
- prop(“属性名”,“属性值”) 获取设置固有属性
- 只写属性名是获取值,属性名和属性值都写是修改值
- attr(“属性名”,“属性值”) 获取设置自定义属性
- 只写属性名是获取值,属性名和属性值都写是修改值
- date(“属性名”,“属性值”) 获取设置数据缓存
- 相当于不会修改DOM元素的变量 ,一旦页面刷新,之前存放的数据都会被移除
- 还可以读取data-开头的自定义属性,得到的是数字型的 属性名直接写data-后面的就行
jQuery内容文本值
- element.html() 相当于原生innerHTML
- 参数不写就是获取,参数写就是赋值 带引号
- element.text() 相当于原生innerTEXT
- 参数不写就是获取,参数写就是赋值 带引号
- element.val() 相当于原生value 表单内容
- 参数不写就是获取,参数写就是赋值 带引号
jQuery遍历元素
- 遍历DOM对象
$('div').each(function(i,domEle){ //i是每次遍历div.length的索引号 两个参数可以自己命名
$(domEle).css("color", arr[i]) //因为domEle是DOM对象,所以要转换为jQuery对象$()
})
- 遍历数据(数组或对象)
$.each(arr,function(i,ele){
//arr是数组时,i代表索引 ele代表内容
//arr是对象时,i代表属性名 ele代表属性值
})
创建 添加 删除元素
- 创建元素 var li = $("
- ")
- 只是创建,没有放入DOM树中
- 添加元素
- $(“ul”).append(li) 内部添加并且放在内容的最后面
- 添加后 原先的元素会消失
- $(“ul”).prepend(li) 内部添加并且放在内容的最前面
- 添加后 原先的元素会消失
- $(“ul”).after(div) 外部添加, 同级在自身元素前面一个元素
- $(“ul”).before(div) 外部添加, 同级在自身元素后面一个元素
- $(“ul”).append(li) 内部添加并且放在内容的最后面
- 删除元素
- $(“ul”).remove() 可以删除匹配的元素
- $(“ul”).empty() an po ti 可以删除匹配元素里面的子元素
- $(“ul”).html(""); 将匹配元素的内容变为空, 和empty效果一致
jQuery元素尺寸位置操作
- width() | heiget() 取得匹配元素的宽高 只有width和height
- innerWidth() | innerHeight() 取得匹配元素的宽高+padding
- outerWidth() | outerHeight() 取得匹配元素的宽高+padding+border
- outerWidth(true) | outerHeight(true) 取得匹配元素的宽高+padding+border+margin
- 以上参数为空 获取相应值, 返回的是数字型
- 如果参数为数字则是修改相应值
- offset() 获取或者设置距离文档的位置
- 返回的是一个对象 可以修改里面的属性值来赋值
- position() 获取距离带有定位的父级的偏移量 如果没有则以文档为准
- scrollTop() | scrollLeft() 设置获取元素被卷去的头部或顶部距离
事件处理on绑定一个或多个事件
- $().click(function(){ }) 绑定一个事件
- 绑定多个事件on
$("div").on({ //一个对象绑定多个事件 事件之间用逗号隔开
mouseenter:function() { 要执行的代码 },
click:function(){ 要执行的代码 }
})
如果多个事件要执行同样的代码 可以将事件类型放在一块用逗号隔开
$("div").on("mouseenter click",function(){ 要执行的代码 })
- 事件委派on
$("ul").on("click","li",function(){ 要执行的代码 })
//这里的事件类型是绑定在ul身上的 ,但是触发类型是通过子元素li触发的,绑定的元素不会触发
//而事件委托父元素也会触发
//这个方法对动态添加的元素也有效
解绑事件off()
- $(“div”).off() 解绑所有事件
- $(“div”).off(“click”) 解绑对象某一个事件
- $(“ul”).off(“click”,“li”) 解绑事件委托
- 如果事件只想执行一次 绑定函数的时候将on改成one就行
主动触发事件
- $(“div”).click() 会触发元素的默认行为
- $(“div”).trigger(“click”) 会触发元素的默认行为
- $(“div”).triggerHandler(“事件类型”) 不会触发元素的默认行为
事件对象
- elemengt.on([seletor],function(event){ })
- event.preventDefault() 或者return false; 阻止事件对象默认行为
- event.stopPropagation() 阻止事件冒泡
jQuery插件
- jQuery插件是依赖 jQuery来完成的 所以要先引入jQuery
- jQuery插件网址:
- jQuery之家:http://www.htmleaf.com/
- jQuery插件库:http://www.jq22.com/
- 使用方法
- 引入相关文件.(jQuery文件和插件文件)
- 复制相关html css js (调用插件)
图片懒加载
- 就是先加载可视窗口的图片,用户滚动页面时再加载下面可视区的图片,它能够帮我们大大减轻服务器负载
- 一般使用懒加载插件来完成
- jQuery插件库 EasyLazyload 这里懒加载插件的js引入文件和js调用必须写在DOM元素(图片)的后面
- 图片路径也要修改 不再是src
bootstarpJS插件|组件的使用
- bootstarpJS是依赖jQuery开发的,所以使用之前要先引入jQuery文件
- bootstarpJS文件里面有大量封装好样式模板 我们可以直接查阅其文档 复制html css js 来修改使用就行
本地存储案例
- 因为刷新页面不会丢失数据,所以要把获得的数据存储到 localStorage
- 但是本地存储只能存字符串 所以要把对象转换成字符串 JSON.stringify(data)
- 使用的时候再将字符串转换数组 JSON.parse()
拷贝对象(克隆)
- 语法: $.extend([true], targetObj,obj)
- 第一个值为true就是深拷贝,false就是浅拷贝. 第二个值是要拷贝的对象,第三个值是被拷贝的对象
- 浅拷贝会把原有的对象属性和方法覆盖
- 但是复杂数据类型是复制的地址, 所以内容改变时, 这个地址使用方都会改变
- 深拷贝会把里面的数据完全复制一份给目标,如果里面有不冲突的属性,会合并在一块
- 复杂数据类型会重新开辟一个地址,所以不会受原先内容的影响
多库共存
- 有时候其他插件也会用$符来调用方法,这样可能会和jQuery的起冲突.
- 我们可以用jQuery 来代替$
- 我们可以自己决定用什么来调用方法
- var suibian = jQuery.noConflict() ; 例: suibian(“div”)
其他
- number.toFixed(2) 保留两位小数 参数为几 保留几位