第1章 认识jQuery
1.1 JavaScript和JavaScript库
1.1.1 JavaScript简介
JavaScript自身存在3个弊端,即复杂的文档对象模型DOM,不致的浏览器实现和缺乏便捷的开发、调试工具。
1.2 加入jQuery
1.2.2 jQuery的优势
jQuery强调的理念是写得少,做得多(write less, do more ) 。
- jQuery有以下优势:
轻量级;
强大的选择器;
出色的DOM操作的封装;
可靠的事件处理机制;
完善的Ajax;
不污染顶级变量;
出色的浏览器兼容性;
链式操作方式;
隐式迭代;
行为层与结构层分离;
插件支持;
开源;
1.3 jQuery代码的编写
1.3.2 编写简单的jQuery代码
$(document).ready()
这段代码的作用类似于传统JavaScript的window.onload方法·小过与window.onload还是有些区别。表格1-2对它们进行了简单对比。
1.3.3 jQuery代码风格
4种代码风格总结
(1)对同一个对象不超过3个操作的,可以直接写成一行代码如下:
$("li").show().unbind("click");
(2)对一于同·个对象的较多操作,建议每行写一个操作。代码如下:
(3)对于多个对象的少量操作,可以每个对象写一行,如果涉及子元素,叮以考虑适当地缩进。例如上面提到的代码:
(4)对于多个对象的较多操作,建议结合第(2)条、第(3)条来做。
1.4 jQuery对象和DOM对象
DOM对象
DOM(文档对象模型),每一份DOM都可以表示成一棵树。
获取DOM对象:
var domObj= document.getElementById("id");
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jQuery里的方法。例如:
这段代码等同于:
在jQuery对象中无法使用DOM对象的任何方法;同样,DOM对象也不能使用jQuery里的方法。
1.4.2 jQuery对象和DOM对象的互相转换
在讨论jQuery对象和DOM对象的相互转换之前,先约定好定义变量的风格。如果获取的对象是JQuery对象,那么在变量前面加$,例如:
var $variable = jQuery对象;
var variable = DOM对象;
- jQuery对象转换成DOM对象
jQuery提供了两种方法将一个jQuery对象转换成DOM对象,即[index]和get(index).
(1)jQuery对象是一个数组对象,可以通过[index]的方法得到相应的DOM对象。
jQuery代码如下:
var $cr = $("#cr");// jQuery对象
var cr = $cr.get(0);//DOM对象
alert(cr.checked);//检测这个checkbox是否被选中了
(2)DOM对象转换成jQuery对象
对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。
jQuery代码如下:
var cr = document.getElementById("cr");//DOM对象
var $cr = $(cr);//jQuery对象
Note:
平时用到的jQuery对象都是通过$()函数制造出来的,$()函数就是一个jQuery对象的制造工厂。
1.5 解决jQuery和其他库的冲突
- 1.jQuery库在其他库之后导入
在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库。示例如下:
或者,可以自定义一个快捷方式:
如果不想给jQuery自定义这些备用名称,还想使用$而不管其他库的$()方法,同时又不想与其他库相冲突,那么可以使用以下两种解决方法。
其一:
其二:
这应该是最理想的方式,因为可以通过改变最少的代码来实现全面的兼容性;
- 2.jQuery库在其它库之前导入
如果jQuery库在其他库之前就导入了,那么可以直接使用“jQuery”来做一些jQuery的工作。同时,可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。示例如下:
转载于:https://www.cnblogs.com/myitroad/p/7402162.html
第1章 认识jQuery相关推荐
- jQuery入门第一章(jQuery初体验)
JQ 基本概念 jQuery 其实就是别的团队封装好的一个 JS 文件. 常见错误 没有引入 jQuery 文件,引入失败,请检查 jquery.js 文件的路径. JQ 对象 和 DOM 对象互相转 ...
- JavaScript交互式网页设计 • 【第6章 初识jQuery】
全部章节 >>>> 本章目录 6.1 jQuery概述 6.1.1 初识 jQuery 6.1.2 jQuery 基本功能 6.1.3 搭建 jQuery 开发环境 6.1 ...
- 第二章(jQuery选择器)
2.1jQuery选择器是什么 1.CSS选择器 选择器 示例 选择器 示例 标签选择器 a{ } p{ } ul{ } ID选择器 #ID{ } 类选择器 .class{ } 群组选择器 td,p, ...
- 第五章 初始jQuery
jQuery与JavaScript: jQuery的用途: 访问和操作DOM元素: 控制页面样式: 对页面事件的处理: 方便地使用jQuery插件: 与Ajax技术的完美结合: jQuery的优势: ...
- 第5章 初识JQuery
JQuery是对JavaScript的封装,简化了JS代码,是主流框架的基础(VUE,EasyUI,Bootstrap) 它是2006年推出的 JQuery的优势: 体积小,压缩后只有100KB左右 ...
- 第四章使用jQuery操作DOM元素
一.DOM的分类: 1.DOM core 2.HTML-DOM 3.CSS-DOM 二.css操作 语法: $("#div1").css("color",&qu ...
- 第三章(jQuery中的DOM操作)
3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...
- 第四章:jQuery动画
一.动画显示与隐藏 1. jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一 ...
- JavaScript基础——第五章,jQuery与JavaScript
文章目录 jQuery简介 配置环境 DOM对象和jQuery对象 DOM对象转jQuery对象 jQuery对象转DOM对象 jQuery选择器 通过CSS选择器选取元素 基本选择器 层次选择器 属 ...
最新文章
- jquery图片播放切换插件
- opencv中的push_back()函数
- Swift 数字字符串格式化
- Java多线程专题一:并发所面临的问题
- JSP脚本实现登录验证功能
- PHP — Cookie and Session篇
- server长时间运行query,Ajax刷新被block
- 强制关机对电脑的影响_电脑强制关机,对电脑有影响吗?你被伪科普骗了多久?...
- spring 优越性实践
- Springboot集成mybatis通用Mapper与分页插件PageHelper
- Redis 中文入库成功,读取数据写入文件乱码问题
- 谷粒商城:02. 数据库初始化以及SQL语句
- Java中高级面试必问之多线程TOP50(含答案)
- 淘宝商城和淘宝网有什么区别
- cad2019菜单栏怎么调出来_AutoCAD2019怎么把工具栏放左右两边两侧工具栏调出来
- AutoJs学习-抖音自动评论
- 【5G系列】Network Slicing学习总结(4)
- 【历史上的今天】9 月 26 日:硅晶体管先驱出生;黑客盗取雅虎用户信息;“生物圈 2 号”实验室
- 6个技巧,让你十年前的老电脑流畅起来。
- Word一般文章格式