JQ第二天

最新推荐文章于 2025-11-17 17:59:29 发布

原创最新推荐文章于 2025-11-17 17:59:29 发布 · 500 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #button #class #input #jquery #div

本文介绍了JavaScript操作DOM的基本概念及jQuery的高级用法，包括动态创建与删除节点、属性操作、表单选择器、事件处理等核心技能，并通过实例展示了如何实现加法计算、注册页面倒计时、文本框焦点变化、选择球队、无刷新页面等功能。

元素的each
<script type="text/javascript">
$(function () {
$("input[name=names]").click(function () {
var arr = new Array();
$("input[name=names]:checked").each(function (key, value) { arr[key] = $(value).val(); });
$("#msgNames").text("共选中" + arr.length + "项" + arr.join(","));
});
});
</script>
</head>
<body>
<input type="checkbox" name="names" value="tom" />tom
<input type="checkbox" name="names" value="smile" />smile
<input type="checkbox" name="names" value="laughing"/>laughing
<p id="msgNames"></p>
表单选择器
$(":input")选取所有<input> <textarea> <select> <button>元素
$(":password")选取所有密码框，同理还有:radio :chechbox :submit :image :reset :button :file :hidden
JQuery的Dom操作
使用attr()方法读取或设置元素的属性，对于JQuery没有封装的属性用attr进行操作
alert($("a:first").attr("href"));
$("a:first").attr("href","http://vip.book.sina.com.cn/book/index_196513.html");
使用removeAttr删除属性删除的属性在源代码中看不到，这是和清空属性的区别
动态创建Dom节点
var link=$("<a href='http://vip.book.sina.com.cn/book/index_196513.html'>作品</a>")
$("div:first").append(link);
<script type="text/javascript">
$(function () {
var data = { "smile": "http://vip.book.sina.com.cn/book/index_196513.html", "lucky": "http://vip.book.sina.com.cn/book/index_196513.html" };

$.each(data, function (key, value) {
var tr = $("<tr><td>" + key + "</td><td><a href=" + value + ">" + value + "</a><td></tr>");
$("#tableSites").append(tr);
});

});
</script>
</head>
<body>
<table id="tableSites"></table>
删除节点
remove()
var lis=$("#ulSite li").remove();
$("#ulSite2").append(lis);
append; 添加子
prepend 添加子
after 添加兄弟
before 添加兄弟
<script type="text/javascript">
$(function () {
$("#removeUL").click(function () { var lih = $("ul.hah li.testitem").remove(); $("ul.lis").append(lih); });

});
</script>
</head>
<body>
<table id="tableSites"></table>
<ul class="hah">
<li>abc</li>
<li class="testitem">abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li class="testitem">abc</li>
</ul>
<ul class="lis">
</ul>
<input type="button" value="删除" id="removeUL" />
案例：
加法计算
<script type="text/javascript">
$(function () {
$("#eq").click(function () {
var value1 = $("#txt1").val();
var value2 = $("#txt2").val();
var value3 = parseInt(value1, 10) + parseInt(value2, 10);
$("#txt3").val(value3);
});
});
</script>
</head>
<body>
<input type="text" id="txt1" />+<input type="text" id="txt2" /><input type="button" value="=" id="eq" /><input type="text" id="txt3" />
2.注册页面
<script type="text/javascript">
var IntervalId;
var leftSecond = 10;
$(function () {
$("#btnReg").attr("disabled", true); //用attr来设置，取得JQuery没有封装的属性
IntervalId=setInterval("CountDown()", 1000);
});
function CountDown() { //给function包一个$()是让他在ready的时候执行
if (leftSecond <= 0) {
$("#btgReg").val("同意");
$("#btgReg").attr("disabled", false);
clearInterval(IntervalId);
return;
}
leftSecond--;
$("#btnReg").val("请仔细阅读" + leftSecond + "秒");
}
</script>
</head>
<body>
<textarea>sdfsdfsdfsdfdsfsd</textarea>
<input type="button" id="btnReg" value="同意" />

3.输入文本框焦点
<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" /><input type="text" /><input type="text" /><input type="text" /><input type="text" />
4.选择球队
<script type="text/javascript">
$(function () {
$("#ul1 li").css("cursor", "pointer").mouseover(function () {
$(this).css("background", "red").siblings().css("background", "white")
}).click(function () {
$(this).css("background", "white").appendTo("#ul2");
});
});
</script>
</head>
<body>
<ul id="ul1" style="float:left; width:30%;">
<li>小牛</li>
<li>湖人</li>
<li>太阳</li>
<li>公牛</li>
</ul>
<ul id="ul2">
</ul>
5.无刷新页面
<script src="../JQ/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btnPost").click(function () {
var title = $("#title").val();
var body = $("#txtBody").val();
$tr = $("<tr><td>" + title + "</td><td>" + body + "</td></tr>");
$("#tbComment").append($tr);
$("#title").val("");
$("#txtBody").val("");
});
});
</script>
</head>
<body>
<p>没有什么可抱怨的，做就对了</p>
<table id="tbComment">
<tr><td>name</td><td>smile</td></tr>
</table>
<input type="text" id="title" /><br />
<textarea id="txtBody"></textarea><br />
<input type="button" value="发表评论" id="btnPost" /><br />
</body>
节点操作
$("br").replaceWith("<hr/>");
<script src="../JQ/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#replace").click(function () {
$("br").replaceWith("<hr/>");
});
});
</script>
</head>
<body>
水电费<br />sffdf
水电费<br />sffdf
水电费<br />sffdf
水电费<br />sffdf
<input type="button" value="ReplaceWith" id="replace" />
包裹节点
$("p").wrap("<font color=red></font>");
样式操作
获取attr("class") 设置attr("class","myclass") 添加addClass("myclass") 移除removeClass("myClass") 切换toggleClass("myclass") 判断是否有hasClass("myclass")
<script type="text/javascript">
$(function () {
$("#btnAdd").click(function () {
$("#div1").addClass("class2");
});
$("#btnRemove").click(function () {
$("#div1").removeClass("class2");
});
$("#btnToggle").click(function () {
$("#div1").toggleClass("class2");//有就加上没有就删掉
});
});
</script>
<style type="text/css">
.class1{background-color:Red;}
.class2{font-size:50px;}
</style>
</head>
<body>
<div id="div1" class="class1">hello</div>
<input type="button" value="add" id="btnAdd" />
<input type="button" value="remove" id="btnRemove" />

案例焦点