jQuery技术第一讲

概述：jQuery 理念: 写得少, 做得多. 优势如下:

轻量级

强大的选择器

出色的 DOM 操作的封装

可靠的事件处理机制

完善的 Ajax

出色的浏览器兼容性

链式操作方式

一、jQuery 对象就是通过 jQuery ($()) 包装 DOM 对象后产生的对象，jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也

不能使用 jQuery 里的任何方法，

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

jQuery对象--->Dom对象    var domNode=$(dom对象)

Dom对象--->jQuery对象    var $jquery=(jquery对象).index[0] 或(jquery对象).get(0)

二、选择器详解

a) 基本选择器，这个选择器与css样式表的选择器一样

Id：#id名  类名  .类名   元素：直接标签名 * 表示选择全部   用,隔开表示'或'

b) 层次选择器

空格表示祖先关系 >表示父子 +号表同级紧跟的后一个元素 ~号表同级后元素

c) 基本选择器

[属性名]表示是否存在  [属性名=value] 表示属性为value [][][]多个属性表示'且'...

d) 基本选择器

:first表示第一个元素 :last最后一个  :animated 正在执行动画 :eq(index) 比较...

e) 内容选择器

:contains('value') 包含value的元素  :empty为空 :has 是否存在 :parent是否父级

f) 可见性选择器

:hidden 表示隐藏元素 :visible 表示显示元素

g) 子元素选择器

:nth-child(even|odd|3n|) 根据value选择的元素  :first-child第一个子元素../

表单选择器

:input 选择所有的表单的元素 :text 选择文本  :radio 单选按钮 :reset 重置 ....

h) 表单对象属性选择器

:enabeld 表示启动 :disabled 表示禁用 :checked 表示选择selected表示option选中

三、属性简介

a) 访问属性的方法

Attr(name) 得到属性value attr(name,value) 设置属性值 removeAttr(name) 删除

b) Css类

addClass(name) 添加class名的css样式属性  参数可为function 返回的一个类名或者css样式表   

removeClass()删除指定名的css的属性

toggleClass(name) 如果存在就删除，不存在就添加一个类

c) HTML代码

Html()获取文本的html的代码 可以传入参数设置html代码

d) 文本

text()获取元素中的全部文本属性，包含子元素的文本，也可以传参设置文本

e) 值

Val() 获取元素值  可传参设置val值  

Val(function(index,value){}) 参数1表示在数组中的坐标元素，参数此元素的值

四、筛选

a) 过滤方法

Eq(index) 获取第几个元素   first()  last() 第一个和最后一个元素  

hasClass(类名)返回true|false

Filter(expr) 参数传入选择器表示过滤

Is(expr) 传入过滤器  返回true或false

Map(callback) 将一组元素转换成其他数组

Has()保留包含特定后代的元素，去掉那些不含有指定后代的元素。

Not()删除与指定表达式匹配的元素

Slice(start,[end]) 选取一个匹配的子集

b) 查找方法

Children(expr) 根据选择器获取子元素

Closest(expr) 从本元素开始，逐级向上级元素匹配，并返回最先匹配的元素。

Find(expr) 根据选择器发现元素

Next()取一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。nextAll()查找当前元素之后所有的同辈元素。

nextUntil() 查找同辈元素，直到遇到匹配的那个元素为止。

offsetParent()返回第一个匹配元素用于定位的父节点。

Parent(expr) 根据选择器获取父元素

....

...

c) 串联

Contents() 查找匹配元素内部所有的子节点

andSelf()加入先前所选的加入当前元素中

End()回到最近的一个"破坏性"操作之前

Add(expr,[context]) 把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。

五、文档处理

a) 内部插入

append 向每个匹配的元素内部追加内容。appendTo相反把元素追加到那

prepend向每个匹配的元素内部前置内容。 prependTo 与上类似

b) 外部插入

After 向同级元素后追加  insertAfter 向那一个元素之后追加指定内容

Before 向同级元素前追加  insertBefore 向那一个元素之前追加指定内容

c) 包裹

Wrap()把所有匹配的元素用其他元素的结构化标记包裹起来。

Unwrap()移出元素的父元素

wrapAll()将所有匹配的元素用单个元素包裹起来

wrapInner()将每一个匹配的元素的子内容(包括文本节点)用一个指定结构包裹起来

d) 替换

replaceWith(content) 将所有匹配的元素替换成指定的HTML或DOM元素。 replaceAll(selector) 用匹配的元素替换掉所有 selector匹

配到的元素

e) 删除

Empty() 删除匹配的元素集合中所有的子节点。

Remove(expr) 根据选择器删除此元素

Detach(expr)从dom中删除。但是所有绑定的事件会保留下来

f) 复制

Clone() 复制元素 但绑定事件不会复制

Clone(true) 复制元素并绑定事件全部会被复制

六、CSS

a) Css方法

Css(name) 返回这个css样式的样式属性  

Css(properties) 传入为css的样式内容并将此元素指定成

Css(name,value) 指定css的样式。Value为css样式表中的内容

b) 位置

Offset()获取匹配元素在当前视口的相对偏移。 使用.left .top访问左边距....

Position() 获取匹配元素相对父元素的偏移。

scrollTop() 获取匹配元素相对滚动条顶部的偏移。

scrollLeft() 获取匹配元素相对滚动条左侧的偏移。

c) 尺寸

Height() 获取高度，传参可以设置高度

Width() 获取宽度  传参可以设置宽度

innerHeight()获取第一个匹配元素内部区域高度

innerWidth() 获取第一个匹配元素内部区域宽度

outerHeight()获取第一个匹配元素外部高度

outerWidth()获取第一个匹配元素外部宽度