jQuery入门介绍之基础知识


Posted in Javascript onJanuary 13, 2015

JavaScript 库作用及对比

为了简化JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的Web2.0 特性的富客户端页面, 并且兼容各大浏览器

当前流行的JavaScript 库有:

 jQuery入门介绍之基础知识

jQuery 简介

jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库

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

轻量级

强大的选择器

出色的 DOM 操作的封装

可靠的事件处理机制

完善的 Ajax

出色的浏览器兼容性

链式操作方式

……

jQuery: HelloWorld

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 对象.

 jQuery入门介绍之基础知识

   转换后就可以使用 jQuery 中的方法了

jQuery 对象转成 DOM 对象

jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM 对象的时候, 有如下两种处理方法:

(1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象. 

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

jQuery 选择器

选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器

jQuery 选择器的优点:

简洁的写法                                                                                   

完善的事件处理机制

基本选择器

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

jQuery入门介绍之基础知识

基本选择器示例

改变 id 为 one 的元素的背景色为 # bbffaa

改变 class 为 mini 的所有元素的背景色为 # bbffaa

改变元素名为<div> 的所有元素的背景色为 #bbffaa

改变所有元素的背景色为 #bbffaa

改变所有的<span>元素和 id 为 two 的元素的背景色为 # bbffaa

层次选择器

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

 jQuery入门介绍之基础知识

 

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

层次选择器示例

改变<body> 内所有<div> 的背景色为 # bbffaa

改变<body> 内子 <div>的背景色为 # bbffaa

改变 id 为 one 的下一个 <div> 的背景色为 # bbffaa

改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # bbffaa

改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 # bbffaa

Javascript 相关文章推荐
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
AngularJS中的模块详解
Jan 29 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
js图片上传的封装代码
Aug 01 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
viewer.js实现图片预览功能
Jun 24 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 #Javascript
Web表单提交之disabled问题js解决方法
Jan 13 #Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 #Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 #Javascript
使用javascript实现雪花飘落的效果
Jan 13 #Javascript
javascript数组输出的两种方式
Jan 13 #Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 #Javascript
You might like
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python实现全角半角转换的方法
2014/08/18 Python
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
PyQt5 多窗口连接实例
2019/06/19 Python
Django实现内容缓存实例方法
2020/06/30 Python
Python如何实现单例模式
2016/06/03 面试题
劳资协议书范本
2014/04/23 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
军人离婚协议书样本
2014/10/21 职场文书
2014年关工委工作总结
2014/11/17 职场文书
小学感恩节活动总结
2015/03/24 职场文书
python 命令行传参方法总结
2021/05/25 Python
Django实现drf搜索过滤和排序过滤
2021/06/21 Python
Python3的进程和线程你了解吗
2022/03/16 Python
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL