【how2j JQuery部分】课后题答案及相关笔记

日光倾

已于 2024-06-27 14:05:15 修改

阅读量443

点赞数 16

分类专栏： how2j阅读记录文章标签： jquery 笔记前端

于 2024-05-08 16:07:31 首次发布

本文链接：https://blog.csdn.net/diguangxihua/article/details/138575632

版权

how2j阅读记录专栏收录该内容

13 篇文章 0 订阅

订阅专栏

练习题

<script src="jquery.min.js"></script>
 <script>
	 $(function(){
		 $('tr:odd').css({"background-color":"#f8f8f8"});
	 });
</script>
<style>
table{border-collapse:collapse;width:90%;}
tr{border-bottom-style: solid;border-bottom-width: 1px;border-bottom-color: lightgray;height:35px;}
td{width:25%;text-align:center;}
  
</style>
<table id="t">
   <tr >
       <td>id</td>	<td>名称</td>	<td>血量</td>	<td>伤害</td>
    </tr>
   <tr >
       <td>1</td>	<td>gareen</td>	<td>340</td>	<td>58</td>
    </tr>
   <tr >
       <td>2</td>	<td>teemo</td>	<td>320</td>	<td>76</td>
    </tr>
   <tr >
       <td>3</td>	<td>annie</td>	<td>380</td>	<td>38</td>
    </tr>
   <tr >
       <td>4</td>	<td>deadbrother</td>	<td>400</td>	<td>90</td>
    </tr>
</table>

id	名称	血量	伤害
1	gareen	340	58
2	teemo	320	76
3	annie	380	38
4	deadbrother	400	90

prop与attr的区别

与prop一样attr也可以用来获取与设置元素的属性。
区别在于，对于自定义属性和选中属性的处理。
选中属性指的是 checked,selected 这2种属性

对于自定义属性 attr能够获取，prop不能获取
对于选中属性
attr 只能获取初始值，无论是否变化
prop 能够访问变化后的值，并且以true|false的布尔型返回。
所以在访问表单对象属性的时候，应该采用prop而非attr

jQuery prop() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("#p1").html("attr('checked'): " + $("input").attr('checked')
					  + "<br>prop('checked'): " + $("input").prop('checked'));
	});
});
</script>
</head>
<body>

<p><b>注意:</b>确认或取消选中该复选框,然后单击按钮刷新内容。</p>
<button>查看attr() 和 prop() 的值</button>
<br><br>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p id="p1"></p>

</body>
</html>

在这里插入图片描述

3.事件

3.1 键盘事件

keydown 表示按下键盘
keypress 表示按住键盘
keyup 表示键盘弹起
这三者的区别分别表现在发生的先后顺序，获取到的键盘按钮值，已经对输入框的文本取值这三方面
先后顺序：按照 keydown keypress keyup 顺序发生
键盘按钮值：
通过event对象的which属性获取键盘的值
keydown和keyup 能获取所有按键，不能识别大小写
keypress 不能获取功能键，如F1 SHIFT等，能够识别大小写
文本取值：
keydown和keypress：不能获取最后一个字符
keyup：获取所有字符
键盘事件代码说明

<script src="jquery.min.js"></script>

<script>
  var order = 0;  //计数器，判断语句调用的前后次序
  var clearTimer=null; //定时器
  
  $(function(){
    /*
        selector：触发事件的类型
        e：显示的信息
        $(this)：触发事件的元素(#i)
        .val()该元素的值
    */
    $("#i").keydown(function(e){
       var selector = "keydown";
    
       show(selector,e,$(this).val());
    });
    
    $("#i").keypress(function(e){
       var selector = "keypress";
       show(selector,e,$(this).val());
    });
    
    $("#i").keyup(function(e){
       var selector = "keyup";
       show(selector,e,$(this).val());
    });
      
  });
    
  /*inputvalue：输入框的当前值，通常通过 $(this).val() 获取。*/
  function show(selector,e,inputvalue){
       
       clearTimeout(clearTimer);

       action(selector);
       key(selector,e);
       value(selector,inputvalue);

       clearTimer= setTimeout(clear,4000);
  }
    
  //行为 
  function action(selector){
      $("#"+selector+"Action").css("background-color","green");
      $("#"+selector+"Action").html("顺序: " + (++order ) );
  }
    
  //值
  function value(selector,value){
      $("#"+selector+"Value").html(value);
  }
    
  //按键
  function key(selector,e){
      $("#"+selector+"Key").html(e.which);
  }
   
  //清屏
  function clear(){
    order = 0; 6
    $("tr#action div").css("background-color","red");
    $("tr div").html("");
  }
    
  </script>
  <style>
  tr#action div{
    border: 1px solid black;
    height:50px;
    background-color:red;
  }
   
  tr#value div,tr#key div{
    
    height:50px;
    background-color:#d1d1d1;
  }
    
  td{
   width:25%;
  }
  </style>
  输入框：<input id="i">
  <table width="100%">
  <tr>
    <td></td>
    <td>keydown</td>
    <td>keypress</td>
    <td>keyup</td>
  </tr>
  <tr id="action">
    <td>行为</td>
    <td><div id="keydownAction"></div></td>
    <td><div id="keypressAction"></div></td>
    <td><div id="keyupAction"></div></td>
  </tr>
    
  <tr id="key">
    <td>按键</td>
    <td><div id="keydownKey"></div></td>
    <td><div id="keypressKey"></div></td>
    <td><div id="keyupKey"></div></td>
  </tr>
    
  <tr id="value">
    <td>取值</td>
    <td><div id="keydownValue"></div></td>
    <td><div id="keypressValue"></div></td>
    <td><div id="keyupValue"></div></td>
  </tr>
    
  </table>

3.2 鼠标事件

mousedown 表示鼠标按下
mouseup表示鼠标弹起

mousemove表示鼠标进入
mouseenter表示鼠标进入
mouseover表示鼠标进入

mouseleave表示鼠标离开
mouseout表示鼠标离开

进入事件有3个 mousemove mouseenter mouseover
mousemove ：当鼠标进入元素，每移动一下都会被调用
mouseenter ：当鼠标进入元素，调用一下，在其中移动，不调用
mouseover：当鼠标进入元素，调用一下，在其中移动，不调用

mouseenter 和 mouseover的区别
mouseenter: 当鼠标经过其子元素不会被调用
mouseover：当鼠标经过其子元素会被调用

mouseleave 和 mouseout的区别
mouseleave: 当鼠标经过其子元素不会被调用
mouseout：当鼠标经过其子元素会被调用

<script src="jquery.min.js"></script>



<script>
$(function(){

    $("#downup").mousedown(function(){
       $(this).html("鼠标按下");
    });
    $("#downup").mouseup(function(){
       $(this).html("鼠标弹起");
    });
    
    var moveNumber  =0;
    var enterNumber  =0;
    var leaveNumber  =0;
    var overNumber  =0;
    var outNumber  =0;
     
    var enterNumber1  =0;
    var overNumber1  =0;
     
    var leaveNumber1  =0;
    var outNumber1  =0;
     
    $("#move").mousemove(function(){
      $("#move span.number" ).html(++moveNumber);
    });
    $("#enter").mouseenter(function(){
      $("#enter span.number" ).html(++enterNumber);
    });
    $("#leave").mouseleave(function(){
      $("#leave span.number" ).html(++leaveNumber);
    });
    $("#over").mouseover(function(){
      $("#over span.number" ).html(++overNumber);
    });
    $("#out").mouseout(function(){
      $("#out span.number" ).html(++outNumber);
    });
     
    $("#enter1").mouseenter(function(){
      $("#enter1 span.number" ).html(++enterNumber1);
    });
    $("#over1").mouseover(function(){
      $("#over1 span.number" ).html(++overNumber1);
    });
     
    $("#leave1").mouseleave(function(){
      $("#leave1 span.number" ).html(++leaveNumber1);
    });
     
    $("#out1").mouseout(function(){
      $("#out1 span.number" ).html(++outNumber1);
    });
     
});
     
</script> 
     

 
<style>
    div{
      background-color:pink;
      margin:20px;
      padding:10px;
    }
     
    .subDiv{
      background-color:green;
      margin:10px;
    }
     
    .parentDiv{
      background-color:pink;
      height:80px;
    }
     
    table{
     width:100%;
     border-collapse:collapse;
      table-layout:fixed;
    }
    td{
      border: 1.5px solid #d1d1d1;
      vertical-align:top;
      padding:20 0;
    }
     
</style>

<table >
    
    <tr>
      <td width="100px">事件</td>
      <td>效果演示</td>
    </tr>

    <tr>
      <td>mousedown <br />
      mouseup<br /></td>
      <td>
        <button id="downup" style="margin-left:20px">鼠标按下弹起测试</button>    </td>
    </tr>
    
    <tr>
      <td>
        mousemove<br />
        mouseenter<br />
        mouseover<br />
        mouseleave<br />
        mouseout
       </td>
      
       <td>

          <div id="move">mousemove 当鼠标进入元素，每移动一下都会被调用 次数<span class="number">0</span></div>
          <div id="enter">mouseenter 当鼠标进入元素，调用一下，在其中移动，不调用 次数<span class="number">0</span></div>
          <div id="over">mouseover 当鼠标进入元素，调用一下，在其中移动，不调用 次数<span class="number">0</span></div>
          <div id="leave">mouseleave 当鼠标离开元素，调用一下 次数<span class="number">0</span></div>
          <div id="out">mouseout 当鼠标离开元素，调用一下 <span class="number">0</span></div>
    </tr>

    <tr>
      <td>mouseenter
      
       <br />
      
      mouseover
      
      /td>
      
      <td>
       
      <div id="enter1" class="parentDiv">
      mouseenter 经过其子元素不会被调用 次数 <span class="number">0</span>
       
      <div class="subDiv">div中的子元素      </div>
      </div>
       
          <div id="over1" class="parentDiv">
      mouseover  经过其子元素会被调用 次数<span class="number">0</span>
       
         <div class="subDiv">div中的子元素      </div>
      </div>    </td>
    </tr>
    <tr>
      <td>mouseleave<br />
        mouseout    </td>
      <td>
      <div id="leave1" class="parentDiv">
      mouseleave 经过其子元素不会被调用 次数<span class="number">0</span>
       
         <div class="subDiv">div中的子元素      </div>
      </div>
       
      <div id="out1" class="parentDiv">
   
      mouseout 经过其子元素会被调用 次数<span class="number">0</span>
       
         <div class="subDiv">div中的子元素      </div>
      </div>    </td>
    </tr>
  </table>

3.3 事件绑定

所有的事件处理，都可以通过on() 绑定事件来处理

$("selector").on("event",function);

$(“selector”) : 通过dollar符号来选择元素
.on()：用于为选定的元素绑定函数
event:表示要绑定的事件类型
function:当事件发生时，函数被调用

3.4 触发事件

文档加载好之后，就触发dblclick双击事件，而不是通过去手动双击。

$("selector").trigger("event");

4. AJAX

$.ajax({
url: page,
data:{“name”:value},
success: function(result){
$(“#checkResult”).html(result);
}
});
$.get(
page,
{“name”:value},
function(result){
$(“#checkResult”).html(result);
}
)
$.post(
page,
{“name”:value},
function(result){
$(“#checkResult”).html(result);
}
);
$(“#checkResult”).load(page);
var data = $(“#form”).serialize(); //serialize():格式化字符串的方法