Jquery-基礎

來源:互聯網
上載者:User

標籤:cte   匿名   disable   select   led   時間   ...   切換   res   

屬性

attr(“屬性”,“屬性值”)  添加屬性

attr(“屬性”)  擷取屬性值

removeAttr()  移除屬性

//$("").attr("value")可以簡寫為$("").val()

事件

bind(事件類型,處理函數)  綁定事件

事件類型(處理函數)  比如:click()

unbind()  移除所有事件的處理常式

unbind(“click”)  移除所有的click事件處理常式

unbind("click",函數名)  移除click事件的指定名稱的處理函數,這種無法移除匿名函數

dom事件不支援多播(一個事件只能註冊一個處理函數),JQuery支援多播(一個事件可以指定多個處理函數)

頁面載入

window.onload=function(){}  標籤載入完成,並且標籤指定的資源也載入完成

$(document).ready(function(){})==$(function(){})  標籤載入完成,標籤指定的資源可能還沒有載入完成(比片還沒載入完成)

隱式迭代

會自動將數組中的每個元素進行事件綁定

整合事件

hover(fn1,fn2)  fn1表示mouseover的處理函數,fn2表示mouseout的處理函數

toggle(fn1,fn2...fnN)  當元素被click後,輪流執行fn1、fn2、fnN方法(註:1.9版本往後不支援事件切換功能)

          var num=0;                $("div").click(function(){                    num++;                    if(num%2!=0){                        $("div").removeClass("white");                        $("div").addClass("black");                    }else{                        $("div").removeClass("black");                        $("div").addClass("white");                    }                })

one(type,fn)  表示註冊的時間只響應一次,然後失效,type表示事件類型

轉換

JQuery對象轉換成dom對象,通過[下標]的形式返回dom對象

dom對象轉換成JQuery對象,$(dom對象)

動態操作元素

建立元素

$("<span>你好</span>")

添加元素

append()  $("#con").append($("<span>hi</span>"));往容器的最後追加自己

appendTo()  $("<span>hi</span>").appendTo($("#con"))把自己追加到容器的最後

prepend()  $("#con").prepend($("<span>hi</span>"));往容器的開頭追加自己

prependTo()  $("<span>hi</span>").prependTo($("#con"))把自己追加到容器的開頭

after()  同級添加(在當前元素後面)

insertAfter()

before()  同級添加(在當前元素前面)

insertBefore()

刪除元素

empty()  清空子項目

remove(selector)  無參表示把自己幹掉,有參表示移除符合選取器的元素

省市聯動 

var data={                "北京":["朝陽","海澱","大興","丰台","昌平"],                "河北":["邯鄲","石家莊","邢台","保定"],                "山東":["威海","濟南","榮成"]            }            $(function(){                //建立一個省的下拉式清單                var proSel = $(‘<select id="province"></select>‘);                //追加到body裡                $(‘body‘).append(proSel);                //建立一個市的下拉式清單                var citySel=$(‘<select id="city"></select>‘);                //追加到body裡                $(‘body‘).append(citySel);                //each遍曆data,key為鍵,value為值                $.each(data, function(key,value) {                    var province = $("<option></option>");                    province.html(key);                    proSel.append(province);                });                $("#province").change(function(){                    $("#city").empty();                    //遍曆省,key為索引,value為值                    $.each(data[this.value], function(key, value) {                        var city = $("<option></option>");                        city.html(value);                        citySel.append(city);                    });                })            })

樣式操作

addClass()  添加類樣式

removeClass()  移除類樣式

css()  添加樣式

//設定樣式.css("color","red");//設定多個樣式.css({"color":"red","float":"left"});//擷取樣式值.css("color");

鏈式編程

$("p").text("哈哈").css("color","yellow");

註:end() 恢複到最近的一次鏈的破壞

層級選取器

空格,後代元素

>,子項目

+,之後緊鄰的一個同級元素

~,之後所有的同級元素

next()、prev()、nextAll()、siblings()、parent()、childre()

過濾選取器

:first、:last、:eq()、:gt()、:lt()、:not(選取器)、:even偶數、:odd奇數

標題的快速擷取

//普通方法$(‘h1,h2,h3,h4,h5,h6‘)//快捷方法$(‘:header‘)

屬性選取器

[attr=value]    等於

[attr!=value]  不等

[attr^=value]  以此開頭

[attr$=value]  以此結尾

[attr*=value]  包含

[attr1][attr2][attr3]  並且

表單選取器

:input  所有input(不包括select和textare)

:text  所有文字框

:password  所有密碼框

:radio  所有選項按鈕

:checkbox  所有複選按鈕

:submit  所有提交按鈕

:image  所有圖片(type="image")

:reset  所有重設按鈕

:button  所有button

:file  所有檔案

:hidden  所有隱藏欄位

:enabled  可用的

:disabled  停用

:checked  選中(radio、checkbox)

:selected  選中(select)

建立表格

var data=[            {id:"1",country:"china",capital:"北京"},            {id:"2",country:"US",capital:"紐約"},            {id:"3",country:"UK",capital:"不知"}            ];          var table = $("<table></table>");                $(‘body‘).append(table);                //遍曆對象                $.each(data, function(index,obj) {                    var tr = $("<tr></tr>");                    table.append(tr);                    //遍曆屬性                    $.each(obj, function(key,value) {                        var td = $("<td></td>");                        td.text(value);                        tr.append(td);                    });                });

 方法調用

          var id=10;//為window對象定義了屬性id                function showId(){                    alert(this.id);                }                //第一種方式讓this指向Person對象                function Person(){                    this.id=20;//為類定義了屬性id                }                var p=new Person();                p.SayId=showId();//將方法showId賦值給變數                p.SayId();//調用方法,使用p調用的方法,索引showId函數中的this就是p                //第二種方式讓this指向Person對象()                function Person2(fn){                    this.id=20;                    this.SayId=fn;                }                var p2=new Person2(showId);                p.SayId();                //但是上面兩種方法都改變了Person原有的成員,怎麼在不改變原有成員的情況下,讓person對象調用showId方法                //如果傳參,參數是一個一個的,使用call,如果是數組,使用apply                showId.call(new Person());//call表示由哪個對象來調用這個方法,方法中的this就是這個對象

 

Jquery-基礎

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: