46-jQuert库的基本介绍

最新推荐文章于 2023-01-06 18:08:24 发布

挣扎的您我

最新推荐文章于 2023-01-06 18:08:24 发布

阅读量307

点赞数

本文链接：https://blog.csdn.net/weixin_44614066/article/details/89339135

版权

这篇博客主要针对初学者介绍jQuery的初级使用，包括jQuery的下载、浏览器兼容性问题以及代码组织结构。文中通过代码示例展示了jQuery的基础操作，如加载函数、样式函数、使用风格和选择器。适合刚接触jQuery的开发者参考学习。

摘要由CSDN通过智能技术生成

一、jQuery的初级的使用，
下面直接是代码的演示部分。其中的jQuert代码中的jQuery 大家可以进行网上下载，注意浏览器的兼容问题，代码中会有你需要的疑惑，希望能够对你的学习有帮助作用，合适于初学者，大牛可以绕行。
这个适合于初学者，大牛求绕行，

注意：一下代码的①js库是使用的是：jquery-1.12.4.js
②img图片也是专门建立的一个文件夹
③html代码的格式也是也是专门写在一个css的的文件夹中，方便代码的分
层，和代码的可阅读性。是的代码的高内聚低耦合更加合理，方便自己后续
去给往上添加功能和内容。
关于jQuery中的一些介绍和历史，大家可以上网进行查询学习
代码段
1.初识jQuery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="button" id="btn" value="点我弹出对话框" />
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("#btn").click(function(){
				alert("点我你幸福吗？");
			});
		</script>
	</body>
</html>

2.认识一下页面的加载函数

	<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//js页面加载函数事件，当页面加载成功后就开始执行
		//js页面加载事件 当页面加载成功后就开始执行
		//js页面加载事件只会执行一次。如果有多个谁在后面就执行谁
		//window加载的时候就触发了
		window.onload = function(){
			alert("'谁是英雄");
		}
		
		/**
		 * jQuery页面加载函数，当document(DOM)文档结构准备好了就触发了
		 * jQuery页面加载函数可以执行多次，
		 * Jqueury页面加载函数要比js页面加载函数先进行触发
		 * 
		 */
		$(function(){
			alert("好好学习，你最棒！");
		});
		
		
		
	</script>
</body>

``` 3.jQuery的语法结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/**
			 * jQuery工厂函数，将某些内容加工成jQ对象
			 * jQuery(document).ready();
			 * $(document).ready();
			 * $(document)将JS对象转换成JQ对象
			 */
			$(document).ready(function(){
				
			});
			
			//可以将上面的简写成
			$(function(){
				
			});
			
		</script>
	</body>
</html>

4.jQuert常用的样式函数

①
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.content{
				background-color: deeppink;
			}
			
			
			div{
				border: 1px solid red;
				width: 100px;
				height: 100px;
			}
			
			.borderContent{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div style="width: 100px;">
			
		</div>
		
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//用js来操作元素
			/*var divObj = document.getElementsByTagName("div")[0];	
			divObj.onmouseover = function(){
				//设置背景颜色
				divObj.style.backgroundColor = "red";
				//创建class名字
				divObj.className = "haoren";
			}*/
			
			//用Jquery操作对象
			$("div").mouseover(function(){
				$(this).css({
					"background-color":"red",
					"border":"10px solid blue"
				});
				//jQuert来获取css中只能获取标签中style的属性值
				
			});
			
			
			
			
			
			
		</script>
	</body>
</html>
------------------------------------------------------------------------------------------------------------------------------
②
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="">
			
		</div>
		<input type="button" value="点我隐藏" id="hid" />
		<input type="button" value="点我显示" id="show" />
		
		<script