常用[js,css,jquery,html]

常用[js,css,jquery,html]
目錄:
一、javascript事件和屬性

二、jquery事件和方法

三、js

四、css

五、html

六、js操作cookies

七、插件

 

javascript事件和屬性
事件

onblur //當失去輸入焦點後產生該事件

onfocus //當輸入獲得焦點後,產生該事件

onchange //當文字值改變,並失去焦點時,產生該事件

onselect //事件會在文本框中的文本被選中時發生。

removeChild//方法刪除指定節點。

replace //替換

屬性

parentNode 屬性可返回某節點的父節點。

firstChild 屬性返回被選節點的第一個子節點

lastChild 屬性可返回文檔的最後一個子節點。

 

jquery事件
blur //當失去輸入焦點後產生該事件 $("#myinput").blur(function () {//alert("juqery 事件 blur");});

focus //當輸入獲得焦點後,產生該事件 $("#myinput").focus(function () {//alert("juqery 事件 focus");});

change //當文字值改變,並失去焦點時,產生該事件 $("#myinput").change(function () {//alert("juqery 事件 change");});

select //事件會在文本框中的文本被選中時發生。 $("#myinput").select(function () {//alert("juqery 事件 select");});

 

inArray

 

異步提交表單
serializeArray序列化成json

serialize序列化成字符串

取所以子元素
children

取父節點
parents() 方法允許我們在 DOM 樹中搜索這些元素的祖先元素,並用從最近的父元素向上的順序排列的匹配元素構造一個新的 jQuery 對象。元素是按照從最近的父元素向外的順序被返回的。

兄弟節點
jQuery.prev(),返回上一個兄弟節點,不是所有的兄弟節點

jQuery.prevAll(),返回所有之前的兄弟節點

jQuery.next(),返回下一個兄弟節點,不是所有的兄弟節點

jQuery.nextAll(),返回所有之後的兄弟節點

jQuery.siblings(),返回兄弟姐妹節點,不分前後

兄弟節點

追加和插入元素
append、prepend、before、after

append(): 方法在被選元素的結尾插入內容。(被選內容裏面)

prepend():方法在被選元素的開頭插入內容(被選內容裏面)

after():方法在被選元素之後插入內容。(被選內容外面)

before():方法在被選元素之前插入內容。 (被選內容外面)

JS鼠標事件
mousedown:鼠標的鍵鈕被按下。
mouseup:鼠標的鍵鈕被釋放彈起。
click:單擊鼠標的鍵鈕。
dblclick:鼠標的鍵鈕被按下。
contextmenu :彈出右鍵菜單。
mouseover:鼠標移到目標的上方。
mouseout:鼠標移出目標的上方。
mousemove:鼠標在目標的上方移動。
JQuery鼠標事件
(1):click事件:click事件於用戶在元素敲擊鼠標左鍵,並在相同元素上鬆開左鍵時觸發。
$('p').click(function(){
alert('click function is running !');
});
(2):dbclick事件:dbclick事件在用戶完成迅速連續的兩次點擊之後觸發,雙擊的速度取決於操作系統的設置。一般雙擊事件在頁面中不經常使用。
$('p').dbclick(function(){
alert('dbclick function is running !');
});
(3):mousedown事件:mousedown事件在用戶敲擊鼠標鍵時觸發,跟keydown事件不一樣,該事件僅在按下鼠標時觸發。
$('p').mousedown(function(){
alert('mousedown function is running !');
});
(4):mouseup事件:mouseup事件在用戶鬆開鼠標時觸發,如果在與按下鼠標的元素相同元素上鬆開,那麼click事件也會觸發。
$('p').mouseup(function(){
alert('mouseup function is running !');
}).click(function(){
alert('click function is running too !');
});
(5):mouseover事件:mouseover事件於用戶把鼠標從一個元素移動到另外一個元素上時觸發,如果需要知道來自那個元素可以使用,relatedTagrget屬性。
(6):mouseout事件:mouseout事件於用戶把鼠標移出一個元素時觸發,這包括從父元素移動到子元素上,或者使用鍵盤跳到元素上。
(5)和(6)這兩個事件一般不常用,很難實現與用戶的交互,也就是說不易捕獲用戶事件。
(7):mouseenter事件:mouseenter事件是在用戶光標進入元素上時觸發。
$('p').mouseenter(function(){
alert('mouseenter function is running !');
});
(8):mouseleaver事件:mouseleaver事件是在用戶的光標離開元素時觸發。
$('p').mouseleaver(function(){
alert('mouseleaver function is running !');
});
(7)和(8)這兩個事件一般連起來使用,在jQuery中可以使用hover這個函數來代替這兩個函數。
$('p').hover(function(){
alert('mouseenter function is running !');
},function(){
alert('mouseleaver function is running !');
});

js
當失去焦點時保留兩位小數


1 window.onload = function () {
2 document.getElementById("myinput").onblur = function () {
3 this.value = parseFloat(this.value).toFixed(2);
4 };
5 }
View Code
文本框只能輸入數字,並保留兩位小數 [execCommand()的用法]


1 window.onload = function () {
2 window.document.getElementById("iptID").onblur = function () {
3 if (isNaN(this.value)) { //如果是非數字
4 document.execCommand('undo'); //撤銷
5 alert('只能輸入數字');
6 }
7 else if (this.value) //如果 不爲false undefined null ""
8 this.value = parseFloat(this.value).toFixed(2);//保留兩位小數
9 }
10 }
View Code
控件的隱藏


1 document.getElementById("div").style.visibility = "hidden";//佔空間隱藏
2 document.getElementById("div").style.display = "none";//不佔空間隱藏
View Code

CSS
1.border邊框 table常用樣式

<!--cellpadding 表格單元邊界與單元內容之間的間距像素-->
<!--border 第一個是邊框像素 第二個是邊框樣式 第三個是邊框顏色-->
<table cellpadding="0" style="border:1px solid red"></table>

<!--等效於-->
table{

border-collapse:collapse;

border-spacing:0;

}


2.margin外邊距 padding 內邊距

1 <!--margin邊距 margin-top margin-right margin-bottom margin-left-->
2 <!--我們很多時候那個邊框挨一起了顯得變粗了 我們需要去掉其中一邊 或者拉開距離-->
3 <!--去掉下邊框-->
4 <table style="margin-bottom:-1px"></table>
5 <!--邊框把下面元素推開一個像素-->
6 <table style="margin-bottom:1px"></table>

3.position 屬性


absolute 生成絕對定位的元素,相對於 static 定位以外的第一個父元素進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

fixed 生成絕對定位的元素,相對於瀏覽器窗口進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

relative 生成相對定位的元素,相對於其正常位置進行定位。

因此,"left:20" 會向元素的 LEFT 位置添加 20 像素。

static 默認值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。
inherit 規定應該從父元素繼承 position 屬性的值。
View Code
4.垂直居中

我們很多時候需要垂直居中 不得,反法有2. 其一:line-height 相對於容器 設置行之間的距離 其二:margin 相對於 容器內的控件 上下左右 的具體

<div style="background-color: #0094ff; line-height: 55px">
<input type="button" value="button" />
<span>我想上下居中</span>
</div>
<br />
<div style="background-color: #0094ff;">
<input style="margin:50px" type="button" value="button" />
<span>我想上下居中</span>
</div>

clearfix :

.clearfix:after {
content: ' ';
display: table;
clear: both
}

.clearfix {
*zoom:1}

clientX、offsetX 、screenX :

clientX 設置或獲取鼠標指針位置相對於當前窗口的 x 座標,其中客戶區域不包括窗口自身的控件和滾動條。
clientY 設置或獲取鼠標指針位置相對於當前窗口的 y 座標,其中客戶區域不包括窗口自身的控件和滾動條。
offsetX 設置或獲取鼠標指針位置相對於觸發事件的對象的 x 座標。
offsetY 設置或獲取鼠標指針位置相對於觸發事件的對象的 y 座標。
screenX 設置或獲取獲取鼠標指針位置相對於用戶屏幕的 x 座標。
screenY 設置或獲取鼠標指針位置相對於用戶屏幕的 y 座標。
x 設置或獲取鼠標指針位置相對於父文檔的 x 像素座標(亦即相對於當前窗口)。
y 設置或獲取鼠標指針位置相對於父文檔的 y 像素座標(亦即相對於當前窗口)。

 

clientX 和x值在實驗過程中,沒有發現值不一樣的例子,所以我認爲它們在效果上是一樣的!
offsetX 是相對於當前窗口內,本觸發事件對象(或者是某一區域)而言,如本例中你單擊a區域,值是相對於a所在<td>區域而言,同理b,c,d都一樣!
clientX ,x,offsetX共同點:它們是相對位置,相對於當前窗口,只是offsetX相對於當前窗口的某個觸發對象的父容器而言!
screenX是相對與客戶端顯示器而言,是絕對位置!

html
1.<select>標籤
1 <!--multiple 屬性規定可同時選擇多個選項 selected默認選中-->
2 <select multiple="multiple" size="2">
3 <option value="volvo">Volvo</option>
4 <option value="saab" selected="selected">Saab</option>
5 <option value="opel">Opel</option>
6 <option value="audi">Audi</option>
7 </select>
2.div滾動條.
<div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div>
3.a標籤
1 a:link { /* 未訪問 */
2 color: #000;
3 }
4 a:visited { /* 已訪問 */
5 color: #F00;
6 }
7 a:hover { /* 在鼠標下 */
8 color: #0F0;
9 text-decoration: none; /*鼠標放上去沒有下劃線;*/
10 }
11 a:active { /* 點擊過的激活鏈接 */
12 color: #00F;
13 }

CSS鼠標樣式語法如下:
任意標籤中插入 style="cursor:*"
例子:<span style="cursor:*">文本或其它頁面元素</span> <a href="#" style="cursor:*">文本或其它頁面元素</a> 注意把 * 換成如下15個效果的一種:

hand是手型
pointer也是手型,這裏推薦使用這種,因爲這可以在多種瀏覽器下使用。
crosshair是十字型
text是移動到文本上的那種效果
wait是等待的那種效果
default是默認效果
help是問號
e-resize是向右的箭頭
ne-resize是向右上的箭頭
n-resize是向上的箭頭
nw-resize是向左上的箭頭
w-resize是向左的箭頭
sw-resize是左下的箭頭
s-resize是向下的箭頭
se-resize是向右下的箭頭
auto是由系統自動給出效果

js操作cookies
1.寫cookies

1 var exp = new Date();
2 exp.setTime(exp.getTime() + '天數'*24*60*60*1000); //有效時間
3 document.cookie = "name=值;expires=" + exp.toGMTString();
2.讀cookies

1 var name=document.cookie.split(";")[0].split("=")[1];
3.刪cookies

1 var date = new Date();
2 date.setTime(date.getTime() - 10000);
3 document.cookie = "name=值; expires=" + date.toGMTString();

插件
jQuery Autocomplete

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章