【JavaWeb-jQuery】笔记(1)--- jQuery概述;dom对象和jquery对象;jQuery选择器;jQuery过滤器

1、介绍:

  • jQuery 是一个快速,小巧,功能丰富的 JavaScript 库, 它通过易于使用的 API 在大量浏览器中运行,使得 HTML 文档遍历和操作,事件处理,动画和 Ajax 变得更加简单。 通过多功能性和可扩展性的结合,jQuery 改变了数百万人编写 JavaScript 的方式。

 

2、dom 对象和 jquery 对象:

  • dom 对象,使用 javascript 的语法创建的对象叫做 dom 对象, 也就是 js 对象。
//obj是dom对象,也叫做js对象
var obj = document.getElementById("txt1");  
  • jquery 对象,使用 jquery 语法表示对象叫做 jquery 对象, 注意 ---> 所有 jquery 表示的对象都是数组。
//jobj就是使用jquery语法表示的对象。 也就是jquery对象,它是一个数组,现在数组中就一个值
var jobj = $("#txt1");
  • dom 对象可以和 jquery 对象相互转换。

           dom 对象可以转为 jquery ,语法: $(dom对象);

           jquery 对象也可以转为 dom 对象,语法: 从数组中获取第一个对象,第一个对象就是 dom 对象, 使用[0]或者get{0)。

  • 为什么要进行 dom 和 jquery 的转换,目的是要使用 jquery / dom 的方法。

 

3、选择器:

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

常用的选择器:

1)id 选择器,通过 dom 对象的 id 定位 dom 对象的,通过 id 找对象

$("#dom对象的id值");

2)class 选择器,class 表示 css 中的样式,使用样式的名称定位 dom 对象

$(".class样式名);

3)标签选择器,使用标签名称定位 dom 对象的 

$("标签名称");

 

代码练习:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery选择器练习</title>
	
		<style type="text/css">
			div{
				background: #808080;
				width: 150px;
				height: 100px;
			}
		</style>
		
		<script type="text/javascript" src="js/jquery-3.6.0.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","blue");
			}
			
			function fun3(){
				//标签选择器
				var obj = $("div");
				obj.css("background","orange");
			}
			
			
		</script>
	</head>
	<body>
		<div id="one"></div><br />
		<div class="two"></div><br />
	 
		<input type="button" value="将第一个div变为红色" onclick="fun1()" />
		<input type="button" value="将第二个div变为蓝色" onclick="fun2()"/>
		<input type="button" value="将所有div变为橙色" onclick="fun3()"/>
	</body>
</html>

 

4、表单选择器:

  • 使用 <input> 标签的 type 属性值,定位 dom 对象的方式
$(":type属性值");
$(":text");//选择的是所有的单行文本框
$(":button");//选择的是所有的按钮

 

代码练习:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单选择器练习</title>
	
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			function fun1(){
				//使用表单选择器
				var obj = $(":text");
				//输出文本框value属性的值,val()是jQuery中的函数,读取value的值
				alert(obj.val());
			}
			
			function fun2(){
				var obj = $(":radio");
				for(var i=0;i<obj.length;i++){
					//将jQuery对象转为dom对象
					var dom = obj[i];
					alert(dom.value);
				}
			}
			
			function fun3(){
				var obj = $(":checkbox");
				for(var i=0;i<obj.length;i++){
					alert(obj[i].value);
				}
			}
		</script>
	</head>
	<body>
		<input type="text" /><br />
		<input type="radio" value="man" />男<br />
		<input type="radio" value="woman" />女<br />
		
		<input type="checkbox" value="dijia" />迪迦奥特曼<br />		
		<input type="checkbox" value="oubu" />欧布奥特曼<br />
		<input type="checkbox" value="gaiya" />盖亚奥特曼<br />
		
		<input type="button" value="读取text的值" onclick="fun1()"/>
		<input type="button" value="读取radio的值" onclick="fun2()"/>
		<input type="button" value="读取checkbox的值" onclick="fun3()"/>
		
		
	</body>
</html>

 

5、过滤器:

  • 过滤器就是过滤条件,对已经定位到数组中的 DOM 对象进行过滤筛选,过滤条件不能独立出现在 jquery 函数,如果使用只能出现在选择器后方。 
$("选择器:first"): //第一个dom对象
$("选择器:last"): //数组中的最后一个dom对象
$("选择器:eq(数组的下标)");//获取指定下标的dom对象
$("选择器:lt(下标)");//获取小于下标的所有dom对象
$("选择器:gt(下标)");//获取大于下标的所有dom对象

 

代码练习:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery过滤器练习</title>
		
		<style type="text/css">
			div{
				background: grey;
				width: 150px;
				height: 100px;
			}
		</style>
		
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			/*
				//当页面中的dom对象加载成功后,会执行ready(),相当于window.onload()
				$(document).ready(function(){}): //正常写法
				$(function(){})//简写版
			*/
		   $(function(){
			   //当页面中所有的dom对象加载后,才能给button对象绑定事件
			   $("#btn1").click(function(){
				   $("div:first").css("background","red");
			   })
			   
			   $("#btn2").click(function(){
			   		$("div:last").css("background","blue");
			   })
			   
			   $("#btn3").click(function(){
			   		$("div:gt(3)").css("background","green");
			   })
			   
			   $("#btn4").click(function(){
			   		$("div:lt(3)").css("background","purple");
			   })
			   
			   $("#btn5").click(function(){
			   		$("div:eq(3)").css("background","white");
			   })
			   
		   })
		</script>
	</head>
	<body>
		<div></div><br />
		<div></div><br />
		<div></div><br />
		<div></div><br />
		<div></div><br />
		<div></div><br />
		
		<input type="button" value="作用第一个div(红)" id="btn1"/>
		<input type="button" value="作用最后一个div(蓝)" id="btn2"/>
		<input type="button" value="作用下标大于3的div(绿)" id="btn3"/>
		<input type="button" value="作用下标小于3的div(紫)" id="btn4"/>
		<input type="button" value="作用下标等于3的div(白)" id="btn5"/>
		
	</body>
</html>

 

6、表单属性过滤器:

  • 根据表单中 dom 对象的状态情况,定位dom对象
  • 选择可用的文本框:
$(“:text:enabled”);
  • 选择不可用的文本框: 
$(“:text:disabled”);
  • 复选框选中的元素:
$(“:checkbox:checked”);
  • 选择指定下拉列表的被选中元素:
选择器>option:selected;

 

代码练习:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单过滤器</title>
	
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			/*
				$(document).ready(函数);//当页面中的所有dom对象加载成功后,会执行ready(),相当于window.onload()
				$(function(){});//也可以简写为这种形式
			*/
		   $(function(){
				$("#btn1").click(function(){
					//获取所有可以使用的文本框
					var obj = $(":text:enabled");
					//修改jQuery数组中所有dom对象的value值
					obj.val("就无语~~");
				})
				
				$("#btn2").click(function (){
					//获取所有选中的checkbox
					var obj = $(":checkbox:checked");
					for(var i=0;i<obj.length;i++){
						//alert(obj[i].value);也可以这么写
						alert($(obj[i]).val());
					}
				})
				
				$("#btn3").click(function (){
					//获取下拉列表已被选中的值
					//var obj = $("select>option:selected");
					var obj = $("#language>option:selected");
					alert(obj.val());
				})
				
		   })
		</script>
	</head>
	<body>
		<input type="text" value="本博主王狗蛋帅气逼人" disabled /><br />
		<input type="text" value="你同意吗?" disabled /><br />
		<input type="text" value="我非常认可王先生的看法"/><br />
		<input type="text" value="滚啊,普信男..."/><br />
		
		<input type="checkbox" value="老八蜜汁小汉堡" checked />老八蜜汁小汉堡<br />
		<input type="checkbox" value="老坛酸菜牛肉面" />老坛酸菜牛肉面<br />
		<input type="checkbox" value="双汇淀粉肠" />双汇淀粉肠<br />
		
		<select id="language">
			<option value="java">java语言</option>
			<option value="go" selected>go语言</option>
			<option value="python">python语言</option>
		</select>
		
		<input type="button" id="btn1" value="将可以修改的文本框的vulue修改为 就无语~~"/>
		<input type="button" id="btn2" value="显示已被选中的复选框的值"/>
		<input type="button" id="btn3" value="显示已被选中的下拉列表框的值"/>
		
		
	</body>
</html>

 

posted @ 2022-03-29 17:10  猿头猿脑的王狗蛋  阅读(22)  评论(0编辑  收藏  举报
1