设为首页收藏本站

IT技术擎 - 最棒的IT web技术交流社区

 找回密码
 注册为IT技术擎人

QQ登录

只需一步,快速开始

搜索
热搜: php h5 jquery
查看: 49|回复: 0

[jquery] 使用jQuery快速高效制作网页交互特效——05 第五章 05 初识 jQuery

[复制链接]
发表于 2018-8-10 21:45:25 | 显示全部楼层 |阅读模式

1、jQuery简介:

jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装
它的设计思想是write less,do more(以更少的代码,实现更多的功能);



jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装。
jQuery是继Prototype之后又一个优秀的javaScript库,是由美国人 Johh  Resig于2006年创建的开源项目。

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


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

jQuery与其他javascript库:
按照使用占比,几大javaScript库占比如下:

  • jQuery
    (62%)

  • Bootstrap  (22%)
  • Zepto
      (6%)

  • Ext  (5%)
  • YUI  (5%)

比例图:


2、 jQuery的用途:

1)访问和操作DOM元素:使用jQuery可以很方便的获取和修改页面中的制定元素,无论是删除、移动还是复制元素,jQuery都提供了一套方便快捷的方法。
2)控制页面样式:通过引入jQuery,开发人员可以很快捷的控制页面的CSS文件。
3)对页面事件的处理:引入jQuery后,可以使页面的表现层与功能开发分离,开发者更多的关注于程序的逻辑与功效;页面设计者则侧重于页面的优化与用户的体验。通过事件绑定机制,可以很轻松的实现两者的结合。(比如鼠标的点击事件)
4)方便使用jQuery插件:引入jQuery后,可以使用大量的jQuery插件来完善页面的功能和效果,如jQuery UI插件库,Form插件,Validate插件等。使得原来使用javaScript代码实现起来非常困难的功能通过jQuery插件可以轻松的实现。
  
Eg
:3D幻灯片就是由jQuery的Slicebox插件来实现的。
5)与Ajax技术的完美结合:利用Ajax异步读取服务器数据的方法,极大的方便了程序的开发,增强了页面的交互,提升了用户的体验,引入jQuery后,通过内部对象或函数,加上几行代码就可以实现复杂的功能。
6)处理了与浏览器兼容性的问题:在jQuery库里帮我们写了兼容性的代码。

●jQuery能做的JavaScript也都能做,但使用jQuery能大幅提高开发效率;

3、 jQuery的优势

1)轻量级。jQuery的体积小,压缩之后,约等于100KB。
2)强大的选择器。jQuery支持几乎所有的CSS选择器,以及jQuery有自定义特有的选择器。
3)出色的DOM封装。jQuery封装了大量的DOM操作,使的开发者在编写DOM操作相关程序时更加得心用手。
4)可靠的事件处理机制。jQuery的事件处理机制吸收了javaScript中事件处理函数的精华,非常的可靠。
5)出色的浏览器兼容性。
6)隐式迭代。使用jQuery查找相同名称(类名、表签名等)时,会返回一个结果集合,无需用户一一遍历,并且有快捷的查找所匹配的值的方法,简化了编程。
7)丰富的插件支持。jQuery的易扩展性,吸引了来自全球的开发者来编写jQuery的扩展插件,目前已有成百上千的官方支持的插件。

4、jQuery的版本及配置

获取jQuery的最新版本:进入jQuery的官方网站(http://jquery.com),在页面右侧的 Download  jQuery区域下载最新的版本。
jQuery类库说明:jQuery类库一个插件分为两个版本:开发版(完整无压缩)和发布版(GZIP压缩过的版本)。

版本号为1.开头的jQuery插件才能支持IE6~IE8的兼容性。


推荐的版本是:jquery-1.8.3.min.js和jquery-1.12.4.js


名称

大小


  明


jquery-1.版本号.js(开发版)

约286KB

完整无压缩版本,主要用于测试、学习和开发

jquery-1.版本号.min.js(发布版)

约94.8KB

经过工具压缩或经过服务器开启Gzip压缩,主要应用于发布的产品和项目


jQuery的引用方式:
  1. 页面引用(引用本地): <script src="js/jquery-1.12.4.js" type="text/javascript" ></script >
  2. 引用网络存储的,引用地址实用网络存储的绝对地址。
  注:1.  要使用jQuery的功能,需要首先引用jQuery库文件,首先引入jQuery插件文件,再引用自己的.js文件。否则可能无法识别或编译。
    注:在一个页面中使用了多个库文件,变量冲突:
      1、使用jQuery.noConflict()方法解决对变量$的jQuery的控制权,即释放jQuery对$变量的控制权。
      2.如果页面仅使用jQuery的一个库文件,则不需要noConflict()方法;

5、jQuery语法

jQuery的加载:
  $(document).ready(function() {

    //
执行的代码;
  })

  这种语法等同于javaScript代码:

  Window.onload=function(){
    //执行代码;
  }


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



Window.onload

$(document).ready()

执行时机

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

网页中所有DOM文档结构绘制完毕后即刻执行,可能与DOM元素关联的内容(图片、flash、视频等)并没有加载完;

编写的个数

同一个页面不能编写多个
就算写入多个,也只会有一个效果

同一个页面可以编写多个
编写N个则有N次效果

简化写法

没有

$(document).ready(function() {
  //执行的代码;
})
可以简写成
$(function(){
  //执行代码
}


●2.jQuery的语法结构:
  jQuery语句主要包含三大部分:$()、document和ready();它们在jQuery中分别称为:工厂函数、选择器和方法。
    语法:$(selector).action();
       ★工厂函数$():在jQuery中,美元符号"$”等价于jQuery,即S()=jQuery()。
        $()的作用是将DOM对象转换为jQuery对象,只有将DOM对象转换为jQuery对象后,才能使用jQuery的方法。
        注:当$()的参数是DOM对象时,该对象无须使用双引号包裹起来,如果获得的是document对象,则写作$(document);
★选择器selector: 语法:$(selector);
★方法action():jQuery中提供了一系列的方法。在这些方法中,一类重要的方法就是事件处理方法,
    Eg:如许多基础的事件:鼠标事件、键盘事件和表单事件等,都可以通过事件方法进行绑定。

●CSS样式操作的方法:
  1)为元素添加新的样式
      语法:jQuery 对象.addClass([样式名]);
    注:样式名不用带".”类符号,区别于选择器
  2)设置新的CSS样式属性

    
语法:jQuery 对象.css ("属性”,”属性值”);
//设置一个css样式

        jQuery 对象.css ({"属性1”:”属性1值”,”属性N ”:”属性N的值”});
//设置多个css样式

  3)显示/隐藏元素

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

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

●CSS与addClass的区别:
★css()方法为所匹配的元素设置给定的样式;
★addClass()方法向所匹配的元素添加一个或多个类,该方法不会删除已存在的类,尽在原有的基础上追加新的类样式;
★基于结构与样式分离的原则,通常在实际应用中,为某元素添加样式,使用addClass()方法比css()方法的频率高很多,因此建议使用addClass()添加样式;

6、jQuery代码风格:

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

   Eg
$(document).ready()=jQuery(document).ready()
      $(function(){...})=jQuery (function(){...})
  


链式操作:对一个对象进行多重操作,只调用一个对象,并将操作结果返回给该对象
  
  
注:使用next()方法可以获得当前元素的下一个同胞元素。

Eg1: 鼠标移入和移除事件代码结构:
  $("h1”).mouseover(function(){

      //
代码1;
  }).mouseout(function(){
  
  //
代码2;
  })

Eg2:将标题颜色变成浅蓝色,并且单击标题显示下方的元素;
  $("h2").css("background-color","#ccffff").next().css("display","block");

●1隐式迭代:在jQuery中获取一个集合后,会默认遍历内部的所有元素。

   Eg
:下面的代码会将所有的li变成红色:
      $(document).ready(function() {
        $("li").css({"font-weight":"bold","color":"red"});
    });

●添加注释

阶段

说明

开发阶段

为代码添加注释,可以增加代码的可读性,能够让别人很容易的读懂你的代码,便于后期维护

维护阶段

建议把关键的模块形成开发文档,便于后期维护,即便后期删除代码注释,也不影响后期维护

产品正式发布

建议删除注释,减少文件大小,加快下载速度,提高用户体验


7、jQuery对象和DOM对象:

●DOM模型:浏览器把HTML文档的元素转换成节点对象,所有节点组成了一个树状结构;



●DOM对象:直接使用javaScript获取的节点对象就是DOM对象。
  在javaScript中,使用getElementsByTagName()或getElementById()来获取元素的节点,通过该方式得到的DOM元素都是DOM对象。
     Eg:var objDOM=document.getElementById("title");
      
var objHTML=objDOM.innerHTML;


●jQuery对象:使用jQuery包装DOM对象后产生的对象,它能够使用jQuery中的方法;

  Eg
: $("#title").html( );
      等同于
      document.getElementById("title").innerHTML;

注:DOM对象和jQuery对象分别拥有一套独立的方法,不能混用;

jQuery对象无法直接使用DOM对象的任何方法。
DOM对象也无法直接使用jQuery对象的方法。
jQuery对象名前缀带有"$”
    ●DOM对象转jQuery对象:对于一个DOM对象,只需要使用$()函数将DOM对象包装起来,就可以获得一个jQuery对象。
          使用$()函数进行转化:$(DOM对象)
            Eg: var  text=document.getElementById("text”);
  //DOM对象

               var  $text=$(text);
  
  //jQuery
对象
              注:jQuery对象命名一般约定以$开头,在事件中经常使用$(this),this是触发该事件的对象

●jQuery对象转换成DOM对象:
    ★jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象
        Eg:var  $text=$("text”); //jQuery对象
           var  text=$text[0];  //DOM对象
     ★通过get(index)方法得到相应的DOM对象
        Eg:var  $text=$("text”); //jQuery对象
           var  text=$text.get[0];
  //DOM
对象



上一篇:省市县级联
下一篇:Oracle 存储过程 PROCEDURE
该用户未在地球留下任何的痕迹

本版积分规则

QQ|小黑屋|帮助|IT技术擎 ( 沪ICP备15054863号  

GMT+8, 2018-10-18 11:28

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表