本文档JQuery知识点导航
1、入口函数
2、Jquery基础与选择器
2.1、DOM对象和JQ对象
2.2、eq对象
2.3、选择器
2.4、 鼠标事件
3 、事件与动画
3.1、复合事件:hover
3.2、键盘事件
3.3、事件冒泡
3.4、动画
3.5、自定义动画
3.6、控制标签css样式
3.7、增加删除类
3.8、获取元素宽高
3.9、offset
4、Jquery操作DOM
4.1、 html&&text
4.2、控制表单元素的value
4.3、DOM节点元素操作
4.4、节点属性操作
4.5、 遍历节点
4.6、窗口滚动
JQuery
第一步引入外部文件:<script src="js/jquery-3.4.1.js"></script>
可以通过JQuery官网下载相关外部文件
如果使用别人的文件,将自己写的代码放在别别人的代码后面。如果开发者工具中报$ is not defined的错,第一步检查jq(Jquery的简称)是否引入正常。
1、入口函数
原生入口函数:window.οnlοad=function(){}
延迟代码执行,当页面结构全部加载完毕后才执行jq代码,包括图片,视频,音频等。
JQ入口函数:$(document).ready(function(){});
延迟代码执行,当页面结构全部加载完毕后才执行jq代码,不包括图片、视频、音频等。
JQ入口函数:$(function(){})
jq入口函数简写方法。
原生入口函数和jq入口函数的异同:
相同:延迟代码执行,当页面结构全部加载完毕后才执行jq代码。
区别:原生的入口函数只能写一次,如果有多次,只有最后一次生效。Jq的入口函数可以写多次,每次都有效果。
原声的入口函数没有简写方法,jq的入口函数有简写方法$(function(){})。
$<=>Jquery :等价于
例: Query(function(){ });
2、Jquery基础与选择器
2.1、DOM对象和JQ对象
DOM对象:通过原声的JavaScriptDOM节点操作得到的对象就是DOM对象。
JQ对象:使用JQ的方法封装DOM对象得到的对象
&emsp**;原声对象和JQ对象都有一套完整的方法,不能混合使用。DOM对象不能使用JQ对象的方法,JQ对象不能使用DOM对象的方法。**
DOM对象转换JQ对象:$(DOM对象);
JQ对象转换为DOM对象:JQ对象[索引值]或者JQ对象.get(索引值)。如果JQ对象时通过JD名的方式获取的,索引值为0.
例:控制音乐的停止和播放
<script src="js/jquery-3.4.1.js"></script>
<script>
// play()和pause()是原生的方法,JQ对象不能直接使用
$(function(){
$('#play').click(function(event) {
$('audio')[0].play();
});
$('#noplay').click(function(event) {
$('audio').get(0).pause();
});
})
</script>
2.2、eq对象
JQ对象[索引值]:表示转换对象
JQ 对象.eq(索引值):表示获取数组元素
JQ的数组可以进行取操作,不需要进行遍历数组
2.3、选择器
选择器:如何选择一个标签。
在JQ中,选择器和css选择器类似
语法:$(选择器)
并集选择:a,b
交集选择:a.b
:odd:表示选中下标为奇数的元素
:not():表示选择不是某类的元素
2.4、鼠标事件
事件源.事件类型(function(){
事件触发后执行的嗲吗
}
.mouseover:鼠标移入
.mouseout:鼠标移出
.mouseenter:鼠标移入
.mouseleave:鼠标移出
.mouseover和.mouseout一组,会触发子元素。.mouseenter和mouseleave一组,不会触发子元素。
3、事件与动画
3.1、复合事件:hover
hover(function(){
鼠标移入时触发,
function(){
鼠标移出时触发
})
是mouseenter和mouseleave的复合事件
.on({}):可以同时给对象绑定多个事件。
3.2、键盘事件
键盘事件,事件源是doucument
例:用键盘左右方向键控制盒子向左或者向右移动
<script>
$(function(){
var a=0;
$(document).keydown(function(e) {
// 键盘事件,事件源是document
// console.log(e);
if(e.keyCode==37){
a--;
if(a<0){
a=0;
}
$('div').css('margin-left',a+'px');
}
if(e.keyCode==39){
a++;
if(a>$(window).width()){
a=$(window).width();
// $(window).width()获取浏览器可见窗口的宽度
}
console.log($(window).width());
$('div').css('margin-left',a+'px');
}
});
})
</script>
<style>
div{
width: 100px;
height: 100px;
background: green;
}
</style>
3.3、事件冒泡
事件冒泡就是子级和父级绑定相同的事件,触发子级的事件,会同时触发父级的事件。
事件冒泡解决方法;
1)、给子级加return false
2)、给子级加e.stopPropagation();
标签默认行为:标签自身带有的行为,比如a标签的跳转,表单的自动提交。
阻止默认行为:
1)、给标签加return false
2)、给子级加:e.preventDefault();
3.4、动画
显示与隐藏
显示: .show(时间/ms/fast/slow/normal,function(){
动画执行完毕后再执行的代码})
一般使用为.show(时间);
隐藏: .hide(时间/ms/fast/slow/normal,function(){
动画执行完毕后再执行的代码})
切换: .toggle(时间/ms/fast/slow/normal,function(){
动画执行完毕后再执行的代码})
淡入与淡出
淡入: .fadeIn((时间/ms/fast/slow/normal,function(){
动画执行完毕后再执行的代码})
淡出: .fadeOut((时间/ms/fast/slow/normal,function(){
动画执行完毕后再执行的代码})
切换: .fadeToggle((时间/ms/fast/slow/normal,function(){
动画执行完毕后再执行的代码})
展开与收起
展开: .slideDown((时间/ms/fast/slow/normal,function(){
动画执行完毕后再执行的代码})
收起: .slideUp((时间/ms/fast/slow/normal,function(){
动画执行完毕后再执行的代码})
切换: .slideToggle((时间/ms/fast/slow/normal,function(){
动画执行完毕后再执行的代码})
3.5、自定义动画
属性名.animate({
‘属性1’:’值1’,
‘属性n’:’值n’
},时间:ms)。
例1:
$(‘.one’).animate({
‘width’:’100px’,
‘height’:’20px’,
‘font-size’:’32px’
},1000)
自定义动画animate。只对值为数值的属性有效果。原理:使用”+=”或”-=”来创建相对动画。
强制停止动画:.stop().animate({});
例2:手风琴效果
模块样式(style.css):
*{
margin: 0px;
padding: 0px;
}
.box{
}
.box ul{
list-style: none;
overflow: hidden;
}
.box ul li{
float: left;
width: 150px;
overflow: hidden;
}
.box ul li img{
width: 350px;
}
模块效果(.html):
<link rel = “stylesheet” href=”css/style.css”>
<script src = “js/jquery-3.4.1.js></script>
<script>
$(function(){
$(‘.box li’).mouseenter(
function(event){
$(this).stop().animate({
‘width’:’350px’
},500)
$(this).siblinggs(‘li’).stop().animate({
‘whdth’:’150px’
},500)
})
})
</script>
<body>
<div id="header"></div>
<div class="box">
<ul>
<li><img src="img/01.jpg" alt=""></li>
<li><img src="img/02.jpg" alt=""></li>
<li><img src="img/03.jpg" alt=""></li>
<li><img src="img/04.jpg" alt=""></li>
<li><img src="img/05.jpg" alt=""></li>
<li><img src="img/06.jpg" alt=""></li>
</ul>
</div>
</body>
网页:swiper有大量轮播样式
3.6、控制标签css样式
如果标签本身就有该样式,表明修改样式;如果没有,表示增加样式。
修改单个样式:.css(‘属性名’:’属性值’)
修改多个样式:.css({
‘属性名1’:’属性值1’,
‘属性名2’:’属性值2’,
‘属性名n’:’属性值n’
})
3.7、增加删除类
增加类:.addClass(类名)。类名不需要加.
移除类:.removeClass(类名)
是否含有某类:.hasClass(类名) 判断对象是否含有某个类,有的话返回true,否则返回false。
3.8、获取元素宽高
对象.width(参数):如果有参数,表示设置对象的宽度,如果没有参数,表示获取对象的宽度。
对象.height(参数):如果有参数,表示设置对象的高度,如果没有对象,表示获取对象的高度。
例:图片随机移动
分析:隔一定的时间(定时器) 改变位置(定位) 位置随机(随机函数) 出现窗口
<head>
<script src='js/jquery-3.4.1.js'></script>
<script>
var timer;
var x=0;
var y=0;
timer=setInterval(function(){
x=Math.random()*$(window).width()-$('img').width();
y=Math.random()*$(window).height()-$('img').height();
if(x<0){
x=0;
}
if(y<0){
y=0;
}
$('img').animate({
'left':x+'px',
'top':y+'px'
},1000)
},3000)
</script>
<style>
img{
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<img src="img/timg.jpg" alt="">
</body>
3.9、offset
对象.offset().top:获取对象距页面顶部的距离。
对象.offset().left():获取对象距页面左边的距离。
获取对象页面、客户端、浏览器XY的距离:
对象.pageX
对象.pageY
对象.clientX
对象.clientY
对象.creenX
对象.creenY
4、Jquery操作DOM
4.1、html&&text
**.html():能识别标签。不传参数,表示获取标签内容,否则表示修改标签内容。
.text():不能识别标签。**不传参数,表示获取标签内容,否则表示修改标签内容。
4.2、控制表单元素的value
.val(参数):如果有参数为空,表示获取表单元素的value值;如果参数不为空,表示修改表单元素的value值。
4.3、DOM节点元素操作
追加标签:$(a).append(b)
b是a的父级,在a中追加b。
追加标签:$(a).appendTo(b)
b是a的父级,将a追加到b中。
在前面追加标签:$(a).prepend(b)
a是b的父级,在a的最前面追加b。
在前面追加标签:$(a).prependTo(b)
b是a的父级,将a追加到b中最前面
复制标签:对象.clone(),如果参数为true,表示完全复制,包括标签的事件。
删除标签:对象.remove()
例:微博发布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-3.4.1.js"></script>
<script>
$(function(){
$('button').click(function(event) {
var a=$('.uls>li').eq(0).clone(true);
a.children('p').html($('#txt').val());
a.children('time').html(new Date());
a.prependTo($('.uls'))
});
$('.del').click(function(event) {
$(this).parent().remove();
});
})
</script>
</head>
<body>
<textarea name="" cols="30" rows="10" id="txt"></textarea>
<button>发布</button>
<ul class="uls">
<li>
<p>这是第一条微博</p>
<time>2019-9-10</time>
<span class="del">X</span>
</li>
</ul>
</body>
</html>
4.4、节点属性操作
对象.attr(‘属性名’):获取标签属性,得到的是属性值。
对象.attr(‘属性名’,’属性值’):如果标签原本就有该属性,表示修改属性;如果没有,表示增加属性。
对象.removeAttr(‘属性名’):删除标签属性。
4.6、遍历节点
.children(‘选择器’):获取子元素,可以指定是某种子级。
.siblings(‘选择器’):获取同级元素,可以指定是某种元素。
.next():获取下一个元素,不可以指定某种元素。
.pre():获取上一个元素,不可以指定某种元素。
.parent():获取父级元素,元素的父级只有一个,不需要指定某种元素。
.parents():获取祖先元素,可以指定某种元素。
4.6、窗口滚动
.scrollTop():滚动条距离窗口顶部的距离。