1. 程式人生 > >JQuery文檔操作

JQuery文檔操作

nim 委派 options 保存 code width js事件 版本 1.8

********JQuery文檔操作********

1、CSS
    .css()
      - .css("color")  -> 獲取color css值
      - .css("color", "#ff0000") -> 設置值
      - .css({"color": "#cccccc", "border": "1px solid #ff0000"})  -> 設置多個值
      - .css(["color", "border"])  -> 獲取多個值
   .offset
       - 獲取相對位置
       - 比較的對象是html (窗口)
   .position
        
- 獲取相對已經定位的父標簽的位置 - 比較的是最近的那個做過定位的祖先標簽 .scrollTop([val]) - 返回頂部的例子 .scrollLeft([val]) 尺寸: height([val|fn]) - 元素的高度 width([val|fn]) - 元素的寬度 innerHeight() - 帶padding的高度 innerWidth() - 帶padding的寬度 outerHeight([soptions]) - 在innerHeight的基礎上再加border的高度 outerWidth([options])
- 在innerHeight的基礎上再加border的高度 2、文檔操作 內部插入 A.append(B) 吧B添加到A的後面 A.appendTo(B) 吧A添加到B的後面 A.prepend(B) 吧B添加到A的前面 A.prependTo(B) 吧A添加到B的前面 外部插入 A.after(B) 吧B添加到A的後面 A.insertAfter(B) 吧A添加到B的後面 A.before(B) 吧B添加到A的前面 A.insertBefore(B) 吧A添加到B的前面 包裹 wrap(html
|ele|fn) A.wrap(B) --> B包A unwrap() 不抱 - 不要加參數 wrapAll(html|ele) 都包(作為整體包),只包你選中的那個 wrapInner(html|ele|fn) 裏面包 替換 replaceWith(content|fn) A.replaceWith(B) --> B替換A replaceAll(selector) A.replaceAll(B) --> A替換B 刪除 empty() - 清空 內部清空 remove([expr]) - 刪除 整體都刪除 detach([expr]) - 剪切 多保存在變量中,方便再次使用 克隆/復制 clone([Even[,deepEven]]) 3、動畫 基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) 滑動 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) - 淡出到0.66透明度 fadeToggle([s,[e],[fn]]) - .fadeToggle(3000, function () { alert("真沒用3"); }); 自定義 animate(p,[s],[e],[fn])1.8* - css屬性值都可以設置 - 圖片變小(漏氣) 4. 事件處理 之前綁定事件的方式: 1. onclick=clickMe(); function clickMe() {} 2. ele.onclick = function(){} 3. ele.addEventListener("click", function(){}) js事件委派 jQuery綁定事件的方式: 1. $(ele).on("click", function(){}) 2. $("tbody").delegate(".btn-warning", "click", function(){}) 這個3.幾的版本沒有這個方法了,這是3.幾以前版本有的方法 3. $("tbody").on("click",".btn-warning",function(){}) jQuery的事件委派

JQuery文檔操作