jquery

最新推荐文章于 2024-08-20 16:48:16 发布

可劲旋代码

最新推荐文章于 2024-08-20 16:48:16 发布

阅读量204

点赞数 1

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/jiao18237330105/article/details/126587243

版权

1、jquery的引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#app{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">哈哈哈哈</div>
		<!-- 
		1、官网下载jquery.js
		2、script引入
		3、使用jquery
		 -->
		 <script src="./jquery-3.6.0/jquery-3.6.0.min.js"></script>
		 <script>
			/*
			 jquery简写为$
			 1、jQuery对象只能调用jQuery相关方法
			 2、js对象只能调用原生js对象的方法
			 3、jquery入口函数写法
			     $(document).ready(function(){})
				 jQuery(function(){})
				 $(function(){})
			*/
		   //jquery 入口函数
		   jquery(function(){
			   console.log($("#app"));//jquery对象
			   console.log($("#app").text());
			   console.log($("#app").text());
		   })
		   var _app=document.querySelector(".app");
		   console.log(_app);//原生js对象
		 </script>
	</body>
</html>

在这里插入图片描述

2、网页渲染过程

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#app{
				width: 200px;
				height: 200px;
				background-color:red;
			}
		</style>
		<!--js延迟加载 两者只适用于外部脚本文件
		1、HTML 4.01:defer,脚本会被延迟到整个页面都解析完毕之后再执行 
		                    等于告诉浏览器立即下载，但延迟执行
		2、HTML5:async属性,不让页面等待脚本下载和执行，从而异步加载页面其他内容
		                   异步脚本一定会在页面 load 事件前执行。 
		-->
		<!-- h4 -->
		<!-- <script src="js/test.js" defer></script> -->
		<script src="./js/text.js" async></script>
		<script src="./jquery-3.6.0/jquery-3.6.0.js"></script>
		<script>
			/*
			window.onload：
				 执行时机:dom树加载完成(css文件，图片、视频)
				 window.onload如果有多个，后者会覆盖前者
				 没有简写 
			$(function(){})：
				执行时机:dom树加载完成(不需要等css文件，图片、视频加载)
				$(function(){})可以有多个
				有简写
			*/
		window.onload=function(){
			var _app=document.querySelector("#app");
			console.log(_app.innerHTML);
		}
		window.onload=function(){
			console.log(666);
		}
		
		$(function(){
			console.log($("#app").html());
		})
		$(function(){
			console.log(888);
		})
		</script>
	</head>
	<!-- 1、下载html代码生成dom树
	 2、下载css生成css树
	 3、dom树个css树生成渲染树
	 4、开始渲染页面,遇到js阻塞 -->
	<body>
		<div id="app">
			哈哈哈哈哈哈哈哈哈哈
		</div>
	</body>
</html>

在这里插入图片描述

3、jquery对象遍历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#app{
				width: 200px;
				height: 200px;
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div id="app">哈哈哈哈</div>
		<ul>
			<li>111</li>
			<li>222</li>
			<li>333</li>
		</ul>
		<script src="./jquery-3.6.0/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				// JQuery对象
				var $app=$("#app");
				console.log($app);
				//原生js对象
				var _app=document.querySelector("#app")
				console.log(_app);
				
				// JQuery对象转换为原生js对象
				console.log($app[0]);
				console.log($app.get(0));
				//原生js对象转换为 JQuery对象
				console.log($(_app));
				
				
				/* 数组遍历:
					   fori  
					   for i in ary  
					   for item of ary
					   forEach() 
				   jquery对象遍历方式:
				      1、转换为数组
					       Array.from($li)
						   $li.get()
					  2、特有一个each
				*/
				var $li=$("li");
				lis=$li.get();
				console.log(lis);
				lis.forEach((item)=>{
					console.log(item)
				})
				
				// $li.each(function(index,item){
				// 	console.log(index,item);
				// })
				$li.each(function(index){
					//this指代当前遍历到的对象，是js原生对象
					console.log($(this).html());
				})
				// $.each($li,function(index,item){
				// 	console.log(index,item);
				// })
				
				//js写法
				//获取原生js对象li
				// var _li=document.querySelectorAll("li");
				// for (var tag of _li) {
				// 	tag.οnclick=function(){
				// 		alert(this.innerHTML)
				// 	}
				// }
				//jquery写法
				$("li").click(function(){
					//this:点击谁指谁
					alert(this.innerHTML);
				})
			})
		</script>
	</body>
</html>

在这里插入图片描述

4、jquery基本过滤选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>哈哈哈</h1>
		<h2>呵呵呵</h2>
		<ul>
			<li>111111</li>
			<li>222222</li>
			<li class="active">333333</li>
			<li class="active">444444</li>
			<li>555555</li>
			<li>666666</li>
		</ul>
		<script src="./jquery-3.6.0/jquery-3.6.0.js"></script>
		<script>
			/*
				1、基本选择器 $("基本选择器")
				2、层次选择器 $("E>F")
				3、属性选择器 $("input[type=text]")
				4、过滤选择器
				    基本过滤选择器
					内容过滤选择器
					可见性过滤选择器
					表单对象过滤选择器 
				*/
			// 基本过滤选择器
			// 1、选择第一个和最后一个
			$("li:first").css({"background-color":"red"})
			$("li:last").css({"background-color":"red"})
			//2、选择奇偶行
			$("li:even").css({"background-color":"green"})
			$("li:odd").css({"background-color":"#0046ea"})
			//3、选择指定行
			$("li:eq(2)").css({"background-color":"yellow"})
			//4、选择范围行，大于小于
			$("li:gt(2)").css({"background-color":"pink"})
			$("li:lt(2)").css({"background-color":"orange"})
			//5、排除行
			$("li:not(.active)").css({"color":"white"})
			//6、获取所有标题元素，h1-h6
			console.log($(":header"));
		</script>
	</body>
</html>

在这里插入图片描述

5、jquery其他过滤选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrapper>p{
				display: none;
				/* visibility: hidden; 不包含*/
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div>哈哈哈</div>
			<div></div>
			<div><p>哈哈哈</p></div>
			<div><span></span></div>
			
			<p>111</p>
			<p>222</p>
			<form action="">
				<input type="text" value="张三">
				<input type="text" disabled value="李四">
				<input type="checkbox" value="1">
				<input type="checkbox" value="2">
				<input type="checkbox" value="2">
				<select name="" id="">
					<option value="1">郑州</option>
					<option value="2">新乡</option>
				</select>
			</form>
		</div>
		<script src="./jquery-3.6.0/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			/* 
			内容过滤选择器
			可见过滤选择器
			表单对象过滤选择器
			     :enabled  选取所有可用元素 
			     :disabled 选取所有不可用元素 
			     :checked  选取所有被选中的元素（单元框、复选框
			     :selected 选取所有被选中的选项元素（下拉列表 
			*/
		   // $(“div:contains(‘文字’)”)选择内容里包含我的所有div
		     console.log($(".wrapper div:contains('文字')"));
		   // $(“div:empty”)选择不包含子元素（含文本）的所有div元素
		    console.log($(".wrapper div:empty"));
		   // $(“div:has(p)”)选择含有p元素的所有div元素
		    console.log($(".wrapper div:has(p)"));
		   // $(“div:parent”)选择拥有子元素（包含文本）的所有div元素
		   console.log($(".wrapper div:parent"));
		   
		   // $(“:hidden”)选择所有不可见元素，
		   console.log($(".wrapper>p:hidden"));
		   // $(“div:visible”)选取所有可见的div元素 
		   console.log($(".wrapper>div:visible"));
		   
		   // :enabled  选取所有可用元素
		   console.log($("input:enabled"));
		   // :disabled 选取所有不可用元素 
		   console.log($("input:disabled"));
		   // :checked  选取所有被选中的元素（单元框、复选框）
		   $("input[type=checkbox]").click(function(){
			   var ch=$("input:checked");//获取所有被选中的元素
			   console.log(ch.length);
		   })
		   // :selected 选取所有被选中的选项元素（下拉列表 ）
		   $("select").change(function(){
			   // html()  text()  val()
			   console.log($(":selected").val());
			   console.log($(":selected").html());
		   })
		</script>
	</body>
</html>

在这里插入图片描述

可劲旋代码

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery

/ $(“div:contains(‘文字’)”)选择内容里包含我的所有div。// $(“div:parent”)选择拥有子元素（包含文本）的所有div元素。// $(“div:empty”)选择不包含子元素（含文本）的所有div元素。// $(“div:has(p)”)选择含有p元素的所有div元素。// $(“div:visible”)选取所有可见的div元素。// :checked 选取所有被选中的元素（单元框、复选框）// $(“:hidden”)选择所有不可见元素，...
复制链接

扫一扫