JQuery框架技术知识点整理

最新推荐文章于 2024-05-07 14:42:48 发布

我的芒果

最新推荐文章于 2024-05-07 14:42:48 发布

阅读量526

点赞数

分类专栏： PreJob

本文链接：https://blog.csdn.net/qq_37020594/article/details/100745734

版权

PreJob 专栏收录该内容

76 篇文章 3 订阅

订阅专栏

本文档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()：滚动条距离窗口顶部的距离。

我的芒果

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JQuery框架技术知识点整理

JQuery 第一步引入外部文件：<script src="js/jquery-3.4.1.js"></script> 可以通过JQuery官网下载相关外部文件如果使用别人的文件，将自己写的代码放在别别人的代码后面。如果开发者工具中报$ is not defined的错，第一步检查jq（Jquery的简称）是否引入正常。1、入口函数原生入口函数：win...
复制链接

扫一扫