【how2j JQuery部分】课后题答案及相关笔记-编程知识

练习题

<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():格式化字符串的方法