整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

jQuery中CSS简单操作(获取,追加,移除,切换,判断)「406」

  • 看下面的动图,了解一下本例最后实现的效果。

attr();本身是设置标签属性用的,这里用来设置样式和获取样式。

addClass();这个是追加样式。

removeClass();这是移除样式。

toggleClass();这是切换样式,切换的意思很简单,有就删除,没有就追加。

hasClass();判断样式是否存在。

一、我们先做一个盒子,给它最基本的样式,就是宽和高。

二、忘记了,还要链接jQuery库,我们就连官网的库吧。

三、现在打开网页什么都看不见,我们加个按钮“添加红色背景”,同时也添加一个样式addred。

四、现在可以添加按钮的点击事件了,点击事件先留个空,一步一步来。

五、接下来可以在事件里面放操作了,这里就给box追加样式addred。

六、后面就不啰嗦了,一口气直接再添加三个按钮,三个空的点击事件。

七、先试着去掉背景。

八、忘记了,还要添加一个边框样式togborder。

九、toggleClass()它是有则删,无则加,所以称为切换。

十、hasClass()是判断样式是否存在,这里我们用alert消息框输出结果。

十一、忘记一个方法了,那就是attr(),再加一个按钮,再加一个点击事件。

本文来源于,落笔承冰原创,下面是源码。

位小伙伴,接下来讲解html基础部分的填空题的讲解。

·在html标准中一系列的集合主要包括结构、表现和行为,在这里面不建议各位写英文。

·接下来在这里面htm要通过将网站与网页之间各个元素链接起来并且构成丰富多彩。在这个页面里面是不是点击任意的下拉或者对应的内容有什么?是不是有对应的页面跳转在这里面就是超链接。

·在html中可以应用tr,这里面就是行标来设置当前的垂直属性,就是we alone。

·在这里面网页的跟标记是html主体标记是标题,标记是主体标题是body标题,标题是tatto。

·在html标准中结构标准用于对网页元素进行整理和分类,包括xml和xhtml。

·选择题、填空题做一遍下来都有对应的答案了是吧?什么标记在最前面不用讲了,就是文档类型标记。

·在这里面也可以再读一遍这句话,网页当中常见的图片格式有gpg、png和jpg格式。htm有一个中文翻译,超文本标记语言这个字也要记住,这里面就对应的一个内容的缩写。

·在这里面常用于对于术语和名词的解析和描述。

·列表没有任何的项目符号,u l无需列表有没有符号?有ol有没有有序列表有没有符号?有一二三四,一个是点方形和圆圈对不对?那就只有哪一个定义列表?d l、d t跟d d。

·当to gate等于什么的时候打开新页面是blank,在这里面记得加个下划线。

·html中spin标记属于行内标记。html中什么标记用于设置当前表格的表头?t h标记。t h是标题标记表格的标题标记。

·在网页中列表通常分为三类分别定义,分别是什么?有序、无序和定义。但友情提示,不要写中文,中文完了之后还补英文的内容,因为格式是这样子的。如果在这里面把后面忽略掉,也可以把后面内忽略掉。

·在图像中什么属性用于设置鼠标悬停的时候的提示文字?记住悬停不是未加载,所以是title out是加载不出来的时候显示。

·在html中文本标记负责给文本添加语义,其中he标记为文本添加标题,就主标题,标题用来添加段落。一般情况下写标题也应该没问题,只能说一般情况,但是建议按照参考答案走,如果参考答案是错的不要按照参考答案走。

·在input标记中什么是用来指定不同类型的空间?肯定是tap,input标签又称之为变色龙标签。随着tap的值不同,它的状态和效果也是不同的。

·设置访问超链接的样子需要给a标签添加css样式的尾类是什么?就是list,因为list表示已经访问。html语言主要通过什么?对当前的内容进行描述肯定是通过标记。htm标记单击网页抄链接默认的情况下发送的请求方式为get。

在通常将标记分为单标跟双标,其中什么是指当前一个标记符号即可以完整的描述当前功能?肯定是单标记。image标签表示一个图像信息,它有一个必须要指定的属性来指定路径,那就src。在这里面各要知道link标记、a标记还有js的标记常用的外列的标记是哪几个?这个要懂。

a标签用的是客服,image用的是src,放的标记就是放的指的是字体样式,可以指什么属性可以指定当前的文本颜色,那就卡了。英文单词自己记,不要写错了。

若请求u i r地址为当前的内容,则ht t p请求中的host表示主机地址就是对应的网址。在这里面填空题就给大家说完了,谢谢。

一篇文章我给大家说明了如何从零开始搭建一个node的服务端框架,我们用到了Egg框架。Egg框架我不再过多介绍,如果有小伙伴想了解,可以回去看我以前写的文章,会有相关的介绍。这次我将在上次搭建的框架上进行延伸,讲一下如果用Egg框架连接数据库,并且实现对数据的增删查改。接下来我们直接进入主题。

安装数据库插件

我本次选用的数据库是MySQL。所以我们安装Egg官方的数据库插件即可,首先我们安装插件 egg-mysql我们在项目根目录打开命令提示符,输入命令行:npm i --save egg-mysql 。回车等待插件下载安装完成。

npm i --save egg-mysql

配置插件

命令行下载安装插件完成后,我们下一步的工作就是在项目中开启并配置egg-mysql插件。具体操作如下:

首先我们要在项目中开启数据库。找到项目中的/config/plugin.js文件我们需要在里面添加几行代码,如下所示。

//开启数据库插件
  mysql : {
    enable: true,
    package: 'egg-mysql',
  }

然后我们还要在 config/config.default.js 中配置各个环境的数据库连接信息。具体配置如下。

//添加数据库连接信息
  config.mysql = {
    // 单数据库信息配置
    client: {
      // host
      host: 'localhost',
      // 端口号
      port: '3306',
      // 用户名
      user: 'root',
      // 密码
      password: '123456',
      // 数据库名
      database: 'testdb',
    },
    // 是否加载到 app 上,默认开启
    app: true,
    // 是否加载到 agent 上,默认关闭
    agent: false,
  };

到此步骤我们的数据库插件已经安装完成并且配置好了。那我们怎么实现数据的增删查改呢?大家请继续往下看。

数据操作-新增用户

首先我们看一下怎么新增数据。我们在mysql的testdb实例中新建一个user空表。如下图所示。

我们的egg框架也遵循MVC的架构所以我们一般会在service层里面写我们逻辑处理的代码,而controller层则是获取前端数据,回传数据的控制层。所以我们操作数据库的代码是写在service文件夹里面的。

我们在app/service文件夹里面新建一个user.js文件。在里面写个新增用户的方法,该方法就是把数据存到数据库中。具体代码如下。

const Service = require('egg').Service;

class UserService extends Service {

  //新增用户data是有controller层传递过来的数据记录。
  async addUser(data) {

    const {ctx, app} = this;
    let result = {};
    try {
      data.id = 0;//定义id=0,因为数据库已经设置id为主键,并且自增。所以只需要赋值0即可。
      // 在 user 表中,插入前端提交上来的数据记录
      const info = await app.mysql.insert('user', data); 
  
      //插入成功后。
      if(info.affectedRows === 1){
        //给前端返回一个Json的对象
        result = {
          state: 0, //自定义的状态码
          msg: "添加成功", //返回的消息
          data: info.insertId, //新增的记录的id
        }
      }

    } catch (err) {
      //插入数据失败的返回结果
      result = {
        state: 1, 
        msg: err,
        data: null,
      }
    }
    
    return result
  }
};
module.exports = UserService;

然后我们在app/controller文件夹里新建一个user.js文件。在这里我们需要获取前端提交上来的数据,并且将数据处理的结果返回给前端。具体代码如下。

'use strict';

const Controller = require('egg').Controller;
/**
 * @Controller 用户管理
 */
class UserController extends Controller {

  /**
  * @summary 新增用户
  * @router post /user/add
  * @request body userAddRequest 
  * @response 200 
  */
  async addUser() {
    const { ctx } = this;

    //通过ctx.request.body的方式,可以获取到前端post方式提交上来的数据
    const data = ctx.request.body;

    //调用service层的addUser方法。并且返回相应的结果
    const userInfo = await ctx.service.user.addUser(data);
    
    //向前端接口响应数据。
    ctx.body = userInfo;
  }

}

module.exports = UserController;

最后我们定义一个路由,让前端请求访问此路由。框架会监听路由是否被访问,如果被访问了则会调用我们定义在controller层的新增用户的方法。我们在app/router.js文件中添加如下代码,即可完成路由的定义。

//新增用户路由
  router.post('/user/add', controller.user.addUser);

完成这步骤后,我们一个新增用户的功能就已经完成了。接下里我们就测试一下它的实际效果。我们运行命令:npm run dev。启动项目,然后打开网页http://127.0.0.1:7001,可以直接在swagger-ui.html页面中进行测试。结果如下图所示。

经过测试,数据已经添加完成。所以数据库连接也是正常的。

本次分享暂时先告一段落。请各位小伙伴抬起你们发财的小手,点个赞呗。下次我将会进行和大家分享对数据查改删的方法。关注我!!!更多精彩分享不迷路。