JQuery编程
JQuery介绍
javascript库
-
即library，是一个封装好的特定的集合
-
常见的JavaScript库：JQuery、Prototype、YUI、Dojo、ExtJS、移动端zepto
JQuery概念
JQuery是一个快速、简介的JavaScript库
把js中的DOM操作做了封装，我么可以快速的查询试用里面的功能
JQuery封装了JavaScript常用的功能代码，又花了DOM操作、事件处理、动画设计和Ajax交互
学习JQuery的本质：就是学习调用这些函数（方法）
JQuery优点
轻量级。核心文件才几十kb，不会影响页面加载速度
夸浏览器兼容，基本兼容了现在的大部分主流的浏览器
链式编程、隐式迭代
支持插件扩展开发。有着丰富的插件，例如：属性菜单、日期控件、轮播图等
免费、开源
JQuery的基本使用
JQuery的下载
JQuery的官方网址：Http://jquery.com
版本差别
1x：兼容IE678等低版本的浏览器，但官网不再更新
2x：不兼容IE678等低版本的浏览器，官网不再更新
3x：不兼容678等低版本浏览器，是官网主要更新维护的版本
JQuery中的顶级对象
是 J Q u e r y 的 别 称 ， 在 代 码 中 可 以 使 用 J Q u e r y 代 替 ， 但 是 一 般 为 了 方 便 ， 通 常 直 接 用 是JQuery的别称，在代码中可以使用JQuery代替，但是一般为了方便，通常直接用 是JQuery的别称，在代码中可以使用JQuery代替，但是一般为了方便，通常直接用
$是JQuery的顶级对象，相当于 原生javaScript中window
把元素利用$包装JQuery对象，就可以嗲用JQuery的方法
JQuery独对象和DOM对象
JQuery方法和原生JS获取的元素是不一样的
- 原生的JS获取来的对象就是DOM对象
- JQuery方法获取的元素就是JQuery对象
- JQuery对象本质就是：利用$对DOM对象包装后产生的对象(为数组形式存储)
只用JQuery对象才能使用JQuery方法，DOM对象只能 使用原生的JavaScript方法
JQuery对象和DOM对象转化
-
把DOM对象转化为JQuery对象：$(DOM对象)
-
JQuery对象转换为DOM对象：$(‘p’)[0]
-
JQuery对象转换DOM对象：$(‘p’).get(0)
1.JQuery设置样式 $(‘div’).css(‘属性’，‘值’)
2.JQuery里面的排他思想
当前元素设置样式，其余兄弟清除样式。
$(this).css(‘color’,‘purple’)
$(this).sibliings().css(“color”,“”)
3.隐式迭代
遍历内部DOM元素(伪数组形式存储)的过程交隐式迭代
页面中所有的div全部隐藏，不用循环操作：$(‘div’).hide()
4.链式编程
写在一句就是 $(this).css(‘color’,‘purple’).sibliings().css(“color”,“”)
JQuery选择器
基础选择器
- $（"#id） 获取指定D的元素
- $（“*”) 匹配所有元素
- $（“.class”）获取同一类class的元素
- $（“div”） 获取同一类标签的所有元素
- $（“div，p， i”）选取多个元素
- $（“li.current”） 交集元素
层级选择器
-
$('div p') div 里面所有的p -
$('div p') 亲儿子 -
$('div+p') div后面 的兄弟p 和 后代p -
$('div~p') 找到所有与div同辈的 p元素基本筛选器
-
$("input:not(:checked)") 查找所有未选中的 input 元素 -
偶数 -
奇数 -
$('ul:eq(2)')$(‘ul’)[2] 是 jq对象 转 dom对象
-
$("tr:gt(0)") // 匹配所有大于给定索引值的元素 -
$("tr:lt(0)") // [匹配所有小于给定索引值的元素] -
$(":header").css("background", "#EEE"); 匹配如 h1, h2, h3之类的标题元素 -
:root1.9+
$(":root").css("background-color","yellow"); 设置<html>背景颜色为黄色[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CTP5akl1-1650534039998)(D:\UserData\Administrator\Desktop\3a2aa3e85535b8d2ea295b4ec41ac7999b1365b637ac26384e5548e48a1651f9.png)]
表单
jQuery 样式操作
操作CSS方法
参数只写属性名，则是获取属性值：$(this).css(‘color’)
参数是属性名，属性值，逗号分割，是设置一组样式：$(this).css(‘color’,‘red’)
参数可以是对象形式，方便设置多组样式
$(this).css({
‘color’:‘white’,
‘font-size’:‘20px’
})
设置样式的方法
作用等同于以前的classList形式 ，方便设置多组样式
添加类：$(this).addClass(‘current’);
删除类：$(this).removeClass(‘current’);
切换类：$(this).toggleClass(‘current’); //有则删 无则加
JQuery效果
[show([s,[e],[fn]])]
speed:三种预定速度之一的字符串(“slow(200ms)”,“normal(400ms默认)”, or “fast(600ms)”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing ()“，可用参数"linear（匀速）”
**fn:**在动画完成时执行的函数，每个元素执行一次。
显示隐藏
- 显示：show([speed, [easing],[fn]])
- 隐藏：hide([speed, [easing],[fn]]) .
- 切换显示隐藏：toggle([speed, [easing],[fn]])
划入划出
- 下滑：slideDown([speed,[easing],[fn]])
- 上滑：slideUp([speed,[easing],[fn]])
- 切换上滑夏欢：slideToggle([speed,[easing],[fn]])
淡入淡出
- 淡入：fadeIn([speed,[easing],[fn]])
- 淡出： fadeOut([speed,[easing],[fn]])
- 切换淡入淡出：fadeToggle([speed,[easing],[fn]])
- 渐进方式：fadeTo([[speed],opacity,[easing],[fn]])
fadeTo([[speed],opacity,[easing],[fn]])
speed**:三种预定速度之一的字符串(“slow(200ms)”,“normal(400ms)”“, or “fast(600ms)””)或表示动画时长的毫秒数值(如：1000)
opacity**:一个0至1之间表示透明度的数字。
easing**:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn**:在动画完成时执行的函数，每个元素执行一次。
自定义动画
animate(params, [speed],[easing], [fn])
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串(“slow(200ms)”,“normal(400ms)”“, or “fast(600ms)””)或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.
fn:在动画完成时执行的函数，每个元素执行一次。
停止动画队列
动画或者效果一触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行
stop()方法用户停止动画或效果
stop()写到动画或者效果的前面，相当于停止结束还是那个一次的动画
每次使用动画之前先调用stop(),在调用动画
事件切换
hover([over],out)
over:鼠标移到元素要触发的函数(相当于mouseenter)
out：鼠标移出要触发的函数(相当于mouseleave)
如果只写一个函数，则鼠标经过和离开都会触发它
JQuery属性 操作
1.元素固有的属性值 用prop()
获取属性 prop(‘属性’)
设置属性 prop(‘属性’，'属性值 ')
2.元素自定义属性用attr()
获取属性 attr(‘属性’)
设置属性 attr(‘属性’，'属性值 ')
3.数据缓存 用data()
获取数据 data(“name”)
设置数据 data(“name”,“value”)
JQuery文本属性
-
html()
普通元素内容html(相当于原生innerHTML)
html()获取元素的内容
html(“内容”)设置元素的内容
-
text()
普通元素文本text(相当于原生innerTEXT)
text()获取元素的文本
text(“文本内容”)设置元素的文本
-
val()
表单的值val() (相当于原生value)
val()获取表单的值
val(“内容”)设置表单的值
JQuery元素操作
遍历元素each()
DOM遍历
语法$(‘div’).each(function (index domEle){xxx})
each() 方法遍历匹配的每一个元素。主要用Dom处理。each每一个
里面的回调函数有两个参数：index是每一个元素的索引号；domEle是每个DOM元素对象，不是Jquery对象
所以要使用jquery方法，需要给这个dom元素转化为jquery对象$(domEle)
数据遍历
$.each(object,function(index,element){xxx})
$.each()方法可用于遍历任何对象。主要用户数据处理。比如数据，对象
里面的函数有2个参数：index是没一个元素的索引；element遍历内容
创建
动态创建li标签 $(“
- ”)
添加
内部添加
- 把内容放入匹配元素内部后面element.append(“内容”)
- 把内容放入匹配元素内部前面element.prepend(“内容”)
外部添加
- 把内容放入匹配元素内部后面element.after(“内容”)
- 把内容放入匹配元素内部前面element.before(“内容”)
删除
- 删除匹配的元素(本身) element.remove()
- 删除匹配的元素集合中所有的子节点 element.empty()
- 清空匹配的元素内容 element.html(“”)
小结：remove删除元素 本身(自杀)，empty()和html()作用等价，都是可以删除元素里面的内容。只不过html还可以设置内容
JQuery尺寸、位置操作
尺寸操作
width()/height() 取得匹配元素宽度和高度 只算width/height
innerWidth()/innerHeight() 取得匹配元素宽度和高度值；包含padding
outerWidth()/outerHeight() 取得匹配元素宽度的高度值；包含padding、border
outerWidth(true)/outerHeighr(true)取得匹配元素宽度和高度值：包含padding、border、margin
参数为空，则是获取相应值，返回的是数字型
如果参数为数字，则是修改相应值
参数可以不必写单位
位置操作
offset()设置或获取元素偏移
offset()方法摄甚至或获取返回杯选元素相对于文档的偏移坐标，根父级没有关系
该方法有两个属性 left 、 top
offset().left 用于获取距离文档左侧的距离
offset().top用于获取距离文档顶部的距离
设置元素的偏移：offset({
top ：10,
left:30
})
position()获取元素偏移
position()方法用于返回 被选元素相对于带有定位的父级偏移坐标，如果腹肌都没有定位，则以文档为准
该方法有两个属性 left 、 top
position().left 用于获取距离定位父级左侧的距离
position().top用于获取距离定位父级顶部的距离
该方法只能获取
scrollTop/scrollLeft()设置或获取元素被卷去的头部和左侧
scrollTop()方法摄甚至或返回被选元素被卷去的头部
不跟参数是获取，参数为不带单位的数字则是设置卷去的头部
JQuery事件
事件注册
element.事件名称(function(){})
事件处理
1、on():用于事件绑定
可以绑定多个事件，多个处理事件的处理程序
可以事件委派操作
可以动态创建的元素
$(‘div’).on({
mouseover:function(){},
mouseout:function(){},
clickr:function(){},
})
2、off():事件解绑
off()方法可以移除通过on()方法添加的事件处理程序
3、trigger()/triggerHandler:自动触发事件
element.trigger(‘type’)
element.triggerHandler(‘type’)
triggerHandler 模式不会触发元素的默认行为
事件对象
JQuery对DOM中的时间对象event进行了封装、兼容性更好，获取更方便，使用变化不大
阻止默认行为：event.preventDefault()或者 return false
阻止冒泡 ：event.stopPropagation()
JQuery拷贝对象
$.extend([deep], target, objectl, [objectN])
deep：如果设为tue为深拷贝，默认为浅拷贝
target：要拷贝的目标对象
object1：待拷贝到第一个对象的对象
objectN:待拷贝到第N个对象的对象
浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象
深拷贝，前面加true，完全克隆，修改目标对象不会影响被拷贝对象
12：jQuery 多库共存
把里面的$符号统一改为 jQuery.比如 jQuery(“div”)
jQuery变量规定新的名称： n o C o n f l i c t ( ) ; v a r x = noConflict() ; var x= noConflict();varx=.noConflict()
pe’)
triggerHandler 模式不会触发元素的默认行为
事件对象
JQuery对DOM中的时间对象event进行了封装、兼容性更好，获取更方便，使用变化不大
阻止默认行为：event.preventDefault()或者 return false
阻止冒泡 ：event.stopPropagation()
JQuery拷贝对象
$.extend([deep], target, objectl, [objectN])
deep：如果设为tue为深拷贝，默认为浅拷贝
target：要拷贝的目标对象
object1：待拷贝到第一个对象的对象
objectN:待拷贝到第N个对象的对象
浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象
深拷贝，前面加true，完全克隆，修改目标对象不会影响被拷贝对象
12：jQuery 多库共存
把里面的$符号统一改为 jQuery.比如 jQuery(“div”)
jQuery变量规定新的名称： n o C o n f l i c t ( ) ; v a r x = noConflict() ; var x= noConflict();varx=.noConflict()
620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
