① 前端開發的基本方法
CSS部分
盒子邊傾斜
clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
禁止點擊事件/滑鼠事件「穿透」
div * { pointer-events: none; /*鏈接啊，點擊事件啊，都沒有效果了*/ }
用來控制元素在移動設備上使用滾動回彈效果
.main{
-webkit-overflow-scrolling: touch;
}
可解決在IOS中使用overflow:auto 形成的滾動條，滾動不流暢的情況
文字漸變效果
.text-gradient{ background-image: linear-gradient(135deg, deeppink, deepskyblue);
-webkit-background-clip: text; color: transparent;
}
css三角形
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;
}
實現圓弧
clip-path: ellipse(80%60% at50%40%);
JS部分
JavaScript中檢測數組的方法
(1)、typeof操作符
這種方法對一些常用的類型檢查沒有問題，但對array和null 都判斷為object
(2)、instanceof操作符
這個操作符是檢測對象的原型鏈是否指向構造函數的prototype對象的
(3)、對象的constructor屬性
const arr = []
console.log(arr.constructor === Array) // true
(4)、Object.prototype.toString
constarr=[]console.log(Object.prototype.toString.call(arr)==='[objectArray]')//true
(5)、Array.isArray()
常用的字元串操作
字元串轉化toString()
字元串分隔split()
字元串替換replace()
獲取長度length
查詢子字元串 indexOf
返回指定位置的字元串或字元串編碼 charAt charCodeAt
字元串匹配 match
字元串拼接concat
字元串的切割或提取slice() substring() substr()
字元串大小寫轉化 toLowerCase toUpperCase
字元串去空格 trim() 用來刪除字元串前後的空格
- const str = '11122223333'const uniqueStr = [...new Set(str)].join('')
- arr.rece(callback,[initialValue])
- 跳過第一個索引。如果提供initialValue，從索引0開始。
- const arr = [1, 2, 3, 1, 2, 3]const uniqueArr = [...new Set(arr)]
- var a = {};Object.defineProperty(a, 'name', { value : 'kong', enumerable : true //該屬性是否可枚舉})
- function a(){}
- var b = new a();console.log(a.prototype.isPrototypeOf(b));//true
- if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded();
- }, 0);
- }
- });
- };
- /**
- * 向URL追加參數
- * @function stringifyUrlArgs
- * @param {string} url - URL路徑
- * @param {object} params - 參數對象
- * @return {string}
- const stringifyUrlArgs = (url, params) => {
- url += (/?/).test(url) ? '&' : '?'
- url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&') return url
- }
- /**
- * 解析URL參數
- * @function parseUrlArgs
- * @param {string} url - 字元串
- * @return {object}export const parseUrlArgs = url => { const arr = url.match(/([^?=&]+)(=([^&]*))/g) || [] const args = arr.rece((a, v) => {
- a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1) return a
- }, {}) return args
- }
- NP.strip(num) // strip a number to nearest right numberNP.plus(num1, num2, num3, ...) // addition, num + num2 + num3, two numbers is required at least.NP.minus(num1, num2, num3, ...) // subtraction, num1 - num2 - num3NP.times(num1, num2, num3, ...) // multiplication, num1 * num2 * num3NP.divide(num1, num2, num3, ...) // division, num1 / num2 / num3NP.round(num, ratio) // round a number based on ratio
其中第9中三者的區別如下：
（1）slice(), 參數可以是負數，負數表示從字元串最後一個位置開始切割到對應結束位置
（2）substring()，參數不可為負數，切割第一個位置到第二個位置的字元串
（3）substr()， 參數可以是負數，第一個參數是開始位置，第二個參數為切割的長度
字元串去重
常用的數組操作
1、Array.map()
此方法是將數組中的每個元素調用一個提供的函數，結果作為一個新的數組返回，並沒有改變原來的數組
2、Array.forEach()
此方法是將數組中的每個元素執行傳進提供的函數，沒有返回值，注意和map方法區分
3、Array.filter()
此方法是將滿足條件的元素作為一個新數組返回
4、Array.every()
此方法將數組所有元素進行判斷返回一個布爾值，如果所有元素都符合判斷條件，則返回true，否則返回false
5、Array.some()
此方法將數組所有元素進行判斷返回一個布爾值,如果有一個元素滿足判斷條件，則返回true，所有元素都不滿足則返回false
6、Array.rece()
此方法為所有元素調用返回函數
7、Array.push()
在數組最後面添加新元素
8、Array.shift()
刪除數組第一個元素
9、Array.pop()
刪除數組最後一個元素
10、Array.unshift()
在數組最前面增加元素
11、Array.isArray()
判斷是否為一個數組
12、Array.concat()
數組拼接
13、Array.toString()
數組轉化為字元串
14、Array.join()
數組轉化為字元串，並用第一個參數作為連接符
15、Array.splice(開始位置，刪除個數，元素)
其中rece使用方法為：
callback （執行數組中每個值的函數，包含四個參數）
1、previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
2、currentValue （數組中當前被處理的元素）
3、index （當前元素在數組中的索引）
4、array （調用 rece 的數組） initialValue （作為第一次調用 callback 的第一個參數。）
如果沒有提供initialValue，rece 會從索引1的地方開始執行 callback 方法，
數組去重：
常用對象方法
1、Object.assign()
用於克隆，兩個參數，將第二個對象分配到第一個中
2、Object.is()
用於判斷兩個值是否相同
//注意，該函數與==運算符不同，不會強制轉換任何類型， 應該更加類似於===，但值得注意的是它會將+0和-0視作不同值
3、Object.keys()
用於返回對象可枚舉的屬性和方法的名稱，返回一個屬性或方法名稱的字元串數組。
4、Object.defineProperty()
劫持變數的set和get方法,將屬性添加到對象，或修改現有屬性的特性
5、Object.defineProperties()
可添加多個屬性,與Object.defineProperty()對應,
6、isPrototypeOf
安卓監聽可視區域變化，讓輸入框移動至可視區域
vue中平滑滾動到某個位置
this.$refs.rule.scrollIntoView({ block: 'start', behavior: 'smooth' })
向URL追加參數
解析URL參數
好用的JavaSrcipt庫與模塊（包）
日期時間處理庫
1、monent.js
2、day.js
day相對於monent要輕量許多
高精度數學運算
number-precision
實用工具庫
Lodash
lodash 是一個 JavaScript 實用工具庫，提供一致性，及模塊化、性能和配件等功能。
Lodash 消除了處理數組的麻煩，從而簡化了 JavaScript、 數字、對象、字元串等
② 前端基礎（問答21）
keywords: jQuery、常用方法、Ajax。
$(document).ready() 和 window.onload 的作用類似，都是在頁面載入完成後調用綁定的函數，但也有一些區別。
$node.html()： 獲取集合中第一個匹配元素的 html 內容，或設置每一個元素的html內容。
$node.text()： 獲取匹配元素集合中每個元素的合並文本，包括它們的後代，或設置匹配元素集合中每個元素的文本內容為指定的文本內容。
ps：.text()方法不能使用在 input 元素或scripts元素上。input或textarea需要使用 .val() 方法獲取或設置文本值。得到scripts元素的值，使用.html()方法
作用：將兩個或更多對象的內容合並到第一個對象。
用法：
jQuery 的鏈式調用是指執行完一個方法之後就返回當前對象，被返回的對象繼續執行後面的方法。
通過對$.ajax()中傳入的cache控制，具體規則如下：
.data()：在匹配元素上存儲任意相關數據 或 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。
用法：
DEMO：
1、給元素 $node 添加 class active，給元素 $noed 刪除 class active
添加class：$node.addClass('.active')
移除class：$node.removeClass('active')
切換class：$node.toggleClass('active')
2、展示元素$node, 隱藏元素$node
顯示：$node.show()
隱藏：$node.hide()
切換顯示/隱藏：$node.toggle()
3、獲取元素$node的屬性: id、src、title， 修改以上屬性
獲取：$node.attr('id'),$node.attr('src'),$node.attr('title')
修改：
修改一處屬性：$node.attr('id','header')
修改多處屬性：$node.attr({'id':'header','title':'task16'})
4、給$node 添加自定義屬性data-src
$node('data-src','images/01.jpg')
5、在$ct 內部最開頭添加元素$node
$ct.prepend($node)
6、在$ct 內部最末尾添加元素$node
$ct.append($node)
7、刪除$node
$node.remove()
8、把$ct里內容清空
$node.empty()
$ct.text("")
$ct.html("")
9、在$ct 里設置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
10、獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)
獲取：1、$node.width()、$node.height()
2、$node.innerWidth()、$node.innerHeight()
3、$node.outerWidth()、$node.outerHeight()
4、$node.outerWidth(true)、$node.outerHeight(true)
11、獲取窗口滾動條垂直滾動距離
$(window).scrollTop()
12、獲取$node 到根節點水平、垂直偏移距離
水平：$node.offset().left
垂直：$node.offset().top
13、修改$node 的樣式，字體顏色設置紅色，字體大小設置14px
$node.css({
color:'red',
font-size:ཊpx'
})
14、遍歷節點，把每個節點裡面的文本內容重復一遍
$node.each(function() {
console.log($(this).text())
})
15、從$ct 里查找 class 為 .item的子元素
$ct.find('.item')
16、獲取$ct 裡面的所有孩子
$ct.children()
17、對於$node，向上找到 class 為』.ct』的父親，再從該父親找到』.panel』的孩子
$node.parent('.ct').children('.panel')
18、獲取選擇元素的數量
$nodes.length
19、獲取當前元素在兄弟中的排行
$node.index()
1、當點擊$btn 時，讓 $btn 的背景色變為紅色再變為藍色
2、當窗口滾動時，獲取垂直滾動距離
3、當滑鼠放置到$div 上，把$div 背景色改為紅色，移出滑鼠背景色變為白色
4、當滑鼠激活 input 輸入框時讓輸入框邊框變為藍色，當輸入框內容改變時把輸入框里的文字小寫變為大寫，當輸入框失去焦點時去掉邊框藍色，控制台展示輸入框里的文字
5、當選擇 select 後，獲取用戶選擇的內容
效果
效果