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的更多相关文章

  1. 第十九篇 jQuery初步学习

    jQuery 初步学习   jQuery可以理解为是一种脚本,需要到网上下载,它是一个文件,后缀当然是js的文件,它里面封装了很多函数方法,我们直接调用即可,就比方说,我们用JS,写一个显示与隐藏,通 ...

  2. Egret入门学习日记 --- 第二十篇（书中 9.1~9.3 节 内容 组件篇）

    第二十篇(书中 9.1~9.3 节 内容 组件篇) 第八章中的内容. 以上都是基本的Js知识,我就不录入了. 直接来看 第9章. 开始 9.1节. 以上内容告诉你,Egret官方舍弃了GUI,使用了E ...

  3. Python之路【第二十篇】：待更新中.....

    Python之路[第二十篇]:待更新中.....

  4. Python开发【第二十篇】：缓存

    Python开发[第二十篇]:缓存redis&Memcache   点击这里 Python之路[第九篇]:Python操作 RabbitMQ.Redis.Memcache.SQLAlchemy ...

  5. 大白话5分钟带你走进人工智能-第二十九节集成学习之随机森林随机方式 ，out of bag data及代码(2)

              大白话5分钟带你走进人工智能-第二十九节集成学习之随机森林随机方式 ,out  of  bag  data及代码(2) 上一节中我们讲解了随机森林的基本概念,本节的话我们讲解随机森 ...

  6. 第二十三篇 jQuery 学习5 添加元素

    jQuery 学习5 添加元素   同学们,这节课,使用jQuery动态添加元素,是很关键的一课,一般用在什么地方呢:别人发表一篇文章,你评论楼主的时候,总不能是提交表单,到后台的其他页面处理,然后再 ...

  7. 第二十一篇 jQuery 学习3 特效效果

    jQuery 学习3   这节课主要是学习jQuery的动态效果. show()和hide()显示与隐藏方法,toggle()方法,fadeIn()谈入,fadeOut()谈出,slideDown() ...

  8. Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  9. Python学习第十篇——函数初步

    def make_album(name,album_name,song_nums = 1): dict_album = {name:[album_name]} if int(song_nums) &g ...

随机推荐

  1. Python3并发写文件

    使用python2在进行并发写的时候,发现文件会乱掉,就是某一行中间会插入其他行的内容. 但是在使用python3进行并发写的时候,无论是多进程,还是多线程,都没有出现这个问题,难道是python3的 ...

  2. 九、封装登录POST请求、登录后POST请求以及GET请求

    一.封装登录后POST请求以及GET请求 /** * 全局运行时环境参数管理器 */ public static Map<String, String> BASE_GLOBAL_MAP; ...

  3. win10搜索框突然不能使用了

    备忘: win10搜索不出来了,使用以下方法恢复了,备忘下 1,首先打开任务管理器 重新启动wservice服务 2.发现这时候搜索依然不能使用 然后重新启动explorer.exe (1)右键关闭该 ...

  4. openerp学习笔记 tree视图增加复选处理按钮

    wizard:用于确认或选择 wizard/sale_multi_action.py # -*- encoding: utf-8 -*-from openerp.osv import fields, ...

  5. GNU项目

    目标在于建立一个完全相容于UNIX的自由软件环境.发展GNU系统的计划,最早由理查德•斯托曼在1983 年启动,它是自由软件基金会最早致力的目标.最近一个GNU系统版本,是于2011年4月1日释出的G ...

  6. flutter 切换tab后保留tab状态

    前言 最近在用flutter写一个小项目,在写主页面(底部导航栏+子页面)时遇到的一个问题:当点击底部item切换到另一页面, 再返回此页面时会重走它的initState方法(我们一般在initSta ...

  7. Tomcat 8.5 配置 SSL 证书

    前文: 1.以上内容仅支持Linux-Tomcat配置 正文: 说一下我遇到的坑,我使用的服务器是阿里云服务器,阿里云提供的云服务器Tomcat配置SSL是7.0版本,跟8.5出入较大. 以下为阿里提 ...

  8. 小D课堂 - 零基础入门SpringBoot2.X到实战_第11节 Logback日志框架介绍和SpringBoot整合实战_45、SpringBoot2.x日志讲解和Logback配置实战

    笔记 2.SpringBoot2.x日志讲解和自定义Logback配置实战     简介:讲解SpringBoot2.x整合Logback配置实战 1.官网介绍:https://docs.spring ...

  9. LoadRunner脚本编写之二

    LoadRunner脚本编写之二 编程基本语法必须要记牢.程序的思想也很重要. 下面来回顾一下嵌套循环例子. Action() {     int  i,j;   //生命两个变量     for ( ...

  10. 【转】hbase meta表修复

    [From]https://www.iteye.com/blog/blackproof-2052898 meta表修复一 查看hbasemeta情况 hbase hbck .重新修复hbase met ...