前端 強大的javaScript 中比較有趣的事

2021-07-11 12:27:37 字數 1506 閱讀 9873

一、查詢所需的元素的比較方便的語法糖

1.除基本的id,class 和tag的方法外 介紹一種基於元素位置的查詢方法

document.elementfrompoint(x,y)獲取點位置的元素

2.元素find()及基本定位的時候可以借用某些元素屬性值進行精確定位

[attribute$=value],匹配給定的屬性是以某些值結尾的元素。

[attribute*=value],匹配給定的屬性是以包含某些值的元素。

[attribute^=value],匹配給定的屬性是以某些值開始的元素。

舉個栗子,$('div').find('input[type = text]')就是查詢div的子元素中type型別為text的input元素

上述的幾種方法可以應用到parent()和children() 及基本的$()元素查詢中

3.find(),fileter(),及end()的有趣的事

find()是查詢子元素中響應的要求

fileter()則是所需屬性中用於過濾的精確選取,如$('div').fileter('.abc')目的是選取div中屬性值為abc的元素集合

end()可以阻止進行如$('div').fileter('.abc').end()最後的返回結果就是選取div元素

4.$()[0] == document.elementbyxx

二、object陣列和array陣列中比較有趣的事

1.object陣列幾種初始化方法可以通過檢索得到,最簡單的就是{},而array本事就算是一種物件,他的初始化最簡單就是

array.push()和arry.splice()的方法可以插入元素,而object則可以直接這樣object[key]=value 的方法加入鍵值對

2.刪除元素時array仍然用splice() pop()等

w3school中給了很詳細的解釋。

而object的刪除其中某些鍵值對通過delete 操作實現。

3.陣列操作,巧妙運用splice()這個確實有趣,打算日後拓展的時候來寫

日後張貼部落格鏈結

三、this的運用,在類函式內部的中使用相當方便,但是類函式中其他函式再使用this方法容易出錯

解決辦法有兩種

1.傳參 var _evt = this  類函式中如有呼叫其他類函式時可用_evt.操作進行,這樣不會出錯

2.就是把this寫全,就是類名代替this

四、繫結解綁的範圍要確定

寫繫結時可以如下操作$().off().on()

或者$().unbind.bind()

這樣比較保險這樣寫可以有效防止多重繫結

作者曾因繫結多次而沒解綁發生過相當詭異的bug

繫結也是一種比較有趣的事,可以自己定義一些有趣的事件

滑鼠左鍵和右鍵在js基礎event中是沒有界限的,可以通過event.which 來判定,1是左鍵,2是中間鍵或右鍵,3是右鍵

可以自己繫結事件實現通用性

關於繫結及事件的內容可看我的博文

《關於監聽事件的有意思事》

前端初探 JavaScript

如果說html 是乙個簡單的靜態網頁,就像人素顏一樣。css樣式會讓頁面更加酷炫,就像化上妝一樣,js讓頁面可以動態變化,給頁面新增了動畫效果,檢測訪客的瀏覽資訊。事件繫結有三種 第一種 在html 標籤中進行事件繫結 在頁面中 function tnbclick 第二種 物件.事件 fn 例如do...

CssGaga 一款強大的前端重構工具

cssgaga 快速上手指南 開啟cssgaga所在目錄,複製cssgaga.exe.config.sample檔案,重新命名為cssgaga.exe.config。其中pathdest1name pathdest1 pathreport1三個節點為一組,代表乙個編譯目標,cssgaga支援多組編譯...

國內優秀Web前端Javascript框

排序按字母順序 請大家看乙個選擇框架的案例 在選擇框架這件事情上,我們折騰了很久 為了遵循 不要重複的發明輪子 的偉大號召,我們決定選乙個開源框架 於是在對n多框架進行了一番對照之後,我們選定了乙個框架 在用這個框架寫完了乙個歷時一年的專案後,我們一致贊成換掉這個框架 不是這些框架不強大,不是這些框...