百木园-与人分享，
就是让自己快乐。
当前位置：百木园 > 野生技术 > 正文

【JavaWeb-jQuery】笔记（1）--- jQuery概述；dom对象和jquery对象；jQuery选择器；jQuery过滤器

2022-03-30 分类：野生技术 阅读(161) 评论(0)

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>

 

来源：https://www.cnblogs.com/Burning-youth/p/16072839.html
本站部分图文来源于网络，如有侵权请联系删除。

未经允许不得转载：百木园 » 【JavaWeb-jQuery】笔记（1）--- jQuery概述；dom对象和jquery对象；jQuery选择器；jQuery过滤器
标签：

相关推荐

  • 暂无文章

热门文章