jQuery方法汇总

jQuery常用方法总结汇总

首先要注意的是:使用jQuery的方法API时 ,都是方法调用 ，也就是说需要加小括号().而每个方法对应的参数是不一样的，功能也不同.

<span style="font-size:18px;">ready(fn)</span>

<span style="font-size:18px;"><span style="font-size:18px;">			$(document).ready(function (){

			});</span></span>

当页面文档从上至下加载完毕后执行里面的代码块 代替了js中的window.onload 可在页面张无限次使用$(document).ready(fn)事件 其中注册的函数 代码块 会依照至上而下的顺序执行。

<span style="font-size:18px;">eq(index|-index)</span>

<span style="font-size:18px;">$('li').eq().css('color','red')</span>

eq()是jQuery的基本选择器. 作用是查找并且 获取第N个元素 eq() 括号里可以有两个值 一个是正数 从第一个开始 正方向查找  一个是负数-1从反方向最后一个开始查找.

<span style="font-size:18px;"><span style="font-size:18px;">:even</span></span>

<span style="font-size:18px;"><span style="font-size:18px;">$('li:even').css('color','red');</span></span>

:even方法是jQuery用来查找 匹配所有索引值为偶数的元素，从 0 开始计数即(1,3,5,7,9,11)..........

<span style="font-size:18px;">:odd</span>

<span style="font-size:18px;">$('li:odd').css('color','red');</span>

:odd方法是jQuery用来查找 匹配所有索引值为奇数的元素，从 0 开始计数即(0,2,4,6,8,10)..........

<span style="font-size:18px;">find(expr|obj|ele)</span>

<span style="font-size:18px;">$('ul').find('li').css('color','red');</span>

.find() 方法 是搜索找到所有与表达式匹配的元素 如上是找到ul标签里面所有的li元素 只要是ul里面的li就会被匹配

其ul里面的li后代元素全部会被选中   expr-String 代表用于查找的表达式     jQuery object一个用于匹配元素的jQuery对象   element指的是DOMElement一个DOM元素。

<span style="font-size:18px;"><span style="font-size:18px;">children([expr])</span></span>

<span style="font-size:18px;">$('ul').children().css('color','red'); //当.children()括号内没有值的时候代表找到对象里面所有子元素</span>

<span style="font-size:18px;">$('ul').children('p').css('color','red'); //当.children()括号内有值的时候代表只要符合条件的子元素都会被找到</span>

.children()  取得对象中每一个元素的所有子元素的元素集合。也可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。  参数  expr  用以过滤子元素的表达式.

<span style="font-size:18px;">siblings([expr])</span>

<span style="font-size:18px;">$("div").siblings()//当.siblings()方法括号里为空时 代表找到所有div同辈的元素</span>

<span style="font-size:18px;">$('div').siblings('ul').css('color','yellow') //当.siblings('ul') 找到div的同辈 为ul的标签</span>

.siblings()  获取当前与对象同辈的元素 的集合 可以对同辈的元素标签进行筛选。 但是不包括使用.siblings()对象本身.

<span style="font-size:18px;">parent([expr])</span>

<span style="font-size:18px;">$('li').parent();//找到包含着li的第一层父辈元素</span>

<span style="font-size:18px;">$('li').parent('.box');//找到包含着li的第一层父辈类名为box的标签</span>

.parent() 方法是  取得一个包含着所有匹配元素的唯一父元素的元素集合。 可以使用可选的表达式来筛选。

<span style="font-size:18px;">parents([expr])</span>

<span style="font-size:18px;"><span style="font-size:18px;">$('li').parents().css('background','red');//找到包含着li的所有祖先元素</span></span>

<span style="font-size:18px;"><span style="font-size:18px;">$('li').parents('div').css('background','red');//找到包含着li的标签名为div的父元素盒子</span></span>

.parents() 方法与.parent() 方法不同的是 parent只找上一层  而parents 如果没有筛选的话 将找到文档的根节点body

<span style="font-size:18px;">attr(name|properties|key,value|fn)</span>

<span style="font-size:18px;">alert($('p').attr('class'));  //返回第一个p标签的class</span>

<span style="font-size:18px;">$('p').attr({'class':'active','title':'我是p标签'})  //设置p标签的样式 为active title为我是p标签 使用json格式设置</span>

<span style="font-size:18px;">$('p').attr('class','active')  //设置属性  后面是 值 中间用逗号隔开</span>

<span style="font-size:18px;">$('p').attr('title',function (){return $(this).text()})  //设置p标签的title 并且 返回p标签当前的文本值 为p标签的title</span>

.attr() 设置或返回被选元素的属性值。

name: 代表的是需要设置或者获取的属性名称.

properties: 作为属性的“名/值对象” 可以看见是使用json的方式 同时为p标签设置了title与class值
key,value设置的属性名称，与属性值 中间用逗号合开 <常用的方式>
key,function(index, attr) 属性名称/返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值.

代码中我们可以看见，我们先设置确定设置p的title的属性 然后使用function函数 返回p标签的html元素内容 为p标签的title值

<span style="font-size:18px;">filter(expr|obj|ele|fn)
</span>

<span style="font-size:18px;">$('p').filter('.active').css('color','red')//找到所有p标签集合中样式为active的p标签</span>

<span style="font-size:18px;">$('p').filter('.active,:first').css('color','red') //找到p标签集合中的类名为active的p标签 并且找到p标签的第一个</span>

<span style="font-size:18px;">$('p').filter(function(index) {  //function(index) 寻找遍历所有的p标签
	 return $('span', this).length == 0; //一个函数用来作为测试元素的集合。它接受一个参数index，这是元素在jQuery集合的索引。在函数， this指的是当前的DOM元素。
}).css('color','red');</span>

.filter() 方法用于筛选出与指定表达式匹配的元素集合 <与filter()方法相反的是not>

<span style="font-size:18px;">not(expr|ele|fn)</span>

	$("p").not( $("#selected") ).html(44) 
				//找到所有的p标签 排除其中id为selected的p标签

.not()  删除与指定表达式匹配的元素  意思是排除 与指定元素匹配的元素  剩下的不匹配的才是选中的

has(expr|ele)

				$("p").has(".box").css('color','red');
				//找到所有的p标签 找到p标签中有子集类名为box 的p标签

.has() 保留包含特定后代的元素，去掉那些不含有指定后代的元素。   含有匹配后代的对象将得以保留。

next([expr])

				$('li').next().css('background','red');
				//找到li 同辈的节点中 的下面兄弟节点起作用 不包括本身

				$('li').next().css('background','red');
				//找到li 同辈的节点中 的下面兄弟节点起作用 不包括本身 如果没有筛选条件就是全部下面的同辈li
				$('li').next('.box').css('color','green');
				//如果有条件 如找到同辈的类名为box的li 

.next()  取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

.prev()

$("p").prev().css('background','red')
//找到p标签中同辈的上一个

$("div").prev('.w').css('background','red')
				//找到p标签中同辈的上一个 类名为w的标签

.prev() 找到同辈中 匹配的紧邻的上一个元素 而不是同辈中的所有

find(expr|obj|ele)

				$('p').find('span').css('color','red')
				//find的作用相当于 $('p span')一样

.find() 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

JQuery的DOM

        DOM是(文档对象模型(Document Object Model))的简称 ，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM.但是DOM是一种与浏览器,平台,语言无关的接口,使用DOM接口可以轻松的访问页面中所有的标准组件,DOM可以分为三个方面,即DOM Core(核心),HTM-DOM和CSS-DOM.

每个网页都可以用DOM表示出来，每个DOM都可以看做是医科DOM树，下面的html页面结构可以构建出一棵“DOM树”。

JQuery中的DOM操作主要对包括：建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库
操作】。下面的DOM操作将围绕上面的DOM树进行学习JQueryDOM操作。

一、查--查找DOM节点

　　　　查找节点非常容易，使用选择器就能轻松完成各种查找工作。

二、建--新建DOM节点

1、创建元素节点

　　创建元素节点并且把节点作为<ul>元素的子节点添加到DOM节点树上。先创建元素点，创建元素节点使用Jquery的工厂函数$()来完成，格式如下：$(html),该方法会根据传入的html字符串返回一个DOM对象，并将DOM对象包装成一个JQuery对象后返回。创建一个元素节点JQuery代码如下：

<span style="font-size:18px;"><span style="font-size:18px;">			//创建元素节点
			$li3=$('<li></li>')        //只有元素节点
			$li4=$('<li>水果大拼盘</li>') //有文本节点</span></span>