JavaScript-Jquery学习笔记------《2》

外部插入：兄弟级关系

//把b插入到a的后面
//$(a).after($(b));
//把b插入到a的前面后面
//$(b).insertAfter($(a));
//把b插入到a的前面
$(b).insertBefore($(a));
//把b插入到a的前面
$(a).before($(b));

包裹：

Wrap：包裹$(a).wrap($(b))：将a用b包裹起来；

<div>div1</div>
<div>div2</div>
<div>div3</div>
<input type="button" value="点击" id="d1">
<input type="button" value="点击" id="d2">
<input type="button" value="点击" id="d3">
<script>
$("#d1").click(function(){
    //wrap包裹
    $("div").wrap('<div></div>');
})
$("#d2").click(function(){
    //wrapAll：把所有的都包裹起来
    $("div").wrapAll('<div></div>');
})
$("#d3").click(function(){
    //wrapInner：把所有的下级都包裹起来(内部包裹)
    $("div").wrapInner('<p></p>');
})
</script>

替换：

$(a).replaceWith($(b)):把a用b替换

$(b).replaceAll($(a)):用b替换a

//替换
$("div").replaceWith("<p></p>");
//替换
$("<p></p>").replaceAll("div");

删除：

empty：删除>删除的是内容；

remove：删除>删除的是整个标签；

//empty:删除的是内容
$("#d3").empty();
//remove：删除的是整个标签
$("#d3").remove()

复制：

clone：克隆>简单来说就会说复制出一个一模一样的元素；

<p class=""ab>这是段落</p>
<div id="d4">div1</div>
<input type="button" value="点击" id="d1">
<script >
    $("#d1").click(function(){
        $("p").clone().appendTo($("#d4"));
    })
</script>

事件：

$(document).$(body)

加载事件：$(socument).ready(fn());

简写：$(function(){});

注：@在工作中使用简写的情况比较多；

       @JS：window.onload           &&      JQ：$(document).ready(fn)

       @JS：把页面上的DOM和资源加载完成之后执行；

       @JQ：把页面的DOM加载之后就会执行；

       区别：资源，对外部资源加载的时间。

       @JQ来源于JS，但是超越JS。

<div>这是一个div</div>
<input type="button" value="点击">
<script>
    //加载事件
    //$(document).rendy(function(){
    //    alert(""这是加载事件);
    //})
    $(function(){
        alert("加载事件");
    })
</script>
<p>段落</p>

事件切换：

hover(hover,out)

<div>这是一个</div>
<script>
    $("div").hover(function(){
        //鼠标放上去
        $("div").html("鼠标悬浮上去")；
    },function(){
        $("div").html("鼠标离开");
    })
</script>

事件：

$(selector).click(fn)：selector的点击事件，会触发fn;

$(selector).dbclick(fn):双击事件;

$(selector).focus()：获得焦点触发的事件；

$(selector).blur():失去焦点；

$(selector).mouseover;鼠标悬浮；

$(selector).mouseout:鼠标离开；

$(selector).mousedown:鼠标按下；

$(selector).mouseup:鼠标抬起；

$(selector).mousemove:鼠标移动；

<div>这是一个</div>
<input type="text" id="d1">
<input type="button" value="点击”>
//cursor:crosshair--->改变瞄准方式
<script>
    $("input").dbclick(function(){
        alert("这是双击事件");
    })
    $("input").focus(function(){
        alert("获得焦点")；
    })
    $("input").blur(function(){
        alert("失去焦点");
    })
    $("div").mousemove(function(event){
        var x = event.clientX;
        var y = wvwnt.clientY;
        $("div").html("坐标："+x+","+y);
    })
</script>

事件处理：

bind("action",fn)：绑定---->所有版本都支持的;重点

unbind()：解除绑定;

<input type="button" value="点击">
<div>这是div</div>
<script>
    //绑定
    $("input").bind("click",function(){
        alert("这是一个绑定事件");
    })
    //$("div").bind("mouseover",function(){
    //    $("div").html("这是bind的mouseover");
    //})
    //如果多个事件，可以使用json数据bind("mouseover":fn1,"muoseout":fn2)
    $("div").bind({"mouseover":function(){
        $("div").html("这是bind的mouseover");
    },"mouseout":function(){
        $("div").html("这是bind的mouseout");
    }});
    //解除绑定
    $("input").bind("click",function(){
        $("div").unbind("mouseout");
    });
</script>

on：绑定<重点>

$(selector).on()

off：解绑

$(selector).off()

one：绑定事件，只会执行一次

<input type="button" value="绑定" id="d1">
<input type="button" value="解绑" id="d2">
<script>
    $("#d1").on("click",function{
        alert("这是on");
    });
    $("#d2").click(function(){
        $("d1").off();
    });
    $("#d3").one("click",function(){
        alert("这是one");
    })
</script>