暑假快速学习JQuery的学习笔记_H5之家 - 中国HTML5教程资源分享第一站

刚刚学习完JS，然后就该JQurey，w3school上对JQ的描述是这样的：JQ是一个JS库，JQ极大地简化了JS编程，JQ很容易学习（滑稽）。我相信w3school不会骗我的。刚刚学习完html,css,js的我马上就趁热打铁地学习JQ了。马上就要开始快乐的JQ之旅了，嘎嘎嘎。

首先就是JQ可以做什么（往往在学习的时候会忘记自己的初衷，即我们学习这个我们要得到什么，我们应该要掌握什么。）。首先JQ可以对HTML元素进行选取和操作，可以对CSS进行操作，可以对HTML进行操作，可以使用JS的特效和动画，可以对HTML DOM进行遍历和修改，AJAX，Utilities。确实，JQ可以对html,css,js进行操作，所以在学JQ的时候相当于是对之前学习的一次融合。

当然在进行JQ之前我们要有JQ库。这个可以直接到JQ的官网上下载。下载在一个专门做网页的文件夹内，这样可以方便一些。在下载完JQ之后（JQ实际上是一个.js文件）所以在使用之前，应该用Html的标签引用它。一般讲<script src="JQ的url"></script>放在<head>元素中。

既然w3school上的介绍是用最少的代码实现最多的功能，那么他是怎么实现的呢？在知道之前先学习JQ的基本语法。$(selector).action()。其中$是定义JQ的符号，selector是查询和查找html元素，而action()是执行对元素的操作。（有一点要说明的是selector中可以有this，代表当前元素，有点像c里的this指针。剩下的像类啊，id啊和之前的都是一样的。）。在JQ的代码里面一般都会有文档就绪函数（$(document).ready(function(){}):))）是为了防止在文档完全加载之前运行JQ代码。但是在这里有一点的就是括号匹配的问题。因为是使用txt进行编程，没有cb的提示，在括号匹配上就会很糟心。

在CSS里就已经介绍了选择器。JQ里面的选择器和css里面的差的不太多。在括号里实现被选择的。$("p")表示选取<p>元素。（元素选择器），$("[href]")表示选取带有href属性的元素。（属性选择器），$("p").css("")（CSS选择器）。在CSS选择器中，可以设置多个属性（一般的格式为，{属性：值，属性：值..}大括号不要忘记。）。

JQ的事件函数。JQ的事件处理方法是JQ中的核心$函数。一般事件处理程序是指当HTML中发生某些事件所调用的方法。通常JQ的代码都是被放到<head>中的。

$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); 上面的代码就可以展示JQ对事件的处理。$("button").click(function(){})是表示当点击按钮元素的时候下面执行的函数功能。而JS的按钮处理一般是要<button type="button" onClick="function()">Click me</button>当然了，JQ上边只是选择的button元素，button元素你还是要写的。当然了JQ的事件函数有很多，比如double click()是双击的函数，mouseover()是鼠标悬停事件，等等真正用的时候就去查手册。

下面就是一些JQ的动画和特效了。①隐藏(hide())和显示(show())在括号里面可以加入时间参数，以毫秒为单位。括号里还可以加入callback函数，就是在隐藏或者显示完了之后所执行的函数功能。toggle()是切换功能，这个在下面的功能里都会体现。这个函数可以实现在hide()和show()之间的切换。②淡入(fadeIn())和淡出(fadeOut())和①一样，括号里面可以加入速度参数和callback。当然fadeToggle表示在淡入和淡出之间进行切换。当然也可以使用fadeTo()表示允许渐变成给定的不透明度。括号内的参数为速度，透明度，和callback。③上下滑动(slideDown()和slideUp())和①一样，速度和callback。sideToggle表示转化。有一点需要注意的是在写div的时候要写两个状态的。一个表示滑动前，一个表示滑动后。④自定义(animate({paras},speed,callback))其中params定义形成动画的css，剩下的参数和之前一样。在大括号内加的一些参数需要写成属性： '值'的形式。一般而言animate可以几乎操作所有的css属性，但是要注意书写正确的属性名，即大小写一定不能出错。还有一点值得一提的是+=或-=在animate中可以连续的属性发生变化，当然了也可以使用一些预定的值比如'toggle'，这个值就表示可以在显示和隐藏中切换。如果你想写许多动画，即写了许多animate，那么animate是有队列的功能的（FIFO）。

既然有动画那么就应该有停止的功能。stop(stopAll,goToEnd)函数，stopAll规定了是否清除动画的队列，一般默认是false,而goToEnd表示是否立刻完成当前动画，默认参数是false。在callback里面有一个小问题要注意的是写callback的时候一定要加上function的声明。

在动画里面最后一个是Chaining，即链条。顾名思义，你可以把你想要加的动画写在一条语句上，并用点（.）连接起来。但是如果你想加很多功能，为了不影响可读性还是要写一个功能就换一行。

说完动画以后就是该第一段说的获取HTML了（DOM能力）。在JQ中有三个获得内容的操作：text()（设置或者返回所选元素的文本内容）,html()（设置或者返回所选元素的内容，其中包括html标记）,val()（设置或者返回表单字段的值）。如果想设置值那么就在括号里加上希望设置的值即可，记得要用双引号。attr()是用来设置和改变元素属性的(attribute)在attr()中可以设置多个属性。一般格式为attr("href","url")（以href作为例子）。

下来就是用JQ操作CSS了。

addClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类toggleClass() - 对被选元素进行添加/删除类的切换操作css() - 设置或返回样式属性上面的四个函数是操作css的一些基本函数。可以事先在<head>里面写<style type="text/css">xx</style>然后用addClass()来给选定元素添加类，removeClass()来给选定元素删除类。假如用css的话，在上面已经介绍过了，这里就不赘述了。

最后学习的就是JQ的遍历。遍历就是可以根据其相对于其他元素的关系来“查找”HTML元素。以某选项开始，并沿着这个选择移动直到抵达希望的元素为止。事实上，DOM是一个树，根据数据结构里面学的树的知识，DOM树使不难理解的，在DOM里面有一些树的描述，比如父元素，子元素等等。在查找JQ的祖先所用的函数是parent()表示直接父元素，而parents()表示所有的父元素，而parentsUnti()表示返回介于两个元素之间的所有祖先元素。而向下遍历的函数是children()表示返回被选元素的直接子元素，find()元素表示的括号里可以选择返回的元素。而"*"表示返回所有的元素。siblings()表示返回该元素的兄弟，在括号里可以选择指定的兄弟。而next()是返回所选元素的下一个兄弟元素。nextAll()表示返回所选元素的所有跟随的兄弟元素。nextUnti()是返回介于两个参数之间的所有的跟随兄弟元素。而prev(),prevAll(),prevUntil()和next的用法是一样的只不过方向是相反的。在查找的时候也可以使用参数来过滤比如：first(),last(),eq()等等。first() 方法返回被选元素的首个元素。last() 方法返回被选元素的最后一个元素.eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）。filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。而not()和filter()是相反的。