Tag Archives: JQuery

JQuery基础教程-DOM操作(6)

DOM:Document Object Model的缩写即文档对像模型。 DOM操作一般分为3类即DOMCore(核心)、HTML-DOM和CSS-DOM。 DOMCore并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页,也可以用来处理任何一种使用标记语言编写出来的文档,例如XML。 HTML-DOM的代码通常比较简短,不过它只能用来处理WEB文档。 CSS-DOM是针对CSS的操作。在JavaScript中,CSS-DOM技术的主要作用是获取和设置style对象的各种属性。   DOMCore: document.getElementsBytagName("form"); element.getAttribute("src");   HTML-DOM: document.forms; element.src;   CSS-DOM: element.style.color="red";   查找节点: :eq() 匹配一个给定索引值的元素,从 0 开始计数。   查找节点属性: attr()取得第一个匹配元素的属性值。   创建元素节点: $(html) 例如: var $li_1=$("<li title="菠萝">菠萝</li>");   插入节点: append()向每个匹配的元素内部追加内容。 appendTo()将所有匹配的元素追加到指定的元素中。   prepend()向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。 prependTO()将所有匹配的元素前置到指定的元素中。   after()在每个匹配的元素之后插入内容。 insertAfter()将所有匹配的元素插入到指定的元素后面。

JQuery基础教程-JQuery过滤选择器(5)

过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都是以一个冒号开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。 基本过滤器: :first:选取第1个元素; $(‘div:first’)选择取所有div元素中第1个div元素。   :last:选取最后一元素; $(‘div:last’)选取所有div元素中最后个 div元素。   :not(selector):去除所有与给定选择器匹配的元素; $(‘input:not(.myClass)’)选取class不是myClass的input元素。   :even:选取索引是偶数的所有元素,索引从0开始; $(‘input:even’)选取索引是偶数的input元素。   :o dd:选取索引是奇数的所有元素,索引从0开始; $(‘input:odd’)选取索引是奇数的input元素。   :eq(index):选取索引等index元素(index从0开始); $(‘input:eq(1)’)选取索引等于1的input元素。(equal)   :gt(index):选取索引大于index的元素(index从0开始); $(‘input:gt(1)’)选取索引大于1的input元素(注:大于1,而不包括1)。(greater than)   :lt(index):选取索引小于index的元素(index从0开始); $(‘input:lt(1)’)选择索引小于1的input元素(注:小于1,而不包括有1)。(less than)   :header:选取所有的标题元素,例如h1,h2,h3等等; $(‘:header’)选取网页中所有h1、h2、h3。   :animated:选取当前正在执行动画的所有元素; $(‘div:animated’)选取正在执行动画的div元素。 内容过滤选择器 内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。 :contains(text):选取含有文本内容为"text"的元素; $(‘div:contains(‘我’)')选择含有文本“我”的div元素。   :empty:选取不包含子元素或者文本的空元素; $(‘div:empty’)选取不包含子元素(包括文本元素)的div空元素。   :has(selector)选取含有选择器所匹配的元素的元素; $(‘div:has(p)’)选取含有p元素的div元素。   :parent:选取含有子元素或者文本的元素; $(‘div:parent’)选取拥有子元素(包括文本元素)的div元素。 可见性过滤选择器 可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。 :hidden:选取所有不可见的元素; $(‘:hidden’)选取所有不见的元素。包括<input type="hidden"/>,<div style="display:none"></div>和<div style="visibility:hidden;"></div>等元素。如果只想选择input元素,可以使用$(‘input:hidden’)。   [...]

JQuery基础教程-JQuery层次选择器(4)

如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和兄弟元素等,那么层次选择器是一个非常好的选择。 $(‘ancestor descendant’):选取ancestor元素里的所有descendant元素; $(‘div span’)选取div里的所有的span元素。   $(‘parent>child’):选择parent元素下的child元素,与$(‘ancestor descendant’)有区别,$(‘ancestor descendant’)选择的是后代元素; $(‘div>span’)选取div元素下元素名是span的子元素。   $(‘prev+next’):选取紧接在prev元素后的next元素; $(‘.one+div’)选取class为one的下一个div元素。   $(‘prev~siblings’):选取prev元素之后的所有siblings元素; $(‘#two~div’)选取id为two的元素后面的所有div兄弟元素。   $(‘.one+div’)==$(‘.one’).next(‘div’);   $(‘#prev~div’)==$(‘#prev’).nextall(‘div’);

JQuery基础教程-JQuery基本选择器(3)

基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素的ID、Class和标签名等来查找DOM元素。 #ID:根据给定的ID匹配一个元素; $(‘#test’)选取ID为test的元素。   .Class:根据给定的类名匹配元素; $(‘.test’)选取所有Class为test的元素。   element:根据给定的元素名匹配元素; $(p)选取所有的p元素。   *:匹配所有元素; $(*)选取所有的元素。   selector1,selector2,selectorN:将每一个选择器匹配到的元素合并后一起返回; $(‘div,span,p.myClass’)选择所有div,span和拥有Class为myClass的p标签的一组元素。 基本选择器和CSS中的选择器差不多,这个些比较好记,今天先记这些。