文档章节

JQuery学习记录

Codeyn
 Codeyn
发布于 2015/11/25 13:35
字数 1897
阅读 106
收藏 4

JQuery学习记录

轻量级、强大的选择器、DOM易操作、可靠的事件机制、浏览器兼容&Ajax、链式操作……

JQ对象与DOM对象区别

  • jq对象就是使用$(dom)将dom对象封装起来,一般在jq对象前面加上$与dom对象区分,jq不能调用dom对象的attr和method,反之亦然
  • 如果想使用jq对象调用dom对象?将jq对象转成dom对象,jq对象是一个数组对象,jq的所有操作都是each的,可使用jq[i] or jq.get(i)即可
  • dom对象转为jq对象,$(dom)

JQ选择器

选择器是JQ的根基,在JQ中所有的操作都依赖此

基本选择器

最常见的选择器,通过id、class和tag来查找dom

  1. $('#id'),获取指定id的元素,id全局唯一
  2. $('.class'),获取class指定的元素
  3. $('tag'),获取tag指定的元素
  4. $('*'),获取所有元素,一般在子查询中使用
  5. $('s1, s2, s3...'),获取所有符合选择器的并集

层次选择器

父子关系,兄弟关系的节点

  1. $('div span'),获取div下的所有span元素
  2. $('div > span'),获取div下的子span元素
  3. $('div + next'),获取div后的一个兄弟元素
  4. $('div ~ siblings),获取div后面的所有兄弟元素

过滤选择器

通过“:”添加过滤条件,可分为基本、内容、可见性、属性、子元素、表单对象属性等过滤选择器

基本过滤
  1. :first,获取列表中的第一个元素
  2. :last,获取列表最后一个元素
  3. :not(selector),去除所有匹配指定的选择器
  4. :even,获取所有元素中索引为偶数的元素,索引从0开始
  5. :odd,获取所有元素中索引为奇数的元素,索引从0开始
  6. :eq(idx),获取指定索引的元素
  7. :gt(idx),获取索引大于idx的元素
  8. :lt(idx),获取索引小于idx的元素
  9. :header,获取所有的标题元素,如head、h1等
  10. :animated,获取当前正在执行的所有动画元素
内容过滤

操作元素和文本内容

  1. :contains(txt),获取包含txt文本内容的元素
  2. :empty,获取空元素
  3. :has(selector),获取含有匹配指定选择器的元素的元素
  4. :parent,获取父元素
可见性过滤
  1. :hidden,获取所有不可见元素,包括:display:none、type='hidden'、visible:hidden
  2. :visible,获取所有可见元素
属性过滤
  1. [attr],获取含有此属性的元素
  2. [attr=value],获取属性值为value的元素
  3. [attr!=value],获取属性值不为value的元素
  4. [attr^=value],获取属性值以value开头的元素
  5. [attr$=value],获取属性值以value结束的元素
  6. [attr*=value],获取属性值包含value的元素
  7. [s1][s2][s3]...[sN],获取复合性选择器的交集
子元素过滤
  1. :nth-child(index/even/odd),获取索引为index、even、odd的子元素;nth-child(event/odd),获取索引为奇偶的子元素;nth-child(2),获取索引为2的子元素;nth-child(3n),获取索引为3的倍数的子元素;nth-child(3n+1),获取索引为3n+1的倍数的子元素
  2. :first-child,获取第一个子元素
  3. :last-child,获取最后一个子元素
  4. :only-child,获取唯一子元素
表单过滤
  1. :input,获取所有input、textarea、select、button元素
  2. :text,获取所有文本框元素
  3. :password,获取所有密码框元素
  4. :radio,获取所有单选框元素
  5. :checkbox,获取所有复选框元素
  6. :submit,获取所有提交按钮元素
  7. :image,获取所有图片元素
  8. :reset,获取所有重置元素
  9. :button,获取所有按钮元素
  10. :file,获取所有文件上传元素
  11. :hidden,获取所有隐藏元素
表单属性过滤
  1. :enabled,获取所有可用元素
  2. :disabled,获取所有不可用元素
  3. :checked,获取所有选中元素(如:单选、复选框)
  4. :selected,获取所有选中元素(如:下拉列表)

JQ中的DOM操作

DOM CORE,任何一种支持DOM的语言都可以使用,并非仅限于处理网页,也可以处理任何用标记语言编写的文档(XML),与浏览器、平台、语言无关的接口

HTML-DOM,使用js和dom编写html文件,有许多专属于HTML-DOM的属性

CSS-DOM,针对CSS操作,在js中,CSS-DOM主要用于获取和设置css

DOM操作

创建
  1. $('<p>xx</p>')
  2. $('p').clone(),如果要克隆事件传参true
插入
父子元素
  1. $1.append($2),将$2添加到$1内的尾部
  2. $1.appendTo($2),将$1添加到$2内的尾部
  3. $1.preppend($2),将$2添加到$1内头部
  4. $1.preppendTo($2),将$1添加到$2内头部
兄弟元素
  1. $1.after($2),将$1添加到$2后
  2. $1.insertAfter($2),同1
  3. $1.before($2),将$1添加到$2前
  4. $1.insertBefore($2),同3
删除
  1. $('p').remove('.c'),删除含有c样式的p元素(包含子元素)
  2. $('p').empty(),清除p的内容
替换
  1. $('p').replaceWith('<br/>'),将所有p元素替换为<br/>
  2. $('<br/>').replaceAll('p'),与上相反
包装
  1. $('p').wrap('<div></div>'),将p单独包进div中
  2. $('p').wrapAll('<div></div>'),将所有p包进div中
  3. $('p').wrapInner('<br/>'),将<br/>包进每个p中
属性

JQ中有很多方法是重载实现获取&设置(如:html()、text()、val()、height()、width()、css()等

  1. attr(),获取&设置attr
  2. removeAttr(),删除attr
样式
  1. $1.addClass('xx'),$1添加样式xx
  2. $1.removeClass('yy'),$1删除样式yy
  3. $1.toggleClass('zz'),$1切换样式zz
  4. $1.hasClass('cc'),是否有样式cc
文本
  1. html(),可用用于XHTML但不能XML
  2. text(),文本内容(可XHTML & XML)
  3. val(),多选框只能返回第一个值,多选下拉列表为[]
遍历
  1. children(),所有子元素
  2. next(),后一个兄弟元素
  3. prev(),前一个兄弟元素
  4. siblings(),所有兄弟元素

CSS-DOM

  1. css(),class属性
  2. opacity(),透明度
  3. height()、width(),高宽(默认px)
  4. offset(),相对位移,返回对象包含:top、left,只对可见元素有效

JQ中的事件

事件冒泡,事件按照dom层次不断向上冒,在事件处理函数中添加return false,对事件会停止冒泡,也可停止元素的默认行为

DOM加载

在页面加载完后,通过js为dom添加事件,在js中通常使用window.onload,在JQ中使用$(document).ready()/$(),但是所有事件只能在一个window.onload中注册,而$()可以多个

事件[绑|解]定

  1. $1.onclick(function(){})
  2. $1.click(function(){})
  3. $1.bind('click',function(){})
  4. $2.unbind('click')
  5. $2.unbind()
  6. $2.one(),只执行一次

事件合成

  1. hover(fn1,fn2),模拟光标悬停,当移动到元素上时触发fn1,移出时触发fn2
  2. toggle(fn1,fn2...fnn),模拟鼠标连续点击,第一次点击触发fn1,第n次触发fnn(元素选中与非选中),无参表示切换可见性

JQ中的DOM动画

通过设置DOM对象的显示与隐藏方式,可以产生动画效果

无动画效果

  1. hide(),在HTML中,设置元素为display:none(css('display','none'))
  2. show(),设置display:;
  3. toggle(),切换可见性

透明度效果

通过透明度效果的hide&show实现淡入淡出效果

  1. fadeIn('slow'),在指定的时间增加不透明度直到元素显示
  2. fadeOut('fast'),在指定的一段时间内降低元素的不透明度直到元素完全消失
  3. fadeTo('fast',0.25,fn),把不透明度以渐近的方式调整到指定的值(0~1)之间,并在动画结束可触发回调

高度效果

通过设置高度效果hide&show实现下滑与收起的效果

  1. slideDown(),如果display:none调用时元素由上至下延伸显示
  2. slideUp(),元素由下至上缩短隐藏
  3. slideToggle(),通过高度变化来切换元素可见性

© 著作权归作者所有

共有 人打赏支持
Codeyn

Codeyn

粉丝 1
博文 18
码字总数 9427
作品 0
武汉
高级程序员

暂无文章

原型模式

1、原型模式-定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 克隆(浅度克隆->拷贝值类型或者引用,深度克隆->创建新的对象,开辟新的内存) 例如客户端知道抽象Pro...

阿元
今天
49
0
awk命令扩展使用操作

awk 中使用外部shell变量 示例1 [root@centos01 t1022]# A=888[root@centos01 t1022]# echo "" | awk -v GET_A=$A '{print GET_A}'888[root@centos01 t1022]# echo "aaaaaaaaaaaaa" | aw......

野雪球
今天
43
0
深入解析MySQL视图VIEW

Q:什么是视图?视图是干什么用的? A:视图(view)是一种虚拟存在的表,是一个逻辑表,本身并不包含数据。作为一个select语句保存在数据字典中的。   通过视图,可以展现基表的部分数据;...

IT--小哥
今天
48
0
虚拟机学习之二:垃圾收集器和内存分配策略

1.对象是否可回收 1.1引用计数算法 引用计数算法:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1;任何时候计数器值为0的对象就是不可能...

贾峰uk
今天
45
0
smart-doc功能使用介绍

smart-doc从8月份底开始开源发布到目前为止已经迭代了几个版本。在这里非常感谢那些敢于用smart-doc去做尝试并积极提出建议的社区用户。因此决定在本博客中重要说明下smart-doc的功能,包括使...

上官胡闹
昨天
47
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部