练习题
<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
<!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():格式化字符串的方法
5. 方法
$.trim() 去除首尾空白
6.JSON字符串和JSON对象
使用 $.parseJSON()
将JSON格式的字符串,转换为JSON对象
Json对象和Json字符串的区别