jQuery---学习记录-优快云博客

本文介绍了jQuery库的基本概念，探讨了如何在JavaScript中转换DOM对象和jQuery对象，并详细讲解了各种选择器的使用方法，包括id选择器、class选择器、标签选择器及表单元素选择器。通过实例展示了不同场景下的选择器操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

概述
dom对象和jQuery对象
选择器
表单选择器

概述

jQuery是js库

jQuery对象是一个dom数组

库:相当于java的工具类，库是存放东西的，jQuery是存放js代码的地方，放的用js代码写的function

dom对象和jQuery对象

dom对象：使用javascript的语法创建的对象叫做dom对象，也就是js对象。

var obj=document.getElementById("txt1");

obj是dom对象，也叫做js对象

jquery对象：使用jquery语法表示对象叫做jquery对象，注意:jquery表示的对象都是数组。

var jobj=$("#txt1"); jobj就是使用jquery语法表示的对象，它是一个数组（数组中就一个值）

dom对象和jquery对象可以相互转换

dom转jquery

var obj =document.getElementById("btn");
alert(obj.value)
var jobj=$(obj);
alert(jobj.val())

jquery转dom

var obj=$("#txt")[0]
alert(obj.value)

选择器

就是一个字符串，用来定位dom对象的，定位了dom对象，就可以通过jquery的函数操作dom对象

1）id选择器
2）class选择器
3）标签选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background: gray;
				width: 200px;
				height: 100px;
			}
		</style>
		
		<script type="text/javascript" src="js/jQuery3.6.0.js"></script>
		<script type="text/javascript">
			function fun1(){
				//id选择器
				var $obj=$("#one");
				$obj.css("background","red");
			}
			function fun2(){
				//样式选择器
				var $obj=$(".two");
				$obj.css("background","yellow");
			}
			function fun3(){
				//标签选择器
				var $obj=$("div");
				$obj.css("background","blue");
			}
			function fun4(){
				//所有选择器
				var $obj=$("*");
				$obj.css("background","green");
			}
			function fun5(){
				//组合选择器
				var $obj=$("#one,.two");
				$obj.css("background","black");
			}
		</script>
	</head>
	<body>
		<div id=one>我是one</div><br>
		<div class="two">我是two</div><br>
		<div>标签</div><br>
		<input type="button" value="one" onclick="fun1()" /><br>
		<input type="button" value="class" onclick="fun2()"/><br>
		<input type="button" value="标签" onclick="fun3()"/><br>
		<input type="button" value="所有" onclick="fun4()"/><br>
		<input type="button" value="组合" onclick="fun5()"/><br>
		
	</body>
</html>

表单选择器

使用<input>标签的type属性值，定位dom对象的方式

语法： $(" : t y p e 属性值 ") 例如 ‘$ (":text")` 选择的是所有的单行文本框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>	
		<script type="text/javascript" src="js/jQuery3.6.0.js"></script>
		<script type="text/javascript">
			function fun1(){
				//定位text
				var obj =$(":text");
				alert(obj.val());
			}
			function fun2(){
				//定位radio
				var obj=$(":radio");
				//循环数组 ，数组中的成员是dom对象
				for(var i=0;i<obj.length;i++){
					var dom=obj[i];
					alert(dom.value);
				}
			}
			function fun3(){
				//定位checkbox
				var obj=$(":checkbox");
				//循环数组 ，数组中的成员是dom对象
				for(var i=0;i<obj.length;i++){
					var dom=obj[i];
					alert(dom.value);
				}
			}
			
		</script>
	</head>
	<body>
		<input type="text" value="我是text" />
		<br>
		<input type="radio" value="man" />男<br>
		<input type="radio" value="woman" />女<br>
		
		<input type="checkbox" value="bike"/>骑行
		<input type="checkbox" value="football"/>足球
		<input type="checkbox" value="music"/>音乐
		<br>
		<input type="button" value="读取text的值" onclick="fun1()" /><br>
		<input type="button" value="读取radio的值" onclick="fun2()" /><br>
		<input type="button" value="读取checkbox的值" onclick="fun3()" /><br>
		
		
	</body>
</html>