jQuery_小肥宅@

网络投稿 02-07 1012

1. jQuery是js库，

库：相当于java的工具类，库是存放东西的， jQuery是存放js代码的地方，放的用js代码写的function

2. dom对象和jquery对象 dom对象，使用javascript的语法创建的对象叫做dom对象，也就是js对象。 var obj= document.getElementById("txt1"); obj是dom对象，也叫做js对象可以使用对象的属性：obj.value;

jquery对象：使用jquery语法表示对象叫做jquery对象，注意：jquery表示的对象都是数组。例如： var jobj = $("#txt1") , jobj就是使用jquery语法表示的对象。也就是jquery对象。它是一个数组。现在数组中就一个值。

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

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

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

为什么要进行dom和jquery的转换：目的是要使用对象的方法，或者方法。

当你的dom对象时，可以使用dom对象的属性或者方法，如果你要想使用jquery提供的函数，必须是jquery对象才可以。

快速入门：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery快速入门</title> <script src="js/jquery-3.2.1.min.js"></script> </head> <body> <div id="div1">div1....</div> <div id="div2">div2....</div> <script> var div1 = $("#div1"); var div2 = $("#div2"); alert(div1.html()); </script> </body> </html>

转换例子：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS与JQ对象的相互转换</title> <script src="js/jquery-3.2.1.min.js"></script> </head> <body> <div id="div1">div1</div> <div id="div2">div2</div> <script> //js对象 var divs = document.getElementsByTagName("div"); //jq对象 var $div = $("div"); //js--->jq for (var i = 0; i < divs.length; i++) { $(divs[i]).html("aaa"); } //jq--->js //1.jq对象[索引] var newdiv1 = $div[0]; newdiv1.innerHTML="new1"; //2.jq对象.get(索引) var newdiv2 = $div.get(1); newdiv2.innerHTML="new2"; </script> </body> </html> 3.选择器：就是一个字符串，用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom

常用的选择器：

1） id选择器，语法： $("#dom对象的id值") 通过dom对象的id定位dom对象的。通过id找对象， id在当前页面中是唯一值。 2） class选择器，语法： $(".class样式名) class表示css中的样式，使用样式的名称定位dom对象的。 3）标签选择器，语法： $("标签名称") 使用标签名称定位dom对象的 4）表单选择器：在<input type=”text”>中，type属性有： text，password，radio，checkbox，button，file，submit，reset 语法：$(“:type属性值”) 例子：$(“:text”)选中所有type为text的input 4、过滤器用来筛选dom对象，不能单独使用，必须和选择器一起用5种过滤器： (1)$("选择器:first") : 第一个dom对象 (2)$("选择器:last"): 数组中的最后一个dom对象 (3)$("选择器:eq(数组的下标)") ：获取指定下标的dom对象 (4)$("选择器:lt(下标)") ：获取小于下标的所有dom对象 (5)$("选择器:gt(下标)") ：获取大于下标的所有dom对象 5、表单属性过滤器：根据表单中dom对象的状态，选择dom对象。 3种状态：启用状态， enabled 不可用状态 disabled 选择状态， checked 例如radio，checkbox

例子：

$(“:text:enable”)可选中的文本框 $(“:text:disable”)不可选中的文本框 $(“:checkbox:checked”)勾中的复选框 $(“:select>option:selected”)下拉列表当前的选中元素 6、函数（1）val()，text()，attr()：分别设置value，文本值，某一个属（有参（用来设置值），无参（用来获取值））（2）remove()：删除自己还有自己的所有子对象（3）empty():删除所有子对象（4）append()：在该选择器后面追加代码（5）html()：获取标签内部的内容（包含里面的代码，不止文本）（6）html(参数):设置标签内部内容（7）each()：语法1：$.each(要循环的数组，数组每个元素要执行的函数) 例子：$.each(arr,function(index,element){ alert(index+element); }) 语法2：jquery对象.each(数组每个元素要执行的函数) 例子：$(“:text”).each(function(i,n){ alert(i+”,”+n); }) 7、on事件绑定 $(选择器).on(事件，函数)

例子：

$(“:text”).on(“click”,function{alert(“我被单击了”)}) 8、用jquery的函数处理ajax的请求 jquery简化了ajax请求的处理，用3个函数实现ajax请求的处理。 (1)$.ajax() : jquery中实现ajax的核心函数。 (2)$.post() : 使用post方式做ajax请求。 (3)$.get() : 使用get方式发送ajax请求。 $.post()和$.get() 他们在内部都是调用的 $.ajax() 介绍 $.ajax函数的使用，函数的参数表示请求的url，请求的方式，参数值等信息。 $.ajax()参数是一个json的结构：$.ajax({名称:值,名称1:值1..... }) json结构的参数说明： 1)async:布尔值（true（默认），false），表示异步请求，可以不写 2)contentType:从浏览器发送服务器的参数的类型，可以不写，想表示发送的是json格式的，可以写application/json 3)data：表示请求的参数，常用格式：json 4)dataType：期望从服务器端返回的数据格式 5)error：请求错误时执行 6)success：请求成功，返回数据后执行 7)url：请求地址 8)type：请求方式（get，post），默认是get