attr();本身是設(shè)置標(biāo)簽屬性用的,這里用來(lái)設(shè)置樣式和獲取樣式。
addClass();這個(gè)是追加樣式。
removeClass();這是移除樣式。
toggleClass();這是切換樣式,切換的意思很簡(jiǎn)單,有就刪除,沒(méi)有就追加。
hasClass();判斷樣式是否存在。
一、我們先做一個(gè)盒子,給它最基本的樣式,就是寬和高。
二、忘記了,還要鏈接jQuery庫(kù),我們就連官網(wǎng)的庫(kù)吧。
三、現(xiàn)在打開網(wǎng)頁(yè)什么都看不見(jiàn),我們加個(gè)按鈕“添加紅色背景”,同時(shí)也添加一個(gè)樣式addred。
四、現(xiàn)在可以添加按鈕的點(diǎn)擊事件了,點(diǎn)擊事件先留個(gè)空,一步一步來(lái)。
五、接下來(lái)可以在事件里面放操作了,這里就給box追加樣式addred。
六、后面就不啰嗦了,一口氣直接再添加三個(gè)按鈕,三個(gè)空的點(diǎn)擊事件。
七、先試著去掉背景。
八、忘記了,還要添加一個(gè)邊框樣式togborder。
九、toggleClass()它是有則刪,無(wú)則加,所以稱為切換。
十、hasClass()是判斷樣式是否存在,這里我們用alert消息框輸出結(jié)果。
十一、忘記一個(gè)方法了,那就是attr(),再加一個(gè)按鈕,再加一個(gè)點(diǎn)擊事件。
本文來(lái)源于,落筆承冰原創(chuàng),下面是源碼。
位小伙伴,接下來(lái)講解html基礎(chǔ)部分的填空題的講解。
·在html標(biāo)準(zhǔn)中一系列的集合主要包括結(jié)構(gòu)、表現(xiàn)和行為,在這里面不建議各位寫英文。
·接下來(lái)在這里面htm要通過(guò)將網(wǎng)站與網(wǎng)頁(yè)之間各個(gè)元素鏈接起來(lái)并且構(gòu)成豐富多彩。在這個(gè)頁(yè)面里面是不是點(diǎn)擊任意的下拉或者對(duì)應(yīng)的內(nèi)容有什么?是不是有對(duì)應(yīng)的頁(yè)面跳轉(zhuǎn)在這里面就是超鏈接。
·在html中可以應(yīng)用tr,這里面就是行標(biāo)來(lái)設(shè)置當(dāng)前的垂直屬性,就是we alone。
·在這里面網(wǎng)頁(yè)的跟標(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)用于對(duì)網(wǎng)頁(yè)元素進(jìn)行整理和分類,包括xml和xhtml。
·選擇題、填空題做一遍下來(lái)都有對(duì)應(yīng)的答案了是吧?什么標(biāo)記在最前面不用講了,就是文檔類型標(biāo)記。
·在這里面也可以再讀一遍這句話,網(wǎng)頁(yè)當(dāng)中常見(jiàn)的圖片格式有g(shù)pg、png和jpg格式。htm有一個(gè)中文翻譯,超文本標(biāo)記語(yǔ)言這個(gè)字也要記住,這里面就對(duì)應(yīng)的一個(gè)內(nèi)容的縮寫。
·在這里面常用于對(duì)于術(shù)語(yǔ)和名詞的解析和描述。
·列表沒(méi)有任何的項(xiàng)目符號(hào),u l無(wú)需列表有沒(méi)有符號(hào)?有ol有沒(méi)有有序列表有沒(méi)有符號(hào)?有一二三四,一個(gè)是點(diǎn)方形和圓圈對(duì)不對(duì)?那就只有哪一個(gè)定義列表?d l、d t跟d d。
·當(dāng)to gate等于什么的時(shí)候打開新頁(yè)面是blank,在這里面記得加個(gè)下劃線。
·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)頁(yè)中列表通常分為三類分別定義,分別是什么?有序、無(wú)序和定義。但友情提示,不要寫中文,中文完了之后還補(bǔ)英文的內(nèi)容,因?yàn)楦袷绞沁@樣子的。如果在這里面把后面忽略掉,也可以把后面內(nèi)忽略掉。
·在圖像中什么屬性用于設(shè)置鼠標(biāo)懸停的時(shí)候的提示文字?記住懸停不是未加載,所以是title out是加載不出來(lái)的時(shí)候顯示。
·在html中文本標(biāo)記負(fù)責(zé)給文本添加語(yǔ)義,其中he標(biāo)記為文本添加標(biāo)題,就主標(biāo)題,標(biāo)題用來(lái)添加段落。一般情況下寫標(biāo)題也應(yīng)該沒(méi)問(wèn)題,只能說(shuō)一般情況,但是建議按照參考答案走,如果參考答案是錯(cuò)的不要按照參考答案走。
·在input標(biāo)記中什么是用來(lái)指定不同類型的空間?肯定是tap,input標(biāo)簽又稱之為變色龍標(biāo)簽。隨著tap的值不同,它的狀態(tài)和效果也是不同的。
·設(shè)置訪問(wèn)超鏈接的樣子需要給a標(biāo)簽添加css樣式的尾類是什么?就是list,因?yàn)閘ist表示已經(jīng)訪問(wèn)。html語(yǔ)言主要通過(guò)什么?對(duì)當(dāng)前的內(nèi)容進(jìn)行描述肯定是通過(guò)標(biāo)記。htm標(biāo)記單擊網(wǎng)頁(yè)抄鏈接默認(rèn)的情況下發(fā)送的請(qǐng)求方式為get。
在通常將標(biāo)記分為單標(biāo)跟雙標(biāo),其中什么是指當(dāng)前一個(gè)標(biāo)記符號(hào)即可以完整的描述當(dāng)前功能?肯定是單標(biāo)記。image標(biāo)簽表示一個(gè)圖像信息,它有一個(gè)必須要指定的屬性來(lái)指定路徑,那就src。在這里面各要知道link標(biāo)記、a標(biāo)記還有js的標(biāo)記常用的外列的標(biāo)記是哪幾個(gè)?這個(gè)要懂。
a標(biāo)簽用的是客服,image用的是src,放的標(biāo)記就是放的指的是字體樣式,可以指什么屬性可以指定當(dāng)前的文本顏色,那就卡了。英文單詞自己記,不要寫錯(cuò)了。
若請(qǐng)求u i r地址為當(dāng)前的內(nèi)容,則ht t p請(qǐng)求中的host表示主機(jī)地址就是對(duì)應(yīng)的網(wǎng)址。在這里面填空題就給大家說(shuō)完了,謝謝。
一篇文章我給大家說(shuō)明了如何從零開始搭建一個(gè)node的服務(wù)端框架,我們用到了Egg框架。Egg框架我不再過(guò)多介紹,如果有小伙伴想了解,可以回去看我以前寫的文章,會(huì)有相關(guān)的介紹。這次我將在上次搭建的框架上進(jìn)行延伸,講一下如果用Egg框架連接數(shù)據(jù)庫(kù),并且實(shí)現(xiàn)對(duì)數(shù)據(jù)的增刪查改。接下來(lái)我們直接進(jìn)入主題。
我本次選用的數(shù)據(jù)庫(kù)是MySQL。所以我們安裝Egg官方的數(shù)據(jù)庫(kù)插件即可,首先我們安裝插件 egg-mysql 。我們?cè)陧?xiàng)目根目錄打開命令提示符,輸入命令行:npm i --save egg-mysql 。回車等待插件下載安裝完成。
npm i --save egg-mysql
命令行下載安裝插件完成后,我們下一步的工作就是在項(xiàng)目中開啟并配置egg-mysql插件。具體操作如下:
首先我們要在項(xiàng)目中開啟數(shù)據(jù)庫(kù)。找到項(xiàng)目中的/config/plugin.js文件我們需要在里面添加幾行代碼,如下所示。
//開啟數(shù)據(jù)庫(kù)插件
mysql : {
enable: true,
package: 'egg-mysql',
}
然后我們還要在 config/config.default.js 中配置各個(gè)環(huán)境的數(shù)據(jù)庫(kù)連接信息。具體配置如下。
//添加數(shù)據(jù)庫(kù)連接信息
config.mysql = {
// 單數(shù)據(jù)庫(kù)信息配置
client: {
// host
host: 'localhost',
// 端口號(hào)
port: '3306',
// 用戶名
user: 'root',
// 密碼
password: '123456',
// 數(shù)據(jù)庫(kù)名
database: 'testdb',
},
// 是否加載到 app 上,默認(rèn)開啟
app: true,
// 是否加載到 agent 上,默認(rèn)關(guān)閉
agent: false,
};
到此步驟我們的數(shù)據(jù)庫(kù)插件已經(jīng)安裝完成并且配置好了。那我們?cè)趺磳?shí)現(xiàn)數(shù)據(jù)的增刪查改呢?大家請(qǐng)繼續(xù)往下看。
首先我們看一下怎么新增數(shù)據(jù)。我們?cè)趍ysql的testdb實(shí)例中新建一個(gè)user空表。如下圖所示。
我們的egg框架也遵循MVC的架構(gòu)所以我們一般會(huì)在service層里面寫我們邏輯處理的代碼,而controller層則是獲取前端數(shù)據(jù),回傳數(shù)據(jù)的控制層。所以我們操作數(shù)據(jù)庫(kù)的代碼是寫在service文件夾里面的。
我們?cè)赼pp/service文件夾里面新建一個(gè)user.js文件。在里面寫個(gè)新增用戶的方法,該方法就是把數(shù)據(jù)存到數(shù)據(jù)庫(kù)中。具體代碼如下。
const Service = require('egg').Service;
class UserService extends Service {
//新增用戶data是有controller層傳遞過(guò)來(lái)的數(shù)據(jù)記錄。
async addUser(data) {
const {ctx, app} = this;
let result = {};
try {
data.id = 0;//定義id=0,因?yàn)閿?shù)據(jù)庫(kù)已經(jīng)設(shè)置id為主鍵,并且自增。所以只需要賦值0即可。
// 在 user 表中,插入前端提交上來(lái)的數(shù)據(jù)記錄
const info = await app.mysql.insert('user', data);
//插入成功后。
if(info.affectedRows === 1){
//給前端返回一個(gè)Json的對(duì)象
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;
然后我們?cè)赼pp/controller文件夾里新建一個(gè)user.js文件。在這里我們需要獲取前端提交上來(lái)的數(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;
//通過(guò)ctx.request.body的方式,可以獲取到前端post方式提交上來(lái)的數(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;
最后我們定義一個(gè)路由,讓前端請(qǐng)求訪問(wèn)此路由。框架會(huì)監(jiān)聽(tīng)路由是否被訪問(wèn),如果被訪問(wèn)了則會(huì)調(diào)用我們定義在controller層的新增用戶的方法。我們?cè)赼pp/router.js文件中添加如下代碼,即可完成路由的定義。
//新增用戶路由
router.post('/user/add', controller.user.addUser);
完成這步驟后,我們一個(gè)新增用戶的功能就已經(jīng)完成了。接下里我們就測(cè)試一下它的實(shí)際效果。我們運(yùn)行命令:npm run dev。啟動(dòng)項(xiàng)目,然后打開網(wǎng)頁(yè)http://127.0.0.1:7001,可以直接在swagger-ui.html頁(yè)面中進(jìn)行測(cè)試。結(jié)果如下圖所示。
經(jīng)過(guò)測(cè)試,數(shù)據(jù)已經(jīng)添加完成。所以數(shù)據(jù)庫(kù)連接也是正常的。
本次分享暫時(shí)先告一段落。請(qǐng)各位小伙伴抬起你們發(fā)財(cái)?shù)男∈郑c(diǎn)個(gè)贊唄。下次我將會(huì)進(jìn)行和大家分享對(duì)數(shù)據(jù)查改刪的方法。關(guān)注我!!!更多精彩分享不迷路。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。