JQuery学习第一天

之前有学过JQuery的皮毛，在公司项目的实际应用中，总感觉很多内容不熟悉，还有很多不足，所以在此将JQuery学习一遍。以后每天都会记录自己学习总结的知识点。

我用的书本是《jquery基础教程（第4版）》，整本书主要分为13章。个人看过了目录以及之前一些理解，感觉jquery的核心是用最少的代码实现，更多的功能。其主要作用是

1.对页面中一些元素进行精确的定位

2.执行一系列事件，完成与用户的交互操作。

3.实现一系列的动画效果，同时也可以自定义动画效果

4.使ajax的实现更加便捷。

5.开发以及使用相关插件实现更多功能。

可能理解比较肤浅，等学完之后在细细品味。

今天主要学习了本书的第一章节，总结如下：

一、JQuery的作用

      1.可以取得文档中的元素。

      2.修改页面的外观。虽然CSS提供了修改页面外观的方式已经够强大了，但当所有浏览器不完全支持相同的标准时，使用CSS力不从心。JQuery通过一系列方法，很好的解           决了这一个问题。

         例：$("div").addClass('active'); 此是调用了Jquery 中方法，对指定的元素进行添加相应的类，以达到在页面中显示不同的效果。

      3.改变文档的内容。Jquery可以通过text、html等方法，改变元素内部的内容以及添加相应的html元素，此两种方法类似于JavaScript的innerText 和 innerHTML

      4.响应用户的操作。这一点毋庸置疑的是，Jquery通过一系列的事件，比如说点击、鼠标移动等事件实现与用户的操作。

      5.为页面添加动态效果。这点是主要指为页面添加一系列动态效果，比如说淡入、淡出效果。

      6.无需刷新页面从服务器中获取信息。这是Jquery中最重要的部分，通过几个简单的方法，就可以实现ajax的相关操作，不再向JavaScript那样，还需要XmlHttp，并且还得            考虑浏览器兼容的问题。

      7.简化常见的JavaScript任务。比如说循环，在JavaScript中需要for循环，而在Jquery中只需要调用each方法即可，真正的实现了用更少的代码实现更多的功能。

二、下载Jquery以及版本问题

         发展历史什么的我感觉这边没必要说了。JQuery下载地址：http://jquery.com/download/

         本次学习主要采用的是JQuery版本是1.10.3，当然这本书上面的一系列的代码都可以在Jquery 2.0下面运行。

三、我的第一个JQuery代码

      吐槽下， 这里讲的万幸不是Hello World了。首先要明确整个HTML的整体是有：HTML文档、CSS文件、JavaScript脚本组成。

      例子：

               、

          主要有以上三个部分组成。

          注意点：

                        1.引入CSS文件需要在Head头部中引入

                        2.在写入其他的JQuery文件代码之前的时候，需要引入相应下载的JQuery包，而且此包必须在   写入的JQuery代码之前引入，否则会变成找不到相应的方法等一系列未知的错误。

           下面解释下第三部分，也就是所写的第一个JQuery代码的组成结构。

           

            第一部分：首先写入$(document).ready(function(){})此方法，为什么要写入此方法呢？ 通常，JavaScript代码在浏览器初次遇到它们的时候就会执行，如果不加入此方法                                 的话，相应内部的元素会执行不到。加入此方法意思为整个document文档加载完毕之后，调用ready方法，明确告诉文档，此HTML页面已经加载完毕了，然后在去加载里面的方法，则方法内部的相应的寻找元素则可以寻找到，否则会出现找不到对象的问题。

           第二部分：主要是通过JQuery以及CSS进行相应的元素的选择。此例子中，是通过ID选择器进行选择，将Input定义一个ID属性，并且赋值进行选取，之后第二章会对选择符进行深入的探讨。

           第三部分：事件的执行部分，通过第二部调用JQuery文档中指明的点击事件，进行与用户的交互式操作。当用户点击此按钮的时候会触发相应的function里面的操作。alert意为JavaScript中弹框操作，表明当用户点击此按钮的时候，会弹出一个对话框，显示为a。

           如果不太熟悉，则先把代码打一遍，之后慢慢理解就好呢。

四、使用的开发工具

        书中介绍的开发工具很多，在此只介绍书中提到的Chrome开发工具。

         打开Chrome浏览器，按下F12按钮，

         

        Elements可以显示整个页面的HTML代码，点击其中一段代码，则会在页面中定位到相应代码显示的区域。

        Sources部分显示的页面中加载的所有脚本，右键单击行号可以设置普通断点、条件断点。

        Console部分是指控制台，如果程序或者脚本中有什么错误，会直接反映到此地方，并且以红色的颜色显示。同时也可以在此地方写入相应的JavaScript代码，进行相应的测试。此外如果想向控制台输出内容，则在相应的JavaScript的代码中加入console.log（“内容”）即可显示。用console.log()方法代替alert方法绝对是非常有用的。

  五、总结

         今天所学的根据自己的话以及书本上的相关的话语进行了总结，如果那些知识点不正确的地方，希望各位大神批评指正。

         个人认为多多去看看JQuery的帮助文档比较有用，文档地址：http://tool.oschina.net/apidocs/apidoc?api=jquery