jQuery学习笔记(三)

案例实现登陆界面验证：需求分析：当文本框字符为空时显示红色，不为空显示白色

<head>

$(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 />

</body>

8．案例实现：动态添加球队需求分析：鼠标移到球队上时背景显示红色，单击将其添加到另一个元素中

<head>

$(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>

</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>

.oldclass{background:red;}

.newclass{font-size:40px}

.night{background:black;}

</style>

$(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>

.filter{filter:Gray;}

</style>

// $(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 />

</div>

</body>

12. 案例实现：单击表格行，单击的显示高亮，其余不显示样式

<head>

.infor{padding:5px;border:solid 1px red;}

.myclass{background-color:red;}

</style>

$(function () {

$("table tr").click(function () {

$(this).addClass("myclass").siblings().removeClass("myclass");

});

</script>

</head>

<body>

<tbody>

</tbody>

</table>

</body>

案例实现：表格中的行单击时显示高亮，其余不显示高亮

<head>

.infor{padding:5px;border:solid 1px red;}

.myclass{background-color:red;}

</style>

$(function () {

$("table tr").click(function () {

$(this).addClass("myclass").siblings().removeClass("myclass");

});

</script>

</head>

<body>

<tbody>

</tbody>

</table>

</body>

13. 案例实现：聚焦控件的高亮显示

<head>

.color{background:red;}

</style>

$(function () {

$("input").focus(function () {

$(this).addClass("color");

});

$("input").blur(function () {

$(this).removeClass("color");

});

</script>

</head>

<body>

姓名<input type="text" id="textName" />

密码<input type="text" id="txtPassword" />

</body>

案例实现：搜索框效果显示

<head>

.newclass{border:solid 1px red;}

</style>

$(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>

</body>

代码实现2：

<head>

<title>链式编程实现搜索框效果</title>

.writing{color:Gray;}

</style>

$(function () {

$("#keyword").val("请输入关键字")

.blur(function () {

if ($("#keyword").val() == "") {

$("#keyword").val("请输入关键字").addClass("writing");

}

})

.focus(function () {

if ($("#keyword").val() == "请输入关键字") {

$("#keyword").val("").removeClass("writing");

}

});

</script>

</head>

<body>

</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>

$(function () {

$(document).mouseover(function (e) {

$("#fly").css("left", e.pageX).css("top",e.pageY);

});

</script>

</head>

<body>

</body>