第二十篇 jQuery 初步学习2

Posted 幸享龙枫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第二十篇 jQuery 初步学习2相关的知识,希望对你有一定的参考价值。

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没反应,我还以为我写错了,所以同学们一定要注意很多的细节,不然着急,是很难受的
 

以上是关于第二十篇 jQuery 初步学习2的主要内容,如果未能解决你的问题,请参考以下文章

第二十篇:Summarisation摘要

第二十篇:Summarisation摘要

第二十篇:Summarisation摘要

第二十篇 ResNet——模型讲解

flask第二十篇——模板

第二十篇 sys模块