JQuery文档操作
JQuery文档操作
obj.val()
相当于jS里的value，用于表单控件的取值和赋值。赋值带参数，取值无参数。
<head>
<meta charset="UTF-8">
<title>val</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function() {
// 赋值
$(":text").val("AAAAA");
//--------------
$(":button").click(function() {
//取值
var v = $("input").val();
console.log(v);
});
});
</script>
</head>
<body>
<input type="text" />
<input type="button" value="显示" />
</body>
html()和text()
相当于jS里的indeHtml和innerText。
<html>
<head>
<meta charset="UTF-8">
<title>text和html</title>
</head>
<body>
<p id="idP1"></p>
<p id="idP2"></p>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$("#idP1").text("jQuery对象");
$("#idP2").html("<hr/>");
</script>
</body>
</html>
下列示例使用text()函数，顺便展示了keypress事件和keydown的区别。
<html>
<head>
<meta charset="UTF-8">
<title>text()方法示例：显示keyCode</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$(document).keypress(function() {
// 有大小写的区别
$("#press").text("keypress:" + event.keyCode);
});
$(document).keydown(function() {
// 不区分大小写
$("#down").text("keydown:" + event.keyCode);
});
});
</script>
</head>
<body>
<p id="press"></p>
<p id="down"></p>
</body>
</html>
class操作
$().addClass("cls1");//添加class属性指定的式样
$().removeClass("cls1");//删除
$().toggleClass("cls1");// 不在就加，存在就删
<html>
<head>
<meta charset="UTF-8">
<title>添加CSS，切换CSS</title>
<style>
.cls1 {
color: red;
}
</style>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$("#contentAdd").click(function() {
$(this).addClass("cls1");
});
$("#btn").click(function() {
$("#contentAdd").removeClass("cls1");
});
$("#contentToggle").click(function() {
$(this).toggleClass("cls1");
});
});
</script>
</head>
<body>
<p id="contentAdd">点击：添加式样</p>
<input type="button" id="btn" value="取消式样" />
<p id="contentToggle">点击：切换式样</p>
</body>
</html>
节点操作
元素内加
$("ul").append($li);//append：追加
$li.appendTo($("ul"));
$("ul").prepend($li);// prepend：前置
$li.prependTo($("ul"));
<html>
<head>
<meta charset="UTF-8">
<title>append（To）/prepend(To)</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$("#id_append").click(function() {
var $li = $("<li>" + $(this).val() + "</li>");
// 在XX后面加
$("ul").append($li);
});
$("#id_appendTo").click(function() {
var $li = $("<li>" + $(this).val() + "</li>");
// 加在XX后面
$li.appendTo($("ul"));
});
$("#id_prepend").click(function() {
var $li = $("<li>" + $(this).val() + "</li>");
// 在XX前面加
$("ul").prepend($li);
});
$("#id_prependTo").click(function() {
var $li = $("<li>" + $(this).val() + "</li>");
// 加在XX前面
$li.prependTo($("ul"));
});
});
</script>
</head>
<body>
<ul>
<li></li>
</ul>
<input type="text" id="id_append" value="一脸正气——李连杰" />
<br>
<input type="text" id="id_appendTo" value="悔创阿里——杰克马" />
<br>
<input type="text" id="id_prepend" value="坐怀不乱——刘强东" />
<br>
<input type="text" id="id_prependTo" value="一无所有——王健林" />
</body>
</html>
元素外加
$(this).after($ul);
$ul.insertAfter($(this));
$ul.insertBefore($(this));
<html>
<head>
<meta charset="UTF-8">
<title>元素外部插入同辈节点</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$("h3").click(function() {
var $ul = $("<ul></ul>");
var $li1 = $("<li>夸秦皇，赞唐主，</li>");
var $li2 = $("<li>更说民国耀中土。</li>");
var $li3 = $("<li>前闻袁贼称洪武，</li>");
var $li4 = $("<li>后见北洋军政府。</li>");
$(this).after($ul);
$ul.append($li1);
$ul.append($li2);
$ul.append($li3);
$ul.append($li4);
});
$("#insertAfter").click(function() {
var $ul = $("<ul></ul>");
var $li1 = $("<li>群星闪耀名门懦，</li>");
var $li2 = $("<li>几许贫儿可读书?</li>");
var $li3 = $("<li>战场血海污田亩，</li>");
var $li4 = $("<li>小兵落得几斗谷?</li>");
$ul.insertAfter($(this));
$ul.append($li1);
$ul.append($li2);
$ul.append($li3);
$ul.append($li4);
});
$("#before").click(function() {
var $ul = $("<ul></ul>");
var $li1 = $("<li>蒋公成，蒋公武，</li>");
var $li2 = $("<li>蒋公政绩垂千古。</li>");
var $li3 = $("<li>才有黄河花园瀑，</li>");
var $li4 = $("<li>金陵夜夜闻鬼哭。</li>");
$(this).before($ul);
$ul.append($li1);
$ul.append($li2);
$ul.append($li3);
$ul.append($li4);
});
$("#insertBefore").click(function() {
var $ul = $("<ul></ul>");
var $li1 = $("<li>五次围剿威风树，</li>");
var $li2 = $("<li>东北未复割蒙古。</li>");
var $li3 = $("<li>开疆强国地图绘，</li>");
var $li4 = $("<li>金元满地随风舞。</li>");
$ul.insertBefore($(this));
$ul.append($li1);
$ul.append($li2);
$ul.append($li3);
$ul.append($li4);
});
});
</script>
</head>
<body>
<h3>蒋公赞</h3>
<input type="button" value="insertAfter" id="insertAfter" />
<input type="button" value="before" id="before" />
<input type="button" value="insertBefore" id="insertBefore" />
</body>
</html>
replaceWith/All
<html>
<head>
<meta charset="UTF-8">
<title>replace/remove</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$("input[value='replaceWith']").click(function() {
var $li = $("<li>六耳猕猴</li>");
$("ul li:first").replaceWith($li);
});
$("input[value='replaceAll']").click(function() {
var $li = $("<li>六耳猕猴</li>");
$li.replaceAll($("ul li"));
});
$("input[value='remove']").click(function() {
//删除所有的列表项
$("ul li").remove();
//$("ul li").remove("ul li:eq(0)");
});
});
</script>
</head>
<body>
<ul>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙和尚</li>
<li>玄奘</li>
</ul>
<input type="button" value="replaceWith" />
<input type="button" value="replaceAll" />
<input type="button" value="remove" />
</body>
</html>
clone()/each()
<html>
<head>
<meta charset="UTF-8">
<title>clone/each</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$("input[value='克隆图片']").click(function() {
$("img").clone(true).insertAfter("#p1");
});
$("input[value='添加边框']").click(function() {
$("img").each(function(index) {
$(this).css("border", "3px solid #f00");
$(this).attr("title", "第" + (index + 1) + "幅风景画"); //jQuery对象
// this.style.border = "1px solid #f00"; //this:DOM对象
// this.title = "第" + (index + 1) + "幅风景";
});
});
});
</script>
</head>
<body>
<p ID="p1"></p>
<img src="img/img2.jpg" width="200" />
<br>
<input type="button" value="克隆图片" />
<input type="button" value="添加边框" />
</body>
</html>
