jQuery学习笔记(三)
- 案例实现登陆界面验证：需求分析：当文本框字符为空时显示红色，不为空显示白色
<head>
<title>实º¦Ì现?的Ì?效¡ì果?是º?当Ì¡À文?本À?框¨°离¤?开a时º¡À背À3景¡ã色¦?为a红¨¬色¦?</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":text").blur(function () {
if ($(this).val().length <= 0) {
$(this).css("background", "red");
}
else {
$(this).css("background","white");
}
});
});
</script>
</head>
<body>
姓?名?:<input type="text" id="txtName" /><br />
密¨¹码?:<input type="text" id="txtPassword" /><br />
<input type="button" value="登Ì?陆?" />
</body>
8． 案例实现：动态添加球队 需求分析：鼠标移到球队上时背景显示红色，单击将其添加到另一个元素中
<head>
<title></title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#ul1 li").mouseover(function () {
$(this).css("background", "red").siblings().css("background", "white");
});
$("#ul1 li").click(function () {
var li = $(this).remove();
$(this).css("background","white").appendTo("#ul2");
});
});
</script>
</head>
<body>
<p>鼠º¨®标À¨º移°?上¦?去¨£¤背À3景¡ã变À?红¨¬，ê?点Ì?击¡Â添¬¨ª加¨®到Ì?另¢¨ª一°?个?列¢D表À¨ª中D</p>
<ul id="ul1" style="width:200px;float:left">
<li>中D国¨²队¨®</li>
<li>日¨?本À?队¨®</li>
<li>美¨¤国¨²队¨®</li>
<li>英®¡é国¨²队¨®</li>
</ul>
<ul id="ul2" style="float:left;width:200px"></ul>
</body>
9. 节点的操作：
替换节点：$(“br”).replaceWith(“<hr />”); 将<hr />替换为<br />
包裹节点：wrap（）方法是将所有元素用指定的标签包裹起来
$(“b”).wrap(“<font color=”red”></font>”) 将粗体颜色设置为红色
- 样式操作
获取样式attr(“class”)
设置样式attr(“class”,”myclass”)
追加样式addClass(“myclass”)()
移除样式 removeClass(“myclass”)
切换样式 toggleClass(“myClass”)
判断是否有样式 hasClass(“myclass”)
10. 案例实现：网页开关等效果等
<head>
<title></title>
<style type="text/css">
.oldclass{background:red;}
.newclass{font-size:40px}
.night{background:black;}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#opencloselight").click(function () {
$(document.body).toggleClass("night");
});
$("#addclass").click(function () {
$("#test").addClass("newclass");
});
$("#removeclass").click(function () {
$("#test").removeClass("newclass");
});
$("#toggleclass").click(function () {
$("#test").toggleClass("newclass");
});
});
</script>
</head>
- 案例实现：美女图片黑白照隔秒显示
<head>
<title></title>
<style type="text/css">
.filter{filter:Gray;}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
// $(function () {
// var toggle = function () { $("#test").toggleClass("filter"); };
// setInterval("toggle()", 1000);
// });
function toggle() {
$("#test").toggleClass("filter");
}
setInterval("toggle()",1000);
</script>
</head>
<body>
<div id="test">filter滤?镜¦Ì的Ì?使º1用®?<br />
<img src="136689109.jpg" />
</div>
<input type="button" value="改?变À?黑¨²白ã¡Á色¦?" id="changed"/>
</body>
12. 案例实现：单击表格行，单击的显示高亮，其余不显示样式
<head>
<title></title>
<style type="text/css">
.infor{padding:5px;border:solid 1px red;}
.myclass{background-color:red;}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("table tr").click(function () {
$(this).addClass("myclass").siblings().removeClass("myclass");
});
});
</script>
</head>
<body>
<table class="infor">
<tbody>
<tr><th>学¡ì号?</th><th>姓名</th><th>成¨¦绩¡§</th></tr>
<tr><td>1009401</td><td>小罗</td><td>85</td></tr>
<tr><td>1009402</td><td>小王</td><td>88</td></tr>
<tr><td>1009403</td><td>小周¨</td><td>83</td></tr>
</tbody>
</table>
</body>
- 案例实现：表格中的行单击时显示高亮，其余不显示高亮
<head>
<title></title>
<style type="text/css">
.infor{padding:5px;border:solid 1px red;}
.myclass{background-color:red;}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("table tr").click(function () {
$(this).addClass("myclass").siblings().removeClass("myclass");
});
});
</script>
</head>
<body>
<table class="infor">
<tbody>
<tr><th>学¡ì号?</th><th>姓名</th><th>成绩</th></tr>
<tr><td>1009401</td><td>小罗</td><td>85</td></tr>
<tr><td>1009402</td><td>小王</td><td>88</td></tr>
<tr><td>1009403</td><td>小周</td><td>83</td></tr>
</tbody>
</table>
</body>
13. 案例实现：聚焦控件的高亮显示
<head>
<title> </title>
<style type="text/css">
.color{background:red;}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input").focus(function () {
$(this).addClass("color");
});
$("input").blur(function () {
$(this).removeClass("color");
});
});
</script>
</head>
<body>
<p>个人信息</p>
姓名<input type="text" id="textName" />
密码<input type="text" id="txtPassword" />
</body>
- 案例实现：搜索框效果显示
<head>
<title></title>
<style type="text/css">
.newclass{border:solid 1px red;}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#research").focus(function () {
$("#research").addClass("newclass").val("");
});
$("#research").blur(function () {
var text = $("#research").val();
if (text.length <= 0) {
$("#research").removeClass("newclass").val("请输入关键字");
}
});
});
</script>
</head>
<body>
<p>搜索框显示</p>
<input type="text" value="请输入关键字" id="research" /><input type="button" value=搜索一下"/>
</body>
代码实现2：
<head>
<title>链式编程实现搜索框效果</title>
<style type="text/css">
.writing{color:Gray;}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#keyword").val("请输入关键字")
.blur(function () {
if ($("#keyword").val() == "") {
$("#keyword").val("请输入关键字").addClass("writing");
}
})
.focus(function () {
if ($("#keyword").val() == "请输入关键字") {
$("#keyword").val("").removeClass("writing");
}
});
});
</script>
</head>
<body>
<input type="text" id="keyword" />
</body>
- RadioButton的操作
取得RadioButton的值
$(“input[name=gender].checked”).val()
<input type=”radio” name=”gender” value=”男” checked=”checked” id=”radio1”>男
<input type=”radio” name=”gender” value=”女” checked=”checked” id=”radio1”>女
<input type=”radio” name=”gender” value=”未知” checked=”checked” id=”radio1”>未知
设置RadioButton 的值
$(“input[name=gender]”).val([“女”]);
或者
$(“:radio[name=gender]”).val([“女”]);
注意：val中参数的[]不恩能够少
对RadioButton的选择技巧对于CheckBox和Select列表框也适用。除了可以使用val批量设置RadioButton、CheckBox等的选中以外，还可以设置checked属性来单独设置控件的选中状态
$(“btn1”).attr(“checked”,true);
案例练习：CheckBox的全选，全不选，反选
- 事件
l jQuery中的事件绑定：jQuery中调用事件其实是用这种方法：$(“#btn”).bind(“click”,function(){}),但是每次调用太麻烦，所以jQuery使用$(“#btn”).click(function(){})来进行简化
l 事件冒泡：jQuery中和JavaScript中一样是事件冒泡的。
l 如果想获得事件的相关信息，只要给响应的匿名函数增加一个参数：e，e代表的就是事件对象。调用事件对象的stopPropagation()方法终止冒泡。e.stopPropagation()
l $(“tr”).click(function(e){alert(“tr被点击”);e.stopPropagation();}) //注意函数的参数是e
l 阻止默认行为：有的元素有默认行为，比如超链接点击后会转向新链接、提交按钮默认会提交表单。如果想阻止默认行为只要调用事件对象的preventDefault()方法 此方法等同于window.event.returnValue=false $(“a”).click(function(e){alert(“所有的超链接暂时全部禁止点击”);e.preventDefault();});
$(function () {
$("#sm").click(function (e) {
if ($("#txt").val().length <= 0) {
alert("提交信息不能为空");
e.preventDefault();
}
});
});
属性：pageX、pageY、target获得触发事件的元素与this的区别：this是获得当前触发事件，target获得最原始的冒泡事件的源。
l 鼠标事件
pageX pageY
案例实现：随鼠标移动的图片
<head>
<title></title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(document).mouseover(function (e) {
$("#fly").css("left", e.pageX).css("top",e.pageY);
});
});
</script>
</head>
<body>
<div id="fly" style="position:absolute"><img src="136689109.jpg" height="20" width="20"/></div>
</body>