jQuery技术

jQuery技术第一讲

字号+ 作者:H5之家 来源:H5之家 2016-01-17 10:10 我要评论( )

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

概述:

轻量级

强大的选择器

出色的DOM操作的封装

可靠的事件处理机制

完善的Ajax

出色的浏览器兼容性

链式操作方式

一、jQuery

约定:如果获取的是

jQuery

Dom

二、选择器详解

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

Id

b)层次选择器

空格表示祖先关系

c)基本选择器

[

d)基本选择器

:first

e)内容选择器

:contains('value')

f)可见性选择器

:hidden

g)子元素选择器

:nth-child(even|odd|3n|)

表单选择器

:input

h)表单对象属性选择器

:enabeld

三、属性简介

a)访问属性的方法

Attr(name)

b)Css

addClass(name)

removeClass()

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

c)HTML代码

Html()

d)文本

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

e)值

Val()

Val(function(index,value){})

四、筛选

a)过滤方法

Eq(index)

hasClass(

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

Is(expr)

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

Before

c)包裹

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

Unwrap()移出元素的父元素

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

wrapInner()将每一个匹配的元素的子内容指定结构包裹起来

d)替换

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

e)删除

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

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

Detach(expr)

f)复制

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

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

六、CSS

a)Css方法

Css(name)

Css(properties)

Css(name,value)

b)位置

Offset()获取匹配元素在当前视口的相对偏移。使用

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

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

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

c)尺寸

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

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

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

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

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

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评
}