jQuery 初步学习2
前言：
老师这里啰嗦一下，因为考虑到一些同学，不太了解WEB前端这门语言。老师就简单的说一下，写前端，需要什么：一台笔记本、一个文本编辑器。就没啦！当然，写这门语言，我们要遵守它的规则，文本的后缀得是html，里面的编写格式当然也要遵守它的规则。
如果有同学没有好的编辑器，写代码很打脑壳，记不住单词等等，老师推荐一个编辑工具：WebStorm 。老师用的就是这个来写的前端，版本用的是8.0.3，还是挺好用的。
上节课我们初步学习了jQuery，那么这节课，我们再深入了解一点。
本节课学习内容：jQuery里的this；jQuery里的css，jQuery的事件(移入移出)。
老规矩，看代码，看注释，再解释：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jQuery 第二阶段，事件和css</title> <script src="../js/jquery-1.12.2.min.js"></script> </head> <body> <!--a标签里href是url指向，会做跳转，老师这里面给的javascript:;是给了一个JS运行 而里面没有给其他的代码，直接跟一个分号结束，所以这个a标签不会做跳转效果--> <a href="javascript:;">第一个</a> <a href="javascript:;">第二个</a> <a href="javascript:;">第三个</a> <a href="javascript:;">第四个</a> <script> //鼠标移入事件，找到元素a $("a").mouseover(function (){ //这里面是，鼠标移入到a元素，就运行 //将a元素的css 背景颜色，改成红色 $("a").css("background-color","red"); }); </script> </body> </html>
以上，这是一个简单的鼠标移入事件，改变a元素的css样式，同学们要注意它的写法。那么这里老师说一下，$("a").css(); 里面的属性值，要给引号，否则会出错，但是老师上面这些，它只能完成一个css样式，就是老师写的背景颜色，那么我要改变它的字体大小又怎么写呢？看看代码：
<script> //鼠标移入事件，找到元素a $("a").mouseover(function (){ //这里面是，鼠标移入到a元素，就运行 //将a元素的css 背景颜色，改成红色 //$("a").css("background-color","red"); //以下是第二种css样式写法，可写多个css $("a").css({"background-color":"red","font-size":"21px"}); }); </script>
看到区别了吗？原来的是$("a").css()，里面只能写一个属性值改变样式，而现在老师多加了一个花括号：$("a").css({}) ，书写方式是一样的，都要加引号，但是有一点不同，它的属性值配对，是用的冒号，一对属性值用一个逗号区分开，注意老师的写法。
那么，以上，鼠标移入改变a元素的css样式，像以前用js就特别不方便，莫非一个一个的给id？即使使用class也要找到某一个，所以jQuery的强大，这里就会体现出来，this关键字：
<script> //鼠标移入事件，找到元素a $("a").mouseover(function (){ //这里面是，鼠标移入到a元素，就运行 //将a元素的css 背景颜色，改成红色 //$("a").css("background-color","red"); //以下是第二种css样式写法，可写多个css // $("a").css({"background-color":"red","font-size":"21px"}); $(this).css({"background-color":"red","font-size":"21px"}); }); </script>
上面这一段代码很简单，就是将$("a")换成了$(this)，因为this是一个关键字，不需要加引号的哦。否则就不对了，this是指本身，那么我们再来刷新页面，鼠标移出a元素，则会发现，不会改变所有的a元素，而是只会改变我鼠标移入的当前a元素。
这段代码就非常的简单了吧。网上我们经常看到的一堆一样的元素块，鼠标移入的话，改变样式，移出又改变样式，就是用这种，一行代码就能解决，用纯JS的话，可能for循环是避免不了的，而且还会增加复杂的逻辑和更多的代码。
同学们就看看以下的代码，运行成功之后的效果，然后自己再扩展以下，就OK的了：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jQuery 第二阶段，事件和css</title> <script src="../js/jquery-1.12.2.min.js"></script> </head> <body> <!--a标签里href是url指向，会做跳转，老师这里面给的javascript:;是给了一个JS运行 而里面没有给其他的代码，直接跟一个分号结束，所以这个a标签不会做跳转效果--> <a href="javascript:;">第一个</a> <a href="javascript:;">第二个</a> <a href="javascript:;">第三个</a> <a href="javascript:;">第四个</a> <script> //鼠标移入事件，找到元素a $("a").mouseover(function (){ //这里面是，鼠标移入到a元素，就运行 //将a元素的css 背景颜色，改成红色 //$("a").css("background-color","red"); //以下是第二种css样式写法，可写多个css // $("a").css({"background-color":"red","font-size":"21px"}); //this指向本身的元素，它的本身则是上面的$("a")元素 $(this).css({"background-color":"red","font-size":"21px"}); }); //鼠标移出事件， $("a").mouseout(function (){ $(this).css({"background-color":"black","font-size":"21px","color":"#fff"}); }); </script> </body> </html>
这里老师演示的是a元素，this也可以在class里使用，因为页面上id是唯一的，咱先不考虑id，但是元素和class则可能会很多，所以this关键字指向本身，是非常好用的。
附加：用jQuery一定要引用它的脚本，老师开始就忘记引用了，写了半天jQuery没反应，我还以为我写错了，所以同学们一定要注意很多的细节，不然着急，是很难受的