目录

  1. jQuery引入
  2. jQuery选择器

 

jQuery引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 如果想用JQ的内容就得先将其引入 -->
		<!-- 1.本地有JQ文件 -->
		<!-- <script src="../js/jquery-3.4.1.min.js"></script> -->
		
		<!-- 2.内容分布网络 CDN   百度CDN的-->
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
			
	</head>
	<body>
		<div>忽如一夜春风来，千树万树梨花开。</div>
		<div>忽如一夜春风来，千树万树梨花开。</div>
		<div>忽如一夜春风来，千树万树梨花开。</div>
		
		<ul>
			<li>苹果</li>
			<li>香蕉</li>
			<li>鸭梨</li>
			<li>橘子</li>
		</ul>
		
		<p class="page">飞流直下三千尺，疑是银河落九天。</p>
		
		<script type="text/javascript">
			/**
			 * JQ的基本语法
			 * 		$(选择器).行为()
			 * 	
			 * 	$是JQ的符号 --- 表示的是jQuery
			 */
			
			// JS 设置其文字颜色
			// 1. 获取div
			var div_node = document.querySelector("div")
			div_node.style.color = "red";
			
			
			// JQ的语法
			$("div").css("background-color", "pink")
			/**
			 * $(选择器)
			 * 		获取的是所有满足选择器要求的元素 --- 节点集
			 * 
			 * JS中是没有办法对节点集进行操作的  只能从节点集中提取具体节点，然后给改节点设置
			 * 
			 * JQ是可以直接针对于节点集操作的
			 * 		进行行为操作的时候 操作的是所有满足选择器的元素
			 */
			
			/**
			 * JS元素与JQ元素之间的相互转换
			 */
			// JQ ---> JS
			var JQ_li = $("li")
			var li_js = JQ_li.get(0) // 拿的是第一个元素
			li_js.style.color = "green"
			
			// JS ----> JQ
			var page_node = document.querySelector(".page")
			var jq_page = $(page_node)
			jq_page.css("color", "orange")
			
			/**
			 * JQ和JS是可以共存的
			 * 但是JQ对象只能使用JQ的行为  不能使用JS的操作方式
			 * 		也就是说 jq_page只能使用css()设计样式  不能使用.style.样式名设计样式
			 * 
			 * JS只能使用JS的操作行为 不能使用JQ
			 * 		也就是说 page_node只能使用.style.样式名设计样式  不能使用css()设计样式  
			 */
			
		</script>
	</body>
</html>

jQuery选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<p>岱宗夫如何？齐鲁青未了。</p>
		<div>
			<p>造化钟神秀，阴阳割昏晓。</p>
			<p>荡胸生曾云，决眦入归鸟。</p>
		</div>
		<p>会当凌绝顶，一览众山小。</p>
		<span>岱宗夫如何？齐鲁青未了。</span>
		<p>造化钟神秀，阴阳割昏晓。</p>
		
		
		<div>
			<span>荡胸生曾云，决眦入归鸟。</span>
			<p>会当凌绝顶，一览众山小。</p>
		</div>
		
		
		<div>
			<span>荡胸生曾云，决眦入归鸟。</span>
			<b>good good study  day day up</b>
			<p>会当凌绝顶，一览众山小。</p>
		</div>
		
		<ul>
			<li>A</li>
			<li>B</li>
			<li>C</li>
			<li>D</li>
			<li>E</li>
			<li>F</li>
		</ul>
		
		<script>
			// 页面中第一个p标签
			$("p:first").css("color","red")
			
			// 指定的是div下第一个p标签
			$("div p:first").css("border", "solid 1px blue")
			
			// 页面中组后一个p标签
			$("p:last").css("color","green")
			
			// 指定的是div下最后一个p标签
			$("div p:last").css("border", "solid 1px pink")
			
			// 设置的是作为第一个子标签存在的span的样式
			$("span:first-child").css("font-size", "25px")
			
			//  + 相邻的下一个元素
			// 设计与span相邻的下一个p元素的样式
			$("span + p").css("text-shadow", "3px 3px 5px red")
			
			
			// 设置索引为 2的li元素的样式
			//$("li:eq(2)").css("list-style", "none")
			// 或者
			$("li").eq(2).css("list-style", "none")
			
			// 大于2的
			$("li:gt(2)").css("list-style", "circle")
			
			// 小于2的
			$("li:lt(2)").css("list-style", "square")
			
		</script>
		
	</body>
</html>