一、jQuery的优势

1.轻量级：压缩之后大小只有30KB左右。

2.强大的选择器：jQuery允许CSS1到CSS3几乎所有的选择器以及自身独创的选择器。

3.出色的DOM操作的封装：jQuery封装了大量常用的DOM操作，是开发者在编写DOM操作相关程序的时候能够得心应手。

4.可靠的事件处理机制：jQuery事件处理机制在处理事件绑定的时候相当可靠。

5.完善的Ajax：jQuery将所有的Ajax操作封装在一个函数$.ajax()里面，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

6.不污染顶级变量：jQuery只建立一个名为jQuery的对象，其所有函数方法都在这个对象之下。其别名$也可以随时交出控制权，绝不污染其他对象。

7.出色的浏览器兼容性：jQuery修复了一些浏览器之间的差异，使开发者不必在开展项目前建立浏览器兼容库。

8.链式操作方式：jQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。

9.隐式迭代：当用jQuery找到带有“.myClass”类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。

10.行为层与结构层分离：开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。

11.丰富的插件支持：jQuery的易扩展性，吸引了来自全球的开发者来编写jQuery的扩展插件。

12.完善的文档：jQuery的文档非常丰富，不管是中文文档还是英文文档。

13.开源：jQuery是一个开源产品。

二、jQuery代码的编写

1.获取jQuery最新版本：

到jQuery官网http://jquery.com/即可下载。

2.jQuery库类型说明：

jQuery库的类型分为两种，分别是生产版和开发版，生产版主要用于产品和项目，生产版主要用于测试、学习和开发。

3.jQuery环境配置：

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

4.在页面中引入jQuery

将jquery.js放在一个文件目录下，编写页面代码中<head>标签内引入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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--  在head标签内引入jQuery  -->

<script src = “../scripts/jquery.js” type = “text/javascript”></script>

<title></title>

<body>

</body>

</html>

　　

三、编写简单的jQuery代码

1.在jQuery库中，$就是jQuery的一个简写形式，例如$(“#foo”)和jQuery(“#foo”)是等价的，$.ajax和jQuery.ajax是等价的。

下面开始编写第一个jQuery程序。

         //……省略其他代码

<!—引入jQuery-->

<script src = “../scripts/jquery.js” type = “text/javascript”></script>

<script type = “text/javascript”>

　　$(document).ready(function( ){

　　　　alert(“Hello World!”);

　　});

</script>

//……省略其他代码

　　$(document).ready(function(){

         //…

　　});

　　

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

window.onload必须等网页中的所有内容加载完毕之后才能执行，而$(document).ready()在网页中所有DOM结构绘制完毕之后就执行，可能DOM元素相关联的东西并没有加载完。window.onload不能同时编写多个，例如以下代码：

window.onload = function(){

alert(“test1”)};

window.onload = function(){

alert(“test2”)};

结果只会输出“test2” 而$(document).ready()可以编写多个，例如以下代码：

$(document).ready(function(){

         alert(“Hello World!”);

});

$(document).ready(function(){

         alert(“Hello again!”);

});

　　

结果两次都输出

window.onload没有简化写法，$(document).ready(function(){

//….

})；可以写成

$(function(){

//…

})；

2.jQuery的编码风格：

（1）对于同一个对象不超过3个操作的，可以直接写成一行。

（2）对于同一个对象的较多操作，建议每行写一个操作。

（3）对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进。

（4）适当地添加注释

四、jQuery对象和DOM对象

1.jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象，可以使用jQuery里的方法，无法使用DOM对象的任何方法。例如$(“#id”).innerHTML和$(“#id”).checked之类的写法都是错误的，可以用$(“#id”).html()和$(“#id”).attr(“checked”)之类的jQuery方法来代替。同样，DOM也不能使用jQuery里的方法。例如

document.getElementById(“id”).html()也会报错，

只能用document.getElementById(“id”).innerHTML语句。

2.jQuery对象和DOM对象的相互转换

在讨论jQuery对象和DOM对象的相互转换之前，先约定好定义变量的风格。如果获取的对象是jQuery对象，那么在变量前面加上$，例如：

var $variable = jQuery对象；

var variable = DOM对象；

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

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

代码如下：

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

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

②另一种方法时jQuery本身提供的，通过get（index）方法得到相应的DOM对象。

代码如下：

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

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

（2）DOM对象转成jQuery对象

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

jQuery代码如下：

var vr = document.getElementById(“cr”) ;

var $cr = $(cr) ;

3.解决jQuery和其他库的冲突

如果想确保jQuery不会与其他库冲突，但又想自定义一个快捷方式，可以进行如下操作：

     var $j = jQuery.noConflict();

         $j(function(){

                  $j(“p”).click(function(){

                          alert( $j(this).text() );

　　　　　　　　　　})

　　　　　　})

　　　$(“pp”).style.display = ‘none’;

　　

jQuery第一章的更多相关文章

  1. jquery 第一章

    1.本章目标    了解jquery    了解jquery和js的区别    掌握jquery的入门    掌握jquery对象和dom对象的区别2.jquery简介    jquery是一个轻量级 ...

  2. JQuery第一章js 上机+课后

    =============上机1 包含字母   <!DOCTYPE html>   <html>   <head>   <title>sj1.html& ...

  3. jQuery 第一章 $()选择器

    jquery 是什么? jquery 其实就是一堆的js函数(js库),也是普通的js而已. 有点像我们封装一个函数,把他放到单独的js 文件,等待有需要的时候调用它. 那么使用它有啥好处呢? jqu ...

  4. 第一章 jQuery基础

    第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...

  5. jQuery系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  6. （李南江jQuery+Ajax）第一章：初识jQuery

    第一章:初识jQuery 一.原生的JS与jQuery的区别 <!DOCTYPE html> <html lang="en"> <head> & ...

  7. 第一章：Javascript语言核心

    本节是javascript语言的一个快速预览,也是本书的第一部分快速预览. 读此书之前,感谢淘宝技术团队对此javascript核心的翻译,感谢弗拉纳根写出此书.感谢你们无私的分享,仅以此笔记献给你们 ...

  8. jquery 第二章

    1.本章目标    css样式    选择器2.css样式    宽.高.边框.背景颜色.字体....... <html> <head> <style> div{ ...

  9. javascript高级程序设计第一章有感

    第一章JavaScript简介 Javascript的诞生最早是为了处理表单数据验证的问题,以前主要是使用perl这个强大的服务端脚本语言处理的.在未诞生javascript之前, 人们每次提交表单就 ...

随机推荐

  1. 转: Executor类

    Executor框架是指java 5中引入的一系列并发库中与executor相关的一些功能类,其中包括线程池,Executor,Executors,ExecutorService,Completion ...

  2. hadoop 常用配置项【转】

    hadoop 常用配置项[转] core-site.xml  name value  Description   fs.default.name hdfs://hadoopmaster:9000 定义 ...

  3. BCTF Web Code–考脑洞，你能过么？

    BCTF Web Code–考脑洞,你能过么? 1)打开链接,是一张图片 根据URL特点推断可能是有文件包含漏洞 2) 将jpg参数修改成index.php,查看源代码,发现base64编码后的代码 ...

  4. javascript 判断是否使用的是ipad

    //判断是否使用的是ipad function isIpad(){ var ua = navigator.userAgent.toLowerCase(); if(/ipad/i.test(ua)) { ...

  5. 奇葩json结构解析--key是数字的json处理

    json结构如下: { "ret": "ok", "data": { "57230": { "cat_id&q ...

  6. MyBatis学习-入门篇

    一.MyBatis 介绍 MyBatis 是支持普通的 SQL 查询,存储过程和高级映射的优秀持久层框架,可以进行更为细致的 SQL 优化,减少查询字段.几乎消除了所有的 JDBC 代码和参数的手工设 ...

  7. thinkphp 注册验证

    遇到用户注册等情况时,如果等用户输入所有信息,点击注册按钮提交后,再验证输入是否正确,体验很不好,而且很浪费用户的时间,增加注册成本,这里提供一个例子,演示了怎么使用ajax进行单步验证,使用thin ...

  8. 第六十四节，html文档布局元素

    html文档布局元素 学习要点:     1.文档元素总汇     2.文档元素解析     本章主要探讨HTML5中文档元素,文档元素的主要作用是划分各个不同的内容,让整个布局清晰明快.让整个布局元 ...

  9. mac 电脑配置cordova

    最近发现这个cordova有很多公司在用.所以想试试搭建一个ios平台上的cordova demo.在搭建之前我先说一些跟cordova相关的一些条件. 目前cordova项目在apache上开源.网 ...

  10. linux 查看日志

    第一步 :提交自己目录文件(先到自己目录下载最新文件-->合并-->提交到临时目录temp-->在提交到master总目录-->其他关联master远 程分支的目录.就可以pu ...