jquery学习笔记

一、jquery简介

为了简化JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器

当前流行的JavaScript 库有:

二、jquery对象和DOM对象

jQuery 对象就是通过 $() 包装 DOM 对象后产生的对象。

jQuery 对象是 jQuery 独有的. 如果一个对象是jQuery 对象, 那么它就可以使用 jQuery 里的方法。

jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用jQuery 里的任何方法。

开发约定：

如果获取的是 jQuery 对象, 那么要在变量前面加上 $.

var $variable = jQuery 对象

var variable = DOM 对象

jquery对象转换成DOM对象：

(1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象. 

【实例】var $c = $("button");var c = $c[0];

(2) 使用 jQuery 中的 get(index)方法得到相应的 DOM 对象                       

【实例】var $c = $("button");var c = $c.get(0);

 

DOM对象转换成jquery对象：

对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象。

var c =document.getElementById("cr");

var $c = $(c);

 

注意：jquery开始起笔有两种写法

$(function(){内容});（常用的起笔写法）

$(document).ready(function(){内容});

三、层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.

（1）$("#ancestor div") : 选取id为ancestor元素下所有的div元素。

（2）$("#ancestor > div") : 选取id为ancestor元素下所有的子元素的div元素，注意不包括孙子元素。

（3）$("#ancestor + div") : 选取id为ancestor元素的后一个div元素，但是注意，div必须与ancestor元素相邻，也就是说

ancestor元素的下一个元素是一个div元素。

（4）$("#ancestor ~ div") : 选取id为ancestor元素的后的所有div兄弟元素。

 

四、过滤选择器

五、内容过滤选择器

六、可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (<input  type=“hidden”>)和visible:hidden 之类的元素。

7、属性过滤选择器

注意：选择时可以多重选择：

【实例】$("div[title][title!='test']")：选择div中有title属性的并且title属性值不为test的。

8、子元素过滤选择器

nth-child() 选择器详解如下：

(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素

(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素

(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数的元素

(3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

9、表单元素过滤选择器

10、复制节点

clone():克隆匹配的DOM元素，返回值为克隆后的副本。但此时复制的新节点不具备任何行为。

clone(true):复制元素的同时也复制元素中的事件。

注意：克隆时需注意克隆后的节点的id属性，若原来节点有id属性，则克隆后会出现一个文档中有两个id一样的属性，可以用attr()方法修改克隆后元素的id属性值。

11、包裹节点

以下的方法将指定的节点用其他标记包裹起来，该方法对于需要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。

warp():将所有匹配的元素一个一个包裹起来。（由于jquery获取的是元素数组）

warpAll():将所有匹配的元素整个包裹起来。（由于jquery获取的是元素数组）

warpInner():将所有匹配的元素的内容一个一个包裹起来。（由于jquery获取的是元素数组）

【实例】$("#city").warp("<fontstyle='color:red;'></font>");

12、offset方法

获取元素在当前视窗中的相对位移:offset()。其返回对象包含了两个属性：top和left。该方法只对可见元素有效。

【实例】$("#car").offset().top;$("#car").offset().left;

13、

如果一个select为多选菜单的时候，可以传入数组使得其需要选中的option处于选中状态。

$("select").val(['check1','check2']);

同样，checkbox也可以这样使用。

14、is()方法

使用is()方法来判断某个给定的jquery元素对象是否符合指定的选择器。

【实例】var flag =$("#car").is(":hidden"); 判断car元素是否处于隐藏状态。

15、时间冒泡

时间会按照DOM层次结构像水泡一样不断向上直至顶端元素。

解决：在事件处理函数中返回false，会对事件停止冒泡。既加上：return false;

16、事件对象的属性

事件对象：当触发事件时，事件对象就被创建了，在程序中使用事件只需要为函数添加一个参数，该事件对象只有事件处理函数才能访问到，事件处理函数执行完毕后，事件对象就被销毁了。

event.pageX,event.pageY:获取到光标相对于页面的x，y坐标。

17、移除事件

移除某按钮上的所有click事件：$("btn").unbind('click');

移除某按钮上的所有事件：$("btn").unbind();

one():该方法可以为元素绑定处理函数，当处理函数触发一次后，立即被删除。即在每个对象上，事件处理函数只会被执行一次。

【实例】$("a").one('click',function(){         alert("clickme");         returnfalse;});

18、合成事件

$(".head").hover(function(){},function(){});

这个鼠标移上去后执行第一个函数，鼠标离开后执行第二个函数。

$(".head").toggle(function(){},function(){});

鼠标点击一次执行第一个函数，两次执行第二个函数，点击几次执行第几个函数。

后面还可以加函数function(){}

19、jquery动画

fadeIn(),fadeOut();只改变元素的透明度。fadeOut()会在指定的一段时间内降低元素的不透明度，知道元素完全消失。fadeIn()则相反。

slideDown(),slideUp():只会改变元素的高度。如果一个元素的display属性为none，当调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素由下至上缩短显示。

toggle():可以切换元素的可见状态。

slideToggle():通过高度变化来切换元素的可见状态。

fadeToggle():通过透明度切换元素的可见状态。