1.点击1变红，点击2变红但是1红去掉

image.png

<style>
    .bgcolor{
        background-color:red;
    }
</style>
   <ul>
       <li class="ben">1</li>
       <li class="ben">2</li>
       <li class="ben">3</li>
       <li class="ben">4</li>
   </ul>
<script>
$(function(){
    $(".ben").click(function(){       
       $(this).addClass("bgcolor").siblings().removeClass("bgcolor");
     })
})   
</script>

2.jq append后无法获取元素

jquery.on()事件来获取未加载页面元素内容

//append添加后的需要要用on才能获取
  $("body").on("click",".btn_delete",function(){
      $(this).parentsUntil(".panel-default").remove();
        var id=$(this).attr("data-id");
        $.get("/dodelete",{"id":id},function(result,status){
            if(result=="1"){
              alert("删除成功");
            }
        })
   })
 例如：
$(".btn_delete").click(function(){
  $(this).parentsUntil(".panel-default").remove();
})
则不行

3.点击按钮删除内容

  <div class="panel panel-default">
       <div class="panel-body">
           <h4>姓名：{{=username }}</h4>
           <P>内容：{{=content }}</P>
           <p style="float: right">时间:{{=datetime }}</p>
           <button type="button" class="btn btn-danger btn_delete" data-id="{{=id}}">删除</button>
       </div>
   </div>


$(".btn_delete").click(function(){
  $(this).parentsUntil(".panel-default").remove();
})

3.清空内容

<div id="modelBox">
         <div class="panel panel-default">
       <div class="panel-body">
           <h4>姓名：{{=username }}</h4>
           <P>内容：{{=content }}</P>
           <p style="float: right">时间:{{=datetime }}</p>
           <button type="button" class="btn btn-danger btn_delete" data-id="{{=id}}">删除</button>
       </div>
   </div>
      <div class="panel panel-default">
       <div class="panel-body">
           <h4>姓名：{{=username }}</h4>
           <P>内容：{{=content }}</P>
           <p style="float: right">时间:{{=datetime }}</p>
           <button type="button" class="btn btn-danger btn_delete" data-id="{{=id}}">删除</button>
       </div>
   </div>
 </div>

 $("#modelBox").html("");   //清空

4.单独设置一个属性存储数值，在获取属性值

      <% for(var i=0;i<pageNumber;i++){ %>
                  <li class="btn_page" data-page="<%=i%>"><a href="#"><%=i%></a></li>
                  <% } %>

  $("body").on("click",".btn_delete",function(){ 
        var id=$(this).attr("data-id");
   })

5.ajaxStart和ajaxStop

• ajaxStart：AJAX 请求开始时执行函数
• ajaxStop：AJAX 请求结束时执行函数

<div class="loading">
    <p><img src="./images/data-loading.gif" alt="数据装载中" /></p>
    <p>数据装载中......</p>
</div>  
<button value="点击" id="btn">点击</button>

                $("#btn").click(function(){
                    $.get("/do",function(result){
                        alert("1");
                    })
                })

                $(".loading").ajaxStart(function(){
                    $(this).css("visibility","visible"); 
                    $(this).animate({
                        opacity: 1
                    },0);
                }).ajaxStop(function(){
                    alert("2");
                    $(this).animate({
                        opacity: 0
                    },500);
                });
        

6. 设置样式到style

.css("a","b");
直接将样式加入style里里面可用于设置显示或隐藏
<p style="a:b;"> </p>

7.animate的使用

animate(params,[speed],[easing],[fn])

• params:一组包含作为动画属性和终值的样式属性和及其值的集合
• speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
• easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
• fn:在动画完成时执行的函数，每个元素执行一次。

<div class="block" style="display:inline-block;position:absolute;left:100px;">111</div>
.animate({left: '+=50px'}, "slow"); //执行后left:150px;
.animate({left: '+50px'}, "slow");  //执行后left:+50px;

• 使用left和right要设置position:absolute;
• .animate的实质：将css的样式加入style标签，然后动态的变化，比如width: "90%"将从0增加到90%

8.获取select选择的值

select表示下拉框，下拉框的每一项都是一个option，option开始结尾标签中的内容会显示在页面上，value属性的值则是用于在JQuery中用val方法获取并发送给服务器的。定义了selected的属性值为selected时，表示当前option被选中
change()方法

<div id="carname">
        <select>
            <option value="" selected="selected">请选择汽车厂商</option>
            <option value="BMW">宝马</option>
            <option value="Audi">奥迪</option>
            <option value="VW">大众</option>
        </select>
        <span>汽车名称</span>
</div>


var carname =$("#carname").children("select");
carname.change(function(){
  var carnameValue=$(this).val(); //获取到的是value属性的值
}

9.下拉框自动生成

可以直接$(“<option></option>”)的方法来建立下拉框中的选项，然后用appendTo/append这样的方法加入到下拉框中

    <div id="cartype">
        <select></select>
        <span>汽车类型</span>
    </div>  

var cartype=$("#cartype").children("select");
for(var i=0;i<carTypeArr.length;i++){
     $("<option value='"+carTypeArr[i]+"'"+ ">"+carTypeArr[i]+"</option>").appendTo(cartype);
或者
     cartype.append($("<option value='"+carTypeArr[i]+"'"+ ">"+carTypeArr[i]+"</option>"));
    }

10.data方法

可以用于缓存数据。缓存可以提高系统的运行效率，降低服务器端的负荷

<div></div>
$("div").data("blah");  // undefined
$("div").data("blah", "hello");  // blah设置为hello
$("div").data("blah");  // hello
$("div").data("blah", 86);  // 设置为86
$("div").data("blah");  //  86
$("div").removeData("blah");  //移除blah
$("div").data("blah");  // undefined

11.给表格设置奇偶不同的颜色

    $("tbody tr:odd").css("background-color","#ECE9D8");
    或者
$("tbody tr:even").css("background-color","#ECE9D8");

12. .html();

• .html("");清空所以内容
• .html();获取内容

13.注册事件on和触发事件trigger

有些事件浏览器自带如click可使用on注册一个事件

<button id="btn">点击</button>

 $("#btn").on("click",function(){
        alert("1");
})
给btn注册了一个click事件，这个事件当鼠标点击就会触发

 $("#btn").on("ben",function(){
        alert("1");
     })
 $("#btn").click(function(){
         $("#btn").trigger('ben');
})
给btn注册了一个ben事件,用.trigger('ben')方法触发

14. 键盘事件

图片.png

<input type="text">

 $("input").keyup(function(event){
    var keycode = event.keyCode;
    console.log(keycode);
})

15.input标签的事件

• focus 获取焦点
• change 输入域改变
• blur 失去焦点
• select 选择

主动去触发
  $(selector).trigger("select")
触发后使用
  $(selector).select(function(){

})

15. 事件冒泡

子div与父div绑定同一个事件，当触发子div事件父div也会触发

<h1>事件冒泡</h1>
<div class="div1">div1
    <div class="div2"> div2
        <div class="div3">div3
            <button id="btn">点击</button>
        </div>
    </div>
</div>

$(function() {
        $(".div1").click(function(){
        $(this).css("background-color","red");
    })
    $(".div2").click(function(){
        $(this).css("background-color","green");
         //event.stopPropagation();
         //return false;
    })
  })

加了event.stopPropagation();或者return false;

01.gif
没加event.stopPropagation();或者return false;
02.gif

16.编辑表格

image.png

17.return false的作用

<h1>事件冒泡</h1>
<div class="div1">div1
    <div class="div2"> div2
        <div class="div3">div3
            <button id="btn">点击</button>
        </div>
    </div>
</div>

$(".div1").click(function(){
                 alert("2");
        $(this).css("background-color","red");
        $(".div2").click(function(){
            $(this).css("background-color","green");
                alert("3");
             return false;
        })
        alert("1");
    })  

加了return false;

[图片上传中...(04.gif-a3ccde-1554905700554-0)]
没加return false;
04.gif

18.JQuery的函数返回

大部分方法都会返回执行这个方法的JQuery对象，因此可以采用链式方法的写法来编写给予JQuery的代码

var inputObj=$("<input type='text'>").css({
"background-color":tdObj.css("background-color"),
"border-width":0,
"font-size":"16px"
})
返回$("<input type='text'>")对象

19.jq的事件环

image.png
05.gif

<button id="btn1">点击1</button>  
$("#btn1").click(function(){
        var name="ben";
        setTimeout(function(){
            alert(name);
        },2000); //两秒后执行
})

不是简单的向外暴露，btn1点击后再点击btn2没有反应（无法调用btn1里面的函数）

<button id="btn1">点击1</button>   
<button id="btn2">点击2</button>   
$("#btn1").click(function(){
        var name="ben";
        function ben(){
            alert(name);
        }
        setTimeout(ben,2000); //两秒后执行
    })
    
    $("#btn2").click(function(){ 
        ben();
    })