jQuery jQuery是javascript的一个函数库，非常方便，非常主流 利用jQuery开发步骤： 1导入jQuery库 2在$(function(){})的{}中编写jQuery代码 ①jQuery对象就是jQuery($()) 使用$()包装DOM对象后产生的对象 ②jQuery对象是一个DOM数组对象 规范($)：var $btn = $('button'); 1、由jQuery对象转为Dom对象 jQuery对象不能使用DOM中的方法，但如果jQuery对象没有封装想要的方法，不得不使用DOM对象的时候 有如下两种处理方式： 1）jQuery对象是一个DOM数组对象，可以通过[index]的方法转为的DOM对象 2）使用jQuery中的get(index)方法得到相应的DOM对象 $btn[index] //alert($btn[index].firstChild.nodeValue);打印哪个button下的第一个子元素的值 2、由dom对象转为jQuery对象 对于一个DOM对象，只需要用$()把DOM对象包装起来，jQuery对象就是通过jQuery包装DOM对象后产生的对象， 就可以获取一个jQuery对象，转换后就可以使用jQuery中的方法了 var btn = document.getElementById("btn"); alert($(btn).text()) ③jQuery选择器（根基） 选择器是jQuery的根基，在jQuery中，对事件处理，遍历DOM和Ajax操作都依赖于选择器 --简介的写法 --完善的事件处理机制 1、基本选择器 --选择器 --描述 --返回 #id 根据给定ID匹配一个元素 单个元素组成的集合 .class 根据给定类名匹配元素 集合元素 element 根据给定元素名匹配元素 集合元素 *(通配符) 匹配所有元素 集合元素 selector1,...,selectorN 将每一个选择器匹配到的元素合并后一起返回 集合元素 2、层级选择器 如果想通过DOM元素之间的层次关系来获取特定的元素，例如后代元素，相邻元素，兄弟元素等，则需要使用层次选择器 --选择器 --描述 --返回 $("ancestor descendant") 选取ancestor的所有的descendant（后代）元素 集合元素 $("parent > child") 选取parent元素下的child（子）元素， 集合元素 与$("ancestor descendant")有区别， $("ancestor descendant")选择的是后代元素 $("prev + next") 选取紧接在prev元素后的下一个next元素 集合元素 $("prev ~ siblings") 选取prev元素后面的所有的siblings元素 集合元素 注意：（prev ~ div）选择器只能选择"#prev"元素后面的同辈元素；而jQuery中的方法siblings()与前后的位置无关，只要是同辈节点 就可以选取 常用方法: 1)选择 id 为 two 的元素所有 div 兄弟元素 $("#two").siblings("div").css("background", "#ffbbaa"); 2)选择 id 为 one 的下一个 span 元素 //以下选择器选择的是近邻 #one 的 span 元素, 若该span和 #one 不相邻, 选择器无效. //$("#one + span").css("background", "#ffbbaa"); $("#one").nextAll("span:first").css("background", "#ffbbaa"); 3)选择 id 为 two 的元素前边的所有的 div 兄弟元素 $("#two").prevAll("div").css("background", "#ffbbaa"); 3、过滤选择器 过滤选择器主要是通过待定的过滤规则来筛选出所需要的DOM元素，该选择器都以":"开头 按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤器，子元素过滤和表单对象属性过滤器 ①基本过滤选择器 --选择器 --描述 --返回 :first 选择第一个元素 单个元素组成的集合 :last 选择最后一个元素 单个元素组成的集合 :not(selector) 去除所有与给定选择器匹配的元素 集合元素 :even 选取索引时偶数的所有元素，索引是从0开始 集合元素 :odd 选取索引时奇数的所有元素，索引是从0开始 集合元素 :eq(index) 选取索引等于index的元素，索引从0开始 集合元素 :gt(index) 选取索引大于index的元素，索引从0开始 集合元素 :lt(index) 选取索引小于index的元素，索引从0开始 集合元素 :header 选取所有的标题元素 如：h1 h2等 集合元素 :animated 选取当前正在执行动画的所有元素 集合元素
基本过滤选择器多选择时候的方法使用filter方法遍历
$("div").filter(":eq(5),:eq(11),:eq(17));这样返回的是第6，12，18元素的集合。
②内容过滤选择器 内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上 --选择器 --描述 --返回 :contains(text) 选取含有文本内容为text的元素 集合元素 :empty(空):not(:empty)(非空) 选取不包含子元素或者文本的空元素 集合元素 :has(selector) 选取含有选择器所匹配的元素的元素 集合元素 $("div:has(.mini)").css("background", "#ffbbaa");（选取class为mini的父元素） :parent (非空) 选取含有子元素或者文本的元素 集合元素 ③可见性过滤选择器 可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素 --选择器 --描述 --返回 :hidden 选取所有不可见的元素 集合元素 :visible 选取所有可见的元素 集合元素 注意：可见选择器:hidden不仅包含样式属性display和none的元素，也包含文本 隐藏域(<input type="hidden"/>)和visible:hidden之类的元素 常用方法 //show(time): 可以使不可见的元素变为可见, time 表示时间, 以毫秒为单位 jQuery 的很多方法支持方法的连缀, 即一个方法的返回值来时调用该 方法的 jQuery 对象: 可以继续调用该对象的其他方法. $("div:hidden").show(2000).css("background","#ffbbaa"); //val()获取表单元素的value属性值 //val("lala")对表单元素的value值赋值为lala //attr("value")获取元素的value值 //attr("value","123")把value值修改为123(最新版本可以修改表单元素type) ④属性过滤选择器 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素 --选择器 --描述 --返回 [attribute] 选取拥有此属性的元素 集合元素 [attribute = 'value'] 选取指定属性的值为value的元素 集合元素 [attribute != 'value'] 选取指定属性的值不等于value的元素 集合元素 [attribute ^= 'value'] 选取指定属性的值以value开始的元素 集合元素 [attribute $= 'value'] 选取指定属性的值以value结束的元素 集合元素 [attribute *= 'value'] 选取指定属性的值含有value的元素 集合元素 [selector1]...[selectorN] 用属性选择器合并成为一个符合属性选择器， 集合元素 满足多个条件，每选择一次，缩小一次范围 集合元素 ⑤子元素过滤选择器 --选择器 --描述 --返回 :nth-child(index/even/odd/equation) 选取每个父元素下的第index个 集合元素 子元素或者奇偶元素(index 从1算起) 集合元素 :first-child 选取每个父元素的第一个子元素 集合元素 :last-child 选取每个父元素的最后一个子元素 集合元素 :only-child 如果某个元素是它父元素中的唯一的子元素，那么将被匹配 集合元素 nth-child()选择器详解： 1）:nth-child(even/odd) 能选取每个父元素下的索引值为偶(奇)数的元素 2）:nth-child(2) 能选取每个父元素下的索引值为2的元素 3）:nth-child(3n) 能选取每个父元素下的索引值为3的倍数的元素 4）:nth-child(3n+1) 能选取每个父元素下的索引值是3n+1的元素 ⑥表单对象属性过滤选择器 此选择器主要对所选择的表单元素进行过滤 --选择器 --描述 --返回 :enabled 选取所有的可用元素 集合元素 :disabled 选取所有不可用元素 集合元素 :checked 选取所有被选中的元素（单选框，复选框） 集合元素 :selected 选取所有被选中选项元素（下拉列表） 集合元素 表单选择器 :checkbox 匹配所有复选框 以下都是 :checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) :radio 匹配所有单选按钮 :input 匹配所有 input, textarea, select 和 button 元素 :text 匹配所有的单行文本框 :password 匹配所有密码框 :submit 匹配所有提交按钮 :image 匹配所有图像域 :reset 匹配所有重置按钮 :button 匹配所有按钮 :file 匹配所有文件域 :selected 匹配所有选中的option元素↓ 返回的是一个数组元素用常用方法each(callback)；来遍历如： 以每一个匹配的元素作为上下文来执行一个函数。 (参数是function,this是dom对象) 意味着，每次执行传递进来的函数时，函数中的this关键字都指向 一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每 次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配 的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。 $("img").each(function(i){ this.src = "test" + i + ".jpg"; }); //注意选的是option所以一定要加空格 $("select :selected").each(function(){ alert(this.value); //alert($(this).text())读内容text('赋值') //alert(this.firstChild.nodeValue) 注意dom对象和jQuery对象 });
可以把所有select,checkbox,radio所有被选中的元素打出来:
$(":checked").each(function(){
alert(this.value);
});
重点解释 1/jQuer对象可以进行隐式迭代:$('p'.click(function(){...})) 为选取的所有p节点都添加了click响应函数。jQuery对象本身就是一个 DOM对象的数组(方法返回false可以取消指定元素的默认行为) 2/在响应函数中，this是一个DOM对象，若想使用jQuery对象的方法 需要把其包装为jQuery对象：使用$()把this包起来 3/jQuery对象的方法连缀：调用一个方法的返回值还是调用的对象，于是 可以在调用方法后面依然调用先前的哪个对象的其他方法。 4/text()方法是一个读写方法：不加任何参数，读取文本值； 加参数为属性节点添加文本值（文本节点）（和text()类似的方法： attr(),val()） 读取和设置某个元素的文本内容 操作节点 //操作文本节点：通过jQuery对象text方法 alert($('#bj').text()); $('#bj').text('无敌'); //操作属性节点：通过jQuery对象arrt()方法 //可以使用更快捷的val()方法来修改value属性的值 alert($(":text[name='username']").attr("value")); $(":text[name='username']").attr("value","sb"); 5/$.trim(str):可以去除str的前后空格(str为DOM对象) 6/.html()读取和设置某个元素的HTML内容。这个函数不能用于XML文档。但可以用于XHTML文档(相当于innerHTML) 7/.bind("click",finction(){})为某jQuery对象添加绑定事件 8/.unbind("click")移除事件 （记得使用判断如if(this.id=="aa")）{$("#aa").unbind("click")}; 9/.one("click",function(){})只为某个元素添加一次事件,响应后就不会在响应 10/.show() 让某个隐藏的jQuery对象显示出来 11/.hide() 让某个显示的jQuery对象隐藏起来 12/.is(":hidden")判断某个给定jQuery对象是否符合指定的选择器 13/.hover(function(){},function(){}) 合成的方法（2参：mouseover,mouseout） 14/.toggle(function(){},*n)合成方法（n参：鼠标连续点击执行方法循环） 15/记得用return false的方法放回事件冒泡 (什么是事件冒泡？：事件会按照DOM层次不断的向上冒) 16/pageX,pageY相对于浏览器左上角的坐标（不会随着滚动条动） 17/.find()搜索所有段落中的后代 span 元素，并将其颜色设置为红色
$("p").find("span").css('color','red');
创建节点及插入节点及删除节点 创建节点：使用jQuery的工厂函数$():$(html);会根据传入的html标记字符串创建 一个DOM对象，并把这个DOM对象包装成一个jQuery对象返回; 动态创建HTML元素并没有实际用途，还需要将新创建的节点插入到文档中，即成为文档中的某个节点的子节点 ==追加插入子节点： append() 向每个匹配的元素的 *内部的结尾处* 追加内容 appendTo() 将每个匹配的元素追加到指定的元素 *内部的结尾处* prepend() 向每个匹配的元素的 *内部的开始处* 插入内容 prependTo() 向每个匹配的元素插入到指定的元素 *内部的开始处* insertAfter() 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。 after() 在每个匹配的元素之后插入内容。 insertBefore() 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。 before() 在每个匹配的元素之前插入内容。 1、创建节点：使用$(html)方式即可,元素节点，文本节点，属性节点可以一网打尽 返回对应节点的jQuery对象 $("<li id='aa'>aaa</li>") 2、添加节点 --加入到元素的末：主语和宾语位置不同 $("<li id='aa'>aaa</li>").appendTo($("#city")); $("#city").append("<li id='bb'>bbb</li>") --加入到元素的开始：主语和宾语位置不同 $("<li id='cc'>ccc</li>").prependTo($("#city")); $("#city").prepend("<li id='dd'>ddd</li>") --加入到某个节点后 $("<li id='ee'>eee</li>").insertAfter($("#bj")); $("#bj").after("<li id='ff'>fff</li>"); --加入到某个节点前 $("<li id='gg'>ggg</li>").insertBefore($("#bj")); $("#bj").before("<li id='hh'>hhh</li>"); remove() 从DOM中删除所有匹配的元素。 empty() 删除匹配的元素集合中所有的子节点。 clone() 克隆匹配的DOM元素并且选中这些克隆的副本。 clone(true) 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。 replaceWith()/replaceAll() (主语和宾语)将所有匹配的元素替换成指定的HTML或DOM元素。 wrap() 把所有匹配的元素用其他元素的结构化标记包裹起来。 wrapAll() 将所有匹配的元素用单个元素包裹起来 wrapInner 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来 --删除节点 $("#city li").click(function(){ $(this).remove(); }); $("#city").remove(); //清空节点 $("#city").empty(); --克隆节点 // 复制bj节点 添加到hj后面 // clone节点时需要注意克隆后的节点的ID属性，若元节点有ID属性， // 则克隆后，会出现一个文档中右两个ID相同的节点的情况。 $("#bj").clone().attr("id","bj2").insertAfter($("#hj")); --替换 //创建一个li节点，替换#city的最后一个li子节点 $("<li id='asdf'>asdf</li>").replaceAll($("#city li:last")); //创建一个li节点，替换#city的第二li子节点 $("#city li:eq(1)").replaceWith($("<li id='asbf'>[asbd]</li>")) //互换bj 和hj(换过去就没有了) //$("#bj").replaceWith($("#hj")); alert(1); var $bj2 = $("#bj").clone(true); var $hj = $("#hj").replaceWith($bj2); alert(2); $("#bj").replaceWith($hj); --包裹 //包装单个li $("#game li").wrap("<font color='red'></font>") //所有li包一起 $("#city li").wrapAll("<font color='red'></font>") //包装li里面的子内容 $("#body li").wrapInner("<font color='red'></font>") 样式操作 hasClass() 某元素是否有制定样式 removeClass() 移除样式 addClass() 添加样式 toggleClass() 如果存在（不存在）就删除（添加）一个类。 例子:切换样式(存在：去除，没有：添加) $("#div").click(function(){ $('div:first').toggleClass("abc") return false; }) .css() 访问匹配元素的样式属性。 .width() 访问匹配元素宽 .height() 访问匹配元素高 .offset() 获取匹配元素在当前视窗的相对位移 $('#div').css("opacity",0.5)设置透明度（背景颜色等） $('#div').width(400)改变宽高 $('#div').height(400)改变宽高 alert($('#div').offset().top) 打印当前div相对视窗的上位移 alert($('#div').offset().left）打印当前div相对视窗的左位移 jQuery动画 1/.show() 让某个隐藏的jQuery对象显示出来(2000)括号里的为多少毫秒执行完 2/.hide() 让某个显示的jQuery对象隐藏起来 以上两个方法在不加参数时是立即执行 以上两个方法会同时减少（增大）内容的高度，宽度和不透明度 3/fadeln(),fadeOut() 改变元素透明度 fadeIn慢慢看的见 fadeOut慢慢看不见 4/slideDown(),slideUp()改变元素高度()内传毫秒参 如果一个元素的display为none，当调用slideDown()方法时 这个元素将由上至下延伸显示，slideUp()元素由下至上缩短隐藏 5/toggle()可以切换元素的可见状态 6/slideToggle()通过高度变化来切换匹配元素的可见性 7/fadeToggle()通过透明度来切换匹配元素的可见性 8/fadeTO("slow",i) i-0.1 把透明度已渐近的方式调整为某个值0-1