富贵资源网 Design By www.hznty.com
jQuery是一个优秀的JavaScript库,它凭借简洁地语法和跨平台的兼容性,极大地简化了开发人员遍历HTML文档,操作DOM,处理事件,执行动画和开发Ajax操作。
jQuery优势:
1.轻量级
2.强大的选择器
3.出色的DOM操作的封装
4.可靠的事件处理机制
5.完善的Ajax
6.不污染顶级变量
7.出色的浏览器兼容性
8.链式操作方式
9.隐式迭代
10.行为层与结构层分离
11.丰富的插件支持
12.完善的文档
13.开源
(1)编写简单的jQuery代码:
注:$ 就是jQuery的简写形式。
<!-- 引入 jQuery --> <script src="/UploadFiles/2021-04-02/jquery-1.3.1.js">(2)jQuery的代码风格
注:链式操作。
1、对同一个对象不超过3次操作的,可以写成一行。
2、对于同一个对象操作较多的,建议每行写一个操作。
3、对于多个对象的少量操作,可以每个对象写一行,如果涉及子元素,可以考虑适当的缩进。
4、对于多个对象的较多操作,可以结合2,3条。
添加必要的注释。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>1-4-3</title> <style type="text/css"> #menu { width:300px; } .has_children{ background : #555; color :#fff; cursor:pointer; } .highlight{ color : #fff; background : green; } div{ padding:0; } div a{ background : #888; display : none; float:left; width:300px; } </style> <!-- 引入 jQuery --> <script src="/UploadFiles/2021-04-02/jquery-1.3.1.js">(3)DOM对象与jQuery对象
DOM(Document Object Model,文档对象模型),每一个DOM都可以表示成一棵树。JavaScript中的getElementById或者getElementByTagName来获取元素节点,这样的DOM元素就是DOM对象。
jQuery对象是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,可以使用jQuery中的方法,但不能使用DOM对象的方法。
注:jQuery对象都是通过$()函数制造出来的,$()函数就是一个jQuery对象的制造工厂。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>1-4</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 引入 jQuery --> <script src="/UploadFiles/2021-04-02/jquery-1.3.1.js">1.DOM对象方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>1-6-2</title> <!-- 引入 jQuery --> <script src="/UploadFiles/2021-04-02/jquery-1.3.1.js">2.jQuery对象方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>1-6-1</title> <!-- 引入 jQuery --> <script src="/UploadFiles/2021-04-02/jquery-1.3.1.js">以上就是关于jquery学习的第一课,希望大家继续关注。
富贵资源网 Design By www.hznty.com广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!富贵资源网 Design By www.hznty.com暂无评论...