一.jq添加
1. append() - 在被选元素的结尾插入内容
2. prepend() - 在被选元素的开头插入内容
3. after() - 在被选元素之后插入内容
4. before() - 在被选元素之前插入内容
代码示例:
append和prepend
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery3.4.1.js" ></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
$("p").append("<span style='color: #FF6500'>追加的文本</span>");
});
$("#btn2").click(function () {
$("p").prepend("<span style='color: palevioletred'>在开头追加的文本</span><br>")
});
$("#btn3").click(function () {
$("ol").append("<li>在末尾追加的选项</li>")
});
$("#btn4").click(function () {
$("ol").prepend("<li>在开头追加的选项</li>")
});
$("#btn5").click(function () {
var li1="<li>yyy</li>";
var li2="<li>wtc</li>";
$("ol").prepend(li1,li2);
})
});
</script>
</head>
<body>
<p>我是 p 段落 1</p>
<p>我是 p 段落 2</p>
<ol>
<li>条目 1</li>
<li>条目 2</li>
</ol>
<button id="btn1">追加文本_append</button>
<button id="btn2">追加文本_prepend</button>
<button id="btn3">追加列表项_append</button>
<button id="btn4">追加列表项_prepend</button>
<button id="btn5">一次添加多项</button>
</body>
</html>after和before
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery3.4.1.js" ></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//在p前面添加文本
$("p").before("<span>在前面添加的</span>")
});
$("#btn2").click(function () {
//在p后面添加文本
$("p").after("<span>在后面添加的</span>")
})
}) ;
</script>
</head>
<body>
<p>我是 p 段落</p><br />
<button id="btn1">在 p 前面添加文本</button>
<button id="btn2">在 p 后面添加文本</button>
</body>
</html>二.jq删除
1. remove() - 删除被选元素（及其子元素）
2. empty() - 从被选元素中删除子元素
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery3.4.1.js" ></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
$("#div1").remove();
});
$("#btn2").click(function () {
$("#div1").empty();
});
$("#btn3").click(function () {
$("p").remove(".jf");
});
});
</script>
</head>
<body>
<div id="div1" style="height:150px;width:300px;border:1px solid
black;background-color:yellow;">
DIV 内部
<p class="jf">p 段落 1</p>
<p class="jf">p 段落 2</p>
<p>p 段落 3</p>
</div>
<br>
<button id="btn1">删除 div 元素</button>
<button id="btn2">清空 div 元素</button>
<button id="btn3">删除 class="jf" 的所有 p 元素</button>
</body>
</html>三.jq遍历
each() 方法规定为每个匹配元素规定运行的函数
语法:
$(selector).each(function(index,element))
参数介绍 index：选择器的 index 位置 element 当前的元素，也可以使用 this
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery3.4.1.js" ></script>
<script type="text/javascript">
$(function () {
// 1.构建省市的数据，注意：我们需要使用二维数组存储
var pro = new Array(3); // 省份
pro[0] = new Array("东城区","西城区","海淀区","朝阳区","门头沟区","昌平区"); // 北京市
pro[1] = new Array("南京市","徐州市","扬州市","苏州市","无锡市","镇江市"); // 江苏省
pro[2] = new Array("太原市","大同市","晋城市","长治市","临汾市","阳泉市"); // 山西省
$("#province").change(function() {
$("#city").empty();
// 1.获取用户选择的省份
var proId = this.value;
// 2.遍历二维数组匹配用户选择的省份
$.each(pro, function(i, e) {
// 匹配用户选择的省份
if(proId == i) {
// 获取此省份下所有的城市信息
$.each(pro[i], function(j, n) {
var textNode = document.createTextNode(n);
var option = document.createElement("option"); // option 是dom对象
// 要使用jq的append函数，则需要把dom对象转换为jq对象
$(option).append(textNode); // 将文本节点添加到元素节点中
// $("#city").append($(option)); // 将城市的元素节点添加到城市的下拉框中
$(option).appendTo($("#city"));
});
}
});
});
});
function showCity(proid) {
}
</script>
</head>
<body>
<select id="province">
<option>--请选择--</option>
<option value="0">北京市</option>
<option value="1">江苏省</option>
<option value="2">山西省</option>
</select>
<select id="city">
</select>
</body>
</html>四.jq校验
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//validate 是 jQuery插件， 及必须在 jQuery的基础上进行运行。 我们将导入 jQuery 库、validate 库、和国际化资源库（可选）
<script type="text/javascript" src="../js/jquery3.4.1.js" ></script>
<script type="text/javascript"src="../js/jquery.validate.js"></script>
<script type="text/javascript"src="../js/messages_zh.js"></script>
<script type="text/javascript">
$(function () {
//应用validate提供的检验规则
$("#commentForm").validate();
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>输入您的名字，邮箱，URL，备注。</legend>
<p>
<label for="cname">Name (必需, 最小两个字母)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (必需)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (可选)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">备注 (必需)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
