之前有学过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