$——jquery小結

====================jquery==========================
0,$()==jquery()
1.jQuery 語法 :$(selector).action()
2. 幾乎可以選擇任何想要的元素及組合元素。
【元素選擇器】$("p#demo").選取所有 id="demo" 的 <p> 元素。
【屬性選擇器】$("[href]").選取所有帶有 href 屬性的元素。
【css選擇器】$("p").css("background-color","red");
3. 【jquerycs】jquery庫文件一般情況下是不會影響到網速的,
	現在的最新版本v3.0.0,是90K左右.
4.  jQuery 是爲處理 HTML 事件而特別設計的.
5. jQuery hide() 方法.事件和函數關係如下,由事件觸發函數。
	$("#hide").click(function(){
	$("p").hide();
  });  按鈕:<button id="hide" type="button">隱藏</button>
6. $(function(){ }是$(document).ready(function()			        的簡寫。文檔載入完畢就執行
7. 【參數】例如。$("p").hide(1000);1000爲時間,單位ms.
hide(1000,callback函數)例:hide(1000,function(){alert("警告")}).
動畫結束後執行callback。
8. 【toggle();】相當於結合了hide()和show().

9.文檔對象模型。DOM。DOM 是被視爲節點樹的 HTML
10,attr()方法用於獲取屬性值。
11,回調函數:
function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  }
12,我們將學習用於添加新內容的四個 jQuery 方法:
append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素之後插入內容
before() - 在被選元素之前插入內容
13.刪除
remove()刪除元素
empty()刪除子元素
14,設置 CSS 類
addClass() 例子:$("h1,h2,p").addClass("t1 t2");向h1,h2,					p三個元素添加t1和t2兩個類。
removeClass()移除類,toggleClass()切換類。
15,jQuery css() 方法
$("#div2").height(400).width(400).css({ "background-color": "yellow", "font-size": "200%" }).css("background-color","red");

17.設置屬性值。attr() 
.attr("href","http://www.w3school.com.cn/jquery");
18.遍歷:
.parents()祖先元素。所有祖先。
$("span").parentsUntil("div");返回介於<span>與<div> 元素之間的所有祖先元素
.parent()直接父。
.find() 後代	$("p").find("span").css('color','red');
				選擇p元素所有後代爲span元素。設置顏色爲紅。
				$("p").find("span");//等價於 $("p span");
.children()直接子元素.

19同胞:
$("h2").siblings("p");

19.1$("h2").next();下一個同胞元素。
$("h2").nextAll();所有跟隨的同胞元素。
$("h2").nextUntil("h6");介於兩者之間的所有同胞元素。
19.2 prev(), prevAll() & prevUntil()同上。

20,過濾:
$("div p").first();選擇第一個(div元素中的P元素)
$("div p").last();
$("p").eq(1);選擇第二個p元素。因爲0是第一個索引號。

$("p").filter(".intro");選擇類名爲intro的所有p元素。
$("p").not(".intro");選擇類名非intro的所有元素。
20,日期時間選擇器(插件中的)
            $('#startdate').datetimepicker({
                format: 'yyyy',顯示格式爲年
                weekStart: 1,每週開始天爲週一
                autoclose: true,選擇後自動關閉
                startView: 4,首先顯示的視圖爲年(4),
                minView: 4,精度爲年(4),
                forceParse: false,強制解析輸入框中的值
                language: 'zh-en',
                startDate:2014
            });
================= ajax ===========
21,
ajax:異步的 JavaScript 和 XML。網頁局部更新。
==================================
22,
$("span", this).addClass("bar");
將 span 選擇器限定到 this 這個環境中,只有被點擊元素中的 span 會得到附加的 class。

23.
最簡單的寫法是$(function(){}),這是簡寫。和$(document).ready(function(){}) 是相同的,jQuery(function($){ }) 爲了防止和其它類庫衝突

24,設置多個屬性
$("#tab").attr({"href":"http://www.baidu.com","A":"a"})

25,$(IDX)
若id爲變量,則不要引號。

26,jQuery的選擇器中的通配符
對於服務器控件,應選擇解析之後的標籤。<asp:TextBox  ID="txt_zrs"> 解析爲<input
$("input[id$='zrs']")找id是以zrs結尾的input標籤。

27】
多個對象執行一個函數:
$("#btn1,#btn2").click()
一個對象執行多個函數:
$("#btn").mouseover().mouseout()或者:$("#btn").bind({mouseout:function,mouseover:function})

28】委託
delegate() 方法的事件處理程序適用於當前或未來的元素(比如由腳本創建的新元素)
$("div").delegate("p","click",function);

29】事件冒泡
一個單擊操作會觸發alert函數的執行
click事件接着會向樹的根方向傳播,廣播到父元素,然後接着是每個祖先元素,只要是它的某個後代元素上的單擊事件被觸發,事件就會傳給它。
如果你運行了$('a').bind(…),而後新的鏈接經由AJAX加入到了頁面中,則你的bind處理程序對於這些新加入的鏈接來說是無效的。而另一方面live和delegate則是被綁定到另一個祖先節點上,因此其對於任何目前或是將來存在於該祖先元素之內的元素都是有效的。

30】只讓函數觸發一次:.one()
$("#btn").one("click",function(){alert(45)})

31】監聽瀏覽器窗口大小改變事件:.resize()
$(window).resize(function)
監聽對象滾動條事件.scroll()
$("#div1").scroll(function)

32】.toggle()函數之間輪流切換
$("#btn").toggle(function1(),function2(),functionN(),...)

33】
$("#menu1 .dw").html("單位:人,元");
id爲menu1下的class爲dw的對象

34】
var cc=$("#filelist").find("input[name='fm']").val();
#filelist下,name爲fm的input元素的值。

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