JAVAWEB——JQuery使用大纲（对象转换，选择器，过滤器，常用函数，ajax）

最新推荐文章于 2022-05-29 13:19:12 发布

红袜子i

最新推荐文章于 2022-05-29 13:19:12 发布

阅读量169

点赞数 1

分类专栏： JAVAWEB 文章标签： js javascript jquery

本文链接：https://blog.csdn.net/Mr_GYF/article/details/109571721

版权

JAVAWEB 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

一、 jQuery获取对象的方式

首先区分一下JavaScript对象和jQuery对象

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

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

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

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

var jobj =  $("#txt1")

jobj就是使用jquery语法表示的对象。 也就是jquery对象。 它是一个数组。现在数组中就一个值。

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

dom对象可以转为jQuery对象
语法： $(dom对象)

<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中的函数，获取value的值
				alert("调用jquery中的函数"+jobj.val());
			}
</script>

jQuery对象转为dom对象
语法：从数组中获取第一个对象，第一个对象就是dom对象，使用[0]或者get(0)

<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>
		<div>
			<input type="button" value="计算平方" onclick="btnClick()" /><br />
			<input type="text"  value="整数" id="txt"/>
		</div>

二、 jQuery的函数书写方式（标准与简写）

标准写法：

<script type="text/javascript">
		/*
		 1.$(doucument).$是jQuery中的函数名称，document是函数的参数作用
		 是document对象编程jQuery函数库可以使用的对象
		 2.ready是jQuery中的函数：是准备的意思。当页面的dom对象加载成功后，会执行read函数的内容
		 	read相当于js中的onLoad事件
		 3，function()自定义的表示onLoad后要执行的功能
		 * 
		 * */
		$(document).ready(function(){
			//自定义功能代码
			alert("Hello jQuery");
		})
	</script>

函数简写（开发常用）

$(function(){
			alert("Hello jQuery");
})

三、选择器

3.1基本选择器

用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom
常用的选择器：

id选择器，语法： $("#dom对象的id值")
通过dom对象的id定位dom对象的。通过id找对象， id在当前页面中是唯一值。
类选择器，语法： $(".class样式名)
class表示css中的样式，使用样式的名称定位dom对象的。
标签选择器，语法: $("标签名称")
使用标签名称定位dom对象的。将所有的div都会进行选择
所有选择器，语法： $("*")。表示任意全部dom对象
混合选择器，语法：$("id选择器，class选择器，标签选择器 ")。混合使用

案例：

<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				background: gray;
				width: 200px;
				height: 100px;
			}
		</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>

3.2表单选择器

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

语法： $(":type属性值")
例如：
$(":text") ，选择的是所有的单行文本框，
$(":button") ，选择的是所有的按钮。

案例：

		<input type="button" id="btn1" value="选择所有input元素" />
		<input type="button" id="btn2" value="选择文本框" />
		<br/>
		<form>
			<input type="text" /><br />
			<input type="checkbox" /><br />
			<input type="radio" /><br />
			<input type="image" /><br />
			<input type="file" /><br />
			<input type="submit" />
			<input type="reset" /><br />
			<input type="password" /><br />
			<input type="button" /><br />
			<select><option/></select><br />
			<textarea></textarea><br />
			<button></button>
		</form>

案例获取：

<script>
	$(function(){
		$("#btn1").click(function(){
		$(":input").css("background-color","pink");
		});
		$("#btn2").click(function(){
		$(":text").css("background-color","pink");
});
});
</script>

3.3层级选择器

ancestor（空格）descendant:
在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

	<script>
	$(function(){
		$("#btn1").click(function(){
		$("body div").css("background-color","pink");
	});
	    $("#btn2").click(function(){
		$("body>div").css("background-color","deeppink");
				});
		$("#btn3").click(function(){
		$("#two+div").css("background-color","deeppink");
				});
		$("#btn4").click(function(){
		$("#one~div").css("background-color","deeppink");
				});
			});
</script>

<body>
	<input type="button" id="btn1" value="选择body中的所有的div元素"/>
	<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
	<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/> 
	<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
	<hr/>
	<div id="one">
		<div class="mini">
			111
		</div>
	</div>
	
	<div id="two">
		<div class="mini">
			222
		</div>
		<div class="mini">
			333
		</div>
	</div>
	
	<div id="three">
		<div class="mini">
			444
		</div>
		<div class="mini">
			555
		</div>
		<div class="mini">
			666
		</div>
	</div>
	
	<span id="four">
		
	</span>
</body>

四、过滤器

4.1基本过滤器

jQuery对象存储的DOM对象顺序与页面标签为生命位置关系
如：

<div>1</div>——dom1
<div>2</div>——dom2
<div>3</div>——dom3
$(“div”) =[dom1,dom2,dom3]

过滤器就是过滤条件，对已经定位到数组中DOM对象进行过滤筛选，过滤条件不能独立出现再jquery函数中，如果使用只能在选择器的后方。

在定位了dom对象后，根据一些条件筛选dom对象。
过滤器有是一个字符串，用来筛选dom对象的。
过滤器不能单独使用，必须和选择器一起使用。

$("选择器:first") : 第一个dom对象
$("选择器:last"): 数组中的最后一个dom对象
$("选择器:eq(数组的下标)") ：获取指定下标的dom对象
$("选择器:lt(下标)") ：获取小于下标的所有dom对象
$("选择器:gt(下标)") ：获取大于下标的所有dom对象

案例：

<script>
	$(function(){
		$("#btn1").click(function(){
		//body下的div的第一个
		$("body div:first").css("background-color","pink");
	});
		$("#btn2").click(function(){
		//最后一个div是666的那个div
		$("body div:last").css("background-color","deeppink");
	});
		$("#btn3").click(function(){
		//从第一个div开始往后数奇数
	$("body div:odd").css("background-color","lightpink");
	});
	$("#btn4").click(function(){
		//从第二个div后面开始数偶数
	$("body div:even").css("background-color","lightpink");
				});
			});
</script>

<body>
		<input type="button" id="btn1" value="body中的第一个div元素"/>
		<input type="button" id="btn2" value="body中的最后一个div元素"/>
		<input type="button" id="btn3" value="选择body中的奇数的div"/>
		<input type="button" id="btn4" value="选择body中的偶数的div"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>

4.2表单属性过滤器

根据表单中dom对象的状态情况，定位dom对象的。

启用状态， enabled
例如：选择可用的文本框，
$(“:text:enabled”)
不可用状态 disabled
例如：选择不可用的文本框
$(“:text:disableed”)
选择状态， checked ，
例如radio， checkbox
$(“:checkbox:checked”)

案例：

<script type="text/javascript">
		
			// $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(), 
			// 相当于是onLoad().
			$(function() {
	//当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了才能使用.
				 $("#btn1").click(function(){
					//获取所有可以使用的text
					var obj  = $(":text:enabled");
					//设置 jquery数组值所有dom对象的value值
					obj.val("hello");
				}) 
				
				$("#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(){
					//获取select选中的值
					//var obj= $("select>option:selected");
					var obj = $("#yuyan>option:selected");
					alert(obj.val());
				})
				
				
			})
		</script>

<body>
		<input type="text"  id="txt1" value="text1" /><br/>
		<input type="text"  id="txt2" value="text2" disabled="true"/><br/>
		<input type="text"  id="txt3" value="text3" /><br/>
		<input type="text"  id="txt4" value="text4" disabled/><br/>
		<br/>
		<input type="checkbox" value="游泳" />游泳 <br/>
		<input type="checkbox" value="健身" checked />健身 <br/>
		<input type="checkbox" value="电子游戏" checked />电子游戏 <br/>
		<br/>
		<select id="yuyan">
			<option value="java">java语言</option>
			<option value="go" selected>go语言</option>
			<option value="python">python语言</option>
		</select>
	
		<br/>
		<input type="button" value="设置可以的text的value是hello" id="btn1"/>
		<br/>
		<button id="btn2">显示选中的复选框的值</button>
		<br/>
		<button id="btn3">显示选中下拉列表框的值</button>
	</body>

五、函数

1. val

操作数组中DOM对象的value属性

$(选择器).val()：无参数调用形式，读取数组中第一个DOM对象的value属性值
$(选择器).val(值)：有参形式调用；对数组中所有DOM对象的value属性值同意赋值。

2. text

操作操作数组中所有DOM对象的文本显示内容

$(选择器).text()：无参数调用，读取数组中所有的DOM对象的文字显示内容，将得到内容拼接为一个字符串返回
$(选择器).text(值)：有参方式，对数组中所有的DOM对象文字显示内容进行统一赋值。

3. attr

对val，text之外的其他属性操作

$(选择器).attr(“属性名“)：获取DOM数组中第一个对象的属性值
$(选择器).attr(“属性名”,”值”)：对数组中所有DOM对象的属性设为新值
例如：

$("#btn").click(function(){
		//读取指定属性的值
					alert($("img").attr("src"));
	})
				
$("#btn2").click(function(){
	//设置指定属性的,指定值
		$("img").attr("src","img/ex2.jpg");
		//val(), text();
		})

4. remove

$(选择器).remove()：将数组中所有DOM对象及其子对象一并删除

5. empty

$(选择器).empty()：将数组中所有DOM对象的子对象删除

6. append

为数组中所有DOM对象添加子对象

$(选择器).append(“<div>增加一个div标签</div>”)

案例

$("#btn1").click(function(){
	//使用remove:删除父和子所有的dom对象
		$("select").remove();
			
	})

$("#btn2").click(function(){
	//使用empty 删除子dom对象
		$("select").empty();
	})

$("#btn3").click(function(){
//使用append,增加dom对象
//$("#fatcher").append("<input type='button' value='我是增加的按钮' />")
					
//增加一个table
$("#fatcher").append("<table border=1><tr><td>第一列</td><td>第二列</td></tr></table>");
})

7. html

设置或返回被选元素的内容（innerHTML）

$(选择器).html()：无参调用方法，获取DOM数组第一个匹元素的内容
$(选择器).html(值)：有参数调用，用于设置DOM数组中所有元素的内容

案例：

$("#btn4").click(function(){
//使用html()函数,获取数组中第一个dom对象的文本值(innerHTML)
	//alert($("span").text()); // 我是mysql数据库
	alert( $("span").html() ); //我是mysql <b>数据库</b>
	})
$("#btn5").click(function(){
	//使用 html(有参数):设置dom对象的文本值
	$("span").html("我是新的<b>数据</b>");
})

<span>我是mysql <b>数据库</b></span>
		<br/>
	<span>我是jdbc</span>
<input type="button" value="获取第一个dom的文本值" id="btn4"/>
<input type="button" value="设置span的所以dom的文本值" id="btn5"/>

8. each

对数组，json和dom数组等的遍历，对每个元素调用依次函数
语法1：

$.each(要遍历的对象，function(index,element){处理程序})

语法2：

jQuery对象.each(function(index,element){处理程序})
index：数组下标
element：数组的对象

案例：

$("#btn6").click(function(){
					//循环普通数组,非dom数组
					var  arr = [ 11, 12, 13];
					$.each(arr, function(i,n){
						alert("循环变量："+i + "=====数组成员:"+ n);
					})
				})
				
				$("#btn7").click(function(){
					//循环json
					var json={"name":"张三","age":20};
					
					//var  obj = eval("{'name':'张三','age':20}");
					
					
					$.each(json,function(i,n){
						alert("i是key="+i+",n是值="+n);
					})
					
				})
				
				$("#btn8").click(function(){
					//循环dom数组
					var domArray = $(":text");//dom数组
						
					$.each( domArray, function(i,n){
						// n 是数组中的dom对象
						alert("i="+i+"  , n="+n.value);
					})
				})
				
				$("#btn9").click(function(){
					//循环jquery对象, jquery对象就是dom数组
					$(":text").each(function(i,n){
						alert("i="+i+"，n="+ n.value);
					})
					
				})

六、 jQuery的ajax

没有jquery之前，使用XMLHttpRequest做ajax ，有4个步骤。jquery简化了ajax请求的处理。
使用三个函数可以实现ajax请求的处理。

$.ajax() : jquery中实现ajax的核心函数。
$.post() : 使用post方式做ajax请求。
$.get() : 使用get方式发送ajax请求。
$ .post()和$.get() 他们在内部都是调用的 $.ajax()

函数的参数表示请求的url，请求方式，参数值等信息。

$.ajax()参数是一个json的结构。

json结构的参数说明：

async:是一个boolean类型的值，默认是true ，表示异步请求的。可以不写async这个配置项，xmlHttp.open(get,url,true),第三个参数一样的意思。
contentType: 一个字符串，表示从浏览器发送服务器的参数的类型。可以不写。例如你想表示请求的参数是json格式的，可以写application/json
data: 可以是字符串，数组，json，表示请求的参数和参数值。常用的是json格式的数据
dataType: 表示期望从服务器端返回的数据格式，可选的有： xml ， html ，text ，json
当我们使用$.ajax()发送请求时，会把dataType的值发送给服务器，那我们的servlet能够
读取到dataType的值，就知道你的浏览器需要的是 json或者xml的数据，那么服务器就可以
返回你需要的数据格式。
error: 一个function ，表示当请求发生错误时，执行的函数。
error:function() { 发生错误时执行 }
sucess:一个function , 请求成功了，从服务器端返回了数据，会执行success指定函数
之前使用XMLHttpRequest对象，当readyState==4 && status ==200的时候。
url:请求的地址
type:请求方式，get或者post，不用区分大小写。默认是get方式。

主要使用的是 url , data ,dataType, success .

主要模板
1.$.ajax()

  $.ajax(  { 
   async:true , 
		   contentType:"application/json" , 
			 data: {name:"lisi",age:20 },
		 dataType:"json",
		 error:function(){
          请求出现错误时，执行的函数
			 },
success:function( data ) {
     // data 就是responseText, 是jquery处理后的数据。

			 },
		 url:"bmiAjax",
		 type:"get"
		  }  									 
		  )

2. $ .get(url,[data],[fn],[type])和$.post(url,[data],[fn],[type])

其中：

url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等中括号代表可选。

红袜子i

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JAVAWEB——JQuery使用大纲（对象转换，选择器，过滤器，常用函数，ajax）

一、 jQuery获取对象的方式首先区分一下JavaScript对象和jQuery对象JS对象：使用JavaScript的语法创建的对象叫做dom对象，也就是js对象。var obj= document.getElementById("txt1"); obj是dom对象，也叫做js对象jQuery对象：使用jquery语法表示对象叫做jquery对象注意：jquery表示的对象都是数组var jobj = $("#txt1")jobj就是使用jquery语法表示的对象
复制链接

扫一扫