jQuery中CSS簡單操作（獲取，追加，移除，切換，判斷）「406」

看下面的動圖，了解一下本例最后實現(xiàn)的效果。

attr();本身是設(shè)置標(biāo)簽屬性用的，這里用來設(shè)置樣式和獲取樣式。
addClass();這個是追加樣式。
removeClass();這是移除樣式。
toggleClass();這是切換樣式，切換的意思很簡單，有就刪除，沒有就追加。
hasClass();判斷樣式是否存在。

一、我們先做一個盒子，給它最基本的樣式，就是寬和高。

二、忘記了，還要鏈接jQuery庫，我們就連官網(wǎng)的庫吧。

三、現(xiàn)在打開網(wǎng)頁什么都看不見，我們加個按鈕“添加紅色背景”，同時也添加一個樣式addred。

四、現(xiàn)在可以添加按鈕的點擊事件了，點擊事件先留個空，一步一步來。

五、接下來可以在事件里面放操作了，這里就給box追加樣式addred。

六、后面就不啰嗦了，一口氣直接再添加三個按鈕，三個空的點擊事件。

七、先試著去掉背景。

八、忘記了，還要添加一個邊框樣式togborder。

九、toggleClass()它是有則刪，無則加，所以稱為切換。

十、hasClass()是判斷樣式是否存在，這里我們用alert消息框輸出結(jié)果。

十一、忘記一個方法了，那就是attr()，再加一個按鈕，再加一個點擊事件。

本文來源于，落筆承冰原創(chuàng)，下面是源碼。

位小伙伴，接下來講解html基礎(chǔ)部分的填空題的講解。

·在html標(biāo)準(zhǔn)中一系列的集合主要包括結(jié)構(gòu)、表現(xiàn)和行為，在這里面不建議各位寫英文。

·接下來在這里面htm要通過將網(wǎng)站與網(wǎng)頁之間各個元素鏈接起來并且構(gòu)成豐富多彩。在這個頁面里面是不是點擊任意的下拉或者對應(yīng)的內(nèi)容有什么？是不是有對應(yīng)的頁面跳轉(zhuǎn)在這里面就是超鏈接。

·在html中可以應(yīng)用tr，這里面就是行標(biāo)來設(shè)置當(dāng)前的垂直屬性，就是we alone。

·在這里面網(wǎng)頁的跟標(biāo)記是html主體標(biāo)記是標(biāo)題，標(biāo)記是主體標(biāo)題是body標(biāo)題，標(biāo)題是tatto。

·在html標(biāo)準(zhǔn)中結(jié)構(gòu)標(biāo)準(zhǔn)用于對網(wǎng)頁元素進行整理和分類，包括xml和xhtml。

·選擇題、填空題做一遍下來都有對應(yīng)的答案了是吧？什么標(biāo)記在最前面不用講了，就是文檔類型標(biāo)記。

·在這里面也可以再讀一遍這句話，網(wǎng)頁當(dāng)中常見的圖片格式有g(shù)pg、png和jpg格式。htm有一個中文翻譯，超文本標(biāo)記語言這個字也要記住，這里面就對應(yīng)的一個內(nèi)容的縮寫。

·在這里面常用于對于術(shù)語和名詞的解析和描述。

·列表沒有任何的項目符號，u l無需列表有沒有符號？有ol有沒有有序列表有沒有符號？有一二三四，一個是點方形和圓圈對不對？那就只有哪一個定義列表？d l、d t跟d d。

·當(dāng)to gate等于什么的時候打開新頁面是blank，在這里面記得加個下劃線。

·html中spin標(biāo)記屬于行內(nèi)標(biāo)記。html中什么標(biāo)記用于設(shè)置當(dāng)前表格的表頭？t h標(biāo)記。t h是標(biāo)題標(biāo)記表格的標(biāo)題標(biāo)記。

·在網(wǎng)頁中列表通常分為三類分別定義，分別是什么？有序、無序和定義。但友情提示，不要寫中文，中文完了之后還補英文的內(nèi)容，因為格式是這樣子的。如果在這里面把后面忽略掉，也可以把后面內(nèi)忽略掉。

·在圖像中什么屬性用于設(shè)置鼠標(biāo)懸停的時候的提示文字？記住懸停不是未加載，所以是title out是加載不出來的時候顯示。

·在html中文本標(biāo)記負(fù)責(zé)給文本添加語義，其中he標(biāo)記為文本添加標(biāo)題，就主標(biāo)題，標(biāo)題用來添加段落。一般情況下寫標(biāo)題也應(yīng)該沒問題，只能說一般情況，但是建議按照參考答案走，如果參考答案是錯的不要按照參考答案走。

·在input標(biāo)記中什么是用來指定不同類型的空間？肯定是tap，input標(biāo)簽又稱之為變色龍標(biāo)簽。隨著tap的值不同，它的狀態(tài)和效果也是不同的。

·設(shè)置訪問超鏈接的樣子需要給a標(biāo)簽添加css樣式的尾類是什么？就是list，因為list表示已經(jīng)訪問。html語言主要通過什么？對當(dāng)前的內(nèi)容進行描述肯定是通過標(biāo)記。htm標(biāo)記單擊網(wǎng)頁抄鏈接默認(rèn)的情況下發(fā)送的請求方式為get。

在通常將標(biāo)記分為單標(biāo)跟雙標(biāo)，其中什么是指當(dāng)前一個標(biāo)記符號即可以完整的描述當(dāng)前功能？肯定是單標(biāo)記。image標(biāo)簽表示一個圖像信息，它有一個必須要指定的屬性來指定路徑，那就src。在這里面各要知道link標(biāo)記、a標(biāo)記還有js的標(biāo)記常用的外列的標(biāo)記是哪幾個？這個要懂。

a標(biāo)簽用的是客服，image用的是src，放的標(biāo)記就是放的指的是字體樣式，可以指什么屬性可以指定當(dāng)前的文本顏色，那就卡了。英文單詞自己記，不要寫錯了。

若請求u i r地址為當(dāng)前的內(nèi)容，則ht t p請求中的host表示主機地址就是對應(yīng)的網(wǎng)址。在這里面填空題就給大家說完了，謝謝。

一篇文章我給大家說明了如何從零開始搭建一個node的服務(wù)端框架，我們用到了Egg框架。Egg框架我不再過多介紹，如果有小伙伴想了解，可以回去看我以前寫的文章，會有相關(guān)的介紹。這次我將在上次搭建的框架上進行延伸，講一下如果用Egg框架連接數(shù)據(jù)庫，并且實現(xiàn)對數(shù)據(jù)的增刪查改。接下來我們直接進入主題。

安裝數(shù)據(jù)庫插件

我本次選用的數(shù)據(jù)庫是MySQL。所以我們安裝Egg官方的數(shù)據(jù)庫插件即可，首先我們安裝插件 egg-mysql 。我們在項目根目錄打開命令提示符，輸入命令行：npm i --save egg-mysql 。回車等待插件下載安裝完成。

npm i --save egg-mysql

配置插件

命令行下載安裝插件完成后，我們下一步的工作就是在項目中開啟并配置egg-mysql插件。具體操作如下：

首先我們要在項目中開啟數(shù)據(jù)庫。找到項目中的/config/plugin.js文件我們需要在里面添加幾行代碼，如下所示。

//開啟數(shù)據(jù)庫插件
  mysql : {
    enable: true,
    package: 'egg-mysql',
  }

然后我們還要在 config/config.default.js 中配置各個環(huán)境的數(shù)據(jù)庫連接信息。具體配置如下。

//添加數(shù)據(jù)庫連接信息
  config.mysql = {
    // 單數(shù)據(jù)庫信息配置
    client: {
      // host
      host: 'localhost',
      // 端口號
      port: '3306',
      // 用戶名
      user: 'root',
      // 密碼
      password: '123456',
      // 數(shù)據(jù)庫名
      database: 'testdb',
    },
    // 是否加載到 app 上，默認(rèn)開啟
    app: true,
    // 是否加載到 agent 上，默認(rèn)關(guān)閉
    agent: false,
  };

到此步驟我們的數(shù)據(jù)庫插件已經(jīng)安裝完成并且配置好了。那我們怎么實現(xiàn)數(shù)據(jù)的增刪查改呢？大家請繼續(xù)往下看。

數(shù)據(jù)操作-新增用戶

首先我們看一下怎么新增數(shù)據(jù)。我們在mysql的testdb實例中新建一個user空表。如下圖所示。

我們的egg框架也遵循MVC的架構(gòu)所以我們一般會在service層里面寫我們邏輯處理的代碼，而controller層則是獲取前端數(shù)據(jù)，回傳數(shù)據(jù)的控制層。所以我們操作數(shù)據(jù)庫的代碼是寫在service文件夾里面的。

我們在app/service文件夾里面新建一個user.js文件。在里面寫個新增用戶的方法，該方法就是把數(shù)據(jù)存到數(shù)據(jù)庫中。具體代碼如下。

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

class UserService extends Service {

  //新增用戶data是有controller層傳遞過來的數(shù)據(jù)記錄。
  async addUser(data) {

    const {ctx, app} = this;
    let result = {};
    try {
      data.id = 0;//定義id=0，因為數(shù)據(jù)庫已經(jīng)設(shè)置id為主鍵，并且自增。所以只需要賦值0即可。
      // 在 user 表中，插入前端提交上來的數(shù)據(jù)記錄
      const info = await app.mysql.insert('user', data); 
  
      //插入成功后。
      if(info.affectedRows === 1){
        //給前端返回一個Json的對象
        result = {
          state: 0, //自定義的狀態(tài)碼
          msg: "添加成功", //返回的消息
          data: info.insertId, //新增的記錄的id
        }
      }

    } catch (err) {
      //插入數(shù)據(jù)失敗的返回結(jié)果
      result = {
        state: 1, 
        msg: err,
        data: null,
      }
    }
    
    return result
  }
};
module.exports = UserService;

然后我們在app/controller文件夾里新建一個user.js文件。在這里我們需要獲取前端提交上來的數(shù)據(jù)，并且將數(shù)據(jù)處理的結(jié)果返回給前端。具體代碼如下。

'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方式提交上來的數(shù)據(jù)
    const data = ctx.request.body;

    //調(diào)用service層的addUser方法。并且返回相應(yīng)的結(jié)果
    const userInfo = await ctx.service.user.addUser(data);
    
    //向前端接口響應(yīng)數(shù)據(jù)。
    ctx.body = userInfo;
  }

}

module.exports = UserController;

最后我們定義一個路由，讓前端請求訪問此路由。框架會監(jiān)聽路由是否被訪問，如果被訪問了則會調(diào)用我們定義在controller層的新增用戶的方法。我們在app/router.js文件中添加如下代碼，即可完成路由的定義。

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

完成這步驟后，我們一個新增用戶的功能就已經(jīng)完成了。接下里我們就測試一下它的實際效果。我們運行命令：npm run dev。啟動項目，然后打開網(wǎng)頁http://127.0.0.1:7001，可以直接在swagger-ui.html頁面中進行測試。結(jié)果如下圖所示。

經(jīng)過測試，數(shù)據(jù)已經(jīng)添加完成。所以數(shù)據(jù)庫連接也是正常的。

本次分享暫時先告一段落。請各位小伙伴抬起你們發(fā)財?shù)男∈郑c個贊唄。下次我將會進行和大家分享對數(shù)據(jù)查改刪的方法。關(guān)注我！！！更多精彩分享不迷路。

在線咨詢

上一篇：HTML5 和word互轉(zhuǎn)？這兩個熱門庫就夠了！
下一篇：有一個會代碼的大神男朋友是什么感覺

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

jQuery中CSS簡單操作（獲取，追加，移除，切換，判斷）「406」

安裝數(shù)據(jù)庫插件

配置插件

數(shù)據(jù)操作-新增用戶

您的項目需求