JQuery基础

JQuery：1 $表示jQuery的别名，$()等效于jQuery()2 当DOM载入之后，jQuery才能开始读写和处理DOM，所以应该使用ready事件作为处理HTML文档的开始。$(document).ready(function(){简写：$(function(){//jQuery代码//jQuery代码});});注意：$(document).ready()方法可以简写为$()方法来表示：说明：1）类似于JavaScript的window.onload事件处理函数，不过jQuery的ready事件要先于onload事件被激活。注意：$(document).ready()在DOM载入之后，当jQuery框架下载完毕后就执行；而window.onload必须在页面全部加载完毕(包含图片等)后才能执行。2）类似于JavaScript代码应该都放在window.onload事件处理函数中，jQuery代码也应该都放在$()函数中。3）window.onload函数只能编写一次(如果写了多个，则最后一个覆盖前面的)，而$(document).ready()可以编写多次window.onload = function(){// JavaScript代码};3 jQuery对象：DOM对象经过jQuery框架包装后产生的一个新对象，这个新对象的结构类似一个数组。注意：jQuery框架为jQuery对象定义了自己的方法和属性，jQuery对象不能直接调用DOM对象的方法，同样，DOM对象也不能直接调用jQuery对象的方法。说明：jQuery对象是多个DOM对象的集合，即DOM元素的数组，而DOM对象就是一个DOM元素4 jQuery的选择器：用法：$("选择器或选择器组")，返回jQuery对象基本选择器（与css的基本选择器相同）：$("#id")选择指定id的一个元素等价于    document.getElementById("id");$(".class")选择指定class的所有元素$("tagName")选择指定名称的所有元素等价于    document.getElementsByTagName("tagName");$("*")选择指定范围内的所有元素$("slector1, selector2, selectorN")分别选择每个选择器匹配的元素，然后返回合并后的所有元素层次选择器：$("ancestor descendant")根据祖先元素匹配所有的后代元素$("parent > child")根据父元素匹配所有的子元素$("prev + next")或prev.next()匹配所有紧接在prev元素后的相邻元素$("prev ~ siblings")或prev.nextAll()匹配prev元素之后的所有兄弟元素prev.siblings()匹配prev元素(之前和之后)的所有兄弟元素过滤选择器：从需要过滤的集合中获取：基本过滤：$("selector:first")或$("selector").first()第一个元素$("selector:last")或last()最后一个元素$("selector:eq(index)")等于指定索引值的元素，索引号从0开始$("selector:gt(index)")大于指定索引值的元素，索引号从0开始$("selector:lt(index)")小于指定索引值的元素，索引号从0开始可见性过滤：$("selector:hidden")所有不可见元素(或者type为hidden的元素)$("selector:visible")所有的可见元素内容过滤：$("selector:not(selector2)")除给定选择器外的所有元素$("selector:contains(text)")包含指定文本的元素$("selector:has(selector2)")含有选择器(selector2)所匹配的元素的元素$("selector:empty")所有不包含子元素(或文本)的空元素$("selector:parent")含有子元素(或文本)的元素$("selector:header")所有标题类型的元素，如h1、h2···$("selector:animated")正在执行动画效果的元素$("selector:")属性过滤：$("selector[attribute]")包含attribute属性的元素$("selector[attribute=value]")attribute属性的值为value的元素$("selector[attribute^=value]")attribute属性的值以value开头的元素$("selector[attribute$=value]")attribute属性的值以value结尾的元素$("selector[attribute*=value]")attribute属性的值中包含value的元素表单对象属性过滤：$("#form input:checked")表单中所有被选中的input元素$("#form option:selected")表单中所有被选中的option的元素$("#form input:enabled")表单中所有属性为可用的input元素$("#form input:disabled")表单中所有属性为不可用的input元素表单选择器：$("#form :input")所有的imput、textarea、select元素$("#form :text")所有的单行文本框$("#form :XXX")所有的XXX元素，包括password、radio、checkbox、submit、image、reset、button、file5 jQuery对象转成DOM对象 两种转换方式：[index]和.get(index); (1)jQuery对象是一个数组对象，可以通过[index]的方式来得到相应的DOM对象。(2)jQuery本身提供get(index)方法，可以得到相应的DOM对象。6 DOM对象转成jQuery对象把DOM对象用$()包装起来，就可以获得一个jQuery对象了。即 $(DOM对象)7 jQuery操作DOM元素属性操作：获取元素的属性：attr("AttributName")修改元素的属性：attr("AttributName", "value")attr({AttributName1:"value1", AttributName2:"value2"})删除元素的属性：remove("AttributName")元素内容操作：获取元素的HTML内容：html()设置元素的HTML内容：html("value")获取元素的文本内容：text()设置元素的文本内容：text("value")获取元素的值(常用于表单中获取对象的值)：val()设置元素的值(常用于表单中设置对象的值)：val("value")获取下拉列表里所有被所选中的值$("#select1").val().join(",");元素样式操作：直接设置样式：css("name", "value")增加CSS类别：addClass("class1 class2 ...")类别切换：toggleClass("class")说明：当元素中含有名称为class的CSS类别时，删除该类别；当元素中没有名称为class的CSS类别时，增加一个该名称的类别。删除类别：removeClass("class1 class2 ...")获得DOM元素：获得所有后代元素find( expr )获得下一级元素children( expr )获得上一级元素parent( expr )选择同级元素（兄弟）siblings( expr )选择兄元素（前一个）prev( expr )选择弟元素（后一个）next( expr )选择所有上级元素（父亲、爷爷..注:叔叔不算）parents( expr )8 jQuery的插件机制1)jQuery.extend(object);说明：扩展jQuery对象本身。(常用于：在jQuery对象本身(即jQuery命名空间本身)上增加新函数)例子：jQuery.extend({min: function(a, b) { return a < b ? a : b; },max: function(a, b) { return a > b ? a : b; }});jQuery.min(2,3);jQuery.max(4,5);2)jQuery.extend(target, object1, object2);说明：用一个或多个其他对象依次来扩展一个对象(target)，返回被扩展的对象(target)。注意：当target对象中没有要扩展的属性，则向target对象添加要扩展的属性；如果target对象中已经存在要扩展的属性，那么target对象中原有的属性将被覆盖。例子：var empty = {};var defaults = { validate:false, name:"foo", limit:5};var options  = { validate:true,  name:"bar"};var settings = jQuery.extend(empty, defaults, options);// 注意：方法的返回值(settings)与目标对象(empty)指向同一个对象empty  == { validate: true, limit: 5, name: "bar"};settings == { validate:true, name:"bar", limit:5};3)jQuery.extend(true, target, object1, object2);说明：当第一个参数为true时，该方法返回target的一个深层次的副本，这个副本递归地复制了target中所有的对象。否则的话，副本会与原对象共享结构。9 jQuery中的ajax：jQuery中发送ajax请求的方法：1)以get方式请求：$.get()方法：第一个参数：请求页面的URL地址。第二个参数：一个键值对的列表。第三个参数：异步交互成功之后调用的回调函数，回调函数的参数值为服务端响应的信息。第四个参数：服务器端响应信息返回内容的格式，如TEXT、XML、HTML、JSON、Script等。注意：get()方法能够在请求成功时调用回调函数。如果需要在出错时执行函数，则必须使用$.ajax()方法。$.getJSON()方法：第一个参数：请求页面的URL地址。第二个参数：一个键值对的列表。第三个参数：异步交互成功之后调用的回调函数，回调函数的参数值为服务端响应的信息。$.getScript()方法：参数同getJSON方法一样。2)以post方式请求：$.post()方法：第一个参数：请求页面的URL地址。第二个参数：一个键值对的列表。第三个参数：异步交互成功之后调用的回调函数，回调函数的参数值为服务端响应的信息。第四个参数：服务器端响应信息返回内容的格式，如TEXT、XML、HTML、JSON、Script等。3)$.ajax处理特殊的数据请求和响应ajax()方法是jQuery实现ajax的底层方法，也就是说它是get()、post()等方法的基础。使用该方法可以完成通过HTTP请求加载远程数据只有一个参数：一个键值对的列表，包含了配置信息以及回调函数等。这个键值对列表中可以设置的属性有：type：请求方式，默认为"GET"。url：发送请求的地址，默认为当前页面的地址。data：发送到服务器的数据，必须为键值对的格式，同时自动转换为字符串的格式。dataType：指定服务器返回数据的类型，eg：text、xml、html、json、script等如果不指定，jQuery会根据HTTP包含的MIME信息返回responseXML或responseText，并作为回调函数参数传递。success：请求成功后的回调函数，函数的参数由服务器返回。complete：请求完成后的回调函数(请求成功和失败时都调用)。该函数包含两个参数：一个XMLHttpRequest对象和一个描述成功请求类型的字符串。contentType：向服务器发送数据的类型，默认为"application/x-www-form-urlencoded"async：设置是否异步请求，默认为trueeg：加载一个JavaScript文件：$.ajax({type : "GET",url : "test.js",dataType : "script"});把客户端的数据传递给服务端，并获取服务端的响应信息：$.ajax({type : "POST",url : "test.jsp",data : "name=jack&age=17",success : function(data){// 异步通信成功后的回调函数alert(data);// 显示服务器的响应信息}});10 jQuery中常用的方法：通用遍历方法：$.each(obj, function(i, n){  // some operation});obj：遍历的对象或数组function(i, n){}：每个元素都要执行的回调函数i：对象的属性名或数组的索引n：对象的属性值或数组的元素jQuery对象遍历方法：each(function(i){// some operation});function(i){}：每个元素都要执行的回调函数i：集合的索引注意：可以使用this获取到当前的元素jQuery的优点：在JavaScript中，给页面中某元素设置行为时必须先检测该元素是否存在，然后赋予该元素相应的属性或事件，从而导致代码冗余，影响执行效率。注：如果该元素在页面中不存在或者被前面的代码删除了，那么浏览器会报错，影响后面代码的执行。在JQuery中，选择器定位页面中的元素时，不需要考虑该元素是否存在，如果该元素不存在，则浏览器不做任何操作，也不会报错，从而不会影响后面代码的执行。jquery：点击超链接时获取超链接的id：$(this).attr("id")var anchorId = $(this).attr("id");