6-jQuery基本使用

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的样式操作
  1. style方式操作
  • $(this).css(‘color’,‘red’)
    • 参数只写属性 返回值(有单位) ,参数写属性和值 就是修改值
  • $(this).css( { “color” : “red” , “width” : 400 , “height”: “200px”} )
    • 如果要修改多组样式 需要传递一个 对象 数字可以不用引号 多个之间用逗号隔开
  1. 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代表属性值
})
创建 添加 删除元素
  1. 创建元素 var li = $("
  2. ")
    • 只是创建,没有放入DOM树中
  3. 添加元素
    • $(“ul”).append(li) 内部添加并且放在内容的最后面
      • 添加后 原先的元素会消失
    • $(“ul”).prepend(li) 内部添加并且放在内容的最前面
      • 添加后 原先的元素会消失
    • $(“ul”).after(div) 外部添加, 同级在自身元素前面一个元素
    • $(“ul”).before(div) 外部添加, 同级在自身元素后面一个元素
  4. 删除元素
    • $(“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就行
主动触发事件
  1. $(“div”).click() 会触发元素的默认行为
  2. $(“div”).trigger(“click”) 会触发元素的默认行为
  3. $(“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/
  • 使用方法
    1. 引入相关文件.(jQuery文件和插件文件)
    2. 复制相关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的起冲突.
  1. 我们可以用jQuery 来代替$
  2. 我们可以自己决定用什么来调用方法
    • var suibian = jQuery.noConflict() ; 例: suibian(“div”)
其他
  • number.toFixed(2) 保留两位小数 参数为几 保留几位
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值