zoukankan html css js c++ java

2017年6月16号课堂笔记

2017年6月16号星期五空气质量：中度污染~轻度污染

内容：jQuery：remove，bind，attr，on和live，同辈和父辈节点的操作，

keyup/keypress/keydown,focus-blur应用，表单事件/键盘事件，

显示隐藏、淡入淡出，slideup和slidedown

备注：代课老师李老师

内容是自己对比着老师博客找的

一、remove和detach的区别

老师代码：

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function() { 
      var  $first=$("#first");
      //获取点击事件
        $first.click(function(){
          alert("first");
        })
         //清空节点  empty    $first.empty();
        //删除节点  $first.remove();  
         $first.detach();   // 删除节点但是  保留了 事件
         $first.prependTo("body");
    });
</script>
</head>
<body>
     
     <div id="main">
        main
       <div id="first">first</div>
     </div>     
</body>
</html>

二、bind（绑定和解绑）

老师代码1：

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function() { 
     /*  $("input").mouseover(function(){
         alert("mouseover");
      }) */
      
      //同时绑定多个事件
      $("input").bind(
      {
        mouseover:function(){
         alert("mouseover");
        },
        mouseout:function(){
         alert("mouseout");
        },
        click:function(){
         alert("click");
        }
      })
      
      
    
    });
</script>
</head>
<body>
  <input  type="button"  value="bind">
</body>
</html>

老师代码2：

    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function() {
          //给button按钮绑定事件
            $("button").bind(
                    {
                        mouseover:mb,
                        mouseout:ob,
                        click:cb
                    }
            );

            //获取解除绑定的按钮
            $("[type='button']").click(function(){
                //  $("button").unbind("mouseover");解除一个
                // $("button").unbind("mouseover").unbind("click");解除两个
                $("button").unbind("mouseover click");//解除两个   多个使用空格隔开
            })
        });
        function  mb(){
            $("button").css("color","red");
        }
        function  ob(){
            $("button").css("color","blue");
        }
        function  cb(){
            alert("大家辛苦了！");
        }

    </script>
</head>
<body>

<form action="#" method="get">
    用户名：<input type="text"  name="userName"  placeholder="请输入用户名">
    密码：<input type="password"  name="pwd"  placeholder="请输入密码">
    <button type="submit">登录</button>
    <button type="button">解除绑定</button>
</form>
</body>
</html>

三、attr(设置或返回被选元素的属性值)

老师代码：

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function() { 
       $("img").click(function(){
         alert($(this).attr("src"));  //获取指定的属性值
        // $(this).attr("title","这是一个可爱的小猫咪！");  增加单个属性
        $(this).attr({"title":"斗地主","alt":"大家一起斗地主！","src":"images/1.gif"});  //json格式设置多个属性
         alert($(this).attr("src"));
         //removeAttr
         $(this).removeAttr("src");
       })
         
    });
</script>
</head>
<body>
     <img src="images/cat.jpg"/>
</body>
</html>

四、on和live区别

老师代码：

<!DOCTYPE HTML>
<html>
<head>

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<style type="text/css" >
*{
    font-size:12px;
}

</style>
<script type="text/javascript">
$(document).ready(function(){
    //删除当前行商品元素   这种 只能删除  之前页面存在的元素
/*      $(".del").click(function(){
        $(this).parent().parent().remove();
     }) */
    
      $(document).on("click",".del",function(){
        $(this).parent().parent().remove();
     }) 
    
    
    //1.9之后的版本  废除了  此方法
    /*  $(".del").live("click",function(){//可以删除新增元素和之前存在的元素
        $(this).parent().parent().remove();
     })  */

    //新增一行
     $(".add").click(function(){
         //创建节点
     var $newRow= $("<tr>"
      +"         <td>                                                                                  "
      +"         <input name='' type='checkbox' value=''/>                                             "
      +"     </td>                                                                                    "
      +"     <td>                                                                                     "
      +"            <img src='images/sang.gif' class='products'/><a href='#'>天堂雨伞</a></td><td>￥32.9元   "
      +"     </td>                                                                                    "
      +"     <td>                                                                                     "
      +"             <img src='images/subtraction.gif' width='20' height='20'/>                            "
      +"             <input type='text' class='quantity' value='1'/>                                   "
      +"             <img src='images/add.gif' width='20' height='20'/>                                "
      +"    </td>                                                                                     "
      +"    <td>                                                                                      "
      +"            <a href='#' class='del'>删除</a>                                                    "
      +"    </td>                                                                                     "
          +"</tr> ");
       //在table中新增节点
       $("table").append($newRow);   
     
     })

})

</script>
</head>
<body> 
    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <th><input type='checkbox' />全选</th>
            <th>商品信息</th>
            <th>宜美惠价</th>
            <th>数量</th>
            <th>操作</th>
        </tr>
           <tr>
               <td>
               <input name="" type="checkbox" value=""/>
           </td>
           <td>
                  <img src="images/sang.gif" class="products"/><a href="#">天堂雨伞</a></td><td>￥32.9元
           </td>
           <td>
                   <img src="images/subtraction.gif" width="20" height="20"/>
                   <input type="text" class="quantity" value="1"/>
                   <img src="images/add.gif" width="20" height="20"/>
          </td>
          <td>
                  <a href="#" class="del">删除</a>
          </td>
       </tr>
       <tr>
               <td>
               <input name="" type="checkbox" value=""/>
           </td>
           <td>
               <img src="images/iphone.gif" class="products"/><a href="#">苹果手机iphone5</a></td><td>￥3339元
           </td>
           <td>
                   <img src="images/subtraction.gif" width="20" height="20"/>
               <input type="text" class="quantity" value="1"/>
               <img src="images/add.gif" width="20" height="20"/>
          </td>
          <td>
                  <a href="#" class="del">删除</a>
          </td>
       </tr>

 </table>
 
 <a href="#" class="add">添加</a>
</body>
</html>

五、同辈和父辈节点的操作

老师代码：

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function() { 
    
    //获取body的子元素个数  alert("body的子元素个数:"+$("body").children().length);
    
    //获取下个同辈元素  $("#first1").next().css("color","red");
    
    //获取上个同辈元素    $("#first3").prev().css("color","red");       
    
    //获取上下所有的同辈元素  $("#first2").siblings().css("color","red");   
    
     //获取父辈元素   $("#second1").parent().parent().css("color","red");
     
     //获取祖先元素   parents()查询的boby
     $("#third1").parents().css("color","red");
         
    });
</script>
</head>
<body>
  body
 <div id="main">
     main
     <div id="first1">
       first1
            <div id="second1">
                       second1
                         <div id="third1">
                           third1
                      </div>
            </div>
     </div>
     
     <div id="first2">
       first2
            <div id="second2">
                       second2
            </div>
     </div>
     <div id="first3">
       first3
            <div id="second3">
                       second3
            </div>
     </div>
 </div>
</body>
</html>

六、keyup/keypress/keydown（键盘事件）

未找到老师代码，参考资料如下：

参考资料出自：http://www.cnblogs.com/leolai/archive/2012/08/01/2618386.html

用户在使用键盘时会触发键盘事件。目前，对键盘事件的支持主要遵循的是DOM0级。

　　在英文输入法下，所有浏览器都遵循以下三个事件：

keydown: 当用户按下任意键时触发，而且按住不放的话，会重复触发此事件。
keypress: 当用户按下字符键时触发，而且按住不放的话，会重复触发此事件。按下Esc键也会触发这个事件，Safari3.1之前的版本按下非字符键时也触发。
keyup: 当用户释放键时触发。

　　在中文输入法下，浏览器之间则表现得不一致，主要情况如下：

IE,Chrome,Safari：触发keydown和keyup，不触发keypress。
Firefox：首次按下按键时触发keydown，不触发keypress。在停止输入法并改变文本框内容(如按下回车或者空格键)后会触发keyup。
Opera：keydown, keypress和keyup都不触发。
PS : 只有在触发keyup事件才能获得修改后的文本值。

　　所有元素都支持以上三个事件，一般情况下只有在文本框时才经常用到。

　　键盘事件的触发过程具体是这样的: 在用户按下键盘上的一个字符键时，首先会触发keydown事件，然后是keypress事件，最后是keyup事件。其中，keydown和keypress事件是在文本框发生变化之前被触发；而keyup在文本框发生变化之后被触发。如果用户按下一个键不放，就会重复触发keydown和keypress事件。在用户按下一个非字符键时，首先触发keydown事件，然后就是keyup事件。如果用户按下一个键不放，就会重复触发keydown。

　　当我们监听这三个事件时，最想得到的数据信息就是键码(keyCode)和字符编码(charCode)了。

　　键码(keyCode)

　　在发生keydown和keyup事件时，event对象的keyCode属性会包含一个代码，keyCode属性的值就是小写字母或数字对应的ASCII码(点击这里查看ASCII码表)，在程序中可通过如下代码来获得keyCode值：

//EventUtil是一个封装的对象，用来处理跨浏览器事件
var textbox = document.getElementById('myText');
EventUtil.addHandler(textbox,'keydown',function(event){
      event = event || window.event;
      alert(event.keyCode);
});

　　以下是keydown和keypress事件存在的一些特殊情况：

在FF和Opera中，按分号键时keyCode值为59，但IE,Chrome和Safari则返回186
在Safari3之前的版本中，上、下、左、右箭头和上翻(PageUp)、下翻(PageDown)键返回大于63000的值。

　　字符编码(charCode)

　　在发生keypress事件时，FF、Chrome和Safari的event对象都支持一个charCode属性，charCode属性的值就是按下的字符键对应的ASCII编码，这个属性在按下非字符键或发生keydown和keyup事件时值为0；IE和Opera则是在keyCode中保存字符键的ASCII编码。所以，要想跨浏览器获得字符编码，代码如下：

//获取字符编码
var getCharCode = function(event){
      var charcode = event.charCode;
      if(typeof charcode == "number" && charcode != 0){
            return charcode;
      }else{
            //在中文输入法下 keyCode == 229 || keyCode == 197(Opera)
            return event.keyCode;
      }
};

　　这个方法首先检查charCode属性是否包含数值(在不支持这个属性的浏览器中，值为undefined)，在判断是否等于0(兼容keydown和keyup事件)，如果条件成立，则返回改值，否则返回keyCode的值。之前的例子获取字符编码如下：

var textbox = document.getElementById('myText');
EventUtil.addHandler(textbox,'keydown',function(event){
      event = event || window.event;
      alert(getCharCode(event));
});

　　在得到了字符编码后，可以使用String.fromCharCode()将其转换为实际的字符。

　　键盘事件的应用

　　1、过滤输入——屏蔽某些字符的输入

　　达到的效果：只能输入数字，输入其他字符没有反应。不屏蔽辅助输入的按键，如退格键，方向键，复制，粘贴等。

　　原理很简单：在文本框修改前，获取字符编码，判断合理性，不成立则阻止键盘的默认事件。看起来很简单，但由于浏览器的兼容问题，实现起来还是有点难度。代码如下：

var handler= function(e){
    e = e || window.event;
    var charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
    var re = /d/;
    //FF和safari3.1以前版本会对方向键、退格键、删除键触发keypress事件 charcode > 9 可修复此Bug
    //!e.ctrlKey 不屏蔽Ctrl+C,Ctrl+V 
    if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){
        //阻止默认事件
        if(e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue = false;
        }                            
    }
};
EventUtil.addHandler(textbox,'keypress',handler);
//监听粘贴事件
EventUtil.addHandler(textbox,'paste',function(e){
    e = e || window.event;
    var clipboardData = e.clipboardData || window.clipboardData;
    if(!/^d*$/.test(clipboardData.getData('text'))){
        //阻止默认事件
        if(e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue = false;
        }    
    }
});

　　在这个例子的基础上加以修改和调整，就可以应用于放过或屏蔽任何输入文本框的字符。

　　很遗憾，还有一个bug未能解决，就是在中文输入法时keypress事件失效问题。

　　针对中文输入法的Bug，目前找到的解决办法是：在文本框加入属性style="ime-mode:disabled" IE和FF下可禁用输入法；在Chrome，Safar下可为文本框添加keydown事件，判断event.keyCode是否等于299，是的话就阻止keydown默认事件，这种方法对IE也有效。而对于Opera则没有找到解决办法。

七、表单事件应用

老师代码：

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单事件</title>
<style type="text/css">
#login{
     400px;
    height: 250px;
    background-color: #f2f2f2;
    border:1px solid #DDDDDD;
    padding: 5px;
}
#login fieldset {
    border: none;
    margin-top: 10px;
}
#login fieldset legend{
    font-weight: bold;
}
#login fieldset p{
    display: block;
    height: 30px;
}
#login fieldset p label {
    display: block;
    float:left;
    text-align: right;
    font-size: 12px;
     90px;
    height: 30px;
    line-height: 30px;
}
#login fieldset p input {
    display: block;
    float:left;
    border: 1px solid #999;
     250px;
    height: 30px;
    line-height: 30px;
}
#login fieldset p input.code{
     60px;
}
#login fieldset p img{
    margin-left: 10px;
}
#login fieldset p a{
    color: #057BD2;
    font-size: 12px;
    text-decoration: none;
    margin: 10px;
}
#login fieldset p input.btn{
    background: url("./images/login.gif") no-repeat;
     98px;
    height: 32px;
    margin-left: 60px;
    color: #ffffff;
    cursor: pointer;
}
#login fieldset p input.input_focus{
    background-color: #BEE7FC;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    //鼠标事件 click事件提交表单
    $(".btn").click(function(){
    alert("表单提交");
      $("#login").submit();
    });
    //鼠标移至按钮，按钮字体变粗。移出按钮则字体为正常字体
    $(".btn").hover(function(){
      $(this).css("font-weight","bold");
    },function(){
      $(this).css("font-weight","normal");
    });
    
    //用户名输入框的焦点事件
     $("[name='member']").focus(function(){
     $(this).addClass("input_focus");
     });
     $("[name='member']").blur(function(){
     $(this).removeClass("input_focus");
     });


    //键盘事件，敲击回车键进行表单提交,keyCode的数值代表不同的键盘按键
   $(document).keypress(function(key){
      if(key.keyCode==13){
       $("#login").submit();
      }
   });
   

});
</script>
</head>
<body>
<form id="login">
  <fieldset>
    <legend>用户登录</legend>
    <p>
        <label>用户名：</label>
        <input name="member" type="text" />
    </p>
    <p>
        <label>密码：</label>
        <input name="password" type="text" />
    </p>
    <p>
        <label>验证码：</label>
        <input name="code" type="text" class="code" />
        <img src="images/code.gif" width="80" height="30" /><a href="#">换一张</a>
    </p>
    <p>
             <input name="" type="button" class="btn" value="登录" />
             <a href="#">注册</a><span>|</span><a href="#">忘记密码？</a>
    </p>
  </fieldset>
</form>
</body>
</html>

八、显示隐藏、淡入淡出

老师代码：

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function() { 
    //显示速度 有  slow  normal fast  还可以是具体的时间  单位是 毫秒
     $("#showImg").click(function(){
       //$("img").show("slow");
       $("img").fadeIn(3000);
     })
     
     $("#hideImg").click(function(){
      // $("img").hide("fast");
      $("img").fadeOut(3000);
     })
    
    });
</script>
</head>
<body>
  <input  type="button" id="showImg" value="显示">
  <input  type="button" id="hideImg" value="隐藏">
  
  <img  src="images/cat.jpg" style="opacity:1"/>
</body>
</html>

九、slideup和slidedown

老师代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style type="text/css" >
ul{
    list-style:none;
    padding:5px;
    210px;
    border:1px solid red;
}
a{
    text-decoration:none;
    line-height: 30px;
}
.menu_style li{
     border-bottom:1px solid #666;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function() {
    //让li下标大于5的显示和隐藏   toggle  也可以让元素 显示或者隐藏
/*     $("input").click(function(){
       $("li:gt(5):not(:last)").toggle();
    }) */
    //动态改变高度
    $("input").toggle(function(){
     $("li:gt(5):not(:last)").slideUp("slow");
    },function(){
     $("li:gt(5):not(:last)").slideDown("slow");
    });
    
    });
</script>
</head>
<body>
<div id="menu" class="menu_style">
  <ul>
    <li><a href="#">手机通讯、数码电器</a></li>
    <li><a href="#">食品饮料、酒水、果蔬</a></li>
    <li><a href="#">进口食品、进口牛奶</a></li>
    <li><a href="#">美容化妆、个人护理</a></li>
    <li><a href="#">母婴用品、个人护理</a></li>
    <li><a href="#">厨卫清洁、纸、清洁剂</a></li>
    <li id="menu_07" class="element_hide"><a href="#">家居家纺、锅具餐具</a></li>
    <li id="menu_08" class="element_hide"><a href="#">生活电器、汽车生活</a></li>
    <li id="menu_09" class="element_hide"><a href="#">电脑、外设、办公用品</a></li>
    <li class="btn">
      <input name="more_btn" type="button" value="展开或关闭菜单项" />
    </li>
  </ul>
</div>
</body>
</html>

十、老师辛苦了！

查看全文

相关阅读:
jQuery报 SyntaxError: expected expression, got '<'错误
 【转】JSP使用上传文件，并生产高清缩略图示例
 [转]Oracle中使用Rownum分页详细例子
 [转]oracle设计数据库应选择正确的数据类型
 [转]oracle数据类型和对应的java类型
 [转]如何判断js中的数据类型
 [转]理解JavaScript中的事件处理
 [转]关于jquery中html()、text()、val()的区别
 [转]jquery 点击表格变为input可以修改无刷新更新数据
 招聘网站需求分析

原文地址：https://www.cnblogs.com/wsnedved2017/p/7027161.html