zoukankan      html  css  js  c++  java
  • jQuery第一章

    一、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’;
    

      

  • 相关阅读:
    celery的使用
    DOM操作
    js动画
    列表案例
    背景案例
    背景属性连写
    背景属性
    链接导航案例
    链接伪类
    优先权之权重会叠加
  • 原文地址:https://www.cnblogs.com/koto/p/5161492.html
Copyright © 2011-2022 走看看