jQuery第一章

最新推荐文章于 2024-08-16 19:02:09 发布

weixin_30421809

最新推荐文章于 2024-08-16 19:02:09 发布

阅读量105

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/268lwc/p/10964510.html

版权

1.jQuery 代码的编写

　　1.1 获取jQuery 最新版本

　　进入jQuery的官方网站 http://jquery.com/. 下载最新jQuery库文件。

　　1.2 jQuery 库类型说明

　　 jQuery 库的类型分成两种，分别是生产版（最小化和压缩版）和开发板（未压缩版）,如下表格所示。

几种jQuery 库类型对比
名称	大小	说明
jquery.js（开发版）	约229kb	完整无压缩版本，主要用于测试。学习和开发
jquery.min.js	约31kb	经过工具压缩或经过服务器开启Gzip压缩，主要应用于产品和项目.

　　1.3 jQuery环境配置

　　　jQuery 不需要安装，把下载的jquery.js 放到网站上的一个公共的位置，想要在某个页面上使用jquery时，只需要在相关的HTML文档引入该库文件的位置即可。

　　1.4 在页面引入jQuery

　　在编写的页面代码中<head>标签内引入jQuery库后，就可以使用jQuery库了。

　　1.5 编写简单的jQuery 代码

　　首先明确一点，在jQuery 库中, $就是jQuery的一个简写形式，例如$("#foo") 和 jQuery("#foo") 是等价的，$.ajax和jQuery.ajax 是等价。

　　下面开始编写第1个jQuery 程序

//...省略其他代码
<!-- 引入 jQuery -->
<script scr="js/jquery-1.12.4.min.js" type="text/javascript"/>
<script type="text/javascript">
    $(document).ready(function(){   //等待Dom元素加载完毕
        alert("Hello world!");       //弹出一个提示框
    });
<script>

　　运行结果。。

　　在上面的代码中有一个陌生的代码片段，如下

　　$(document).ready(function(){

　　});

　　这段代码的作用类似于传统JavaScript 中的window.onload方法，不过与window.onload还是有些区别。

　　区别分成两个部分，一个是执行时机，编写个数，简化写法。

　 1.6 jQuery 代码风格

　　代码风格即程序开发人员所编写源代码的书写风格。良好代码风格的特点是使代码易读。如果能统一jQuery 代码编写风格，对日后的代码的维护是非常有利的。

2：jQuery 对象和Dom对象

　　2.1 DOM对象和jQuery对象简介

　　我们第一次学习jQuery，经常分不清哪些是jQuery对象，哪些是Dom对象，因此需要重点了解jQuery对象和DOM对象以及他们之间的关系。

　　 2.1.1 DOM对象

　　DOM(Document Object Model，文档对象模型），每一分DOM都可以表示成一颗树。下面代码构建了一个基本的网页，网页代码如下：

1 //...省略其他代码
2 <h3>例子<h3>
3 <p title="选择你喜欢吃的水果">你最喜欢的水果是?</p>
4 <ul>
5     <li>苹果</li>
6     <li>橘子</li>
7     <li>菠萝</li>
8 </ul

　　可以把上面的HTML结构描述为一颗DOM树，如图所示，

　　在这颗dom树中，<h3> <p> <ul> 以及<ul>的3个子节点都是DOM元素节点。可以通过JavaScript 中的getElementsByTagName 或者 getElementById 来获取元素节点。像这样得到的dom元素就是DOM对象。

　　2.1.2 jQuery 对象

　　jQuery 对象就是通过jQuery 包装DOM对象产生的对象

　　jQuery 对象是jQuery 独有的。如果一个对象是jQuery 对象，那么就可以使用jQuery 里面的方法。

　　例如：$("#foo").html(); //获取id为foo的元素内的html代码。html()是jquery里的方法。

　　这段代码等于：document.getElementById("foo").innerHTML;

　　在jQuery 对象中不能使用DOM对象的任何方法。

　　在DOM 对象中也不能使用jQuery中的任何方法。

　　2.1.3 jQuery 对象和 DOM 对象的互相转换

　　　　2.1.3.1 jQuery 对象转成DOM 对象

　　　　jQuery 对象不能使用DOM中的方法，但如果对jQuery 对象所提供的方法不熟悉，或者jQuery 没有封装想要的方法，不得不使用DOM对象的时候。就有以下的两种　处理方法了。

　　　　jQuery 提供了两种方法将一个jQuery 对象转换成DOM 对象，即 [index] 和 get [index]

　　　　(1) jQuery 对象是一个类型数组的对象，可以通过[index]的方法得到相应的DOM对象。

　　　　jQuery 代码如下：

　　　　var $cr = $("#cr") //jQuery 对象

　　　　var cr= $cr[0] //DOM对象

　　　　(2) 另外一种方法是 jQuery 本身提供的，通过get(index)方法得到响应的DOM对象

　　　　jQuery 代码如下：

　　　　var $cr = $("#cr"); //jQuery 对象

　　　　var cr = $cr.get(0); //DOM对象

　　　　2.1.3.2：DOM对象转成jQuery 对象

　　　　对于一个DOM对象，只需要用$（）把DOM对象包装起来，就可以获得一个jQuery 对象了，方式为$(DOM对象)。

　　　　jQuery 代码如下:

　　　　var cr = document.getElementById("cr"); //DOM对象

　　　　var $cr = $(cr); //jQuery 对象

　　　转换后，可以任意使用jQuery 中的方法。

　　　　通过以上方法，可以任意地相互转换jQuery 对象和DOM 对象。

　　　　注意：平时用到的jQuery 对象都是通过$()函数制造出来的，$()函数就是一个jQuery 对象的制造工厂。

转载于:https://www.cnblogs.com/268lwc/p/10964510.html

weixin_30421809

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery第一章

1.jQuery代码的编写　　1.1 获取jQuery最新版本　　进入jQuery的官方网站 http://jquery.com/.下载最新jQuery库文件。　　　　　1.2jQuery库类型说明　　 jQuery库的类型分成两种，分别是生产版（最小化和压缩版）和开发板（未压缩版）,如下表格所示。几种jQuery库类型对比 ...
复制链接

扫一扫