jQuery基础_jqujide-CSDN博客

本文链接：https://blog.csdn.net/qq_35991442/article/details/126677217

一、jQuery引入

官网下载jquery.js

script引入

使用jquery

二、jQuery使用的注意事项

jQuery简写为$

jQuery对象只能调用jquery相关方法
js对象只能调用原生js对象的方法

jquery入口函数写法
$(document).ready(function(){})
jQuery(function(){})
$(function(){})

三、jQuery对象遍历

1、原生JS对象转化为jQuery对象

var div = document.querySelector(‘div’)

$(div)

2、jQuery对象转化为JS对象

var $div = $(‘div’);

$div[0];
$div.get(0);

原生JS数组遍历

fori

for i in ary

for item of ary

forEach()

jQuery对象遍历

1、转化为数组

Array.from($li)

$li.get()

2、特有方法each()

$li.each(function(index,item){

console.log(index,item)

})

代码演示(注：要下载jQuery包引入才可使用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="../js/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>

效果展示：

四、jQuery基本过滤选择器

1、基本选择器$(‘基本选择器’)

2、层次选择器$(‘E>F’)

3、属性选择器$(‘input[type=text]’)

4、多虑选择器

基本过滤选择器

内容过滤选择器

可见性过滤选择器

表单对象过滤选择器

代码演示(基本过滤选择器)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>JZ</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="./js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			// 基本过滤选择器
			// 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":"blue"})
			//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>

效果展示

代码展示(其他过滤选择器)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrapper>p{
				display: none;
				/* visibility: hidden; 不包含*/
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div>JZ</div>
			<div></div>
			<div><p>JZ</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="../js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			/* 
			内容过滤选择器
			可见过滤选择器
			表单对象过滤选择器
			     :enabled  选取所有可用元素 
			     :disabled 选取所有不可用元素 
			     :checked  选取所有被选中的元素（单元框、复选框)
			     :selected 选取所有被选中的选项元素（下拉列表)
			*/
		   // $(“div:contains(‘JZ’)”)选择内容里包含我的所有div
		     console.log($(".wrapper div:contains('JZ')"));
		   // $(“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>