Jquery筆記

時間  2019-12-24
標籤 jquery 筆記 欄目 JQuery 简体版
原文   原文鏈接

                                                   JQuery筆記

一、節點操做插入節點

$(html)函數中，$(「<form> <input  name=’usernmae’> </form>」);javascript

Append() 向每一個匹配的元素內部追加內容//理解：至關於把<body>裏的標籤剪切到appent的位置。（在開始位置追加）css

appendTo() 將全部匹配的元素追加到指定的元素中（在原有標籤後追加）。html

prepend()向每一個匹配的元素內部前置內容（內容A追加到B元素開始的位置）;java

prependTo()將全部匹配的元素前置到指定的元素中數組

After() 在每一個匹配的元素插入到指定元素的後面app

insertAfter()將全部匹配的元素插入到指定元素的後面ide

function temp()函數

{工具

$("#selt option").each(function(index,element)動畫

{

    $("#selt").prepend($(element));

}

二、包裹節點wrap

l         Wrap方法：$(「label」).wrap(「<b> </b>」)；//在全部label的兩端添加<b>標籤。

用一個指定的元素來包裹。

l         wrapAll(); 將匹配的元素用一個元素來包裹。不連續移動第一個<lable>標籤的位置下。

l         wrapInner(html)包含指定標籤子元素。

三、替換節點replacewith

replaceWith

$(function())

$(「lable’){replaceWith(「<b>這裏是B標記</b>」});

replaceAll(selector選擇器)

$(functon())

{

$(「<b>這裏是B標籤</b>」).replaceAll(「label」);

}

四、複製節點clone(true)

語法：clone（） clone(true)

$("label").clone().prependTo("div");

 

 

五、刪除節點 empty()

兩種刪除元素的方法，

一、empty()用於刪除元素的方法，使用empty()方法刪除元素的子元素；使用remove()方法刪除當前元素。

$(function())

{
$(「div’).empty();

}

二、remove()方法用於從Dom裏刪除包裝裏全部元素。

用法：通常用一個按鈕onclick事件：$("#div1 b").remove().appendTo("#div2");

六、屬性操做atter

l          attr（name）次方法用於獲取指派到包裝集裏第一個元素指定屬性的值。

若是爲空，或第一個元素沒有該屬性，就返回undefined.

l          Atter(name,value)

用法：$(function)

{

$(「input」)進行封裝.atter(「size,」5」)；//把文本框input  size的長度改成5}

Atter(atteributes)$(「font」).atter(size:5,face:」黑體」);

刪除屬性：

l         removeAttr(name)

 

七、樣式操做addClass()

添加指定一個或多個類名稱道包裝集的全部元素，指定多個類時中間用空格分隔

修改元素樣式類變

<style type="text/css">

.A{border:1px solid black}

.B{height:50px;width:200px;margin-bottom:30px}

</style>

<script type="text/javascript">

$(function()

{

$("div").addClass("A B");//重點在這裏

}

)

</script>

</head>

 

<body>

<div>這裏是div1</div> <div>這裏是div2</div>

</body>

 

l         removeClass(Class)  中間用空格分開

$(「div’).removeClass();

 

l         toggleClass(name) 使用該方法能夠完成類開關操做來控制class屬性的刪除/設置操做。

<style type=」text/css」>

.show(display:none;)

<style>

function show()

{

$("input").toggleClass("show");

}

8、獲取和設置樣式css（name，value）

 css(name,value);

$(「div」).css(「color」,」red」);

$(「div」).css({color:」red」,」width」:」500px」})

Css(name)//name計算樣式值。返回字符串css的屬性值。

九、設置元素內容（html ）

操做html（）和html（text）

$（Function（）{alert($(「div」).html)()}）

$（Function（）{alert($(「div」).html)(「<input/>」)}）//能夠用heml直接替換標籤。

操做Text()和text（content）//l鏈接而成的字符串。//會把全部的」div」裏的內容顯示出來。

$(alert($(「div」).text()))//顯示div內的內容

$(alert($(「div」).text(「abc」)))//經過傳遞參數來設置包裝集元素的文本內容。//實質修改替換div內部的內容。

10、處理表單元素（重點）val()

 

l         Val（）此方法不帶參數，用於返回匹配集裏第一元素的value屬性集。包裝集裏第一元素不是表單元素，就會拋出錯誤。

alert($("input[name=grade]:checked").val());//經過選擇器獲取組名：grade的全部單選按鈕，接着經過屬性過濾器找出選中項。

l         Val（value）//傳值

alert($("input[name=txt]").val("abc"));//取準確的值若是是：「input」就是給全部的方法

 

l         Val（values）方法致使包裝集裏任何複選框、單選按鈕、select 元素的選項變爲選中（checked 或 selected）

l            $("select").val(["bbb","sel"]); //下拉框注意：bbb是外面的值，而sel是標籤value=的值就會選中。

 

選擇器

層次選擇器(操做元素的)

l         $（「select option」）//返回select option全部option的元素

l         $(「parent >child’)//選取pareent元素下chilid子元素。

 

過濾選擇器（基本）經過元素的位置和下標

l         $(「div:first」)//選取第一個元素    ：last

l         $(「input:not(.myClass)」)//選取類名不是myClass的元素

l         $:even   偶數 從o開始   ：odd 奇數

l         ：eq(Index) 選取索引等於index的元素。0開始

l         小於 ;lt(index)

l         ：header//標題選擇器

內容過濾選擇器 包含的子元素或文本內容上

l         $(「tr:contains(‘李’)’) 過濾tr中姓李的文本內容

l         ：empty//不包含子元素  $(「tr:empty」).html(「<b>不詳</b>」);//選中爲空的 添加不詳

l         包含 :$(「div:has(p)」) 選取含有<p>元素的<div>元素。

l         ：parent 含有子元素或者文本的元素。

可見性過濾選擇器 根據可見狀態來選擇相應的元素

l         <input type=hidden> $(「input:hidden」);

要讓隱藏的顯示出來 $(「div:hidden」).css(「display」,」block」)

l         Visible 選中全部可見的元素  $(div:visible)

屬性過濾選擇器 經過元素的屬性來獲取相應的元素。用【】

l         【attribute】 選取擁有此屬性的元素 $(「div[id]」)

l         [attribute=value} 選取屬性的值爲value的元素 $(「div[title=test]」)選取屬性title爲test的div元素

l         【attribute!=value】

l         [attribute^-=value] 選取屬性test開始的<div>元素

l         【attribute$=value】結束的元素

l         【attribute*=value】包含有*value的元素

 

子元素過濾選擇器 只要將元素的父元素和子元素區分清楚

l         ：nth-chilc(index/even/odd/equation)  選取每一個父元素下的第index個子元素從1算起

1．  :Nth-child(even)能選取每一個父元素下的索引值是偶數的元素。

2．  :nth-child(odd)能選取每一個父元素下的索引值是奇數的元素。

3． :nth-child(2)能選取每一個父元素下索引值等於2的元素

4． :nth-chlid(3n)選取父元素下索引是3的倍數的元素 n是從零開始的。

5．  ：nth-child(3n+1)

與eq(index)只匹配一個元素 而 nth-child爲每個父元素匹配子元素

l         ：first-child 選取每一個父元素的第一個子元素

 與:first 只返回單個元素 而 ：first-child 選取每一個父元素的第一個子元素

l         ：last-child 選取每一個父元素的最後一個子元素。

l         ：only-child 若是某個元素是它父元素中惟一的子元素，那麼將會被匹配。若是父元素中含有其餘元素，側不會被配置。

表單選擇器 經過表單元素的類型進行元素的抓取

l         ：input 元素 獲取全部的<input> $(:input)

l         :text   $(:text)

l         :Password  $(:password)

l         :file

l         :hidden

表單對象屬性過濾選擇器

l         ：enabled 選取全部可用的元素 $(「#form1：enable」)選取id 爲form1表單中全部可用元素  相反：disable

l         :checked 選取全部被選中的元素(單選 和複選框) $(「input:checked」)

l         :selected 選取全部被選中的選項元素（下拉列表）$(「select :selected」)選被選中選項

事件和動畫

一、綁定事件處理程序 bind() 

l         Bind(name(事件動做click mousemove等),[,date],function()){alert (「hello jQuery!」)};

  $(function(){

 

   $(「input」).bind(「click」,function(){alert(「hello,JQuery」)})；

})

簡寫方法：$(「input」).click(function())

l         one() 和上面同樣只創建一次性的事件處理程序。

l         $(「#btn」).unbind(「click」,myFunc1事件名)

事件冒泡

一、調用Event 事件對象stopPropagation 阻止冒泡事件

 合成事件：

Hover（enter，leave）方法：用於創建匹配元素的mouseover 和mouseovet事件

移入移出2個動做$（「myDiv」）.hover(function(){$(「#msg」).html})

Toggle(fn1,fn2,fn3...)用於連續單擊事件。

$(function(){

   $(「input」).toggle(function(){

   $(「div」).css(「display」,」none」);

},function(){

  $(「div」).css(「display」,」block」);

})

 

})

默認加載事件

用$(「#btn」).click();

 

動畫效果（經過改變元素的位置，改變元素的寬和高，改變元素的透明度等）

l         經過wedth()/height()來獲取或設置元素的寬度和高度。

若是不帶參數，能夠以像素爲單位獲取顯示元素的高度或寬度，返回值以數字類型返回。而且獲取document及window對象的高度和寬度。 返回值的像素爲單位的數值。

$(document).height() 和$(window).height();;

若是帶有參數 $(「div」).height(500).width(500);

l         Offset() 獲取元素在當前視窗的相對偏移

$(function(){

Var os=$(「div」).offset();

Var left=」left:」+os.left;

Var top=」top:」+os.top;

})

l         Position() 獲取元素相對最近的一個position樣式屬性設置relative 或者absolute的祖父的相對偏移。（大層套用小層 小層相對於大層）用法同上

l         scrollTop() 和scrollLeft()

經常使用動畫效果

使元素顯示和隱藏

一、show（）/hide()  $(「input」).hide();

慢慢的顯示和隱藏效果

$(「div」).hide(1000)  $(「div」).show(1000);

若是隱藏效果完成後能夠用show()方法的第二個參數 $(「div」).show(1000,function(){}$(「top」).html(「顯示出來」))

二、toggle(speed) 對方法show 和 hide的封裝 添加判斷操做。實現切換效果

$（function(){

  $(「input’).click(function(){$(「div’).toggle(1000)}.)

}）下面有2個div 一個是顯示的 一個是隱藏的。

使元素淡入淡出 fadeIn(speed)/fadeout

$(function()){$(「input」).toggle(function(){$(「div」).fadeOur(1000)},function()${「div」}.fadeIn(1000))}

fadeTo(speed,opactity)設置半透明度 $(「div」).fadeTo(1000,.0.5);

工具函數：

一、Trim()語法：$.trim(value) 只能接收字符串不能接收數組。

二、$.each()方法：

常見for循環:$(div).get(0)轉換成Dom對象。

For（var i=0;i<$(div).length;i++）

{

Var obj=$(「div」)[i];

 

}

例子：Each(iterator)迭代函數，傳遞函數的參數別設置爲包裝集裏當前元素的下標，而當前元素可經過this關鍵字來訪問。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程