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 相关文章推荐
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
jquery操作select方法汇总
Feb 05 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 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/21 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
微信小程序实现录音功能
2019/11/22 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
Python sys.path详细介绍
2013/10/17 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
Python Selenium参数配置方法解析
2020/01/19 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
在线课程:Skillshare
2019/04/02 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
材料化学应届生求职信
2013/10/09 职场文书
本科毕业生的求职信范文
2013/11/20 职场文书
如何写好升职自荐信
2014/01/06 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
vue+spring boot实现校验码功能
2021/05/27 Vue.js
Redis实现分布式锁的五种方法详解
2022/06/14 Redis