jQuery
jQuery是一个JavaScript库,将js中的DOM操作进行了封装,可以快速查询并使用里面的功能。
跨浏览器兼容,兼容主流浏览器。
免费,开源。
1. jQuery基本使用
1.1jquery引用
-
本地使用:引入js文件
< script src="./js/jquery-3.5.1.min.js"></ script > -
cdn引用: 直接复制链接
< script src=“https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js”></ script>
1.2 查找dom
jQuery([selector,[context]]) 返回jQuery;
$ 相当于 jQuery,是jQuery的别称;
$ 是jQuery的顶级对象
,相当于原生JavaScript中的window,把元素利用$包装成jQuery对象,就可以调用jQuery的方法。
$ ( ) 括号里通常为由css选择器组成的表达式。
默认情况下, 如果没有指定context参数,$()将在当前的 HTML document中查找 DOM 元素
<body>
<div id="a1">今天天气很好,小没哭了</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
console.log($('#a1'));
</script>
</body>
1.3 dom对象和jquery对象
DOM对象:用原生js获取的对象;
jQuery对象:用jQuery方式获取的对象;
jQuery对象的本质是:利用$对DOM对象包装后产生的对象(以伪数组形式存储);
jquery对象才能使用jquery方法,DOM对象只能使用原生的JavaScript属性和方法
dom对象转换为jquery对象:
-
$ ( DOM对象 )
<script> var a1=document.getElementById('a1'); //dom对象 console.log($(a1)); //通过 $ ( )转化为jQuery对象(只有jquery对象才能使用jquery方法) </script>
jQuery对象转换为DOM对象: (可以使用javascript方法)
-
$ (‘div’)[index];
-
$(‘div’).get(index);
<video src=""></video> <script> $('video')[0].play(); //DOM对象转为jQuery $('video').get(0).play(); </script>
1.4 创建元素
<script>
$('<div id="a2">hello</div> ').appendTo(a1); //将hello追加到a1中
</script>
1.5 通过回调产生异步效果
$(function(){
//效果与window.onload相似
})
1.6 each()
each() 以每一个匹配的元素作为上下文来执行一个函数。
<body>
<ul>
<li id="">1</li>
<li>2</li>
<li>3</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$('ul li').each(function(i){
console.log(i);
$(this).css('background','red')
$(this).css('listStyle','none')
})
</script>
</body>
1.6 length
length jQuery 对象中元素的个数。
console.log($('ul li').length)
1.7 get([index])
get([index]) 取得其中一个匹配的元素。
//get() 取得其中一个匹配的元素,返回DOM对象,不能直接使用jquery方法,$()将DOM元素转为jquery元素
$( $ ('ul li').get(1)).css('background','green')
1.8 index()
index() 搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
//index() 返回一个元素的索引
$('ul li').each(function(i){
console.log( $(this).index())
})
1.9jQuery入口函数
等DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完毕。
相当于原生js的DOMContentLoaded。
和原生js的load事件不同,load事件是等页面文档,外部js文件,css文件和图片加载完毕后才执行内部代码
$(document).ready(function(){
})
或
$(function(){
... //此处是页面DOM加载完成的入口
} );
2. jQuery 选择器
$(" 选择器 ")
隐式迭代:将匹配到的所有元素内部进行遍历循环;
给匹配到的所有元素进行循环遍历。
- #id
- 标签
- . class
- *所有元素
- 多个选择器之间用逗号隔开
- 后代选择器 祖先 后代 (空格隔开)
- 子选择器 父亲>儿子
- prev+next 紧跟在prev后面的第一个选择器
- prev~sibling prev后面的所有选择器
- :first 获取匹配的第一个元素
- : first-child 匹配所有给定选择器的第一个子元素
- :last 获取匹配的最后一个元素
- : last-child 匹配所有给定元素的最后一个子元素
- :nth-child 匹配所有给定元素的第n个元素
- :not() 去除所有和给定选择器匹配的元素
- :even 匹配所有索引值为偶数的元素,从 0 开始计数
- :odd 匹配所有索引自为奇数的元素
- :eq(index) 匹配一个给定索引值的元素
- :gt(index) 匹配所有大于给定索引值的元素
- :lt(index) 匹配所有小于给定索引值的元素
- :header 匹配所有标题元素 (h1,h2,h3)
- :focus 匹配当前获取焦点的元素
- :target 选择目标元素
- :contains(text) 匹配包含给定文本的元素
- :empty 匹配所有不包含子元素或文本的空元素
- : has(selector) 选择含有指定元素的元素
- . parent() 匹配含有子元素或文本的元素(非空元素)
- . children() 亲儿子
- . find() 匹配元素的所有孩子(类似于后代选择器)
- :hidden 匹配所有隐藏的元素
- :visible 匹配所有显示的元素
- [attribute] 匹配包含给定属性的元素
- [attribute=value] 匹配所有给定属性是特定值的元素
- [attribute!=value] 匹配所有属性不等于指定值的元素
- [attribute^=value] 匹配所有属性以指定值开始的元素
- [attribute$=value] 匹配所有属性以指定值结束的元素
- [attribute*=value] 匹配所有属性包含指定值的元素
- [ selector1 ] [ selector2 ] [selectorN] 复合属性选择器
- :only-child 匹配父元素中只有一个子元素的元素
- :input 匹配所有的input元素(input,textarea,select,button)
- :text 匹配所有的input中的单行文本框元素
- :enabled 匹配所有可用的元素
- :disabled 匹配所有不可用元素
- : checked 匹配复选框单选框元素
- : slected 匹配select中的option元素
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script src="./js/jquery-3.5.1.min.js"></script>
<script>
$('li').css('listStyle','none');
$('li:first').css('color','red'); //:first 只匹配第一个 只在第一个ul中查找第一个li
$('li:first-child'); //:first-child 在每一个ul中查找第一个li
$('li:last').css('color','green');
$('li:last-child');
$('li:nth-child(1)'); //:nth-child(n) 在每一个ul中查找第n个li
$('li:even').css('background','palegreen'); //even索引为偶数
$('li:odd').css('background','violet'); //odd索引为奇数
$('li:eq(2)').css('background','pink'); //:eq(index) 选中某一个索引
$('li:gt(3)').css('background','deeppink'); //:gt(index) 匹配大于该索引的元素
//:lt(index)匹配所有小于该索引的元素
//:header标题元素
$(':header'); //返回所有标题元素
//:root 选择文档根元素
//:empty 空元素 没有子元素或文本的空元素
$('div:has(p)'); //:has(元素)返回所有div中含有p的div元素
//:parent 非空元素
//:hidden 不可见元素(隐藏元素)
//:visible 可见元素
//[] 匹配包含给定属性的元素
$('div[id]');//返回所有div中含有id属性的div
$('div[id=a1]');
$('div[id!=a1]'); //不等于
$('div[id^=a1]'); //开头
$('div[id$=a1]'); //结尾
$('div[id*=a1]'); //包含
$('div[id=hello][clss=red]'); //匹配多个属性,复合写法
//:only-child 找到有唯一子元素的父元素
$(':input') //获取到所有的input元素(包括input.textarea,select,button)
$(':text'); //获取所有的input中的text元素
//:disabled 不可用元素
//:enabled 可用元素
//:checked 复选框单选框
//:slected 匹配select中的option
</script>
</body>
3.属性
- attr() 设置或返回被选元素的属性值,可以同时设置多个属性,用逗号隔开
- removeAttr() 删除元素的某个指定属性
- prop() 设置或获取元素固有属性值
- removeProp() 删除prop设置的属性
- addClass() 给匹配元素添加指定类名
- removeClass() 将匹配元素的类名删除
- toggleClass() 若不存在指定类则添加该类,若存在该类则删除
- html() 获取匹配元素的html内容(HTML元素,标签)
- text() 获取匹配元素的所有文本内容
- val() 获取匹配元素的当前值
<script>
console.log($('#a1').attr('title')); //获取a1元素的title属性
// attr() 设置属性
$('#a1').attr('class','red');
//一个设置多个属性
$('#a1').attr({
class:'blue',
title:'xiaomei'
})
//removeAttr()删除属性
$('#a1').removeAttr('title'); //删除一个元素的某个属性
//prop() 返回在匹配元素集合中第一个元素的属性值
//removeProp() 删除prop()设置的属性
$('#a1').addClass('big'); //addClass() 为匹配元素添加指定类名
$('#a1').removeClass('blue'); //removeClass()删除某一个元素的类
$('#a1').toggleClass('blue'); //toggleClass()如果存在该类则删除,如果不存在则追加
console.log($('#a2').html()); //html()返回该元素中的HTML元素
$('#a2').html('<p>hello world</p>'); //替换
console.log($('#a2').text()); //text()返回该元素中所有的文本元素
//val() 元素的值
</script>
4.css
- css() 返回匹配元素的样式属性或设置匹配元素的css样式
- hide() 返回隐藏的元素
- show() 返回显示的元素
- offset() 获取元素在当前视口的相对偏移
- position() 获取元素相对于父元素的偏移(当元素没有父元素时,相对于body)
- scrollTop() 获取匹配元素相对于当前元素滚动条顶部的偏移
- scrollLeft() 获取匹配元素相对于当前元素滚动条左侧的偏移
- height() 获取匹配元素当前计算的高度值(px)
- width() 获取匹配元素当前计算的宽度值
- innerHeight() 获取第一个匹配元素内部区域高度(包括补白,不包括边框)
- innerWidth() 获取第一个匹配元素内部区域宽度(包括补白,不包括边框)
- outerHeight() 获取第一个匹配元素外部高度(默认包括补白和边框)
- outerWidth() 获取第一个匹配元素外部宽度
<body>
<div id="a1"></div>
<!-- <script src="./js/jquery-3.5.1.min.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
console.log($('#a1').css('color')); //获取css属性值
$('#a1').css('color','green'); //单个设置css属性,属性名加引号
$('#a1').css({
width:'200px',
height:'200px',
backgroundColor:'pink'
}) //同时设置多个元素的css属性值 复合属性采用驼峰命名法,属性名不用加引号,若值不是数值需要加引号
$('#a1').hide(); //隐藏元素
$('#a1').show(); //显示元素
//offset 获取匹配元素在当前视口的相对偏移
var offset=$('#a1').offset();
console.log(offset);
//position 获取元素相对于父元素的偏移
var p=$('a1').position();
console.log(p); //没有父元素则相对于body
//scrollTop()获取匹配元素相对于滚动条顶部的偏移
// $('#a1').scrollTop(300);
//获取元素的宽度和高度
console.log($('#a1').width());
console.log($('#a1').height());
//innerHeight() 获取元素的内部区域高度(包括补白,不包括边框)
//outerHeight()获取元素的外部高度(默认包括补白和边框)
</script>
</body>
tab栏切换案例
<script>
$(function(){
$(".tab_list li").click(function(){
$(this).addClass("current").siblings().removeClass("current");
var index=$(this).index();
$(".tab_con .item").eq(index).show().siblings().hide();
})
})
</script>
jQuery排他思想
链式编程
节约代码量,使代码更优雅
$(this).css('color','red').sibling().css('color','');
//该元素的颜色为红色,该元素的兄弟元素的颜色为空
$(this).css('color','red');
$(this).sibling().css('color','');
链式编程要注意是哪个元素执行样式。
5.事件
JS中的所有事件在jQuery中都可以使用
- ready(fn) 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
- on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件处理函数(同低版本的bind())
- off(events,[selector],[data],fn) 在选择元素上移出一个或多个事件的事件处理函数
- one(type,[data],fn) 给匹配元素的特定事件绑定一个一次性事件处理函数
- trigger() 在指定元素上模拟触发某类事件,自动执行事件
- hover() 模仿悬停事件
- toggle() 若元素隐藏则显示,如果元素显示则隐藏,可以设值,缓慢变化有动画效果
- blur() 当元素失去焦点时触发
- change() 当元素值发生改变时触发事件
- click() 触发每一个匹配元素的click事件
……
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button id="btn">按钮</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$(document).ready(function(){});
$(function(){}); //等效
//点击li弹出对应的内容
on() 将元素绑定一个或多个事件处理函数 同低版本的bind()
$('ul li').on('click',function(e){
console.log($(this).text());
})
$('ul').append('<li>4</li>'); //追加子元素
//事件代理
$('ul').on('click','li',function(e){
// console.log($(this).text());
// console.log(e.target.innerText);
console.log($(e.target).text());
})
</script>
</body>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button id="btn">按钮</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
//off() 事件解绑
$('ul').off(); //将ul上的所有事件解绑
$('ul').off('click'); //将ul上的click事件解绑
//one() 给元素绑定一个一次性事件
//trigger() 模拟触发某类事件 自动执行事件
$('#btn').one('click',function(){ //执行一次后失效
console.log(111);
}).trigger('click')
//hover 模拟悬停效果 hover(函数1,函数2) 移入移出时效果
$("#btn").hover(function(){
$(this).addClass('red');
},function(){
$(this).removeClass('red');
});
//toggle() 隐藏和显示 若元素隐藏则显示,如果元素显示则隐藏。可以传值,变化时有动画效果
$('#btn').toggle(2000); //按钮消失
$('#btn').toggle(2000); //按钮显示
//js中的所有事件在jquery中都是有的
$('div').click(function(){}); //绑定click事件
</script>
</body>
6.文档处理
- append () 向每个匹配的元素内部后面追加内容。
- appendTo() 把所有匹配的元素追加到另一个指定的元素元素集合后。
- prepend() 向每个匹配的元素内部前置内容。
- prependTo() 把所有匹配的元素前置到另一个、指定的元素元素集合中。
- after() 在每个匹配的元素之后添加兄弟元素。
- before() 在每个匹配的元素之前插入兄弟元素。
- insertAfter() 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
- insertBefore() 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
- wrap() 把每个匹配的元素用其他元素的结构化标记包裹起来。
- unwrap() 这个方法将移出元素的父元素.
- wrapAll() 将所有匹配的元素一起用单个元素包裹起来
- wrapInner() 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
- replaceWith() 将所有匹配的元素替换成指定的HTML或DOM元素。
- replaceAll() 用匹配的元素替换掉所有 selector匹配到的元素。
- empty() 删除匹配的元素集合中所有的子节点。
- remove() 从DOM中删除所有匹配的元素,事件和数据都不保留
- detach() 从DOM中删除所有匹配的元素,保留事件和数据
- clone() 克隆匹配元素
<body>
<li>1</li>
<li>2</li>
<li>3</li>
<div id="a1"></div>
<li>4</li>
<li>5</li>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
//append 在末尾追加元素
$('#a1').append('<p>111</p>');
//appendTo 创建后追加在末尾
$('<p>222</p>').appendTo('#a1');
//往前追加元素
$('#a1').prepend('<p>333</p>');
//创建元素后往前追加元素
$('<p>444</p>').prependTo('#a1');
//after() 往匹配元素的后面追加兄弟元素
$('#a1').after('<p>555</p>');
//before() 往匹配元素的前面追加兄弟元素
$('#a1').before('<p>666</p>');
//wrap() 给每个匹配元素包裹指定元素
$('li').wrap('<ul></ul>'); //使用Ul标签将每一个li包裹起来
//unwrap() 拆除匹配元素的父标签
$('li').unwrap();
//wrapAll() 将所有匹配元素用指定元素包裹起来
$('li').wrapAll('<ul></ul>');
//replaceWith() 将匹配元素替换成指定元素
$('p').replaceWith('<b>hello</b>');
//empty() 删除匹配的元素集合中的所有子节点
$('#a1').empty(); //清空
//remove() 将匹配到的元素删除 ,事件和数据都不保留
$('p').remove();
//detach() 保留事件和数据
$('p').detach();
//clone() 克隆
$('b').clone(); //无参数,会克隆元素,事件不会被克隆
$('b').clone(true); //有参数时事件也会被克隆
</script>
</body>
7.效果
显示和隐藏
- show() 显示隐藏的匹配元素,可以添加效果的时间(ms)或速度(fast,slow,normal)和动画完成时执行的函数
- hide() 隐藏显示的元素
- toggle() 如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
滑动
- slideDown() 元素高度向下增大
- slideUp() 元素高度向上减小
- slideToggle() 通过高度变化切换匹配元素的可见性
淡入淡出
- fadeIn() 淡入效果
- fadeOut() 淡出效果
- fadeTo() 将匹配元素的不透明度以渐进方式调整到指定不透明度 参数速度和不透明度必须写
- fadeToggle() 通过不透明度变化改变元素淡入淡出效果
自定义动画
- stop() 停止所有在指定元素上正在运行的动画
- delay() 设置一个延时推迟效果
- animate() 创建自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#a1{
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
width: 400px;
height: 400px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<div id="a1"></div>
<button id="btn">改变</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
//show() 显示 括号里可以写数字或字符串(slow,fast,normal),在指定时间内缓慢出现
$('#btn').on('click',function(){
$('#a1').show(500,function(){ //显示
$('#a1').hide(500,function(){ //隐藏
$('#a1').toggle(500,function(){ //取反
$('#a1').slideUp(500,function(){ //高度向上
$('#a1').slideDown(500,function(){ //高度向下
$('#a1').fadeOut(500,function(){ //淡出
$('#a1').fadeIn(500) //淡入
})
})
})
});
});
});
})
//hide() 隐藏
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#a1{
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgb(245, 90, 116);
}
</style>
</head>
<body>
<div id="a1"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$("#a1").animate({
left:'200px',
bottom:'400px'
},500).animate({
left:'400px',
bottom:'0px'
},500).animate({
left:'0px',
bottom:'200px'
},500).animate({
left:'400px',
bottom:'200px'
},500).animate({
left:'0px',
bottom:'0px'
},500)
</script>
</body>
</html>
8.筛选
- eq() 获取第n个jquery对象
- filter() 筛选出与指定表达式匹配的元素集合
- map() 将一组元素转换成数组
- has() 保留包含特定后代的元素
- not() 从元素集合中删除与表达式相匹配的元素
- slice(start_index,end_index) 选取匹配的子集
- children() 获取一个元素中所有符合条件的子元素集合(括号中无表达式时返回所有子元素的集合)
- find() 查找父元素中匹配的子元素
<body>
<ul >
<li>1</li>
<li>2</li>
<li class="red">3</li>
<li>4</li>
</ul>
<div id="a1"></div>
<div id="a2"><p></p></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$('li').eq(1).css('background','pink'); //获取第n个对象
//filter() 与指定表达式匹配的元素
$('li').filter('.red').css('color','red');
//not() 将匹配元素中删除与指定表达式匹配的元素
//has() 选中含有指定后代的元素
console.log($('div').has('p'));
//map() 将一组元素转换为数组
//将元素进行遍历
$('li').map(function(i){
console.log($(this).text());
})
//sclice(start_index,end_index) 获取匹配元素的子集
console.log($('li').slice(0,2));
//children() 获取一个元素时中所有的子元素集合
$('div').children();
$('div').children('.red'); //可以传入过滤表达式,获取满足条件的子元素
//find() 查找父元素中的某些子元素
$('div').find('p');
</script>
</body>