文档章节

JQuery学习记录

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

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
武汉
高级程序员

暂无文章

SpringBoot | 第十章:Swagger2的集成和使用

前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成。现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的...

oKong
今天
9
0
Python 最小二乘法 拟合 二次曲线

Python 二次拟合 随机生成数据,并且加上噪声干扰 构造需要拟合的函数形式,使用最小二乘法进行拟合 输出拟合后的参数 将拟合后的函数与原始数据绘图后进行对比 import numpy as npimport...

阿豪boy
今天
4
0
云拿 无人便利店

附近(上海市-航南路)开了家无人便利店.特意进去体验了一下.下面把自己看到的跟大家分享下. 经得现场工作人员同意后拍了几张照片.从外面看是这样.店门口的指导里强调:不要一次扫码多个人进入....

周翔
昨天
1
0
Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
昨天
176
1
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
昨天
1
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
昨天
1
0
python里求解物理学上的双弹簧质能系统

物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定。假定没有外力时,两个弹簧的长度为L1和L2。 由于两物体有重力,那么...

wangxuwei
昨天
0
0
apolloxlua 介绍

##项目介绍 apolloxlua 目前支持javascript到lua的翻译。可以在openresty和luajit里使用。这个工具分为两种模式, 一种是web模式,可以通过网页使用。另外一种是tool模式, 通常作为大规模翻...

钟元OSS
昨天
2
0
Mybatis入门

简介: 定义:Mybatis是一个支持普通SQL查询、存储过程和高级映射的持久层框架。 途径:MyBatis通过XML文件或者注解的形式配置映射,实现数据库查询。 特性:动态SQL语句。 文件结构:Mybat...

霍淇滨
昨天
2
0
开发技术瓶颈期,如何突破

前言 读书、学习的那些事情,以前我也陆续叨叨了不少,但总觉得 “学习方法” 就是一个永远在路上的话题。个人的能力、经验积累与习惯方法不尽相同,而且一篇文章甚至一本书都很难将学习方法...

_小迷糊
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部