欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。由于本站位于香港虚拟主机,故速度比较慢。

教程  jQuery教程——基础入门和示例

JQuery 本站 203 0评论

一、jQuery是什么?


jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

官网:http://jquery.com 

jQuery API 中文文档:https://www.jquery123.com/ 

jQuery API 在线手册:http://jquery.cuishifeng.cn/ 

timg.jpg


jQuery是全球最流行用得最多的JavaScript库,没有之一。jQuery是在世界前10000个访问最多的网站中,有超过55%在使用jQuery。


jQuery具有以下优点:

(1)代码简洁

(2)完美兼容

(3)强大的选择器

(4)轻量级

(5)完善的Ajax

(6)丰富的插件

......


jQuery 库包含以下特性:

· HTML 元素选取

· HTML 元素操作

· CSS 操作

· HTML 事件函数

· JavaScript 特效和动画

· HTML DOM 遍历和修改

· AJAX

· Utilities


二、为什么使用jQuery


jQuery 最有特色的语法特点就是与CSS 语法相似的选择器,并且它支持CSS1 到CSS3 的几乎所有选择器,并兼容所有主流浏览器,这为快速访问DOM 提供了方便。


1)能够快速获取文档元素

jQuery的选择机制构建于Css的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了JavaScript中获取页面元素的方式。


2)提供漂亮的页面动态效果

jQuery中内置了一系列的动画效果,可以开发出非常漂亮的网页,许多网站都使用jQuery的内置的效果,比如淡入淡出、元素移除等动态特效。


3)创建AJAX无刷新网页

AJAX是异步的JavaScript和XML的简称,可以开发出非常灵敏无刷新的网页,特别是开发服务器端网页时,比如PHP网站,需要往返地与服务器通信,如果不使用AJAX,每次数据更新不得不重新刷新网页,而使用AJAX特效后,可以对页面进行局部刷新,提供动态的效果。


4)提供对JavaScript语言的增强

jQuery提供了对基本JavaScript结构的增强,比如元素迭代和数组处理等操作。


5)增强的事件处理

jQuery提供了各种页面事件,它可以避免程序员在HTML中添加太多事件处理代码,最重要的是,它的事件处理器消除了各种浏览器兼容性问题。


6)更改网页内容

jQuery可以修改网页中的内容,比如更改网页的文本、插入或者翻转网页图像,jQuery简化了原本使用JavaScript代码需要处理的方式。


其他JavaScript库

目前除了jQuery,还有5个较为流行的库,分别是 YUI、Prototype、Mootools、Dojo和 ExtJS。

①YUI,是雅虎公司开发的一套完备的、扩展性良好的富交互网页工具集。

②Prototype,是最早成型的 JavaScript 库之一,对 JavaScript 内置对象做了大量的扩展。

③Dojo,Dojo强大之处在于提供了其他库没有的功能。离线存储、图标组件等等。

④Mootools,轻量、简洁、模块化和面向对象的 JavaScript 框架。

⑤ExtJS,简称 Ext,原本是对 YUI 的一个扩展,主要创建前端用户界面。(付费的)


在学习jQuery之前,你必须要有HTML、CSS和JavaScript的基础。这是因为jQuery是基于JavaScript的,因此它的语法跟JavaScript语法相似或者相同。

对于jQuery方面的学习,我按照不同学习层度的人分为“jQuery入门”、“jQuery进阶”、“jQuery UI”、“jQuery插件”、“jQuery mobile”这5个教程来讲解,以便让大家更加全面地掌握jQuery。


三、下载和安装


1.下载 jQuery

共有两个版本的 jQuery 可供下载:一份是精简过的(发布版jquery.min.js);另一份是未压缩的(开发版jquery.js)(供调试或阅读)。

20190705122417.jpg这两个版本都可从 http://jquery.com/download/   下载。


2.安装 jQuery

如需使用 jQuery,您需要下载 jQuery 库,然后把它包含在希望使用的网页中。

jQuery库其实就是一个js文件来的,安装jQuery很简单,只要把jQuery库文件在HTML页面中引用即可使用,跟我们引用外部js文件是一样的道理。大家记住,不要随便动这个文件里面的源代码哈。

语法:

<!--jQuery库-->

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>

<script  type="text/javascript">

    //这里编写你的jQuery代码

</script>

说明:

我们必须先把jQuery库文件引入,才能够使用jQuery。也就是说你写的jQuery代码必须在jQuery库文件下面才能生效。像下面这种方式就是错误的,初学者很容易犯这种低级错误,大家好好好注意一下。

<script  type="text/javascript">

    //你的jQuery代码

</script>

<!—jQuery库-->

<script type="text/javascript" src="jquery-1.12.0.min.js"></script>


3.jQuery CDN

如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。

谷歌和微软的服务器都存有 jQuery 。

如需从谷歌或微软引用 jQuery,请使用以下代码之一:


Google CDN:

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">

</script>

</head>

Microsoft CDN:

<head>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">

</script>

</head>


提示:使用谷歌或微软的 jQuery,有一个很大的优势:

许多用户在访问其他站点时,已经从谷歌或微软加载过 jQuery。所有结果是,当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。


更多版本的CDN:https://code.jquery.com/ 


三、语法示例


1.jQuery 语法


jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。


基础语法是$(selector).action()

· 美元符号定义 jQuery

· 选择符(selector)“查询”和“查找” HTML 元素

· jQuery 的 action() 执行对元素的操作


示例

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素


下面的例子演示了 jQuery 的 hide() 函数,隐藏了 HTML 文档中所有的 <p> 元素。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

在线演示:http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_p 


2.文档就绪函数


您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

$(document).ready(function(){


--- jQuery functions go here ----


});

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数,操作可能失败。


jQuery 入口函数:

$(document).ready(function(){

    // 执行代码

});

或者

$(function(){

    // 执行代码

});


JavaScript 入口函数:

window.onload = function () {

    // 执行代码

}


jQuery 入口函数与 JavaScript 入口函数的区别:

 jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。

JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。

20171231003829544.jpeg

3.jQuery对象和DOM对象的区别

1、DOM对象(Document Object Model)文档对象模型

通过getElementsByTagName、getElementsById、getElementsByClassName方法得到的对象就是DOM对象


2、jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

jQuery对象是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jQuery里的方法。例如:

$("#foo").html();这段代码等同于:document.getElementsById("foo").innerHTML();

注:

1)在jQuery对象中无法使用DOM对象的任何方法。

2)DOM对象无法使用jQuery对象中的任何方法。


3、DOM对象和jQuery对象相互转化

Var $variable = jQuery对象;(定义变量时前面加上$符号的就是jQuery对象)

Var variable = jQuery对象;


两种方法将一个jQuery对象转换成DOM对象,即[index]和get(index)。

eg:

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

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

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


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

var cr = document.getElementsById("cr"); //DOM对象

var $cr = $(cr); // $(DOM对象)得到一个jQuery对象

转换后可以任意使用jQuery对象中的方法。


实例:jQuery判断是否选中复选框

<input type="checkbox" id="cr" />
<label>我已经阅读了用户协议</label>

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

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

$cr.click (function(){

/* if(cr.checked){ //错误写法:cr.checked()

alert("DOM方式判断:复选框已选中!");

}*/

if($cr.is(":checked")){//返回值是boolean值

alert("jQuery方式判断:复选框已选中!");

}

});


4.jQuery代码风格:链式操作风格


1) 对于同一个对象不超过三个操作的,可直接写成一行。代码如下:

$(“li”).show().unbind(“click”);


2) 对于同一个对象的较多操作,建议每行写一个操作。代码如下:

$(this).removeClass(“mouseout”) 
.addClass(“mouseover”) 
.stop() 
.fadeTo(“fast”,0.6) 
.fadeTo(“fast”,1) 
.unbind(“click”) 
.click(function(){ 
//do something  
} );


3) 对于多个对象的少量操作,可以每个对象写一行,如果涉及子元素可以适当的考虑缩紧。代码如下:

$(this).addClass(“highlight”) 
.children(“li”).show().end() 
.siblings().removeClass(“highlight”) 
.children(“li”).hidden();


5.解决jQuery和其他库的冲突方法


在jQuery库中,几乎所有的插件都被限制在它的命名空间里。通常,全局对象都被很好地储存在jQuery的命名空间里,所以当把jQuery库和其他js库(Prototype,MooTools或YUI)一起使用时,不会引起冲突。

注意:默认情况下jQuery用“$”作为自身的快捷方式。

当我们使用的其他JavaScript库也是以"$"作为快捷方式时,这个时候如何解决jQuery和其他库的冲突呢?

 

1、jQuery库在其他库之后导入

1)使用"jQuery"全名代替"$"

在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数将变量$的控制权移交给其他JavaScript库。

例:

  //...省略其他代码

  <p id="pp">Text-prototype(将被隐藏)</p>

  <p>Text-jQuery(将被绑定单击事件)</p>

  <!-- 引入prototype -->

  <script src="lib/prototype.js" type="text/javascript"></script>

  <!-- 引入jQuery -->

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

  <script>

  jQuery.noConflict();                 //将变量$的控制权让渡给prototype.js

  jQuery(function(){                   //使用jQuery

  jQuery("p").click(function(){

  alert( jQuery(this).text() );

  })

  })

  $("pp").style.display = 'none';          //使用prototype隐藏元素

  </script>


然后就可以在程序里将jQuery()函数作为jQuery对象的制造工厂。


2)自定义快捷方式

可以自定义备用名称,例如jq,$j等等。示例:

  var $j = jQuery.noConflict();        //自定义一个快捷方式

  $j(function(){                       //使用jQuery,利用自定义快捷方式——$j

  $j("p").click(function(){

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

  })

  })

  $("pp").style.display = 'none';      //使用prototype.js隐藏元素


3)使用$而不与其他库冲突

如果不想给jQuery自定义这些备用名称,还想使用$而不管其他库的$()方法,同时又不想与其他库冲突,可以使用以下两种解决方法。

其一:

  jQuery.noConflict();                 //将变量$的控制权让渡给prototype.js

  jQuery(function($){                  //使用jQuery设定页面加载时执行的函数

  $("p").click(function(){         //在函数内部继续使用 $()方法

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

  })

  })

  $("pp").style.display = 'none';      //使用prototype

其二:

  jQuery.noConflict();                      //将变量$的控制权让渡给prototype.js

  (function($){                             //定义匿名函数并设置形参为$

  $(function(){                         //匿名函数内部的$均为jQuery

  $("p").click(function(){          //继续使用 $ 方法

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

  });

  });

  })(jQuery);                               //执行匿名函数且传递实参jQuery

  $("pp").style.display = 'none';   //使用prototype

这是一种最理想的方式,可以通过改变最少的代码来实现全面的兼容性。

 

2、jQuery库在其他库之前导入


如果jQuery库在其他库之前导入,那么$()的控制权默认归属于后面导入的JavaScript库。可以直接使用“jQuery”来做一些工作。同时,可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。示例:

<!-- 先导入jQuery  -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!-- 后导入prototype  -->
<script src="lib/prototype.js" type="text/javascript"></script>
  
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>
  
<script>
  jQuery(function(){                   //直接使用 jQuery ,无需调用"jQuery.noConflict()"函数
  jQuery("p").click(function(){ 
  alert( jQuery(this).text() );

  });
});
$("pp").style.display = 'none';        //使用prototype
</script>


参考网址:

http://www.w3school.com.cn/jquery/index.asp

https://www.cnblogs.com/Ellen-study/p/7242245.html 

《锋利的jQuery第二版》:https://pan.baidu.com/s/1zf4taR4t2DThYTTtE_AyjQ    提取码:mp3y  


转载请注明: ITTXX.CN--分享互联网 » jQuery教程——基础入门和示例

最后更新:2019-07-05 14:52:02

赞 (3) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽