JQuery學習

JQuery基礎學習

1. 語法： 

    $(document).ready(function(){
    文檔加載後運行
    --- jQuery functions go here ----
    
    });
    //1 事件：
    $(this).clickf(function(){});
    $(document).ready(function)
    $(selector).dblclick(function)
    $(selector).focus(function)
    
    $(this).hide()
    $(selector).show(speed,callback);//可控制速度
    $(selector).toggle(speed,callback);
    
    //2 選擇器
    $('p.info')
    
    $('[href='#']')//帶有href 屬性，且值爲#的全部元素
    $("[href!='#']")
    $("[href!='.jpg']")//以'.jpg'結尾的全部元素
    
   // 3 修改css的樣式
    $("p").css("background-color","red");
    
    //4 解決命名衝突
    $.noConflict();
    jQuery(document).ready(function(){
      jQuery("button").click(function(){
        jQuery("p").text("jQuery 仍在運行！");
      });
    });
    
   // 5 動畫：淡入淡出
    fadeIn()
    fadeOut()
    fadeToggle()
    fadeTo("slow",0.15)//控制效果
    
   // 6 動畫：滑動
   slideDown()
    slideUp()
    slideToggle()
    
   // 7 動畫：animate()
    $(selector).animate({params},speed,callback);
    $("div").animate({left:'250px'},'300');
    height:'toggle'
    height:'+=150px',//相對位置
    
    //如需對位置進行操做，記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute。
    
   // 8 動畫中止:stop
    $(selector).stop(stopAll,goToEnd);
    $("#panel").stop();
    $("#panel").stop(false,false);
    
   // 9 動畫：連接
    jQuery - Chaining
    
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);

2. html 獲取

 

/*1 獲取內容*/
text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容（包括 HTML 標記）
val() - 設置或返回表單字段的值

關於增刪元素

//        1 attr屬性值

$("#w3s").attr("href")
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
 $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
 $("#w3s").attr("href", function(i,origValue){//含回調函數
    return origValue + "/jquery";
  });

//        2 text()參數及回調函數
$("#w3s").text('new test');

 $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });

//        3 添加元素
append() - 在被選元素的結尾插入內容  成爲子節點
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素以後插入內容         成爲兄弟節點
before() - 在被選元素以前插入內容
------------------------------------------------------
var txt1="<p>Text.</p>";               // 以 HTML 建立新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 建立新元素
var txt3=document.createElement("p");  // 以 DOM 建立新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素

//        4 刪除元素
remove(".italic") - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素   

 

1. 關於CSS操做

   //        1 添加class
   $("h1,h2,p").addClass("blue");
   
   //        2 移除class
   $("h1,h2,p").removeClass("blue");
   
   //        3  toggleClass() 方法
   $("h1,h2,p").toggleClass("blue");
   
   //        4 CSS()
   $("p").css("background-color");//樣式值
   css("propertyname","value");
   $("p").css({"background-color":"yellow","font-size":"200%"});
   
   //        5 css尺寸方法
   
   width()
   height()
   innerWidth()
   innerHeight()
   outerWidth()
   outerHeight()

    

2. jQuery遍歷

 　　

• parent()
• parents()
• parentsUntil()

---

 

• children()
• find()

$("div").children("p.1");

　　水平遍歷

• siblings()  全部同胞元素
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

---

 

　　元素過濾

first(), last() 和 eq()   filter() 和 not() 

---

 

1. AJAX加載

   //        1 jQuery load() 方法
   $(selector).load(URL,data,callback);
   必需的 URL 參數規定您但願加載的 URL。
   可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。
   可選的 callback 參數是 load() 方法完成後所執行的函數名稱
   
   $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
       if(statusTxt=="success")
         alert("外部內容加載成功！");
       if(statusTxt=="error")
         alert("Error: "+xhr.status+": "+xhr.statusText);
     });
   
   <%
   response.write("This is some text from an external ASP file.")
   %>
   
   //        2 get()
   $.get(URL,callback);
   $("button").click(function(){
     $.get("demo_test.asp",function(data,status){
       alert("Data: " + data + "\nStatus: " + status);
     });
   });
   
   //        3 post()
   $.post(URL,data,callback);
   $("button").click(function(){
     $.post("demo_test_post.asp",
     {
       name:"Donald Duck",
       city:"Duckburg"
     },
     function(data,status){
       alert("Data: " + data + "\nStatus: " + status);
     });
   });
   
   <%
   dim fname,city
   fname=Request.Form("name")
   city=Request.Form("city")
   Response.Write("Dear " & fname & ". ")
   Response.Write("Hope you live well in " & city & ".")
   %>