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 相关文章推荐
jQuery 开发者应该注意的9个错误
May 03 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
JavaScript多种页面刷新方法小结
Apr 04 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
js继承 Base类的源码解析
2008/12/30 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
vue实现选中效果
2020/10/07 Javascript
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
python监控文件并且发送告警邮件
2018/06/21 Python
详解Python3 pickle模块用法
2019/09/16 Python
python实现滑雪者小游戏
2020/02/22 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
用Python进行websocket接口测试
2020/10/16 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
读书演讲主持词
2014/03/18 职场文书
党员十八大心得体会
2014/09/12 职场文书
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python