jquery事件處理

1.on off bind unbind 事件的綁定和事件移除

on(eve,[sel],[data],fn) on可實作委托事件

eg：$("ul").on("click", ".box",data,handlelist);

off(eve,[sel],[fn]

json類型的資料 類型即是數組型也是對象型

on 同時綁定多個事件 中間用空格隔開

off 事件的移除 ，不寫任何參數該元素的所有事件全被移除

bind 綁定事件 unbind 移除事件如果不寫參數全部移除 和on off一緻

綁定多個事件空格隔開

2.尺寸

height([val|fn]) 内容高

width([val|fn])

innerHeight()

innerWidth()//包含padding

outerHeight([options])

outerWidth([options])沒有參數是包含邊框的 有參數為true時是包括外margin的

height width fn參數分别是 index 舊值

設定或者擷取元素的寬和高

擷取出來是沒有像素機關的 px

3内部插入

append(content|fn) fn回調函數問題參數是index索引html目前元素的html内容

appendTo(content)差別： 前後位置颠倒

prepend(content|fn)

prependTo(content)

$(".block").append($(".small"));// 後面的追加到前面的元素之後
$(".small").prependTo($(".block"));           

4.外部插入

after(content|fn)

$(".child").after($(".small")); //small插在child之後

<br/>before(content|fn)<br/>insertAfter(content) <br/>

$(".small0").insertAfter($(".child1")); //small0插在child1之後`

insertBefore(content)

fn 回調函數 index 索引

5.jquery裡面如何建立dom元素 jquery dom innerHTML+=str

var str="<div class='child2'></div>";
        $(".block").html(function (index,old){
           return old+str;
       });           

//var ele=$("<div class='child2'></div>");
        var ele=$("<div></div>");
                ele.addClass("child2");
                console.log(ele);
        //将建立建立的dom 追加到block
        $(".block").append(ele);           

6.包裹

wrap(html|ele|fn) 一對一進行包含

$(".child").wrap(ele); //後面的包裹前面的 `

unwrap() 移除指定元素的父元素

wrapAll(html|ele) 将比對的元素全部包起來

wrapInner(html|ele|fn) fn參數index 将元素的内容包裹起來

$(".box").detach();//這樣就不行
console.log($("ul>li"));           

$(".price").replaceWith(ipt);//後面的替換前面的
ipt.replaceAll($(".price"));//前面的替換後面的           

<div class="price">43￥</div>
<div class="price">41￥</div>
<div class="price">42￥</div>
<div class="price">44￥</div>
$(".price").each(function (){
            var ipt = $("<input type='text' class='price'/>");
            ipt.val($(this).html());
            //$(this).replaceWith(ipt)
            ipt.replaceAll($(this));
        });