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

    一.jQuert简介

    1.什么是jQuery

    jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装。

    jQuery是继Prototype之后又一个优秀的javaScript库,是由美国人 Johh  Resig于2006年创建的开源项目。

    jQuery只是javaScript的程序库,只相当于它的一个子集,并不能完全取代javaScript。

    2.为什么要使用jQuery

    与javaScript相比,使用jQuery制作交互特效的语法更为简单,代码量大大减少,不存在浏览器兼容性的问题。

    3. jQuery与其他javascript库

    按照使用占比,几大javaScript库占比如下:

    1. jQuery      (62%)
    2. Bootstrap         (22%)
    3. Zepto        (6%)
    4. Ext   (5%)
    5. YUI   (5%)

    4. jQuery的用途

    1)  访问和操作DOM元素

    使用jQuery可以很方便的获取和修改页面中的制定元素,无论是删除、移动还是复制元素,jQuery都提供了一套方便快捷的方法。

    2)  控制页面样式

    通过引入jQuery,开发人员可以很快捷的控制页面的CSS文件。

    3)  对页面事件的处理

    引入jQuery后,可以使页面的表现层与功能开发分离,开发者更多的关注于程序的逻辑与功效;页面设计者则侧重于页面的优化与用户的体验。

    通过事件绑定机制,可以很轻松的实现两者的结合。(比如鼠标的点击事件)

    4)  方便使用jQuery插件

    引入jQuery后,可以使用大量的jQuery插件来完善页面的功能和效果,如jQuery UI插件库,Form插件,Validate插件等。使得原来使用javaScript代码实现起来非常困难的功能通过jQuery插件可以轻松的实现。例如:3D幻灯片就是由jQuery的Slicebox插件来实现的。

    5)  与Ajax技术的完美结合

    利用Ajax异步读取服务器数据的方法,极大的方便了程序的开发,增强了页面的交互,提升了用户的体验,引入jQuery后,通过内部对象或函数,加上几行代码就可以实现复杂的功能。

    6)  处理了与浏览器兼容性的问题

    在jQuery库里帮我们写了兼容性的代码。

    5. jQuery的优势

    1)  轻量级。jQuery的体积小,压缩之后,约等于100KB。

    2)  强大的选择器。jQuery支持几乎所有的CSS选择器,以及jQuery有自定义特有的选择器。

    3)  出色的DOM封装。jQuery封装了大量的DOM操作,使的开发者在编写DOM操作相关程序时更加得心用手。

    4)  可靠的事件处理机制。jQuery的事件处理机制吸收了javaScript中事件处理函数的精华,非常的可靠。

    5)  出色的浏览器兼容性。

    6)  隐式迭代。使用jQuery查找相同名称(类名、表签名等)时,会返回一个结果集合,无需用户一一遍历,并且有快捷的查找所匹配的值的方法,简化了编程。

    7)  丰富的插件支持。jQuery的易扩展性,吸引了来自全球的开发者来编写jQuery的扩展插件,目前已有成百上千的官方支持的插件。

    6. jQuery的版本及配置

    1. 获取jQuery的最新版本

    进入jQuery的官方网站(http://jquery.com),在页面右侧的 Download  jQuery区域下载最新的版本。

    1. jQuery类库说明

    jQuery类库一个插件分为两个版本:开发版(完整无压缩)和发布版(GZIP压缩过的版本)。

    版本号为1.开头的jQuery插件才能支持IE6~IE8的兼容性。推荐的版本是:jquery-1.8.3.min.js和jquery-1.12.4.js

    1. jQuery的引用方式
      1. 页面引用(引用本地)
      2. 引用网络存储的,引用地址实用网络存储的绝对地址。

    二.jQuery语法

    1.jQuery的加载

    $(document).ready(function() {

             //执行的代码;

    });

    这种语法等同于javaScript代码:

    Window.onload=function(){

             //执行代码;

    };

    Window.onload于$(document).ready()的对比

    Window.onload

    $(document).ready()

    执行时机

    必须等到页面中的所有元素(图片,Flash,视频等)加载完毕后才能执行

    页面中的所有DOM对象绘制完毕后立刻执行。

    编写的个数

    同一个页面不能编写多个

    就算写入多个,也只会有一个效果

    同一个页面可以编写多个

    编写N个则有N次效果

    简化写法

    没有

    $(document).ready(function() {

             //执行的代码;

    });

    可以简写成

    $(function(){

       //执行代码

    }

    2.jQuery的语法结构

    jQuery语句主要包含三大部分:$()、document和ready();它们在jQuery中分别称为:工厂函数、选择器和方法。

    语法:$(selector).action();

    1.工厂函数$()

    在jQuery中,美元符号“$”等价于jQuery,即S()=jQuery()。

    $()的作用是将DOM对象转换为jQuery对象,只有将DOM对象转换为jQuery对象后,才能使用jQuery的方法。

    2.选择器selector

    语法:$(selector);

    3.方法action()

    jQuery中提供了一系列的方法。在这些方法中,一类重要的方法就是事件处理方法,如许多基础的事件:鼠标事件、键盘事件和表单事件等,都可以通过事件方法进行绑定。

    CSS样式操作的方法:

    1)  为元素添加新的样式

    语法:jQuery 对象.addClass([样式名]);

    注意:样式名不用带“.”类符号,区别于选择器

    2)  设置新的CSS样式属性

         语法:jQuery 对象.css (“属性”,”属性值”);

                    jQuery 对象.css ({“属性1”:”属性1值”,”属性N ”:”属性N的值”});

    3)  显示/隐藏元素

            语法:$(selector).show();     //显示元素

                          $(selector).hide ();     //隐藏元素

    3.jQuery的代码风格

    1.“$”的使用

             在jQuery程序中,使用最多的是“$”,无论是页面元素的选择器,还是功能函数的前缀,都 必须使用该符号。它“$”等同于jQuery。

    1. 链式操作

    对一个对象进行多重操作,而只调用一个对象。

    写法:

    $(“h1”).mouseover(function(){

            //代码1;

    }).mouseout(function(){

            //代码2;

    });

    1. 隐式迭代

    在jQuery中获取一个集合后,会默认遍历内部的所有元素。

    1. 添加注释

    A) 开发阶段:为代码添加注释,增加代码的可读性

    B) 维护阶段:把关键的模块形成开发文档,便于后期的维护

    C) 产品正式发布:建议删除注释,减少文件的大小,加快下载速度,提高用户的体验度。

    三.jQuery对象和DOM对象

    1.DOM对象

    直接使用javaScript获取的节点对象就是DOM对象。

    在javaScript中,使用getElementsByTagName()或getElementById()来获取元素的节点,通过该方式得到的DOM元素都是DOM对象。

    2. jQuery对象

    jQuery对象就是通过jQuery包装后的DOM对象后产生的对象。它能够使用jQuery的方法。

    3. jQuery与DOM对象的相互转换

    jQuery对象无法直接使用DOM对象的任何方法。

    DOM对象也无法直接使用jQuery对象的方法。

    jQuery对象名前缀带有“$”

    1. jQuery对象转换成DOM对象

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

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

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

    2)  通过get(index)方法得到相应的DOM对象

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

    var  text=$text.get[0];             //DOM对象

    2.DOM对象转换jQuery对象

    对于一个DOM对象,只需要使用$()函数将DOM对象包装起来,酒可以获得一个jQuery对象。

    var  text=document.getElementById(“text”);                //DOM对象

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

    本章总结:

    1. 要使用jQuery的功能,需要首先引用jQuery库文件,首先引入jQuery插件文件,再引用自己的.js文件。否则可能无法识别或编译。
    2. 在一个页面中使用了多个库文件,变量冲突:使用jQuery.noConflict()方法解决对变量$的jQuery的控制权,即释放jQuery对$变量的控制权。
    3. 使用next()方法可以获得当前元素的下一个同胞元素。
  • 相关阅读:
    随机生成三十个二年级的加减乘除法的题目代码
    学习进度表_四周
    返回一个整数数组中最大子数组的和1
    学习进度表_三周
    四则运算4
    构建之法读书笔记2
    学习进度表_二周
    四则运算3
    四则运算2
    单元测试
  • 原文地址:https://www.cnblogs.com/SFHa/p/9220355.html
Copyright © 2011-2022 走看看