<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>waimv.com &#187; jquery</title>
	<atom:link href="http://www.waimv.com/tag/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.waimv.com</link>
	<description></description>
	<lastBuildDate>Fri, 09 Nov 2018 10:41:46 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>JQuery DOM 的常用操作</title>
		<link>http://www.waimv.com/javascript/115/</link>
		<comments>http://www.waimv.com/javascript/115/#comments</comments>
		<pubDate>Thu, 18 Nov 2010 09:08:55 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.szpian.com/?p=115</guid>
		<description><![CDATA[一、JQuery对象的基本方法： (1) get(); 取得所有匹配的元素 (2) get(index); 取得其中一个匹配的元素 $(this).get(0) 等同于 $(this)[0] (3) Number index(jqueryObj); 搜索子对象 (4) each(callback); 类似foreach，不过遍历的是元素数组 如： $(&#8220;img&#8221;.each(function(index){ this.src = &#8220;test&#8221; + index + &#8220;.jpg&#8221;; }); 使用 return false; return true; 代表 break、continue的功能 (5) length、size(); 都是返回元素总数值 (6) jQuery.noConflict(true);   重设 jquery 默认的符号 如： var dom = {}; dom.query = jQuery.noConflict(true); 这时将用 dom.query 代替 $ 二、、JQuery选择器 [...]]]></description>
			<content:encoded><![CDATA[<p><strong>一、JQuery对象的基本方法</strong>：<br />
(1) get(); 取得所有匹配的元素<br />
(2) get(index); 取得其中一个匹配的元素 $(this).get(0) 等同于 $(this)[0]<br />
(3) Number index(jqueryObj); 搜索子对象<br />
(4) each(callback); 类似foreach，不过遍历的是元素数组<br />
如：<br />
$(&#8220;img&#8221;.each(function(index){<br />
this.src = &#8220;test&#8221; + index + &#8220;.jpg&#8221;;<br />
});<br />
使用 return false; return true; 代表 break、continue的功能</p>
<p>(5) length、size(); 都是返回元素总数值</p>
<p>(6) jQuery.noConflict(true);   重设 jquery 默认的符号<br />
如：<br />
var dom = {};<br />
dom.query = jQuery.noConflict(true);<br />
这时将用 dom.query 代替 $</p>
<p><strong>二、、JQuery选择器</strong><br />
(1)基本：</p>
<p>*                        匹配所有DOM元素<br />
.classname               匹配带有指定classname的DOM元素<br />
element(DOM标签名称)     匹配指定名称的所有DOM元素<br />
#id                      匹配指定ID的DOM元素<br />
,                        用,分开表示匹配多个选择条件中的一个</p>
<p>(2)层级：</p>
<p>选择一[空格]选择二 表示选一内合符条件二的所有元素<br />
选择一[&gt;]选择二     表示选一内合符条件二的第一个元素<br />
选择一[+]选择二     表示紧接选一符条件二的元素 next<br />
选择一[~]选择二     表示选一后符条件二的所有元素 siblings</p>
<p>(3)运算符</p>
<p>:animated           动画元素<br />
:eq(index)          索引位置，如：$(&#8220;div:eq(1)&#8221;<br />
:even               偶数元素<br />
dd                奇数元素<br />
:first              第一个<br />
:gt(index)          大于索引的所有元素<br />
:lt(index)          小于索引的所有元素<br />
:header             H1、H2&#8230; 这些标题元素<br />
:last               最后一个<br />
:not(Selector)      排除</p>
<p>:contains(string)   选择的对象内容里包含<br />
:empty              选择的对象内容为空<br />
:has(Selector)      含有<br />
:parent             与empty相反<br />
:first-child<br />
:last-child<br />
:nth-child(index)   第几个<br />
nly-child         唯一的子元素</p>
<p>表单<br />
:text :checkbox :radio :image :file :submit :reset :password :button</p>
<p>表单状态<br />
:checked :disabled :enabled :selected</p>
<p>可见性<br />
:hidden :visible</p>
<p>属性及其运算符<br />
[属性名称]        匹配包含给定属性的元素<br />
[att=value]       等同上面<br />
[att*=value]      模糊匹配<br />
[att!=value]      不能是这个值<br />
[att$=value]      结尾是这个值<br />
[att^=value]      开头是这个值<br />
[att1][att2][att3]&#8230;   匹配多个属性条件中的一个</p>
<p><strong>三、JQuery DOM 的常用操作</strong><br />
(是指通过选择器筛选得到DOM后可进行的常用操作，即是JQuery对象实例的方法)</p>
<p>1、属性操作(注：attr(name)、html()、val() 是只对第一个匹配元素操作的方法，其它都是对全部操作)<br />
attr(name); 获得匹配元素的第一个元素指定的属性<br />
attr(key, fn)、attr(key, value) 对所有匹配元素设定一个属性值，前者的第二个参数是一个函数，值即是这个函数的返回值<br />
attr(properties) 用键值对设定所有匹配元素设定一个或多个属性值，如：$(&#8220;img&#8221;.attr({ src: &#8220;test.jpg&#8221;, alt: &#8220;Test Image&#8221; });<br />
removeAttr(name) 删除匹配元素指定属性值<br />
addClass(classname) 增加类名，即是增加 class 属性<br />
removeClass(classname)<br />
toggleClass(classname) 切换类名（存在则删除，不存在则增加）</p>
<p>html()<br />
html(setvalue)<br />
text()<br />
text(setvalue)<br />
val()<br />
val(val)      对于普通元素，使用方法应该是 对象.val(设置值); 对于 select、radio等则用值表示要选中这个值的对象，如：<br />
$(&#8220;#multiple&#8221;.val(["value1", "value3"]);<br />
$(&#8220;input&#8221;.val(["checkvalue1", "checkvalue2"]);</p>
<p>2、筛选<br />
实际上筛选的方法很多都能通过选择器的运算符实现的，因此这里只列出一些特殊的操作方法。</p>
<p>eq(index)、filter(expr)、hasClass(class)、is(expr)、not(expr)、</p>
<p>filter(fn)           筛选出与指定函数返回值匹配的元素集合（这个函数内部将对每个对象计算一次<br />
(类似 &#8216;$.each&#8217;). 如果调用的函数返回false则这个元素被删除，否则就会保留。）</p>
<p>slice(start,[end])   选取一个匹配的子集</p>
<p>map(callback)        将一组元素转换成其他数组（不论是否是元素数组）</p>
<p>andSelf()     把所选的加入到当前元素集中<br />
end()         恢复前一个选择破坏后的状态</p>
<p>3、文档处理</p>
<p>append(content)      向每个元素内容追加内容，content指：String, Element, jQuery 其中之一，以下同。</p>
<p>appendTo(content)    以上面的相反，上面是向选中对象追加，这个是把选中对象向content选择的对旬追加</p>
<p>prepend(content)、prependTo(content)、after(content)、before(content)</p>
<p>replaceWith(content) 把选中元素用content替换<br />
replaceAll(selector) 把选择的对象用当前对象替换</p>
<p>empty()<br />
remove([expr])<br />
clone()<br />
clone(true) 克隆时把事件一起克隆</p>
<p>4、CSS处理</p>
<p>css(name)         访问第一个匹配元素的样式属性<br />
css(name,value)   在所有匹配的元素中，设置一个样式属性的值<br />
css(properties)   用键值对对其给值</p>
<p>offset()          获得选中元素的位移，返回值为对象Object{top,left}</p>
<p>height()、height(val)、width()、width(val)</p>
<p><strong>四、JQuery对象的事件处理</strong></p>
<p>1、全局操作</p>
<p>(1) ready(fn)              DOM就绪时的事件，对于document事件可以简写为 $(function(){ &#8230;   });</p>
<p>(2) bind(type,[data],fn)   对所的匹配绑定一个事件data为传递给这个事件函数的附加对象<br />
如：<br />
$(&#8220;p&#8221;.bind(&#8220;click&#8221;, function(){<br />
alert( $(this).text() );<br />
});<br />
function handler(event) {<br />
alert(event.data.foo);<br />
}<br />
$(&#8220;p&#8221;.bind(&#8220;click&#8221;, {foo: &#8220;bar&#8221;}, handler)</p>
<p>(3) one(type,[data],fn)           以上面的区别是这个事件只响应一次</p>
<p>(4) trigger(type,[data])          在每一个元素上触发一次某事件</p>
<p>(5) triggerHandler(type,[data])   只触发事件函数，但不触发浏览器的相同事件</p>
<p>(6) unbind([type],[data])         删除绑定的事件</p>
<p>(7) hover(overFn, outFn)          响应鼠标经过事件</p>
<p>(8) toggle(fn1,fn2&#8230;)            每次点击鼠标后依次响应该不同的函数</p>
<p>2、固定事件<br />
在不带参数的情况下表示执行某事件，带参数则为设定某事件</p>
<p>下面的事件能触发，也能设定：<br />
blur()、change()、click()、dblclick()、error()、focus()、keydown()、keypress()、keyup()、select()、submit()</p>
<p>下面的事件只能设定，不能用JS触发：<br />
load(fn)、mousedown(fn)、mousemove(fn)、mouseout(fn)、mouseover(fn)、mouseup(fn)、resize(fn)、scroll(fn)、unload(fn)</p>
<p><strong>五、效果</strong><br />
hide()<br />
hide(speed,[callback])    用动画隐藏，callback 为动画完成时执行的函数<br />
show()<br />
show(speed,[callback])<br />
toggle()                 切换状态</p>
<p>slideDown(speed,[callback])      通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。<br />
slideUp(speed,[callback])        通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。</p>
<p>slideToggle(speed,[callback])    通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。</p>
<p>fadeIn(speed,[callback])         通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。<br />
fadeOut(speed,[callback])        通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。<br />
fadeTo(speed,opacity,[callback]) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。</p>
<p>animate(params,options) 用于创建自定义动画的函数。<br />
params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合<br />
options (Options) : 一组包含动画选项的值的集合。</p>
<p>animate(params[,duration[,easing[,callback]]])</p>
<p>duration、 easing 是预设的动画动作<br />
duration (String,Number) : (可选) 三种预定速度之一的字符串(&#8220;slow&#8221;, &#8220;normal&#8221;, or &#8220;fast&#8221;或表示动画时长的毫秒数值(如：1000)<br />
easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).默认jQuery提供&#8221;linear&#8221; 和 &#8220;swing&#8221;.</p>
<p>dequeue()        从动画队列中移除一个队列函数<br />
queue()          返回指向第一个匹配元素的队列(将是一个函数数组)<br />
queue(callback) 在匹配的元素的动画队列中添加一个函数<br />
queue(queue)     将匹配元素的动画队列用新的一个队列来代替(函数数组)<br />
stop()</p>
<p><strong>六、AJAX</strong></p>
<p>1、jQuery.ajax(options) 通过 HTTP 请求加载远程数据。</p>
<p>参数列表：<br />
(1) async (Boolean) : (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。<br />
(2) beforeSend (Function) : 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 是Function的唯一参数<br />
(3) cache (Boolean) : (默认: true,dataType为script时默认为false) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。<br />
(4) complete (Function) : 请求完成后回调函数 (请求成功或失败时均调用)。<br />
(5) contentType (String) : (默认: &#8220;application/x-www-form-urlencoded&#8221; 发送信息至服务器时内容编码类型。<br />
(6) data (Object,String) : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为</p>
<p>Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 &#8216;&amp;foo=bar1&amp;foo=bar2&#8242;。<br />
(7) dataFilter (Function) :给Ajax返回的原始数据的进行预处理的函数。<br />
(8) dataType (String) : 预期服务器返回的数据类型，&#8221;xml&#8221;、&#8221;html&#8221;、&#8221;script&#8221;、&#8221;json&#8221;、&#8221;jsonp&#8221;、&#8221;text&#8221;。<br />
(9) error (Function) : (默认: 自动判断 (xml 或 html)) 请求失败时调用时间。<br />
(10) global (Boolean) : (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件<br />
(11) ifModified (Boolean) : (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。<br />
(12) jsonp (String) : 在一个jsonp请求中重写回调函数的名字。<br />
(13) password (String) : 用于响应HTTP访问认证请求的密码<br />
(20) username (String) : 用于响应HTTP访问认证请求的用户名<br />
(14) processData (Boolean) : (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 &#8220;application/x-www-form-urlencoded&#8221;。如</p>
<p>果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。<br />
(15) scriptCharset (String) : 只有当请求时dataType为&#8221;jsonp&#8221;或&#8221;script&#8221;，并且type是&#8221;GET&#8221;才会用于强制修改charset。通常在本地和远程的内容编码不同时使用。<br />
(16) success (Function) : 请求成功后回调函数。参数：服务器返回数据，数据格式。 Ajax 事件。<br />
(17) timeout (Number) : 设置请求超时时间（毫秒），此设置将覆盖全局设置。<br />
(18) type (String) : (默认: &#8220;GET&#8221; 请求方式 (&#8220;POST&#8221; 或 &#8220;GET&#8221;)， 默认为 &#8220;GET&#8221;。<br />
(19) url (String) : (默认: 当前页地址) 发送请求的地址。</p>
<p>参数用 : 分开，如：<br />
$.ajax({<br />
url: &#8220;test.html&#8221;,<br />
cache: false,<br />
success: function(html){<br />
$(&#8220;#results&#8221;).append(html);<br />
}<br />
});</p>
<p>2、封装好的简易方法(callback是成功时执行的函数，参数是返回的数据)<br />
jQuery.get(url,[data],[callback])<br />
jQuery.getJSON(url,[data],[callback])<br />
jQuery.getScript(url,[callback])       载入远程JS并执行<br />
jQuery.post(url,[data],[callback])<br />
load(url,[data],[callback])            把远程的HTML载入当前选中的DOM中</p>
<p>3、事件(事件参数为event, XMLHttpRequest, ajaxOptions, thrownError)<br />
ajaxError(callback)       AJAX 请求发生错误时执行函数。<br />
ajaxSend(callback)        AJAX 请求发送前执行函数<br />
ajaxComplete(callback)    AJAX 请求完成时执行函数<br />
ajaxStart(callback)       AJAX 请求开始时执行函数<br />
ajaxStop(callback)        AJAX 请求结束时执行函数<br />
ajaxSuccess(callback)     AJAX 请求成功时执行函数<br />
jQuery.ajaxSetup(options) 设定Ajax的全局默认值<br />
serialize()               序列表单内容为字符串<br />
serializeArray()          序列化表格元素 (类似 &#8216;.serialize()&#8217; 方法) 返回 JSON 数据结构数据</p>
<p><strong>七、常用静态方法</strong></p>
<p>jQuery.boxModel             当前页面中浏览器是否使用标准盒模型渲染页面<br />
jQuery.browser                浏览器内核标识。依据 navigator.userAgent 判断。<br />
可用值: safari opera msie mozilla</p>
<p>jQuery.browser.version      浏览器渲染引擎版本号。<br />
jQuery.each(obj,callback)   通用例遍方法，可用于例遍对象和数组。<br />
jQuery.inArray(value,array) 确定第一个参数在数组中的位置(如果没有找到则返回 -1 )。<br />
jQuery.map(array,callback) 将类数组对象转换为数组对象，返回值为数据，callback可以对旧数组单个进行处理<br />
jQuery.unique(array)        删除数组中重复元素。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.waimv.com/javascript/115/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
