jQuery_01 入门&选择器_代码007(未授权)

本文介绍: 一：jQue ry是什么? jQue ry 是一个快速、小型且功能丰富的 Jav aScri p t 库。它使 HTML 文档遍历和操作、事件处理、动画和 Aja x 之类的事情变得更加简单，它具有易于使用的 API，可在多种浏览器中工作 jQue ry 结合了多功能性和可扩展性，改变了数百万人编写 Jav aScri p t 的方式。 jQuery的理念：write less,d o……

一：jQuery是什么?

jQuery 是一个快速、小型且功能丰富的 Jav aScri p t 库。它使 HTML 文档遍历和操作、事件处理、动画和 Aja x 之类的事情变得更加简单，它具有易于使用的 API，可在多种浏览器中工作 jQuery 结合了多功能性和可扩展性，改变了数百万人编写 Jav aScri pt 的方式。

jQuery的理念：write less,d o more.

二:为什么要学习JQuery？


 <script src="jquery-3.5.1/jquery-3.5.1.min.js"&gt;</script&gt;

<!DOCTYPE html&gt;
<html&gt;
	<head&gt;
		<meta charset="utf-8">
		<title>测试</title>
		<script src="js/jquery-3.5.1.js"></script>
		<script type="text/javascript">
			//改变操作方法
			//改变p1的背景
            function change_p1(){
		    //css("属性名，属性值")
			//获取id
		     var pid=$("#p1");	
			 //改变背景颜色
			pid.css("background","blue");		
			}

			//改变p2的背景
			function change_p2(){
				//方法一
				//获取class属性
				//var pclass=$(".p2");
				//pclass.css("background","red");
				
				//方法二
				//dom元素无法调用jquery的方法
				//将一个元素从dom -> jquery
				//使用$()进行包裹起来
				//$(".p2")[0]-----dom元素(集合)
				//[0]-----相同class属性名的位置下标
				$($(".p2")[1]).css("background","red");		
			}
			
			 //改变p标签的背景
			function change_p(){
				//获取所有的p标签----$("p")
				$("p").css("background","pink");//背景颜色	
				$("p").css("color","red")//文字颜色
				$("p").css("font-size","20px")//字体大小	
			}
			
			//改变div里面的p标签的背景
			function change_div(){
		    // div p   div里面的所有的p标签(子元素和子子...元素)
			// div>p   div里面的所有的p标签(子元素)
		    $("div p").css("background","yellow");	   
			}
			
			 //改变p2,p3标签的背景
			 function change_p23(){
				  //使用多个选择器,用逗号隔开$里面的内容(属性名)
				 $(".p2,.p3").css("background","gray"); 
			 }		
			
		</script>
	</head>
	<body>
		<div>
			<p id="p1">我是p1</p>
			<p class="p2">我是p2</p>
			<p class="p2">我是p3</p>
			<p>我是p4</p>
		</div>
		<p class="p3">我是div外面的p</p>
		<button onclick="change_p1()">点击我改变p1的背景</button>
		<button onclick="change_p2()">点击我改变p2的背景</button>
		<button onclick="change_p()">点击我改变p标签的背景</button>
		<button onclick="change_div()">点击我改变div里面的p标签的背景</button>
		<button onclick="change_p23()">点击我改变p2,p3标签的背景</button>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>隔行变色</title>
		<script src="js/jquery-3.5.1.js"></script>
		<script type="text/javascript">
			//要求:有李世民姓名的一行变成红色
			//     有曹操姓名的一行变成黄色
			
			
			//加载事件
			$(function(){
				//第一个li标签
				//$("li:first").css("background","red");
				//最后一个li标签
				//$("li:last").css("background","yellow");
				//大于0
				//$("li:gt(0)").css("background","blue");
				//小于0---li:lt(0)
				//li:lt(2)---小于下标为2的标签
				//$("li:lt(2)").css("background","gray");
				
				//奇数
				$("li:odd").css("background","pink");
				//偶数
			   $("li:even").css("background","green");
			})
			
			
			
			
			
			
		</script>
		
		
	</head>
	<body>
		 <ul>
		        <li>李世民</li>
		        <li>曹操</li>
		        <li>李世民</li>
		        <li>曹操</li>
		        <li>李世民</li>
		        <li>曹操</li>
		        <li>李世民</li>
		        <li>曹操</li>
		        <li>李世民</li>
		        <li>曹操</li>
		    </ul>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单选择器</title>
		<script src="js/jquery-3.5.1.js"></script>
	</head>
	<style type="text/css">
		body {
			font-size: 10px;
			text-align: center;
		}

		.img {
			padding: 2px;
			border: solid 1px #ccc;
		}

		.div {
			border: solid 1px #ccc;
			background-color: #eee;
		}
	</style>

	<script type="text/javascript">
		$(function() {
					console.log($("#form1 :text").val());
					console.log($("#form1 :password").val());
					console.log($("#form1 :radio").val());
					console.log($("#form1 :checkbox").val());
					console.log($("#form1 :submit").val());
					console.log($("#form1 :reset").val());
					console.log($("#form1 :button").val());
					})
	</script>
	<body>
		<form id="form1">
			<textarea class="txt"> 好好学习</textarea>
			<select>
				<option value="0">okok</option>
			</select>
			<input type="text" value="Text" class="txt" />
			<input type="password" value="password" class="txt" />
			<input type="radio" /><span id="Span1">Radio</span>
			<input type="checkbox" /><span id="Span2">checkbox</span>
			<input type="submit" value="Submit" class="btn" />
			<input type="image" title="Image" src="img/小姐姐.jpg" class="img" />
			<input type="reset" value="reset" class="btn" />
			<input type="button" value="button" class="btn" />
		</form>
	</body>
</html>