jQuery：dom对象和jquery对象的转换、基本选择器

目录：

（1）dom对象和jquery对象

（2）jquery转dom对象

（3）基本选择器使用

（1）dom对象和jquery对象

domTJQuery.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dom对象转为jquery</title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			function btnClick(){
				//获取dom对象
				var obj = document.getElementById("btn");
				//使用dom的value属性,获取值
				alert("使用dom对象的属性="+obj.value)
				
				//把dom对象转jquery,使用jquery库中的函数
				var jobj = $(obj);
				//调用jquery中的函数val,获取value的值
				alert( jobj.val() )
	
			}
			
		</script>
	</head>
	<body>
		 <input type="button" id="btn" value="==我是按钮==" onclick="btnClick()" />
	</body>
</html>

点击按钮：首先输出dom对象的值，再输出jquery的值

（2）jquery转dom对象

jqueryTDom.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			function btnClick(){
				//使用jquery的语法,获取页面中的dom对象
				//var obj = $("#txt")[0]; // 从数组中获取下标是0的dom对象
				var obj = $("#txt").get(0);//从数组中获取下标是0的dom对象
				//alert( obj.value)
				
				var num  = obj.value;
				obj.value = num * num;
			}
			
		</script>
	</head>
	<body>
		 <div>
			 <input type="button" value="计算平方" onclick="btnClick()" /><br/>
			 <input type="text" id="txt" value="整数" />
		</div>
	</body>
</html>

输入10：

点击按钮：

（3）基本选择器使用

选择器是基石

选择器是一个字符串，是用来定位你当前页面的dom对象的，定位了dom对象之后就可以操作dom对象了选择器是字符串，定位dom对象的条件的

基本选择器的例子

selector.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				background: gray;
				width: 200px;
				height: 100px;
			}
			
			.two{
				background: gold;
				font-size: 20pt;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			function fun1(){
				//id选择器
				var obj = $("#one");
				//使用jquery中改变样式的函数
				obj.css("background","red");
			}
			
			function fun2(){
				//使用样式选择器
				var obj = $(".two");
				obj.css("background","yellow");
			}
			
			function fun3(){
				//标签选择器
				var obj = $("div"); //数组有3个对象
				//jquery的操作都是操作数组中的全部成员.
				//所以是给所有的div都设置的背景色
				obj.css("background","blue");
			}
			
			function fun4(){
				var obj = $("*");
				obj.css("background","green");
			}
			
			function fun5(){
				var obj = $("#one,span");
				//obj.css("background","red");
				
				 //obj是一个数组, 有两个成员, 1 是span dom对象
				 //$(  obj[1] ) : jquery对象
				// $( dom 对象) : 是把dom对象转为jquery对象, 之后就可以调用jquery的css函数了
				$(  obj[1]  ).css("background","green");//就是span
				
			}
			
			document.getElementById("one"); //js的语法规则 ,value
			$("#one"); //jquery语法
			
		</script>
	</head>
	<body>
		<div id="one">我是one的div</div><br/>
		<div class="two">我是样式是two的div</div>
		<br/>
		<div>我是没有id，class的div</div>
		<br/>
		<span class="two">我是span标签</span>
		<br/>
		<input type="button" value="获取id是one的dom对象" onclick="fun1()" />
		<br/>
		<input type="button" value="使用class样式获取dom对象" onclick="fun2()" />
		<br/>
		<input type="button" value="使用标签选择器" onclick="fun3()" /> 
		<br/>
		<input type="button" value="所有选择器" onclick="fun4()"/>
		<br/>
		<input type="button" value="组合选择器" onclick="fun5()"/>
	</body>
</html>

点击获取id是one的dom对象按钮：

点击使用class样式获取dom对象按钮：

点击使用标签选择器按钮：

点击所有选择器按钮：

点击组合选择器按钮：

jQuery：dom对象和jquery对象的转换、基本选择器

猜你喜欢