JQuery用法及ajax的JQuery写法讲解

最新推荐文章于 2024-07-15 22:52:27 发布

wfl1486409520

最新推荐文章于 2024-07-15 22:52:27 发布

阅读量1.7k

点赞数

文章标签： java jquery ajax

本文链接：https://blog.csdn.net/wfl1486409520/article/details/123283405

版权

jQuery是一款跨主流浏览器的JavaScript库，封装了JavaScript相关方法调用，简化
JavaScript对 HTML DOM操作

dom对象和jquery对象

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

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

obj是dom对象，也叫做js对象obj .value ;

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

var obj = $("txt1 ")

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

dom对象和jquery对象相互的转换。

dom对象转为jquery

语法:$ (dom对象)

<script type="text/javascript">
	function btnClick(){
		//获取dom对象
		var obj = document.getElementById("btn");
		//使用dom的value属性,获取值
		alert(obj.value)
		//把dom对象转jquery,使用jquery库中的函数
		var obj1 = $(obj);
		//调用jquery中的函数,获取value的值
		alert( obj1.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对象l 
		var num = obj.value;
	}
</ script>

进行dom和jquery的转换的目的：
是要使用对象的方法，或者方法。
当你为dom对象时，才可以使用dom对象的属性或者方法，如果你要想使用jquery提供的函数必须是jcuery对象才可以

选择器

基本选择器

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

id选择器

语法:$ ("#dom对象的id值")
通过dom对象的id定位dom对象的。过id找对象，id在当前页面中是唯一值。

<script type="text/javascript">
	function fun1(){
		var obj = $("#one" ); T
	}
</ script>

class选择器

语法:$ (".class样式名)
class表示css中的样式，使用样式的名称定位domn对象的。

<script type="text/javascript">
	function fun1(){
		var obj = $(".one" ); T
	}
</ script>

标签选择器

语法:$(“标签名称”)

<script type="text/javascript">
	function fun1(){
		var obj = $("div"); T
	}
</ script>

所有选择器

语法:$(*)
选取页面中所有DOM对象。

组合选择器

组合选择器是多个被选对象间使用逗号分隔后形成的选择器,可以组合id, class,标签名等。
语法:$("#id, .class，标签名")

<script type="text/javascript">
	function fun1(){
		var obj = $("#one,.two,div"); T
	}
</ script>

表单选择器

该方法无论是否存在表单，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的
语法:$(":type属性值")

<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
<input type="reset">

$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":button")选取所有的按钮
$(":submit")选取所有的提交按钮
$(":file")选取所有的
$(":reset")选取所有的

过滤器

通用过滤器

过滤器:在定位了dom对象后，根据一些条件筛选dom对象。过滤器不能单独使用，必须和选择器一起使用-

1.选择第一个first，保留数组中第一个DOM对象

$("选择器:first")

⒉选择最后个last，保留数组中最后DOM对象

$("选择器:last")

3.选择数组中指定对象

$("选择器:eq(数组索引)")

4.选择数组中小于指定索引的所有DOM对象

$("选择器:lt(数组索引)")

5.选择数组中大于指定索引的所有DOM对象

$("选择器:gt(数组索引)")

表单属性过滤器

1.选择可用的文本框

$(":text:enabled")

⒉选择不可用的文本框

$(":text:disabled"")

$(function(){
	$("#btn1").click(function(){
		var obj= $(" :text:enabled");
		var obj1= $(" :text:disabled");
		//设置jquery数组值所有dom对象的value值
		obj.val("hello");
	})
}

3.复选框选中的元素

$(":checkbox:checked")

$(function(){
	
	$("#btn2").click(function(){
		//获取选中的checkbox
		var obj = $(":checkbox: checked" );
		for(var i=0;i<obj.length;i++){
		//输出选中的值
			alert($(obj[i]).val())
	})
}

4.选择指定下拉列表的被选中元素

选择器>option:selected

函数

val

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

$(选择器).val():无参数调用形式，读取数组中第一个DOM对象的value属性值
$(选择器).val(值):有参形式调用，对数组中所有DOM对象的value属性值进行统一赋值

text

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

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

attr

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

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

remove

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

empty

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

append

$(选择器).append("")为数组中所有DOM对象添加子对象

html

设置或返回被选元素的内容(innerHTML)。

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

<html>
	<span>
		<b>Hellow</b> word
	</span>
</html>

$("#btn4").click(function(){
	alert($("span").text());//Hellow word
	alert($("span").html());//<b>Hellow</b> word
})

each

each是对数组，json和 dom 数组等的遍历,对每个元素调用一次函数。

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

index:数组的下标
element:数组的对象

$("#btn6").click(function(){
	var arr =[ 11，12，13];
	$.each(arr,function(index, element){
		alert(index + "数组成员:"+element);
	}
})

each循环json

var json={ "name":"张三","age" :18};
$.each(json,function(i,n){
	alert(i+"=="+n);
})
结果：
1==张三
2==18

事件

on()方法在被选元素上添加事件处理程序。

语法:$(选择器).on(event,function)

event:事件一个或者多个，多个之间空格分开
function:可选。规定当事件发生时运行的函数。

$("#newBtn" ).on("click",function(){
	alert("hello");
})

ajax

$.ajax()是 jQuery中 AJAX请求的核心方法，所有的其他方法都是在内部使用此方法。
语法:
$.ajax( { name:value, name:value, … })

async :布尔值，表示请求是否异步处理。默认是true
contentType :发送数据到服务器时所使用的内容类型，可以不写
data:规定要发送到服务器的数据，可以是:字符串，数组，多数是json
dataType:期望从服务器响应的数据类型。jQuery 从 xml, json, text,html这些中测试最可能的类型

“xml” -一个XML文档
“html” - HTML作为纯文本
“text”-纯文本字符串
“json”-以JSON运行响应，并以对象返回

error():如果请求失败要运行的函数
success(resp):当请求成功时运行的函数，其中 resp是自定义的形参名
type:规定请求的类型*(GET 或POST等)，默认是GET，get，post不用区分大小写
url:规定发送请求的url

$.ajax({
	url : "queryjson",
	data:{
		"参数名" : 参数
	},
	dataType: "json",
	success:function (resp){
		响应事件
	}
})

wfl1486409520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery用法及ajax的JQuery写法讲解

JQuerydom对象和jquery对象dom对象和jquery对象相互的转换。dom对象转为jqueryjquery对象转为dom对象选择器基本选择器id选择器class选择器标签选择器所有选择器组合选择器表单选择器过滤器通用过滤器表单属性过滤器函数valtextattrremoveemptyappendhtmleacheach循环json事件ajaxjQuery是一款跨主流浏览器的JavaScript库，封装了JavaScript相关方法调用，简化JavaScript对 HTML DOM操作dom
复制链接

扫一扫