jQuery特效

97 阅读1分钟

jQuery对于我们来说是最熟悉的陌生人,为什么这样说呢?因为我们知道且了解这个对象完整的属性但是我们又很少去使用到它,过了N多年,当我们碰到它的时候不熟悉但是又似曾相识的感觉。这种既熟悉又陌生的体验非jQuery莫属了。 下面就从几个方面大致了解一下它的属性和内容。

一、选择网页元素

关于选择网页元素部分,主要是通过$符获取网页元素,然后再对其加以处理,具体如下:

选择表达式可以是css选择器的样式:

$(document)  //用于获取整个文档

$("#myId")  //选择id是myId的元素

$(".myClass")  //选择class为myClass的元素

("div.myClass") 或("div.myClass")  或 ("div.#myId")  //选择div下的class为myClass的元素  或 选择div下的id是myId的元素

$("input[name=first]")  //选择input标签下name 为first的元素 也可以是Jquery特有的表达式:

$("a:first") //选择网页中第一个a元素

$("tr:odd") //选择表格的基数 even 为偶数

$("#myForm : input")  //选择id为myForm 下的input元素

$("div:visible")  //选择可见的div元素

$("div:gt(2)")  //选择除了前三个的div  (lt代表小于)

二、过滤特效,选择不同的元素

$("div").next("p") // 选择div元素后面的第一个p元素

$("div").parent) // 选择div元素的父元素

$("div").children() // 选择div元素的所有子元素

$("div").siblings() // 选择div元素的所有兄弟元素

三、链式操作

实现链式操作的原因是,jQuery特殊的功效,他返回的是对象,可以通过对象直接添加属性。

例如:找到div元素下的第三h3元素,并把其内容设置为 hello

$("div").find("h3").eq(2).html("hello");

分解出来就是:

$("div")

.find("h3")

.eq(2)

.html("hello");

jquery还提供了.end()方法,作用就是后退一步

$("div")

.find("h3")

.eq(2)

.html("hello")

.end(0) //退后一步到选择到的h3

.eq(1)

.html("world");//将其内容设为world

四、元素的操作:取值和赋值

操作网页元素,最常见的需求是取得它们的值,或者对它们进行赋值。Jquery设计思想之四,就是使用同一个函数,来完成取值(getter)和赋值(setter),即"取值器"与"赋值器"合一。到底是取值还是赋值,由函数的参数决定。

例如:

$("h1").html();//html中没有值,表示取出h1的值

$("h1").html("hello")中有值,表示设置值

五、元素的操作:复制、删除和创建

赋值:.clone()

删除:.remove()和。detach()  

两者的区别是:前者不保留被删除元素的事件,后者保留,有利于重新插入文档使用。

清空内容使用:.empty()

创建新元素的方法:

六、工具方法

$.trim()去除字符串两端的空格 .each()遍历一个数组或对象 .inArray()返回一个值在数组中的位置,如果不在返回-1 .extend()将多个对象合并到第一个对象 .type()判别对象的类别 .grep()返回数组中符合某种标准的元素