Web基础——jQuery的基本使用

最新推荐文章于 2024-06-10 12:37:02 发布

Geek Li

最新推荐文章于 2024-06-10 12:37:02 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/weixin_43496491/article/details/122557466

版权

前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

1.什么是jQuery

jQuery是一个JavaScript库（框架），它通过封装原生的JavaScript函数得到一整套定义好的方法。
它的作者是John Resig，于2006年创建的一个开源项目，随着越来越多开发者的加入，
jQuery已经集成了JavaScript、 CSS、 DOM和Ajax于一体的强大功能。
它可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。

jQuery的功能和优势

jQuery 作为 JavaScript 封装的库，他的目的就是为了简化开发者使用 JavaScript。
主要功能有以下几点：1.像 CSS 那样访问和操作 
DOM2.修改 CSS 控制页面外观
3.简化 JavaScript 代码操作
4.事件处理更加容易
5.各种动画效果使用方便
6.让 Ajax 技术更加完美   异步加载
7.基于 jQuery 大量插件
8.自行扩展功能插件
jQuery 最大的优势，就是特别的方便。比如模仿 CSS 获取 DOM，比原生的 JavaScript要方便太多。并且在多个 CSS 设置上的集中处理非常舒服，而最常用的 CSS 功能又封装到单独的方法，感觉非常有心。最重要的是 jQuery 的代码兼容性非常好

第一个jQuery程序

首先在项目中引用jQuery库
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
单击按钮弹窗
$(function () {
	$('input').click(function () {
	alert('第一个 jQuery 程序！');	
});
});

代码风格

在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号“$”来起始的。而这个“$”就是jQuery当中最重要且独有的对象：jQuery对象，所以我们在页面元素选择或执行功能函数的时候可以这么写：
$(function () {});	 //执行一个匿名函数
$(‘#box’);	 //进行执行的ID元素选择
$(‘#box’).css(‘color’, ‘red’); 	//执行功能函数
由于$本身就是jQuery对象的缩写形式，那么也就是说上面的三段代码也可以写成如下
形式：
jQuery(function () {});
jQuery(‘#box’);
jQuery(‘#box’).css(‘color’, ‘red’);

值得一提的是，执行了.css()这个功能函数后，最终返回的还是jQuery对象，那么也就是说，
jQuery的代码模式是采用的连缀方式，可以不停的连续调用功能函数。
$('#box').css('color', 'red').css('font-size', '50px'); //连缀jQuery中代码注释和JavaScript是保持一致的，
有两种最常用的注释：单行使用“//...” ，多行使用“/* ... */” 。

2.jQuery入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入Jquery库文件 -->
		<!-- <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> -->
		<!--你可以不用把库文件，下到本地，直接引用网络版的  -->
		<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
	</head>
	<body>
		<button type="button">一个按钮</button>
		<script type="text/javascript">
			$('button').click(function() {
				alert("hello Jquery");
			})
		</script>
	</body>
</html>

3.jQuery的对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button" id="btn">按钮</button>
		<script type="text/javascript">
		   //$ 美元符号，就是 jQuery 对象的缩写形式
			var btn=$('#btn');
			btn.click(function(){
				alert("点击了")
			})
			var btn2=jQuery('#btn');
			alert($==jQuery);
		</script>
	</body>
</html>

4.jQuery链式编程

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="d1">
		</div>
		<script type="text/javascript">
			/* var obj=$('#d1');
			//返回的jquery对象
			var obj2=obj.css('height','200px');
			var obj3=obj2.css('width','200px');
			obj3.css('background-color','red'); */
			//上面的我们链式编程
$('#d1').css('height','200px').css('width','200px').css('background-color','yellow');
		</script>
	</body>
</html>

5.加载模式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		/* window.οnlοad=function(){
			$('#btn').css('background','red');
		}	 */
		//Jquery也有自己的加载的事件 ready()
		/* $(document).ready(function(){
			$('#btn').css('background','red');
		})
		 */
		//简写方式 只需要等待网页中的DOM结构加载完成执行
		$(function(){
			$('#btn').css('background','red');
		})
		</script>
	</head>
	<body>
		<button type="button" id="btn">一个按钮</button>
	</body>
</html>

6.对象的互换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button" id="btn">一个按钮</button>
		<h1  id="myh1">奥德赛发送到发发</h1>
		<h2 id="my2">碍事法师打发士大夫撒旦法萨芬</h2>
	</body>
	<script type="text/javascript">
		//原生DOM对象
		var btn=document.getElementById('btn');
		//alert(btn);
		//如果你用的是原生DOM对象，那你就调用原生JS的方法和属性，不要去调用jQuery提供的方法和属性，当然你也 调用不到
		btn.style.backgroundColor="red";
		//使用jQuery来获取 返回的是Jquery对象
		// 如果你用的是Jquery对象，你也不要去调用原生JS的属性和方法。当然你也调用不到
		var obj=$('#btn');
		obj.css('','20px');
		//alert(obj);
		//console.log(obj);
		//原生DOM对象 和  Jquery对象的互转
		var myh=document.getElementById("myh1");
		//把原生DOM对象，转换成Jquery 对象  方式 $(原生DOM对象)
		$(myh).css('color','red');
		var jqueryObj=$('#my2');
		//把 Jquery 对象 转换成 原生DOM对象 使用jQuery提供的get()方法
		var ysDom=jqueryObj.get(0);
		ysDom.style.color="blue";
	</script>
</html>

7.jQuery选择元素的方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		 <h1 class="myh1">aaaaaaaaaaaaaaaaaaaaa</h1>
		 <h1 class="myh1">aaaaaaaaaaaaaaaaaaaaa</h1>
		<script type="text/javascript">
			//使用 css选择器语法
			var obj=$('.myh1'); //选中了多个，返回的是jQuery对象，不是js的数组
			console.log(obj);
			console.log(obj.length);
			//你要设置他们的样式，直接设置，不需要遍历，除非你单独设置那个，你遍历判断
			obj.css('color','red');
			$(obj[0]).css('background-color','yellow');
			//可以使用一个get方法
			obj.get(1).style.background="green";
			
			//可以使用 eq(索引)  返回的还是jQuery对象 
			obj.eq(3).css('background','pink');
			//如果你要遍历，你要用jQuery提供的遍历方法
		 	obj.each(function(index,ele){ //ele 原生DOM对象
				//alert(index+"==="+ele);
				ele.style.backgroundColor="blue";
				$(ele).css('font-size',"50px");
			}) 
		</script>
	</body>
</html>

8.选择元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="d1">
			<h1>
				<span id="">aaaaaaaaaaaaaaaaaaa</span>
			</h1>
			<ul>
				<li>asfsdf</li>
				<li>asfsdf</li>
				<h1>阿斯顿发顺丰</h1>
			</ul>
			<h2>asdfadsfdasfdsaf</h2>
			<h3>阿是发是的发送到发送到</h3>
		</div>
		<script type="text/javascript">
			//	$('div h1 span')
			//使用 find方法层层往里找的方法
			var sp = $('div').find('h1').find('span');
			sp.css('color', 'red');
			
			//选择子元素的方法
			var li=$('ul').children('li');
			li.css('background','pink');
			$('h2').next().css('background','green');
		</script>
	</body>
</html>

选择元素2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h1>asdfasdfasdfs</h1>
		<h1>asdfasdfasdfs</h1>
		<h1>asdfasdfasdfs</h1>
	</body>
	<script type="text/javascript">
		var obj=$('h1');
		obj.first().css('color','pink');
		obj.last().css('color','red');
		//你用get方法，转换成原生DOM对象
		obj.get(2).style.background="red";
		//用eq方法，返回的还是jQuery对象
		obj.eq(5).css('background','yellow');
	</script>
</html>

9.html()和text()方法

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title></title>
			<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		</head>
		<body>
			<h1 id="myh1">这是一行标题</h1>
			<div id="">
			</div>
		</body>
		<script type="text/javascript">
		// innerHTML  innerText
			//var text=$('#myh1').text();
			//alert(text);
			//$('#myh1').text("HEllO");
			
			$('#myh1').text($('#myh1').text()+"HEllO");
			$('div').html('<h1>这是一行标题22222</h1>')
		</script>
	</html>

10.操作属性的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h1>阿斯顿发送到发送到</h1>
	</body>
	<script type="text/javascript">
	   var obj=document.getElementsByTagName("h1")[0];
	  // obj.setAttribute("align","center");
	  // obj.removeAttribute("align");
	  // $(obj).attr("align","center");
	  //  $(obj).removeAttr("align");
	  var attrObj={
		  'align':'center',
		  'id':'myh1',
		  'class':'myclass'
	  }
	  $(obj).attr(attrObj);
	</script>
</html>

11.CSS样式的操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a{
				font-size: 50px;
				color: blue;
			}
			.b{
				font-size: 50px;
				color: red;
				background: yellow;
			}
		</style>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="">
		</div>
		<h1 class="a">asdfasdfasdfasdf</h1>
		<button type="button">切换</button>
	</body>
	<script type="text/javascript">
	//	$('div').css('width','100px').css('height','100px').css('background','red');
	var cssObj={
		'width':'200px',
		'height':'200px',
		'background':'red'
	}
	$('div').css(cssObj);
	//添加 class属性
	//$('h1').addClass('a');
	$('button').click(function(){
		//切换class
		$('h1').toggleClass('b');
	})
	var w=$('div').width();
	var h=$('div').height();
	alert(w)
	alert(h)
	</script>
</html>

12.节点操作（1）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h1>111111111111111111111111</h1>
		<div id="d1">
			<h2>22222222222222222</h2>
		</div>
		<h5>44444444444444444444444444444444444</h5>
		<div id="d2">
			<h3>333333333333333333333333333333333</h3>
		</div>
	</body>
	<script type="text/javascript">
		// var btn=document.createElement("button");
		// btn.innerText="一个按钮";
		// document.body.appendChild(btn);
		 //创建一个标签
		var btn=$('<button>一个按钮</button>');
		//添加子元素
		$('body').append(btn);
		//把h1 移动到 div里面的原来子元素的后面
		$('h1').appendTo('#d1');
		var btn2=$('<button>一个按钮222222</button>');
		$('#d2').prepend(btn2);
		//把h5移动到div里面在原来子元素的前面
		$('h5').prependTo('#d2');
	</script>
</html>

13.节点操作（2）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h1>11111111111111111111111111111</h1>
		<div id="d1">
			阿帆发送到发送到发算法算法 
		</div>
		<h4>4444444444444444444444444444444444444444444</h4>
	</body>
	<script type="text/javascript">
	//在h1的下面添加一个h2
		$('h1').after('<h2>22222222222222222222222</h2>')
		//在h1的上面添加换一个h3
		$('h1').before('<h3>3333333333333333333333333333333</h3>')
		//把h4移动到 div的前面
		$('h4').insertBefore('#d1');
		//insertAfter(content)
		//把h4移动到 div的下面
		$('h4').insertAfter('#d1');
	</script>
</html>

14.包裹元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h1>11111</h1>
		<h1>11111</h1>
		<h2>2222222222222</h2>
	</body>
	<script type="text/javascript">
	    //给每一个h1外面套一个div
		$('h1').wrap('<div></div>');
		//给所有的h2看做一个整体，外面套一个div
		$('h2').wrapAll('<div></div>');
		//去除包裹
		//$('h2').unwrap();	
	</script>
</html>

15.给子元素进行包裹

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="d1">
			<h1>1111</h1>
			<h1>1111</h1>
		</div>
		<script type="text/javascript">
		// 给div里面所有的h1子元素整体外面包裹一个div
			$('#d1').wrapInner('<div></div>');
		</script>
	</body>
</html>

16.删除节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h1 id="myh1">asfffffffffffffffffffffffffff</h1>
		<div id="d2">
			<h2>222222</h2>
			<h2>222222</h2>
		</div>
	</body>
	<script type="text/javascript">
		//删除节点
		$('#myh1').remove();
		//删除子元素,可以认为是清空子元素。
		$('#d2').empty();
	</script>
</html>

17.事件的绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button">一个按钮</button>
	</body>
	<script type="text/javascript">
	//bind(事件名，事件处理函数)
		$('button').bind('click',function(){
			//alert("hello");
			//$('button').css('background','red');
			//注意把this 转换成JQuery对象
			$(this).css('background','red');
		})
		//解绑
		//$('button').unbind('click');
	</script>
</html>

18.绑定多个事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button">一个按钮</button>
	</body>
	<script type="text/javascript">
	//bind(事件名，事件处理函数)
		/* $('button').bind('click',function(){
			//注意把this 转换成JQuery对象
			$(this).css('background','red');
		})
		$('button').bind('mouseover',function(){
			$(this).css('background','yellow');
		}) */
		//连缀绑定多个事件
		$('button').bind('click',function(){
			//注意把this 转换成JQuery对象
			$(this).css('background','red');
		}).bind('mouseover',function(){
			$(this).css('background','yellow');
		}).bind('mouseout',function(){
			$(this).css('background','pink');
		})
		//解绑某个事件
		$('button').unbind('click');
		//可以一次解绑所有事件，不传参即可
		$('button').unbind();
	</script>
</html>

19.解绑多个相同的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button">一个按钮</button>
	</body>
	<script type="text/javascript">
		var a=function(){
			//注意把this 转换成JQuery对象
			alert("11111")
			$(this).css('background','red');
		};
		var b=function(){
			alert("22222")
			$(this).css('background','yellow');
		}
		//连缀绑定多个事件
		$('button').bind('click',a).bind('click',b)
		//解绑某个事件 
		$('button').unbind('click',b); //第二个参数是事件处理函数
	</script>
</html>

20.事件的简写方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button">一个按钮</button>
	</body>
	<script type="text/javascript">
	$(document).ready(function(){
		//常用的事件类型，都提供了对应的方法。
			$('button').click(function() {
				alert("abc");
			})
		/* 	
			$('button').mouseover(function(){
				$(this).css('background','red')
			}).mouseout(function(){
				$(this).css('background','blue')
			})
			 */
			//移上移出，综合成一个方法
			$('button').hover(function(){
				//处理鼠标移上
				$(this).css('background','red')
			},function(){
				//处理鼠标移出
				$(this).css('background','blue')
			})
	})
	</script>
</html>

21.事件对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button">一个按钮</button>
	</body>
	<script type="text/javascript">
		//event 事件对象，Jquery 对事件对象，没有做任何处理，我们还是事件对象的属性和方法
		//事件对象，你直接在处理函数上接收就行。
		$('button').click(function(e){
			//alert(e.type);
			$(e.target).css('background','red');
			//e.preventDefault()
			//e.stopPropagation()
		})
	</script>
</html>

22.事件的自动触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button">一个按钮</button>
	</body>
	<script type="text/javascript">
		$('button').click(function(){
			alert("点击了");
		}).trigger('click'); 
	//$(‘button’).trigger(‘click’); //浏览器一打开自动触发该点击事件
	</script>
</html>

23.推荐使用的事件处理的方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button">一个按钮</button>
		<ul>
			<li>asdfasdfasdf</li>
			<li>asdfasdfasdf</li>
		</ul>
	</body>
	<script type="text/javascript">
	//	bind() unbind() 方法 在3.0新版中已经废弃了
	//新版本推荐使用 on() off() 来绑定和解绑事件。
	/* $('button').on('click',function(){
		alert("hello")
	}) */
	//$('button').off('click');
	//事件只执行一次
	$('button').one('click',function(){
		alert("hello")
	})
	</script>
</html>

Geek Li

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web基础——jQuery的基本使用

1.什么是jQueryjQuery是一个JavaScript库（框架），它通过封装原生的JavaScript函数得到一整套定义好的方法。它的作者是John Resig，于2006年创建的一个开源项目，随着越来越多开发者的加入，jQuery已经集成了JavaScript、 CSS、 DOM和Ajax于一体的强大功能。它可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。jQuery的功能和优势jQuery 作为 JavaScript 封装的库，他的目的就是为了简化开发者使用 Ja
复制链接

扫一扫