jqeuery入门

发表时间:2017-05-12 16:14:41 浏览量( 22 ) 留言数( 0 )

学习目标:

1、了解Java的历史

2、为什么要学习Java语言

3、端正学习态度


学习过程:

一、jquery简介

javascript虽然容易,不过还是比较繁琐的,而且还要考虑浏览器的兼容性问题,所以要写出好的javascript代码一点都不简单。随着ajax的流行,目前有很多公司对javascript进行了封装,使得javascript更加容易使用,比较流行有

1. jQuery – Javascript框架

2. Dojo Javascript框架

3. Sencha Ext JS4 Javascript框架

4. Prototype javascript框架

5. Uize Javascript框架

其中jquery因为简单易容,而且体积小,不占资源等优势,越来越流行起来了。它是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。如今,jQuery已经成为最流行的javascript框架,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。

jQuery的特点是免费、开源的,使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器,所以我们现在学习还是先以1.X的版本来学习。

jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

官网下载:http://jquery.com/

w3c的jquery学习网:http://www.w3school.com.cn/jquery/

二、jquery的使用

1、页面加载函数

要使用jquery很简单,先把jquery下载,然后复制到项目中,使用引用的方式,在html页面中引用即可。

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

需要注意的是javascript从上往下运行的,所有jquery的引入最好放在最前面。

前面讲过jQuery能够使用户的html页面保持代码和html内容分离,那么如何分离呢?一般我们会在页面加载时候,为所有的的html标签绑定事件,这个和以前在html标签中使用属性绑定js函数思维不同,一般我们会实现一个页面加载的函数,然后在这个函数里面绑定事件。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。

简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。  示例代码如下:

<script type="text/javascript">
   //页面加载函数
   $(document).ready(function() {
     //..可以在这里写代码了。
   });
</script>

绑定事件的格式一般如下:

$(jquery 选择器).事件(触发的函数)

jquery的选择器和css 的选择器差不多,参考代码如下:

<script type="text/javascript" src="js/jquery-1.6.4.js">
</script>
<script type="text/javascript">
   $(document).ready(function() {
       //jquery 选择器   css选择器
       //$(jquery 选择器).事件(触发的函数)
       //id选择器,
       $("#first").click(function() {
       alert("你好");
       });
          //元素选择器,所有的span都会绑定这个单击事件  
       $("span").click(function(){
         alert("你好");
       });
       //类选择器
       $(".abc").click(function(){
         alert("你好");
       });
       //abc类下面的所有span都会绑定
       $(".abc span").click(function(){
         alert("你好");
       });
   });
</script>