JQuery用法及ajax的JQuery写法讲解

本文介绍: JQue ry dom 对象和jquery 对象 d o m对象和jquery对象相互的转换。d o m对象转为jquery jquery对象转为d o m对象选择器基本选择器 id 选择器 class 选择器标签选择器所有选择器组合选择器表单选择器过滤器通用过滤器表单属性过滤器函数 val text attr rem ov e empty append html each each 循环 json 事件 ajaxjQue ry是一款跨主流浏览器的Jav aSc rip t库，封装了Jav aSc rip t 相关方法调用，简化Jav aSc rip t对 HTML DOM操作 d o m

jQue ry是一款跨主流浏览器的Jav aSc rip t库，封装了JavaScri p t 相关方法调用，简化

JavaScri p t对 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对象)

&lt;script type="text/javascript"&gt;
	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&gt;

jquery对象转为dom对象

语法:从数组中获取第一个对象，第一个对象就是dom对象，使用==[0]或者get(0)==.

<script type="text/javascript"&gt;
	function btnClick(){
		//使用jquery的语法,获取页面中的dom对象
		var obj =$(""#txt")[0];
		//从数组中获取下标是0的dom对象
		var obj=$("#txt").get(0);
		//从数组中获取下标是0的dom对象l 
		var num = obj.value;
	}
</ script>

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

选择器

基本选择器

用来定位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, .c lass，标签名”)

<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对象的属性设为新值

rem ove

$(选择器).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:事件一个或者多个，多个之间空格分开
func tion:可选。规定当事件发生时运行的函数。

$("#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){
		响应事件
	}
})

原文地址:https://blog.csdn.net/wfl1486409520/article/de tails/123283405

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_31676.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

JQuery

dom对象和jquery对象

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

dom对象转为jquery

jquery对象转为dom对象

选择器

基本选择器

id选择器

class选择器

标签选择器

所有选择器

组合选择器

表单选择器

通用过滤器

表单属性过滤器

text

remove

each循环json

相关文章

发表回复 取消回复

JQue ry

rem ove

each 循环 json

发表回复取消回复