jquery的"篩選選擇器", 都是用冒號開頭的, 即, 冒號選擇器就是 篩選選擇器.如: :first, :last, :eq(index), :first-child,...等等, 其中, 表單中的元素選擇器就是直接用冒號篩選器就好了, 前面不必用input. 還可以使用表單對象屬性選擇器.
學習進步 的方法就是, 反復的, 不斷重復的, 螺旋式的熟悉, 溫故而知新. 不斷熟練, 然后生出技巧, 和高超技藝, 然后成為高手的. 每一輪重復都會有不同的質變. 技藝關鍵在於熟練.
vim中 dw和db的區別: 在插入狀態下, 返回到普通模式的時候, 光標會退后 一個字符! dw向前刪除的時候, 會連同光標所在的字符一同刪除, 而db向后刪除, 光標所在的字符不會被刪除!
關於jquery獲取的元素對象的 尺寸問題,
尺寸有height和width, 然后有innerHeight, outerHeight的
三者之間的關系是:
height: 是元素本身的 :凈尺寸: 計算尺寸, 不包括任何外部的部分... , 就是在css中, 寫的height 樣式屬性的值;
innerHeight: 是元素加上padding后的值;
outerHeight: 是元素的凈高度 + padding+ border的高度值. 它由一個option 可選參數, 如果為true, 則還要加上 margin的值.
-------------- 通常在參考 給定 元素的尺寸時, 通常只考慮 凈高度值....
關於jquery獲取的元素 的位置 offset和position 問題,
- 兩者都只對可見元素有效, 對display:none; 的元素, 都是為0;
- 兩者都是返回 對象類型的值, 包含top和left屬性;
- offset是相對於視口, (文檔/客戶區) , 而position是相對於 最近的定位 (有position屬性的) 父元素的 位置. 一個是視口 一個是父元素.
- offset可以是getter和setter, 而position則只是作 getter.
什么叫視口, 瀏覽器窗口 , 文檔的寬度和高度?
首先, 需要明確的是: viewport != 文檔 文檔是可以滾動的.. 而客戶區, viewport視口通常是固定的區域!
-
屏幕尺寸, 設備尺寸, 就是機器的尺寸, 這個跟實際的軟件, 瀏覽器基本上是沒有關系的;
-
所謂的文檔尺寸, 當然是指 瀏覽器窗口 中, 除了 上面的標題欄/工具欄/地址欄等等亂七八遭的東西后, 下面我們看到的, 內容部分, 也就是, 不管你上面的標題欄/工具欄/地址欄如何設置, 網頁實際要顯示的容器, 網頁內容實際要顯示的地方, 始終只是 下面的那部分! 你可以看一看 當你縮放 "文檔" 的時候, 只有下面的網頁的內容部分在動, 上面的標題欄/工具欄/地址欄 等等內容 都是不會變的, 不會改動的! 因此jquery中的 offset相對的位置就是 document文檔區的左上角的位置!
-
要注意的是, 文檔 的原點, 是文檔最開始的地方, 當有滾動條滾動的時候, 這個視口原點是在最頂端 "卷動" 的, 不是 我們看到的 屏幕的 左上的那個固定 不動的地方! 而viewport是視口, 視口是不變的! 就是我們常說的客戶區! 即使文檔在滾動, 地址欄或工具欄下方的那個區域(我們眼睛所看到的那個區域)是不動的, 那個就是視口viewport
body元素繼承的是 父元素 html的整個寬度, 而html默認寬度 的就是 viewport的寬度. 因此當你縮小放大 瀏覽器的窗口尺寸時, 這個視口 的寬度 是在變化的! 因此, html的寬度也跟着變化, 從而body, 從而其下面的其他子元素的 寬度 也就跟着變化了!! 參考: http://weizhifeng.net/viewports.html
只考慮 "標准"瀏覽器, ie根本就不考慮!!
當一個鼠標事件發生時, 至少有三種方法 三種屬性可以 獲得事件發生時鼠標的位置: pageX, pageY; clientX, clientY; screenX, screenY
- pageX, pageY是指鼠標位置 相對於 文檔 的位置,
- ClientX, clientY是指鼠標相對於視口/客戶區的位置
- screenX, screenY是指鼠標相對於屏幕(物理器件)的位置:
90%的時間你將會使用pageX/Y；通常情況下你想知道的是相對於文檔的事件坐標。
其他的10%時間你將會使用clientX/Y。
你永遠不需要知道事件相對於屏幕的坐標。
即使是在bootstrap中, 默認的div, 還是貫穿整個屏幕的寬度的, bs並沒有對div作改變的 改變的是 div的 container容器.!
使用firefox的控制台調試功能時, 注意 console不能直接使用 console(...), 因為console不是一個函數, 而是一個對象! 要使用它的 方法: .log/info/debug/warn/error 等方法, 還有trace等方法, 最常用的時log, 中間可以用占位符. 可以使用分組顯示: console.group("...")... console.groupEnd(), 可以使用console.dir(查看一個js對象的所有屬性和方法)
小結:
-
jquery提供的對文檔節點的內容的修改函數是: html, text, 和val(注意val只是對input表單有效!)
-
jquery提供了一個 attr / removeAttr 函數, 這個可以對元素的某一個屬性的 所有 值(如: class) 進行操作! 但是它也單獨的, 專門的 提供了另外的 class的操作函數: addClass, removeClass, toggleClass. 區別是: attr('class','...)的時候 是對所有的 class樣式進行操作, 而addClass 等可以單獨的對 某一個類樣式進行操作!
在js, php等編程中,最好不 要 為了省事, 而使用關鍵字作變量名, 比如在firefox/chrome等中, top等已經作為一個關鍵字,所以不能用它來作變量名.
今天遇到一個奇怪現像：一段JS腳本在IE中執行正常，在chrome中卻執行失敗。最后發現問題出在：
var top=...;
top在chrome中已經被定義了，就像document和window一樣。所以我們在寫js代碼時，不可以再用top做變量名。
為了避免變量名重復，給變量名加個 獨特的前綴或后綴 比較保險。
在用jquery獲取元素的位置坐標offset.top/.left時, 然后再用這些數據去設置其他元素的相對位置時, 有時候會發生偏差, 不准卻, 原因是多方面的, 可能是js, css等的寫法不標准, 也可能是 文檔/窗口, 沒有及時 完全的加載完成, 此時,可以嘗試把 ‵$(document).ready(), 換成 $(window).load() , 前者只是在文檔准備好, 此時窗口不一定完全載入, 所以改用后者, 讓窗口完全載入后, 再讓jquery去計算 元素的坐標值`. 參考:
如上的表述, 一個div上的 半透明的蒙版, 並不能用offset 來做! 因為offset是元素相對於文檔的位置, 而當窗口在改變或者移動的時候, 元素相對於文檔的排版會改變, 有的會產生拉伸, 有的會產生堆疊, 也就是說, 這個offset是隨時改變的! 這是一方面. 另一方面, 而javascript中 使 蒙版跟div 相 "重疊"的 js代碼, 只會在文檔載入的時候, 執行 "一次", 只執行一次, 這時候的 蒙版offset位置,並不會跟隨 div的offset位置 而更新. 所以 蒙版和div會產生錯位. 在窗口尺寸變化很大的時候, 甚至會完全 錯位! 所以 這里要用position絕對定位來做, 將參考div和蒙版, 都放在一個 position: relative的容器中, 然后 將這個容器中的內容都設置成position: absolute絕對定位, 然后, 再在js腳本中 設置 蒙版或 二級菜單的 top和left 位置就好了. 當然,要注意, relative的容器由於 里面的內容都absolute了, 所以會 "產生 坍塌". 因此, 要設置它的 絕對寬度和高度!
用vim編輯文件時, 在編輯過程中, 會產生一個swp文件, 是用來保存崩潰時產生的保護信息. 當文件正常關閉時, 會自動刪除 swp文件, 當非正常關閉時, 這個swp文件就保留下來,以供恢復使用. 但是 並不是, 任何時候, 這個swp文件都有用, 甚至有時候會 產生很嚴重的 問題! 即, 當你現在正在編輯的文件比 swp更新, 增加了新的內容時, 這時, swp包含 的內容更少, 沒有包含新增內容, 這時, 如果貿然使用Recovver的話, 就會用 舊的- 沒有新增內容的版本- 去覆蓋當前文件, 這就很老火了!! 所以在出現那種需要選擇 swp操作的時候, 一定要小心了! 要先把 文件 復制一份再操作!! 以免丟失內容而后悔痛苦了!
如何設置gnome-terminal 默認打開的目錄位置?
在super+T 的快捷方式中 設置, /usr/bin/gnome-terminal --working-directory=/var/www/html 即設置shell的工作目錄選項為htm就好了....
js的定時器和延時器?
setInterval 和 setTimeout中, 函數的調研方式, 一是直接使用函數名, 不要加引號和函數后面的括號, 另一種是 使用引號, 同時加上函數的括號; 兩種方式截然相反. 后一種方式, 適合函數中帶有參數 的情形, 可以 字符串加引號的方式, 把參數用加號 連接起來;
參考: http://yufuqiang.lofter.com/post/1691f4_405529
modal模態框/ 彈出框的 backdrop?
- 什么是backdrop?
backdrop就是 "舞台背景", "舞台幕布"的意思, 就是指的是 當模態框彈出時, 自動生成的 : 模態框 "周圍的" 灰色陰影的 暗色調的 那塊面積區域. - backdrop是一個選項, 它的值有boolean類型和 string字符串類型,
當為boolean類型時, true(默認的), 表示有 周圍的灰色陰影區域; false表示沒有周圍的灰色陰影 幕布;
當為 string類型時, 值為:static" 表示,也有周圍的灰色陰影區域, 但是點擊陰影不會關閉模態框! - 注意, 即使寫好了模態框的 html代碼, 即
div ."modal fade in" > div.modal-dialog >div.modal-content, 這樣的模態框仍然不會被 自動彈出來, 因為沒有 "觸發" , 模態框需要 用上部的 按鈕/超聯結/或者用js代碼 觸發, 才能顯示出來.
關於各種形式的列表組:
- 原生的, 默認格式的列表組, 只是沒有列表前面的縮進和 list-style點. 但是本身是不包含鏈接或按鈕的;
- 如果要得到鏈接樣式的列表組, 就不要使用ul>li>a, 不要使用li下包含a標簽的寫法, 直接是使用在div下包含a 的寫法, 而a標簽不用寫父元素li了
- 同樣的, 要得到 按鈕的列表組, 就直接使用div>button了, 也不用 li來包含button了, 也不用 .btn類...
- 定制內容(就是通常所說的 hx...+p....): 很多元素, 都可以相互嵌套的! 如div>a下可以包含h1 和 p等等....
鏈接和 按鈕 要產生顏色時 的區別? 鏈接要 產生顏色, 需要通過 ative 來顯示, 而按鈕要產生顏色, 則要通過類: .btn-primary,等等, 來實現.
關於vim的移動操作的 新理解 參考: http://www.cnblogs.com/delphiclub/p/3677180.html 很好
-
關於倍數 : 倍數總是放在 操作/移動/選擇的 前面的, 如: 3dd, 3j, 理解: 如同在數學上的倍數一樣, 比如說: 3x+4y, 那么沒有說x3+y4的說法吧.
-
倍數即可以放在 移動單位的前面, 也可以放在 復制/選擇/刪除等操作的前面, 兩種方式都是等價的: 如: 3dd === d3j
-
要注意, 養成 倍數的習慣, 這個操作比單個的一個一個的移動 要高效得多. 也就說, 當要操作的時候, (不管是移動還是編輯), 首先想到的就是 倍數操作
-
關於查找單個字符, 是fx命令, 同樣可以用倍數操作, 如 : 4fx. 而且重復查找單個字符的操作是: 逗號或者分號! 注意不是 點號 (.), 點號是重復上一次的刪除 復制等操作
-
關於光標的移動: a. 屏幕不移動, 只是光標在當前屏幕的最頂端/中間/最底端移動, 使用 H M L; b. 屏幕本身的滾動:ctrl+u, ctrl+d(滾動半屏, 意思是: up, down), 滾動一屏 ctrl+f, ctrl+b, 滾動一行: ctrl+y(向下滾動一行) ctrl+e(向上滾動一行)(助記詞: yes!) c. 注意這個屏幕滾動和光標移動的區別: 屏幕滾動是屏幕本身的滾動, jk等只是光標在當前一屏內上下移動, 屏幕本身並不滾動, 只有當光標到達最頂端或最低端的時候, jk才會滾動屏幕. 而ctrl_y, ctrl_e即使光標在屏幕的中間, 屏幕仍然會滾動! 單行滾動的操作也是必要的, 就是屏幕滾動的調節 有不同的尺度, 有大尺度的滾動, 也有中等尺度的, 或者精細 尺度的 滾動 , 這些都是必要的
-
屏幕的理解: 可以把屏幕理解為, 想象成一個 "垂直 懸掛 在 前面的一個 屏幕", 它可以像前/向后(對應的就是 向上/向下)滾動/卷動!
關於relative下的absolute div定位 隱藏的問題?
通常情況下, 是不會有問題的, 可能的錯誤原因是:
- div.relative下有多個 子元素, 為了讓某個 absolute的div元素 參考另一個 子元素來定位,就設置了div.relative *下的所有子元素都成為absoute了. 這就產生了一個隱藏的錯誤結果,那就是讓div.absolute下有嵌套的子元素, 都成為了絕對定位 , 不只是relative下的直接子元素 是absolute.
- 另外, 除了要absolute的子元素外, 其他 作為"被參考"的元素, 則不需要 絕對定位!!
- 也就是說, 其實是很鍵單的一個問題: 就只是 如下所是的: div.relative > div.absolute 就可以了!
網頁的寬度如何設置? 一般網頁的寬度, 可以根據內容進行自適應 排版布局, 通常如果要設置固定寬度, 設置為 960px/ 970px, 如bootstarp的柵格系統的 medium的container的寬度 ,就是設置成的 970px的. 最好不要 設置成百分比, 因為當viewport視口 改變時, 寬度也會自動改變, 就會顯得過於隨意, 不好!
**z-index 屬性的使用: 1. 只有當div 設置了position=relative/absolute/fixed 這三者之一的時候, z-index屬性才會被激活, 即才會有效! (注意, 即使是div.relative的 z-index也是同樣 要 會 生效的!! )通常要想 某個div一定要 保證 在最上面的時候, 可以設置 : z-index: 99999 (5個9 就好了) **
手機網頁的部署和開發
手機網頁(網站)可以通過 傳統 PC 網站 經過優化/修改后 得到. 要想手機能夠訪問, 一樣的, 要把代碼 部署到 internet 公網的 服務器上! 跟PC 端的網站的部署基本上 時相同的. 同樣的要有 主機空間, 域名, 公網地址等等. 只是注意:
- 手機網站的內容 和功能, 要比pc端的網站 要精簡, 有些功能不能放在手機上實現或展示, 要經過評估和考慮
- 要通過
<meta>標簽來進行說明和聲明, 主要有這樣幾個:
在查看bootstrap教程中，碰到
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ViewPort <meta>標記用於指定用戶是否可以縮放Web頁面，如果可以，那么縮放到的最大和最小縮放比例是什么。使用ViewPort <meta>標記還表示文檔針對移動設備進行了優化。ViewPort <meta>標記的content值是由指令及其值組成的以逗號分隔的列表。
例：
<meta name=”viewport” content=”width=240, height=320, user-scalable=yes, initial-scale=2.5, maximum-scale=5.0, minimun-scale=1.0”>
width和height指令分別指定視區的邏輯寬度和高度。(可以指定為一個具體的數字, 也可以指示為關鍵字: width=200, height=device-height...)他們的值要么是以像素為單位的數字，要么是一個特殊的標記符號。width指令使用device-width標記可以指示視區寬度應為設備的屏幕寬度。類似地height指令使用device-height標記指示視區高度為設備的屏幕高度。
user-scalable指令指定用戶是否可以縮放視區，即縮放Web頁面的視圖。值為yes時允許用戶進行縮放，值為no時不允許縮放。
initial-scale指令用於設置Web頁面的初始縮放比例。默認的初始縮放比例值因智能手機瀏覽器的不同而有所差異。通常情況下設備會在瀏覽器中呈現出整個Web頁面，設為1.0則將顯示未經縮放的Web文檔。
maximum-scale和minimum-scale指令用於設置用戶對Web頁面縮放比例的限制。值的范圍為0.25至10.0之間。與initial-scale相同，這些指令的值是應用於視區內容的縮放比例。
所有智能手機瀏覽器都支持ViewPort <meta>標記的width和user-scalabel指令。但是Opera Mobile不使用user-scalable指令，而是主張用戶應始終保留在移動瀏覽器中縮放Web頁面的能力。
- 手機網站的域名, 可以另外單獨取一個域名, 但是這個通常不是太好, 因為會割裂品牌的 印象效果, 通常采用第二種方式, 即子域名的方式, 申請兩個主域名下的子域名, pc端用 www.companyname.com, 移動端的站點用: m.companyname.com
在firefox的 調試器中, 在console 中, 也是可以 檢查到 css 的 錯誤和警告的! 因為當css寫錯如屬性關鍵字 寫錯了的時候, css是不起作用的, 這時后, 就可以通過 這個console 的 css 標簽頁 去查看css的錯誤!!!
特別注意: 在css style中的 width: height等尺寸后面一 定要 加上px, 否則, 就表示 尺寸的倍數, 但是, 在javascript中, 可以直接 只使用 數字, 后面不必加上px等單位. 因為js中默認 的就表示 px.
在js或php等語言中, 要實現某個功能時, 首先要 看看該語言有沒有 內置的 實現功能的函數 不要自己去寫了.
**在:not和filter方法過濾中, 是對前面的 用選擇器選出來的元素 "集合", 做進一步的篩選. 也就是說, 前面要 有被調用的對象: 如: $('div').fiter(':not(:animated)'), $("div:not(:animated)") **