JQuery基础学习

一、简介

JS框架

框架
- 使用原生的代码完成某些功能过于繁琐（代码量太大、冗余代码过多）
- 在开发过程中，大部分程序员会对这些复杂的代码进行封装
- 封装之后，提高了代码的编程效率
- 这种高度封装的代码被我们称为框架
- JDBC（7个步骤） ----> JDBCTemplate（JDBC框架）
JQuery就是别人提供的对原生js代码进行了封装的代码
要想使用JQuery需要将别人写好的代码引入到我们的项目中

二、使用JQuery

1、在项目文件夹中存放一份JQuery文件

2、在需要使用该框架的文件中引入文件

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<!-- 在当前文件中引入JQuery框架 -->
		<script type="text/javascript" src="../js/jquery.min.js"></script>
	</head>
	<body>

	</body>
</html>

三、节点操作

1、获取节点

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<!-- 在当前文件中引入JQuery框架 -->
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript">
			function test(){
				// 使用原生js获取节点
				var h1 = document.getElementById("h1");
				var h1s_name = document.getElementsByName("h1");
				var h1s_class = document.getElementsByClassName("h1");
				var h1s_tag = document.getElementsByTagName("h1");
				// 使用JQuery获取节点
				var $h1 = $("#h1");//id选择器
				var $h1s_name = $("*[name='h1']")//条件选择器 在所有标签中寻找name=h1的节点
				var $h1s_class = $(".h1");//类选择器
				var $h1s_tag = $("h1");//标签选择器
				console.log(h1);
				console.log($h1);

			}
			

		</script>
	</head>
	<body>
		<h1 id="h1">Java170</h1>
		<h1 name="h1">Java170</h1>
		<h1 name="h1">Java170</h1>
		<h1 class="h1">Java170</h1>
		<h1 class="h1">Java170</h1>
		<input type="button" value="点击" onclick="test()">

	</body>
</html>

2、DOM对象和JQuery对象

区别
- 都可以获取指定的节点
- 对节点的表现形式不一样
- DOM对象只能使用原生JS提供的一些对节点操作的方法
- JQuery对象只能使用JQuery提供的一些对节点操作的方法
DOM对象和JQuery对象可以互相转换

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<!-- 在当前文件中引入JQuery框架 -->
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript">
			function test(){
				// 使用原生js获取节点
				var h1 = document.getElementById("h1");
				// 使用JQuery获取节点
				var $h1 = $("#h1");//id选择器

				// dom ---> jquery
				var dom$ = $(h1);
				console.log(dom$);
				// jquery ---> dom
				var $dom = $h1.get(0);
				console.log($dom);


				// console.log(h1.innerHTML);//dom对象
				// console.log($h1.innerHTML);//jquery对象 innerHTML是属于原生js的代码 jquery对象不能使用
			}
			

		</script>
	</head>
	<body>
		<h1 id="h1">Java170</h1>
		<input type="button" value="点击" onclick="test()">

	</body>
</html>

四、JQuery对象的常用方法

语法	作用
$(function(){});	写在{}中的内容在页面加载完成之后再被执行
$(“选择器”);	根据选择器获取对应的节点（JQuery对象）
jquery对象.click(function(){});	给jquery对象绑定点击事件
jquery对象.html();	innerHTML
jquery对象.val();	value
jquery对象.attr(“属性名”);	获取该节点指定的属性值,新版本被prop取代

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript">
			// 页面加载完成后执行
			$(function(){
				//获取h节点对象
				var h = document.getElementById("h");
				console.log(h);

				// 给JQuery对象动态绑定点击事件
				$("#button").click(function(){
					// 获取表单元素的value值
					var loginName = $("#loginName").val();
					console.log(loginName);
					// 设置表单元素的value值
					$("#loginName").val("方方土");
				});

				// 相当于innerHTML 获取节点中的内容
				console.log($("#h").html());
				// 设置节点中的内容
				$("#h").html("大家好");

				// 获取当前节点中指定属性的值
				var a = $("#h").attr("aaa");
				console.log(a);
				// 设置当前节点中指定属性的值
				$("#h").attr("aaa","1234");



			});
		</script>
	</head>
	<body>

		<h1 id="h" aaa="qwer">Java170</h1>
		<input type="text" id="loginName">
		<input type="button" value="点我" id="button">

	</body>
</html>

五、CSS处理

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<style type="text/css" media="screen">
			.h{
				font-size: 80px;
			}
			
		</style>
		<script type="text/javascript">
			$(function(){
				$("#button").click(function(){

					// var h = document.getElementById("h");
					// h.style.color = "red";
					
					// 修改css属性值
					$("#h").css("color","red"); 
					// 获取css属性值
					console.log($("#h").css("color"));

					// 为对象JQuery对象添加一个类选择器
					$("#h").addClass('h');

				});

				$("#button1").click(function(){
					$("#h").removeClass('h');
				});


			});
		</script>
	</head>
	<body>
		<h1 id="h">Java170</h1>
		<input type="button" value="点我" id="button">
		<input type="button" value="点我" id="button1">

	</body>
</html>

六、JQuery效果

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript">
			
			$(function(){

				$("#b1").click(function(){
					$("#d").hide();//隐藏效果
				});

				$("#b2").click(function(){
					$("#d").show();//展示效果
				});

				$("#b3").click(function(){
					$("#d").fadeOut(5000);//淡出效果
				});

				$("#b4").click(function(){
					$("#d").fadeIn(5000);//淡入效果
				});


			});

		</script>
	</head>
	<body>
		<div id="d" style="background-color: skyblue;width: 400px;height: 400px"></div>
		<input type="button" value="点我" id="b1">
		<input type="button" value="点我" id="b2">
		<input type="button" value="点我" id="b3">
		<input type="button" value="点我" id="b4">

	</body>
</html>

七、文档处理

1、内部插入

a.append(b)
- 将b的内容插入到a节点标签中的末尾（识别标签）
a.appendTo(b)
- 将a的内容插入到b节点标签中的末尾（识别标签）

2、外部插入

a.before(b)
- 将b的内容插入到a之前（兄弟节点）

3、删除

empty()
- 清空节点中的内容
remove()
- 删除节点本身