1. 初识jQuery
试着运行以下代码
$('p').html("HELLO Jquery!!");
jQuery('a').hide()
jQuery顶级对象
$是jQuery的别称,在代码中可以使用jQuery代替$,但一般为了方便,通常都直接使用$
特别的,如果遇到了入口冲突的问题,就可以用jQuery入口方法
2. jQuery 隐式迭代
隐式迭代 jquery 会默认遍历一遍获取到的伪数组对象
就是把匹配到的所有元素内部进行遍历循环,给每个元素操作一遍
$("p").html("ddd");//所有的p元素的内容会被替换为ddd
$("p").css('background', 'pink');//所有的p元素的背景颜色会被替换为pink
3. DOM对象转换为JQuery对象
var body = document.querySelector('body');
// 直接用$包装一下就能转换成jquery对象了
$(body);
//jq对象转换为DOM对象
var d = $('body')[0]; //第一种
d = $('body').get(0); //第二种
4. jQuery选择器
jQuery 基础选择器
原生 JS 获取元素的方式多且杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素变得统一标准
$("选择器") // 里面选择器直接写CSS选择器即可,需要加上引号
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $("#id") | 获取指定ID的元素 |
全选选择器 | $("*") | 匹配所有元素 |
类选择器 | $(".class") | 获取同一类class的元素 |
标签选择器 | $("div") | 获取同一类标签的所有元素 |
并集选择器 | $("div,p,li") | 选取多个元素 |
交集选择器 | $("li.current") | 交集元素 |
JQuery 筛选选择器
JQuery 筛选方法 (重点
语法 | 用法 | 说明 |
---|---|---|
parent() | $('li').parent(); | 查找父级 |
parents() | $('.son').parents(); | 查找父级所有元素,如果有参数,则是查找指定标签的所有元素 |
children(selector) | $("ul").children("li"); | 相当于$("ul>li"),最近一级(亲儿子) |
find(selector) | $('ul').find("li"); | 相当于$("ul li"),后代选择器 |
siblings(selector) | $(".first").siblings("li"); | 查找兄弟节点,不包括自己本身 |
nextAll([expr]) | $(".first").nextAll() | 查找当前元素之后所有的同辈元素 |
prevAll([expr]) | $(".last").prevAll() | 查找当前元素之前的所有同辈元素 |
hasClass(class) | $('div').haClass("protected") | 检查当前的元素是否含有某个特定的类,如果有 则返回true |
eq(index) | $("li").eq(2) | 相当于$("li:eq(2)"),index从0开始 |
常用方法
//注意一下都是方法 带括号 $(function() { // 1. 返回的是最近一级的父级元素 $('.son').parent()); // 2.子 (亲儿子) $('.son').children('p').css('color','red'); // 3.兄 find()类似于后代选择器 $('.nav').find('p').css('background','pink'); // 4.排他思想的简易实现 $($('input').change(function() { $(this).siblings("input").prop("checked", false); })); });
5. jQuery链式编程
链式编程是为了节省代码量,看起来更优雅(
$(this).css('color','black').siblings().css('color','red')
P.S:使用链式编程的时候,需要注意一下操作的对象是否正确
$(this).siblings().addClass('hide');//给自己兄弟添加hide类,自身类不变
$(this).siblings().parent().css('color','pink')//给兄弟的父级添加颜色
6. jQuery 效果
jQuery给我们封装了很多动画效果,最常见的如下:
显示隐藏 | 滑动 | 淡入淡出 | 自定义动画 |
---|---|---|---|
show() | slideDown() | fadeIn() | animate() |
hide() | slideUp() | fadeOut() | |
toggle() | slideToggle() | fadeToggle() | |
fadeTo() |
语法规范
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]);
animate(params,[speed],[easing],[fn]);
- 参数
- 参数都可以省略,无动画直接显示
- speed:三种预定速度之一的字符串("slow","normal","or","fast")或表示动画市场的毫秒数值(如:1000)
- easing:(Optional)用来指定切换效果,默认是’swing‘,可用参数“linear”。
- fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
- opacity: 透明度,必填项,取值在0-1之间
- params: 想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采用驼峰命名法(eg: borderLeft)。其余参数都可以省略。
使用例
$(function(){
$("button").eq(1).click(function(){
// $(this).hide("fast");//快速隐藏
$('div').hide(1000,function(){alert('隐藏成功')});//1s隐藏+回调
});
$("button").eq(0).click(function(){
$('div').show("fast");//快速显示
// $('div').show(1000,function(){alert("显示成功")});//1s显示+回调
});
$("button").eq(2).click(function(){
$('div').toggle("fast");//快速切换
});
$("button").eq(2).click(function(){
$('div').fadeTo(1000,0.5);//1s切换时间 + 修改透明度为0.5
});
.........
})
自定义动画
$(function(){
$("button").click(function(){
$('div').animate({
left: 500,
top: 200,
opactiy: .4,
width: 300
},1000,'swing')
})
});
事件切换
hover([over],[out])
over:鼠标移到元素上要 触发的函数(相当于mouseover)
out:鼠标移出元素要触发的函数(相当于mouseleave)
如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数
例:
$('nav>li').hover(function(){do someting...},function(){do someting...})
$('nav>li').hover(()=>{$('.list').slideToggle()})//配合切换方法
动画队列及其停止排队方法
动画或效果队列
动画或者效果一旦触发就会执行,如果多次触发,就会造成多个动画或者效果排队执行
解决方法:每次执行的时候先使用stop方法停止队列中的函数。再执行新的操作
//stop方法必须写在动画的前面
$('.nav>li').hover(function(){
$('this').children('ul').stop().slideToggle();
})
7.jQuery 属性操作
设置或获取元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性,比如a元素里面的href input元素里面的type
如果是人为定义的属性,就不属于固有属性
设置或获取元素自定义属性值 attr()
和prop不一样,attr()可以获取不属于元素固有的属性
数据缓存 data()
data() 方法可以在指定元素上存取数据,并不会修改DOM元素结构,页面一旦刷新,存储的数据就会被移除
操作方法:
//获取属性值
$('选择器').prop("属性名")
$('选择器').attr("属性名")
//设置属性
$('选择器').prop("属性名","值")
$('选择器').attr("属性名","值")
//设置h5自定义属性
$('div').attr("data-index",4)
//数据缓存,不会再dom结构中显示
$('span').data('name',"zhangsan")
//这个方法可以获取data-index h5自定义属性 不用写data-前缀 返回的是数字型
$('div').data('index');
内容文本值
内容文本值操作,主要是对元素的内容还有表单的值操作
普通元素内容html() (相当于inner HTML)
$('div').html() //获取元素内容
$('div').html("内容") //设置元素的内容
普通元素文本内容text() (相当于 innerText)
$('div').text()//获取元素内文本内容
$('div').text('ddd')//设置元素内文本内容
获取表单内容val() (相当于 value() )
$('div').val()//获取表单标签内文本内容
$('div').val('ddd')//设置表单标签内文本内容
8. jQuery元素操作
遍历元素
jQuery 隐式迭代是对同一类元素做了同样的动作,如果想要给同一类元素做不同操作,就需要使用到遍历
语法1:
('div').each(function(index,DOMEle){xxxx;});
- each()方法遍历匹配的每一个元素,主要是用DOM处理,each每一个
- 里面的回调函数有两个参数:index是每一个元素的索引号,DOMEle是每个DOM元素对象,不是jQuery对象
- 所以要想使用jquery方法,就需要将这个DOM元素转换成jQuery对象
语法2:
$.each($('div'),function(index,DOMEle){
xxxx;
})
- $.each方法主要是用于遍历数据,处理数据(对象,键值对之类)
- 其余与each方法相同
添加元素
内部添加
$(element).append('内容')//(类似appendChild)放在内容的最后
$(element).prepend('内容');//内部添加并且放到内容的最前面
外部添加
$(element).after('内容')//把内容放入目标元素后面
$(element).before('内容')//把内容放入目标元素前面
删除元素
$(element).remove()//删除element本体
$(element).empty()//清空element中的内容(元素,子节点)
$(element).html('')//同上
9. jQuery尺寸、位置操作
jQuery尺寸
语法 | 用法 |
---|---|
width()/height() | 取得匹配元素宽度和高度值 只算 width / height |
innerWidth() / innerHeight() | 取得匹配元素宽度和高度值 包含padding |
outerWidth() / outerHeight() | 取得匹配元素宽度和高度值 包含padding 、border |
outerWidth (true) / outerHeight(true) | 取得匹配元素的宽度和高度值 包含padding 、border、margin |
- 以上参数为空,则是获取相应值,返回的是数字型
- 如果参数为数字,则是修改相应值
- 参数可以不用写单位
jQuery位置
位置主要有三个:
offset();
position();
scrollTop();
scrollLeft();
offset() 设置或获取元素偏移
该方法设置或返回被选元素相对于文档的偏移坐标,和父级没有关系。
position() 获取距离带有定位父级位置(偏移) 如果没有带定位的父级,则以文档为准 ,position只能获取不能设置
例:
var top = $('.son').offset().top;//获取位置
$('.son').offset({
top:100,
left:100
})//设置位置
$('.son').position();
//position只能获取不能设置
scrollTop() / scrollLeft() 方法设置或返回元素被卷去的头部/左侧
$(window).scroll(function(){
console.log($(document).scrollTop())
$(document).scrollTop(100)//直接滚动到100像素的位置
})
案例:带有动画的返回顶部
核心原理:使用animate动画返回顶部
animate动画函数里面有个scrollTop属性,可以设置位置
$('.goBack').click(function(){
$('.container').animate({
scrollTop: 0;
},520);
})
例:本站头部nav隐藏显示实现
//设置滚动事件,分为向上滚动和向下滚动
//当向下滚动的时候触发隐藏动画
//当鼠标向上滚动时触发显示动画
$(function(){
var scrollPos = $(window).scrollTop();
$('#kratos-header-section').css('transition','all .5s');
$(window).scroll(function(){
//向下滚动
if($(this).scrollTop() >= scrollPos){
//隐藏nav
$('#kratos-header-section').css('top','-50px');
}
//向上
else{
//显示nav
$('#kratos-header-section').css('top','10px');
}
scrollPos = $(this).scrollTop();
})
})
10.jQuery事件
jQuery事件注册
单个事件注册
语法:element.事件(function(){})
$('div').click(function(){事件处理程序;})
$('div').mouseover(function(){事件处理程序;})
$('div').resize(function(){事件处理程序;})
$('div').change(function(){事件处理程序;})
$('div').keydown(function(){事件处理程序;})
$('div').scroll(function(){事件处理程序;})
...
jQuery事件处理
语法
element.on(events,[selector],fn)
- events: 一个或多个用空格分隔的事件类型,如”click“或“keydown”。
- selector:元素的子选择器。
- fn:回调函数,即绑定在元素上的侦听函数
写法一:
$('div').on({
mouseenter: function(){},
click: function(){},
scroll: function(){}
});
P.S : 如果事件处理程序相同,就可以使用下面这个写法
写法二:
$('div').on('mouseenter mouseleave',function(){
alert("111");
})
- 另外,on可以实现事件委托(委派)
- 通过事件委托+on可以给未来动态创建的元素绑定事件
以下代码可以实现点击li弹出提示框,但是绑定事件的对象是ul
事件委派的定义是,把原来加给子元素身上的事件帮绑定在父元素身上,就是把事件委派给父元素
$('ul').on('click','li',function(){//触发对象是li
alert(11);
})
只触发一次的事件:one()
$('div').one('click',function(){.....})//只触发一次
jQuery事件解绑
off() 方法可以移除通过on()方法添加的事件处理程序
$("div").off();//解除div身上的所有事件
$("div").off('click');//解除div身上的click事件
$('ul').off('click','li')//解除事件委托
jQuery自动触发事件
自动触发事件 trigger() :
有些事件希望自动触发,比如轮播图自动播放功能和点击右侧按钮一致,可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发
element.click() //第一种简写形式
element.trigger('click') //使用trigger
element.triggerHandler("click")//使用triggerHandler
两者的区别:
trigger() 和 triggerHandler的区别就是triggerHandler 不会触发元素的默认行为
例:
//执行 .trigger 后 input 输入框自动获取焦点,触发事件的默认行为,而 .triggerHandler 仅仅 执行了指定的事件浏览器并未执行动作,输入框也没有获取焦点。
$('input').trigger("focus");//会触发元素默认行为,文本框内部会有光标闪烁
$('input').triggerHandler("focus")//不会触发元素默认行为,问呗内部没有光标闪烁
jQuery事件对象
事件被触发,就会有事件对象的产生
element.on(events,[selector],function(event){...})
- 阻止默认行为:event.preventDdefault() 或者 return false;
- 阻止冒泡:event.stopPropagation()
其他格式与原生js类似。
jQuery对象拷贝
如果想要把某个对象拷贝(合并)给另外一个对象使用,此时可以使用$.extend() 方法
语法:
$.extend([deep],target,object1,[objectN])
- deep: 如果设为true 就为深拷贝,默认为false 浅拷贝
- target:要拷贝的目标对象
- object1:待拷贝到第一个对象(target)的对象
浅拷贝
var targetObj = {
id: 0
};
var obj = {
id: 1,
name: "kano",
msg:{
m: "hello"
}
}
$.extend(targetObj,obj);//会覆盖原来的数据
//修改obj里面的msg
obj.msg.m = "dddddddd";
console.log(targetObj)//msg被修改了
由此可见,浅拷贝不会拷贝对象里面的复杂数据类型(另一个对象)
深拷贝
var targetObj = {
id: 0,
msg:{
m: "hello123"
}
};
var obj = {
id: 1,
name: "kano",
msg:{
m1: "hello"
}
}
$.extend(true,targetObj,obj);//也会覆盖相同的数据,但如果里面有不冲突的属性,会合并到一起
//修改obj里面的msg
obj.msg.m = "dddddddd";
console.log(targetObj)//msg不变
深拷贝会递归对象,会把对象完整的复制过去,遇到相同的对象会进行合并,而不是覆盖
jQuery多库共存
jQuery使用$作为标识符,随着jQuery的流行,其他js库也会使用$作为标识符,这样一起使用会引起冲突
所以需要一个解决方案,让jQuery和其他的js库不存在冲突,可以同时存在,这就叫多库共存
解决方案:
- 把里面的 $ 符号统一改为 jQuery,比如 jQuery('div')
- jQuery变量规定新的名称:$.noConflict() / jQuery.noConflict() var xxx = $.noConflict();
var xxx = $.noConflict();//使用过后原来的$就不能用了
xxx("div").show();