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 相关文章推荐
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
微信小程序实现留言功能
Oct 31 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 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
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
php5 mysql分页实例代码
2008/04/10 PHP
php 团购折扣计算公式
2011/11/24 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
js验证表单第二部分
2006/11/25 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
从setTimeout看js函数执行过程
2017/12/19 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
Python的Urllib库的基本使用教程
2015/04/30 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
numpy.array 操作使用简单总结
2019/11/08 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
python 元组的使用方法
2020/06/09 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
python 读取、写入txt文件的示例
2020/09/27 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
人事主管岗位职责范本
2013/12/04 职场文书
毕业生就业自荐信
2013/12/04 职场文书
迟到检讨书5000字
2014/01/31 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang