jquery

web

• <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
  
  • jquery库引入代码

jQuery对象

jQuery方法

.css("background" , "#ffbbaa") 样式改变背景颜色;
.hover(覆盖时 , 离开时) 鼠标覆盖事件的使用;
return false 1) 清楚默认行为 2) 阻止事件冒泡;
var a = JSON.stringify(b) 将b转换为字符串形式;

练习案例

1. 表格录入及删除信息

//在body元素中.添加("点击事件",点击"id名为table的元素里的a元素"时,发生匿名事件{反馈值到removeTr(值为"#table a")} 
    /*以下为错误示范：
      $("#table a").click(function(){
        return removeTr(this)
      })
      错误原因：由于表格的内容即所点击的对象"#table a"是经过#button的点击事件下动态产生出的元素，无法从html文档里直接获取，要使用 .on 委托父元素查找出所需要的元素。
    */
    $("body").on("click","#table a",function(){
      return removeTr(this)
    })
        $("#button").click(function(){
          $("<tr></tr>").append("<td>" + $("#name").val() + "</td>")
                        .append("<td>" + $("#email").val() + "</td>")
                        .append("<td>" + $("#salary").val() + "</td>")
                        .append("<td><a href='#'>Delete</a></td>")
                        .appendTo("#table tbody")
                        //点击反馈方法2：
                        .find("a")
                        .click(function(){
                          return removeTr(this)
                        })
        })

2. 元素替换和插入

$(function(){
   alert(1);
   var $bj2 = $(".bj").clone().attr("class","bj2");
   var $gz = $(".gz").replaceWith($bj2);
    alert(2);
   $(".bj").replaceWith($gz);
  })

3. css和js动画

$("#kf").hover(function (){
$(this).animate({right:"0px"});
$('.kf-l').text('客服中心>>');
}, function () {
$(this).animate({right:"-170px"});
$('.kf-l').text('客服中心<<');
});