JQuery學習筆記2

十八、節點操作
 1、替換節點 將<br/>替換為<hr/>
   $("br").replaceWith("<hr/>");
 2、包裹節點 將粗體用紅色包裹起來，再用用粗體
         $("p").wrap("<font color='red'></font>");
         $("p").wrap("<b></b>");
十九、樣式操作
 1、擷取樣式 attr("class")
 2、設定樣式 attr("class","myclass")
 3、追加樣式 addClass("myclass")
 4、移除樣式 removeClass("myclass");
 5、轉場樣式 toggleClass("myclass");
 6、判斷樣式 hasClass("myclass")
 body *  代表body下的所有控制項
 執行個體    樣式自己定義 .
         $("#div1").addClass("day");
            $("#div1").addClass("night");
            $("#div1").removeClass("night");
            $("#div1").toggleClass("night");

二十一、IECollection 可以按照IE好多版本

二十二、RadioButton 操作
 1、擷取RadioButton的值
  $("input[name=gender]:checked").val();
 2、設定RadioButton 的值（兩種方式val中的[]不能少）
  $("input[name=gender]").val(["男"]);
        $(":radio[name=gender]").val(["男"]);
 CheckBox操作
  擷取CheckBox的值
  
  設定CheckBox 這裡的val 是 checkbox value的值 不是最後面寫的值      
        $(":checkbox").val(["籃球", "足球", "乒乓球1"]);
       
       
二十四、JQuery事件

 1、事件綁定  bind
  $("#btn").bind("click",function(){}) 簡寫為$("#btn").click(function(){})
 2、合成事件  hover  變態的寫法 hover(enterfn,leavefn)
 3、事件冒泡     JQuery也有事件冒泡  從內到外
 4、阻止冒泡  stopPropagation(); 給匿名函數傳個參數 e 調用StopPropagation
 5、阻止預設行為 preventDefault()  根window.event.returnValue=false 效果一樣
 6、 pageX,pageY, 螢幕點擊時的x座標和y座標
  target 擷取觸發事件的元素  相當於srcElement  最原始觸發的控制項
 7、which 判讀滑鼠事件的按鍵(1、左鍵  2、中鍵 3、右鍵)
 8、altKey、shiftKey、ctrlKey獲得alt、shift、ctrl 是否按下 為bool值
 9、keyCode、charCode屬性發生事件時的keyCode charCode (主鍵盤1和小鍵盤1 keyCode不一樣charCode一樣)
 10、移除事件綁定 unbind() 方法 即可移除元素上所有綁定的事件,如果unbind（"click") 則只是移除click事件
 11、一次性事件 發生一次的事件 one
 
 
 
        $(function() {          
            $("#tbMain").click(function() { alert('tbmain'); });
            $("#tr1").click(function() { alert('tr'); });
            $("#td1").click(function(e) { alert('td'); e.stopPropagation();  });
            $("#p1").click(function() { alert('p1'); });

        });
  $("a").click(function(e) { alert('link 不串連了  '); e.preventDefault(); });
  //一次性事件
  $(":button").one("click", function() {
                alert("我只能觸發一次");
            });
二十六、滑鼠
 1、獲得滑鼠的位置

            $(function() {
            $(document).mousemove(function(e) {
                $("#fly").css("left", e.pageX).css("top", e.pageY);
            });
            });
           
            <div id="fly" style="position:absolute">
   <img src="../Image/xiyangyang.gif" />
    
   </div>
二十八、動畫
 1、show()方法和hide()方法  toggle 切換 參數為顯示隱藏的毫秒數
 
  執行個體為QQ效果
      $("#ulqq li:odd").addClass("body");
            $("#ulqq li:even").addClass("header").click(function() {
                $(this).next("li.body").show(400).siblings("li.body").hide(); ;

            });
            $("#ulqq li:first").click(); //類比點擊元素
          

三十、JQuery Cookie  JQuery 外掛程式
 1、Cookie就是儲存在用戶端瀏覽器上的內容
 2、Cookie需要瀏覽器的支援
 3、Cookie與網域名稱相關
 4、Cookie會被瀏覽器自動清除，使用者可能手動清除
 5、Cookie存不重要的資料
 
三十一、JQuery Cookie的使用 (Cookie儲存的是索引值對 參數用的時候在查)
 1、添加對jquery.cookie.js的引用
 2、設定值$.cookie('名字','值'); cookie儲存的是文本
 3、讀取值$.cookie('名字');
 4、在同網域名稱的另一個頁面中也可以讀出來
 5、expires:7 表示瀏覽器儲存幾天
 6、domain:  設定次層網域互相讀
 7、path   設定網站的哪些頁面可以讀
 //讀取
    alert($.cookie("使用者名稱"));
    //設定
    $.cookie("使用者名稱", "tom");
三十五、JQueryUI  這個非常好 用的時候直接調用
 1、JQuery外掛程式特別全 可以設定好多的東西
 2、http://jqueryui.com/ 去這裡下載有Demo
三十六、web開發協助工具輔助介紹
 1、微軟IE8內建的工具 開發人員工具 Internet Explorer Developer ToolBar

作者 liyangfd