JavaEE学习日志(六十): jQuery基础语法，jQuery选择器

最新推荐文章于 2022-09-27 16:37:07 发布

隔叶听风

最新推荐文章于 2022-09-27 16:37:07 发布

阅读量237

点赞数 1

分类专栏：前端 JavaEE学习日志文章标签： javascript js jquery css html

本文链接：https://blog.csdn.net/Sakuraaaaaaa/article/details/105198443

版权

JavaEE学习日志同时被 2 个专栏收录

168 篇文章 9 订阅

订阅专栏

前端

29 篇文章 0 订阅

订阅专栏

本文深入讲解jQuery框架的基础知识，包括jQuery的引入与使用、DOM对象与jQuery对象的区别及转换、选择器的运用，如基本选择器、层次选择器、属性选择器、过滤选择器和表单选择器等，为前端开发者提供全面的jQuery学习指南。

摘要由CSDN通过智能技术生成

JavaEE学习日志持续更新----> 必看！JavaEE学习路线（文章总汇）

JavaEE学习日志（六十）

jQuery基础

jQuery基础

jQuery介绍

jQuery是一个非常优秀的javaScript框架。
通用功能实现完毕，编写自己的特殊功能。

jQuery特点：

轻量级
兼容CSS3
实现浏览器兼容性。但从2.0版本开始，不支持IE678
代码减少，功能增多
AJAX异步请求

jQuery基础语法

使用jQuery框架，必须调用核心函数jQuery
核心函数的参数：传递自己编写的匿名函数，会在页面加载完成后调用匿名函数。
核心函数名字可以简写为$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.3.1.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			//能使用多次
			jQuery(function(){
				alert("jQuery");
			});
			$(function(){
				alert("jQuery");
			});
			
			//只能写一次，多了会覆盖
			window.onload = function(){
				alert(1);
			}
			window.onload = function(){
				alert(2);
			}
		</script>
	</head>
	<body>
		
	</body>
</html>

DOM对象和jQuery对象

DOM对象：document对象获取的页面元素，如document.getElementById()
jQuery对象：使用jQuery方式获取的页面元素，如$("#id")

注意：DOM对象和jQuery对象不通用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			function fn(){
				//DOM方式，获取文本框输入的内容
				var user = document.getElementById("user");
				//alert(user.value);
				//jQuery方式获取
				var $user = $("#user");
				alert($user.val())
			}
		</script>
	</head>
	<body>
		<input type="text" id="user" />
		<input type="button" value="按钮" onclick="fn()"/>
	</body>
</html>

dom对象和jQuery对象互转

把DOM对象转化成jQuery对象 $(DOM对象)

alert($(user).val());

jQuery对象转换成DOM对象：jQuery本质上是个数组，数组元素是DOM对象。示例：jQuery对象[0]

alert($user[0].value);

jQuery选择器

选择器作用：快速且精准地定位到页码中的html元素，与css选择器基本一致。

基本选择器（重点）

元素选择器$("标签名")
id选择器$("#id属性值")
class选择器$(".class属性值")

注意：css函数，操作样式表，CSS的属性和属性值。
例如：$("div").css("css属性","css属性值");

<script type="text/javascript">
    //<input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
	  //jQuery对象调用函数(事件函数)
	  $("#b1").click(function(){
	  	//css函数，操作样式表，CSS的属性和属性值
	  	$("#one").css("background-color","red");
	  });
	  
	  
	 // <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
	  $("#b2").click(function(){
	  	$("div").css("background-color","red");
	  });
	  
	  //<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
	  $("#b3").click(function(){
	  	$(".mini").css("background-color","red");
	  });
		
		// <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
		$("#b4").click(function(){
//			$("span").css("background-color","red");
//			$("#two").css("background-color","red");
			$("#two, span").css("background-color","red");
		});

	</script>

层次选择器

$("A B")获取A元素的所有后代B元素
$("A>B")获取A元素的所有后代子元素B
$("A+B")获取A元素的同级的后面的下一个B元素
$("A~B")获取A元素的同级后面的所有B元素

<script type="text/javascript">
	   //<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
	   $("#b1").click(function(){
	   		$("body div").css("background-color","red");
	   })
	   
	   //<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
		 $("#b2").click(function(){
		 	  $("body>div").css("background-color","red");
		 });
		 
		 //<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 红色"  id="b3"/>
		 $("#b3").click(function(){
		 	 $("#one+div").css("background-color","red");
		 });
		 
		 //<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 红色"  id="b4"/>
		 $("#b4").click(function(){
		 	 $("#two~div").css("background-color","red");
		 });
		 
		 //<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为红色"  id="b5"/>
		 $("#b5").click(function(){
		 	 $("#two").siblings("div").css("background-color","red");
		 });
		
	</script>

属性选择器

在这里插入图片描述

<script type="text/javascript">
		 //<input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
		 $("#b1").click(function(){
		 		//属性选择器,选择带有title
		 		$("div[title]").css("background-color","red");
		 });
		 
		// <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
		 $("#b2").click(function(){
		 	  //获取属性值是test的元素
		 	  $("div[title=test]").css("background-color","red");
		 });
		 
		// <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
		$("#b3").click(function(){
			 //属性值不等于test
			 $("div[title!=test]").css("background-color","red");
		});
		
		// <input type="button" 	value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
		$("#b4").click(function(){
			 //属性值以te开始的
			 $("div[title^=te]").css("background-color","red");
		});
		
		// <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
		$("#b5").click(function(){
			 //属性值是est结束的
			 $("div[title$=est]").css("background-color","red");
		});
		
    // <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
    $("#b6").click(function(){
			 //属性值含有es的
			 $("div[title*=te]").css("background-color","red");
		});
		
		// <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
		 $("#b7").click(function(){
			 //属性值是est结束的
			 $("div[id][title*=es]").css("background-color","red");
		});
	</script>

过滤选择器

在这里插入图片描述

<script type="text/javascript">
		
// <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
  $("#b1").click(function(){
  	  $("div:first").css("background-color","#FF0000");
  });
  
// <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
  $("#b2").click(function(){
  	  $("div:last").css("background-color","#FF0000");
  });
  
// <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
  $("#b3").click(function(){
  	  $("div:not(.one)").css("background-color","#FF0000");
  });
  
// <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
  $("#b4").click(function(){
  	  $("div:even").css("background-color","#FF0000");
  });
  
// <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
  $("#b5").click(function(){
  	  $("div:odd").css("background-color","#FF0000");
  });
  
// <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
  $("#b6").click(function(){
  	  $("div:gt(3)").css("background-color","#FF0000");
  });
  
// <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
  $("#b7").click(function(){
  	  $("div:eq(3)").css("background-color","#FF0000");
  });
  
// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
  $("#b8").click(function(){
  	  $("div:lt(3)").css("background-color","#FF0000");
  });
  
// <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
  $("#b9").click(function(){
  	  $(":header").css("background-color","#FF0000");
  });
  
// <input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 红色"  id="b10"/>		
	$("#b10").click(function(){
  	  $(":animated").css("background-color","#FF0000");
  });	 
  
  function moveFn(){
  //div向上滑动, slideUp方法,slideToggle方法
  	$("#mover").slideToggle("slow",function(){
  		moveFn();
  	});
  }
  moveFn();
	</script>

表单选择器

可用： :enabled
不可用： :disabled
选中（单选radio ，多选checkbox）： :checked
选择（下列列表 <select>）： :selected

<script type="text/javascript">
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
  $("#b1").click(function(){
    	//获取多个input标签属性值是 enabled, type属性值是text 返回数组
  	  var $inputs = $("input[type='text']:enabled");
  	  for(var i=0;i<$inputs.length;i++){
  	  	//把数组中的DOM对象变成Jquery对象,调用方法val()
  	  	alert($($inputs[i]).val());
  	  }
  });
  
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
  $("#b2").click(function(){
    	//获取多个input标签属性值是disabled,返回数组
  	  var $inputs = $("input[type='text']:disabled");
  	  for(var i=0;i<$inputs.length;i++){
  	  	//把数组中的DOM对象变成Jquery对象,调用方法val()
  	  	alert($($inputs[i]).val("修改后的"));
  	  }
  });
  
// <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
 $("#b3").click(function(){
 	  var $inputs = $("input[type='checkbox']:checked");
 	  alert($inputs.length);
 });
 
// <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
/*
 *  html()==DOM对象的innerHTML
 *  text()==DOM对象的innerText
 */
 $("#b4").click(function(){
 	  var $inputs = $("option:selected");
 	   for(var i=0;i<$inputs.length;i++){
 	   	alert($($inputs[i]).text());
 	   }
 });		
	
	</script>