jquery(三)width insertBefore insertAfter appendTo prependTo remove 添加和取消事件的几种方式

jquery(三)

jquery取width，高度等同

 <style>.div1{
     width: 100px;height: 200px;background-color: red;margin: 10px;border: 20px solid black;padding: 10px} </style>
<script>$(function() {
     alert($("#div1").width()); alert($("#div1").innerWidth()); //width+paddingalert($("#div1").outerWidth()); //width+padding +marginalert($("#div1").outerWidth(true)); //width+padding +margin+border})</script>

insertBefore insertAfter appendTo prependTo remove

<script>$(function() {
     $("span").insertBefore("#div1"); //插入到某个前面$("#div1").insertAfter("span"); //插入到某个后面$("span").appendTo("div"); //插入到子节点末尾$("span").prependTo("div"); //插入到子节点最前面$("span").remove(); //删除节点//compare insertbefore before$("span").insertBefore("#div1"); //span插入到div1前面$("#div1").before("span"); //div1的前面是span}) </script>

添加事件的几种方式

 <script>$(function() {
     //1.给一个事件添加一个函数$("#div1").click(function() {
     alert("hello");});//2.同时给多个事件添加一个函数，多个事件用空格隔开var i = 1;$("span").on("click mouseover",function() {
     $(this).html(i++);});//3.给不同的事件添加不同的函数$("#div1").on({
     click: function() {
     alert("点击");},mouseover: function() {
     $(this).css("background-color", "blue");//alert("over");}});//4.事件委托---》emmm我测试bu通过---可怕不$("ul").on("click", "li",function() {
     $("this").css("backgroundColor", "green");});//添加li节点var i = 6;$("button").click(function() {
     $("<li>dddd<li>").appendTo($("ul"));});})</script>

取消事件的几种方式

<script>function show() {
     alert("show~");}$(function() {
     $("#div1").click(show);$("#div1").click(function() {
     alert("hello");});//取消所有的事件$("#btn1").click(function() {
     $("#div1").off();})//取消某个事件下指定的函数$("#btn1").click(function() {
     $("#div1").off('click', show);})})</script>