1、jQuery操作Dom
1、添加元素
<code>
<script language="JavaScript">
$().ready(function(){
$("input[type='button']").click(function(){
var li=("<li/>").attr("id","sh").attr("name","shanghai").text("上海");
("#city").append(li);//把新建的元素追加到指定元素的子元素的最后
});
});
</script>
</code>
<code>
2、删除元素
<script language="JavaScript">
$().ready(function(){
$("input[type='button']").click(function(){
$("#cq").remove();
});
});
</script>
</code>
3、替换元素
<code>
<script language="JavaScript">
$("input[type='button']").click(function(){
("button").replaceWith(("p"));
});
</script>
</code>
4、把dom对象转化成jQuery对象
<code>
<script type="text/javascript">
window.onload = function(){
把dom对象转化成jquery对象
var domObj = document.getElementById("username");//dom对象
var jQueryObj = $(domObj); //该对象就是一个jquery对象
alert(jQueryObj.attr("value"));
}
</script>
</code>
5、全选，全不选，与反选
<code>
<script type="application/javascript">
$().ready(function(){
("#checkItems").click(function(){ if($(this).attr("checked")){//被选中 $(":checkbox[name='items']").attr("checked",true); }else{ $(":checkbox[name='items']").attr("checked",false); } }); ("#checkall").click(function(){
(":checkbox[name='items']").attr("checked",true); ("#checkItems").attr("checked",true);
});
("#checkallNo").click(function(){ $(":checkbox[name='items']").attr("checked",false); $("#checkItems").attr("checked",false); }); ("#check_revsern").click(function(){
// (":checkbox[name='items']:checked").attr("checked",false); // (":checkbox[name='items']:not(:checked)").attr("checked",true);
$(":checkbox[name='items']").each(function(){
if($(this).attr("checked")){//如果被选中
$(this).attr("checked",false);
}else{//没有被选中
$(this).attr("checked",true);
}
});
});
});
</script>
<body>
您的爱好很广泛!!!
<br>
<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
<br>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
<br>
<input type="button" name="checkall" id="checkall" value="全选" />
<input type="button" name="checkall" id="checkallNo" value="全不选" />
<input type="button" name="checkall" id="check_revsern" value="反选" />
</body>
</html>
</code>
6、jquery实现选择转换
<code>
<script type="text/javascript">
$().ready(function(){
("#add").click(function(){ $("#second").append($("#first option:selected")); }); ("#add_all").click(function(){
("#second").append(("#first option"));
});
("#remove").click(function(){ }); ("#remove_all").click(function(){
});
});
</script>
<body>
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; ">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
<select name="first" size="10" multiple="multiple" class="td3" id="first">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->" />
<input name="add_all" id="add_all" type="button" class="button" value="==>" />
<input name="remove" id="remove" type="button" class="button" value="<--" />
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple" class="td3" id="second">
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
</code>
7、jQuery实现边改，边增加
<code>
$().ready(function(){
var index = 1;
/**
* 完成添加功能
*/
("#addUser").click(function(){ /** * 1、获取姓名,电话,email的值 * 2、创建 * <tr> * <td><input type="checkbox"></td> * <td>${姓名}</td> * <td>${email}</td> * <td>${phone}</td> * <td><a>修改</a></td> * <td><a>删除</a></td> * </tr> * 3、把创建完成的tr追加到tbody上 */ var name = $("#name").val(); var email = $("#email").val(); var tel = $("#tel").val(); var $checkbox = $("<input/>").attr("type","checkbox"); var $checkboxTD = $("<td/>").append($checkbox); $checkboxTD.attr("id",index); index++; var $nameTD = $("<td/>").text(name); var $emailTD = $("<td/>").text(email); var $phoneTD = $("<td/>").text(tel); var $updateA = $("<a/>").text("修改"); /** * 完成修改的功能 */ $updateA.css("cursor","pointer"); /** * 给修改的超级链接添加click事件 */ $updateA.click(function(){ var name = $(this).parent().siblings("td:eq(1)").text(); var email = $(this).parent().siblings("td:eq(2)").text(); var tel = $(this).parent().siblings("td:eq(3)").text(); var id = $(this).parent().siblings("td:eq(0)").attr("id"); $("#name_update").val(name); $("#email_update").val(email); $("#tel_update").val(tel); $("#id_update").val(id); }); var $updateTD = $("<td/>").append($updateA); var $delA = $("<a/>").text("删除"); $delA.css("cursor","pointer"); $delA.click(function(){//完成删除本行的功能 if(window.confirm("您确认要删除吗?")){ $(this).parent().parent().remove(); } }); var $delTD = $("<td/>").append($delA); var $tr = $("<tr/>").append($checkboxTD). append($nameTD).append($emailTD). append($phoneTD) .append($delTD).append($updateTD); $("#usertable tbody").append($tr); }); /** * 完成删除几行的功能 */ ("#deleteUser").click(function(){
if(window.confirm("您确认要删除吗?")){
/**
* :checkbox 所有的checkbox
* :not(#allCheckbox) 不包含id为allCheckbox
* 被选中的
*/
(":checkbox:not(#allCheckbox):checked").parent().parent().remove(); } }); /** * 全选功能 */ ("#allCheckbox").click(function(){
if((this).attr("checked")){ $(":checkbox:not(#allCheckbox)").attr("checked",true); }else{ $(":checkbox:not(#allCheckbox)").attr("checked",false); } }); /** * 完成修改操作 */ ("#updateUser").click(function(){
/**
* 获取到修改的id的值，根据值去匹配table中的行
*/
var idValue = ("#id_update").val(); var name_update = ("#name_update").val();
var email_update = ("#email_update").val(); var tel_update = ("#tel_update").val();
/**
* 根据修改的id的值就定位某一行(td)
*/
("td[id="+idValue+"]").siblings("td:eq(0)").text(name_update); ("td[id="+idValue+"]").siblings("td:eq(1)").text(email_update);
$("td[id="+idValue+"]").siblings("td:eq(2)").text(tel_update);
});
});
</code>
html代码：
<code>
<script src="user.js"></script>
<body>
<center>
<br><br>
添加用户:<br><br>
姓名: <input type="text" name="name" id="name" />
email: <input type="text" name="email" id="email" />
电话: <input type="text" name="tel" id="tel" /><br><br>
<button id="addUser">提交</button>
<button id="deleteUser">删除</button>
<br><br>
<hr>
<br><br>
<table id="usertable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr>
<th><input type="checkbox" id="allCheckbox"/></th>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>删除</th>
<th>修改</th>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<hr>
修改用户:<br><br>
姓名: <input type="text" name="name" id="name_update" />
email: <input type="text" name="email" id="email_update" />
电话: <input type="text" name="tel" id="tel_update" /><br><br>
<input type="hidden" id="id_update"/>
<button id="updateUser">提交</button>
</center>
</body>
</html>
</code>
8、jQuery操作Dom
<code>
<script type="text/javascript">
window.onload = function(){
/**
* jquery对象是数组对象
* jquery对象不可能为null,如果得到不值，那么数组的大小为0
*/
var domObj = document.getElementById("username");//dom对象
var jQueryObj = $(domObj); //该对象就是一个jquery对象
var domObj2 = jQueryObj[0];//dom对象
var domObj3 = jQueryObj.get(0);//dom对象
alert(domObj2.getAttribute("name"));
alert(domObj3.getAttribute("name"));
}
</script>
<body>
<input type="text" name="username" id="username">
</body>
</code>
jquery还有这个方法判断是不是数字？
isInteger($("#testCaseBudget").val(), 0, 9999999999)
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· 《HelloGitHub》第 108 期
· Windows桌面应用自动更新解决方案SharpUpdater5发布
· 我的家庭实验室服务器集群硬件清单
· Supergateway：MCP服务器的远程调试与集成工具
· C# 13 中的新增功能实操