jQuery实用基础超详细介绍


Posted in Javascript onApril 11, 2013

一、jQuery 简介

jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库
jQuery 理念: 写得少, 做得多. 优势如下:
轻量级
强大的选择器
出色的 DOM 操作的封装
可靠的事件处理机制
完善的 Ajax
出色的浏览器兼容性
链式操作方式
……

第一个案例

jQuery实用基础超详细介绍

 

二、jQuery 对象

jQuery 对象就是通过 jQuery ($()) 包装 DOM 对象后产生的对象
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#persontab”).html();
jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法
约定:如果获取的是 jQuery 对象, 那么要在变量前面加上 $.  
var $variable = jQuery 对象
var variable = DOM 对象

三、DOM 对象转成 jQuery 对象

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

var dc=document.getElement("aa");

var $dc=$(dc);
   转换后就可以使用 jQuery 中的方法了

jQuery 对象转成 DOM 对象

jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM 对象的时候, 有如下两种处理方法:
(1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象. 

var $dc=$("#dc");

var dc=$dc[0];

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

                 var $dc=$("#dc");

               var dc=$dc.get(0);

四、jQuery 选择器

jQuery实用基础超详细介绍

 

 

基本选择器

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用).

jQuery实用基础超详细介绍

 

层次选择器

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

 jQuery实用基础超详细介绍

 

注意:  (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

基本过滤选择器

jQuery实用基础超详细介绍

 

内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

jQuery实用基础超详细介绍

 

可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

 jQuery实用基础超详细介绍

 

可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (<input  type=“hidden”>)和 visible:hidden 之类的元素

属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

jQuery实用基础超详细介绍

 

子元素过滤选择器

jQuery实用基础超详细介绍

 

nth-child() 选择器详解如下:
(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
(3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

 

一、表单对象属性过滤选择器

此选择器主要对所选择的表单元素进行过滤

jQuery实用基础超详细介绍

 

二、表单选择器

jQuery实用基础超详细介绍

 

三、jQuery 中的 DOM 操作

1、DOM(Document Object Model—文档对象模型):一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件
DOM 操作的分类:
2、DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML
HTML DOM: 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时, 有许多专属于 HTML-DOM 的属性
CSS-DOM:针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属性

四、查找节点

查找节点:
查找元素节点: 通过 jQuery 选择器完成.
查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值

五、创建节点

创建节点: 使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回.
注意:
动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中;
当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“<P>”)
创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建

六、插入节点(1)

动态创建 HTML 元素并没有实际用处, 还需要将新创建的节点插入到文档中, 即成为文档中某个节点的子节点
jQuery实用基础超详细介绍

 

七、插入节点(2)

jQuery实用基础超详细介绍

以上方法不但能将新创建的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动.

八、删除节点

1、remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.
2、empty(): 清空节点 ? 清空元素中的所有后代节点(不包含属性节点).

九、复制节点

1、clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
2、clone(true): 复制元素的同时也复制元素中的的事件

十、替换节点

1、replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素
2、replaceAll(): 颠倒了的 replaceWith() 方法.
注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失

十一、包裹节点

wrap(): 将指定节点用其他标记包裹起来. 该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义.
wrapAll(): 将所有匹配的元素用一个元素来包裹. 而 wrap() 方法是将所有的元素进行单独包裹.
wrapInner(): 将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来.

十二、属性操作

attr(): 获取属性和设置属性
当为该方法传递一个参数时, 即为某元素的获取指定属性
当为该方法传递两个参数时, 即为某元素设置指定属性的值
jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等.
removeAttr(): 删除指定元素的指定属性

十三、设置和获取 HTML, 文本和值

读取和设置某个元素中的 HTML 内容: html() . 该方法可以用于 XHTML, 但不能用于 XML 文档
读取和设置某个元素中的文本内容: text(). 该方法既可以用于 XHTML 也可以用于 XML 文档.
读取和设置某个元素中的值: val() --- 该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框, 则返回一个包含所有选择值的数组

十四、常用的遍历节点方法

取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.
取得匹配元素后面紧邻的同辈元素的集合(但集合中只有一个元素): next()
取得匹配元素前面紧邻的同辈元素的集合(但集合中只有一个元素): prev()
取得匹配元素前后所有的同辈元素: siblings()

十五、样式操作

获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.
追加样式: addClass() 
移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class
切换样式: toggleClass()  --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.
判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
 

Javascript 相关文章推荐
Jquery常用技巧收集整理篇
Nov 14 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 #Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 #Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 #Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 #Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 #Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 #Javascript
在JavaScript并非所有的一切都是对象
Apr 11 #Javascript
You might like
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
对python调用RPC接口的实例详解
2019/01/03 Python
python实现人脸签到系统
2020/04/13 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
公务员的自我鉴定
2013/10/26 职场文书
会计应届生的自荐信
2013/12/13 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
超市重阳节活动方案
2014/02/10 职场文书
大气污染防治方案
2014/05/19 职场文书
责任担保书范文
2014/05/21 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python