初识Jquery

最新推荐文章于 2024-05-25 11:49:01 发布

程序猿在线码字

最新推荐文章于 2024-05-25 11:49:01 发布

阅读量990

点赞数 15

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_72565784/article/details/137079926

版权

Jquery简介

JQuery是一款浏览器的开源JavaScript库，他的核心理念是write less，do more。通过对JavaScript代码的封装，是的DOM，事件处理，动画效果，Ajax等功能的实现更加简洁，有效地提高程序开发效率。
Jquery最初由John Resing在2006年1月正式发布，吸引众多来自世界各地的JavaSoript高手的关注，与jQuery相继诞生的JavaScript库还有很多，常见的有Prototype，ExUS、Mootools和 YU等。在众多的JavaScript库中，jQuery为何能够受到众多Web开发人员的青睐呢？这主要归功于jQuery 具有如下优势。

轻量级的文件包:jQuery是一个轻量级的脚本，其代码非常小巧，生产版本的文件包大小仅有94.8KB.
简洁的语法:语法简洁易懂，学习速度快。
全面的文档:jQuery 的文档资料很全面，方便开发者使用。
强大的选择器:支持CSS1-CSS3定义的属性和选择器，与原生JavaScript相比，获取元素的方式更加灵活。
出色的跨浏览器兼容性:jQuery 解决了JavaScript中跨浏览器兼容性的问题，支持的浏览器包括IE6~IE11和Firefox、 Chrome等。
脚本与标签分离:jQuery 中实现JavaScript代码和HTML代码的分离，便于代码的管理和后期的维护。
丰富的插件:jQuery具有很多成熟的插件，如表单验证插件、UI插件等，开发者可以通过插件扩展更多功能。

jQuery 的版本

目前，jQuery 已发布了3个系列的版本，分别为jQuery 1.x、jQuery 2.x和jQuery 3.x,
各系列版本的特点如下所示。

jQuery l.x:兼容IE6/7/8,使用最为广泛，目前官方对其只做Bug维护，不再新增其他功能。对于非特殊要求的项目来说，使用jQuery 1.x系列版本即可。jQuery 1.x 的最新版本为1.12.4(2016年5月20日发布)。
jQuery 2.x:不兼容IE6/7/8,由于不支持低端IE浏览器，目前用户量不多。同样的，官方也对其只做Bug维护，不再新增其他功能。如果不考虑兼容低版本的浏览器，可以使用jQuery 2.x系列版本。jQuery 2.x的最新版本为2.2.4(2016年5月20日发布)。
jQuery 3.x:不兼容IE6/7/8,只支持最新的浏览器。由于很多比较成熟的jQuery 插件还不支持jQuery3.x版本，所以jQuery 3.x系列的版本不常用。目前jQuery 3.x 版本是官方主要更新维护的版本。

在了解jQuery各系列版本之间的差异后，考虑更强的实用性，本书选择以应用较为广泛的jQuery 系列的最新版本为例进行讲解。

如何使用jquery

了解jquery基本概念后，接下来为读者介绍jquery的具体使用方法，即如何下载和引入jquery文件，然后调用jquery文件中提供方法，完成实际业务需要的功能。

jquery的下载和引入

访问jquery官方网站（http://jquery.com) 请添加图片描述

在页面右上方可以看见Dwonload jquery按钮，该按钮上的3.7.1是当前最新版本，单击该按钮后，进入下载页面。

为了获取其他版本的jquery，在下载页面的下半部分找到https://releases.jquery.com链接，获取jquery所有版本的下载链接地址。请添加图片描述
进入jquery所有版本的下载页面，即可看到jquery版本的jquery文件下载链接。
从图中可以看出，jquery文件的类型主要包括未压缩的开发版和压缩后的生产版。
他们的区别在于，压缩版是将jquery文件中的空白字符，注释，空行等与逻辑无关的内容删除，并进行一些优化，使得文件体积减小，加载速度比未压缩板块。

引入jquery
在项目中引入jquery时，只需求把下载好的jquery文件保存到项目目录中，在项目的HTML文件中使用

<!--引入本地下载的jquery-->
<script src="jquery-1.12.4.js"></script>

许多网站提供了静态资源公共库，通过CDN可以提高jquery的下载速度。
代码示例：

<!--引入CDN加速的jquery-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

第一个jquery程序

引入jquery文件后，就可以使用jquery提供的功能。下面开始编写第一个jquery程序，如demo-1.html所示。

<!DOCTYPE html>
<html>
  <head>
     <meta charset="UTF-8">
     <title>第一个jquery程序</title>
     <script src="jquery-1.12.4.js"></script>
   </head>
   <body>
         <button>say hello</button>
         <script>
         $('button').click(function(){
           alert('Hello jquery');
           });
       </script>
     </body>
 </html>

jquery的语法特点

jquery的常用操作包括选择器的使用，元素对象的操作，事件的绑定，链式编程等。接下来介绍jquery的一些常用操作。

选择器的使用

jquery选择器用于获取网页元素对象，然后对其进行操作。示例代码

<div id="myId"></div>
<script>
    $('#myid');    获取id值为myId的元素对象
 </script>

元素对象的操作

jquery中获取的元素对象可以进行一系列的操作。列如，元素的取值，赋值，属性设置等。

<div id="myId">content</div>
<script>
   //获取元素的内容
   var html=$('#myId').html();
   alert(html);
   //设置元素的内容
   $('#myId').html('Hello');   //执行后，网页元素的内容变为Hello
</script>

3.事件的绑定

jquery中事件一般直接绑定在元素上。列如，为指定元素对象绑定单击事件。

<button>say hello</button>
<script>
//为button元素绑定单击(click)事件，参数是事件的处理程序
$('button').click(function(){
   alert('Hello');
   });
</script>

链式编程

jquery中支持多个方法链式调用的形式，让开发者在完成相同功能的情况下，编写最少的代码。

<ul>
  <li>0</li><li>1</li>
  <li>2</li><li>3</li>
 </ul>
 <script>
    //将u1中索引为2的li元素的内容设置为Hello
    $('ul').find('li').eq(2).html('Hello');
</script>

DOM对象与jquery对象

什么是DOM对象

JavaScript中，经常需要操作DOM。所谓DOM指的是文档对象模拟。他提供了对文档结构化的描述，并将HTML页面与脚本，程序语言联系起来。

<html>
  <head>
    <meta charset="UTF-8">
    <title>测试</title>
   </head>
   <body>
     <h1>标题<h1>
     <ul>
       <li>
          <a herf='#'>链接</a>
       <li>
     </ul>
   </body>
 </html>

上述代码中，层层嵌套HTML标签是一个类似树形的DOM文档。其中，最外面的一层< html>标签，< html>标签嵌套着< head>标签和< body>标签。请添加图片描述
所有的元素内容都是一个节点。其中，< html >是所有内容的根节点，< body >是< hl >和< ul>的父节点。 < a> 和< meta>标签下面的分支href 与charset是标签的属性，在DOM中称为属性节点；标签下面的文本是属于该标签内部的文字，在DOM 中称为文本节点。

在了解什么是DOM后，就不再难理解什么是DOM对象。DOM对象就是JavaScript
操作DOM所使用的对象。例如，获取以上HTML代码中li标签的DOM对象，并调用
inmner Text属性获取第一个li标签的文本，如下所示。

//获取li标签对象集合:HTMLCollection(2) [li,li] 
var lis =document.getElementsByTagName('1i'); 
var firstLi=lis [0]; 
var text =firstLi.innerText; 
//获取第1个li标签的DOM对象
//获取第1个li标签的文本内容

什么是jquery对象

在前面演示过的jQuery代码中，“ $ （）”是一个工厂函数，通过“$(参数)”的形式可以创建jQuery 的实例对象，即jQuery 对象。创建jQuery对象后，就可以调用一些jQuery 提供的方法来完成具体操作。示例代码如下。

<div>Hello jQuery</div>
<script>
  //创建div元素对象，保存obj
  var obj=$('div');
  //判断obj是否为jQuery对象
  alter(obj instanceof jQuery);
  //调用html（）方法获取元素内容
  alter(obj.html());
</script>

上述代码中，首先利用 $ () 将div标签转为jQuery 对象，然后利用该对象调用jQuery 中提供的html0方法获取元素内容。
另外，当创建的对象只需要使用一次时，可以简写为“ $ (div).html10”的形式，即通过一行代码完成创建对象与调用方法的操作。
值得一提的是，在引人jQuery后，除了可以使用“ $ “,还可以使用“jQuery”来进行操作，两者本质上是同一个对象，即“$(参数)”等价于"jQuery(参数)”。若在项目中 “ $ ”被用于其他的功能。

jQuery的静态方法

在使用jQuery时，不仅可以通过jQuery对象调用实例方法，还可以直接通过“$. 方法名（）"的形式调用静态方法。jQuery 的静态方法是jQuery提供的便捷功能，用于完一些与具体DOM对象无关的操作。合理利用这些静态方法可以为代码编写提供许多便
下面通过代码演示jQuery静态方法的使用，示例代码如下。

<script> 
var str='test'; 
//调用静态方法trim()过滤字符串两端的空白字符
var result ='['+$.trim(str)+']'; 
alert(result);
 </script>

从上述代码可以看出，使用静态方法“$.trim()”可以轻松过滤字符串两端的空白字关于jQuery 的其他静态方法将在后面的章节详细介绍。

jQuery对象与DOM对象的转换

在网页开发中，jQuery对象只能调用jQuery 中的属性或方法，DOM对象也只能调用DOM中的属性或方法。示例代码如下。

//jQuery对象不存在innerHTML属性，访问结果为undefined 
$(' div').innerHTML; 
//DOM对象不存在html ()方法，调用不存在的方法会出错
document.getElementById('myId').html ();

为了解决上述问题，DOM对象与jQuery对象之间在使用时经常需要转换。下面对jQuery对象与DOM对象的互相转换进行详细讲解。

jQuery对象转换成DOM对象

jQuery对象属于类数组对象，其内部将DOM对象作为数组元素。jQuery对象转换成DOM对象有两种方式，分别为"obj[index]“和"obj.get(index)”。其中 index表示DOM对象在jQuery对象中的索引。下面分别讲解这两种转换方式。

(1)obj[index]
通过obj[index]方式将jQuery对象转换成DOM对象，示例代码如下。

<div>第1个div</div> 
<div>第2个div</div> 
<script> 
//获取jQuery对象
var divs =$('div'); 
/通过索引的方式，将jQuery对象转换成DoM对象
vardivl=divs [0]: 
var div2=divs[1]: 
//输出div元素的内容
alert(div1.innerHTML);     //输出结果:第1个div 
alert(div2.innerHTML);     //输出结果:第2个div 
</script>

从上述代码可以看出，一个jQuery对象中可以包含多个DOM元素，通过索引即可
取出某个具体的DOM对象。

(2)obj.get(index)
通过obj.get(index)方式将jQuery对象转换成DOM对象，示例代码如下。
端的空白字符。

<div>第1个div元素</div> 
<script> 
var result=$('div').get (0).innerHTML; 
alert(result);                           //输出结果:第1个div元素
</script>

2.DOM对象转换为JQuery对象
将DOM对象作为$（）函数的参数，即可转换成jQuery 对象，示例代码如下。
<

button id="btn">say hello</button> 
<script> 
//获取DOM对象btn 
var btn=document.getElementById('btn'); //将DOM对象转换成jQuery对象
var btnl=$(btn); 
//验证转换结果
alert (btn===btn1[O]);       //输出结果:true 
</script>