jquery中的DOM操作
程序员文章站
2022-05-04 11:41:48
...
目录
1.查找节点
-
查找属性节点: 通过 jQuery 选择器完成
-
操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值
-
操作文本节点：通过 text() 方法
2.创建节点
-
使用 jQuery 的工厂函数 (html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回
-
注意
-
动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中
-
当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个<p>元素, 可以使用 或(“<p></p>”), 但不能使用 或(“<P>”)
-
-
创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建
3.插入节点
| 方法 | 描述 |
|---|---|
| append() | 向每个匹配的元素的内部的结尾处追加内容 |
| appendTo() | 将每个匹配的元素追加到指定的元素中的内部的结尾处 |
| prepend() | 向每个匹配元素的内部的开始处插入内容 |
| prependTo() | 将每个匹配的元素插入到指定的元素中的内部的开始处 |
| after() | 向每个匹配的元素的之后插入内容 |
| insertAfter() | 向每个匹配的元素的插入到指定的元素之后 |
| before() | 向每个匹配的元素的之前插入内容 |
| insertbefore() | 向每个匹配的元素的插入到指定的元素之前 |
-
以上方法不但能将新创建的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="dj">东京</li>
<li id="se">首尔</li>
</ul>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
<!-- 将太原的节点插入到city标签内部的结尾处 -->
$("<li id='ty'>太原</li>").appendTo($("#city"));
<!-- $("#city").append("<li id='ty'>太原</li>"); -->
<!-- 将成都的节点插入到city标签内部的开始处 -->
$("<li id='cd'>成都</li>").appendTo($("#city"));
<!-- $("#city").prepend("<li id='cd'>成都</li>"); -->
}
</script>4.案例一
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型";
// 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容";
//若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点
//需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值.
$(function(){
<!-- 弹出对应标签的文本内容 -->
function showContent(li){
alert($(li).text());
}
<!-- 给现有的li标签赋onclick事件 -->
$("li").click(function(){
showContent(this);
})
$(function(){
$(":submit").click(function () {
<!-- 检查是否选择type -->
var $type=$(":radio[name='type']:checked");
if($type.length==0){
alert("请选择类型");
return false;
}
<!-- 检查是否有输入(去除前后空格) -->
var text=$(":text").val();
text=$.trim(text);
if(text==""){
alert("请输入内容");
return false;
}
<!-- 在相应的 ul 节点中添加对应的 li 节点，并添加click事件 -->
$("<li>"+text+"</li>").appendTo("#"+$type.val()).click(function(){showContent(this)});
return false;
})
})
})
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>*飞车</li>
<li>魔兽</li>
</ul>
<br><br>
<form action="ex-3.html" name="myform">
<input type="radio" name="type" value="city">城市
<input type="radio" name="type" value="game">游戏
name: <input type="text" name="name"/>
<input type="submit" value="Submit" id="submit"/>
</form>
</body>4.删除元素
| 方法 | 描述 |
|---|---|
| remove() | 从DOM中删除所有匹配的元素,即该节点及其对应的子节点 |
| empty() | 删除匹配的元素集合中所有的子节点 |
<!-- 删除bj节点及其所有子节点 -->
$("bj").remove();
<!-- 删除city节点的所有子节点，city节点不会被删除 -->
$("#city li").empty();
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>5.复制节点
| 方法 | 描述 |
|---|---|
| clone() | 复制匹配的 DOM 元素，新节点不具有任何行为 |
| clone(true) | 复制元素的同时也复制元素中的的事件 |
6.替换节点
| 方法 | 描述 |
|---|---|
| replaceWith(content|fn) | 将所有匹配的元素替换成指定的HTML或DOM元素 |
| replaceAll(selector) | 用匹配的元素替换掉所有 selector匹配到的元素 |
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li id="dj">东京</li>
<li id="se">首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>*飞车</li>
<li>魔兽</li>
</ul>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!-- 替换北京节点和红警节点
注意：replaceWith , replaceAll有移动节点的功能，节点互换需要先克隆节点
-->
$(function(){
<!-- 复制北京节点 -->
var $bj=$("#bj").clone(true);
<!-- 将红警节点替换为北京节点，返回红警节点 -->
var $rl=$("#rl").replaceWith($bj);
<!-- 将北京节点替换为红警节点 -->
$("#bj").replaceWith($rl);
})
</script>7.包裹节点
| 方法 | 描述 |
|---|---|
| wrap() | 把所有匹配的元素用其他元素的结构化标记包裹起来 |
| wrapAll() | 将所有匹配的元素用单个元素包裹起来 |
| wrapInner() | 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来 |
8.HTML代码/文本/值
| 方法 | 描述 |
|---|---|
| html() | 取得第一个匹配元素的html内容。不能用于XML |
| text() | 取得所有匹配元素的内容。这个方法对HTML和XML文档都有效 |
| val() | 获得匹配元素的当前值。如果为多选下拉列表框, 则返回一个包含所有选择值的数组 |
9.样式操作
| 方法 | 描述 |
|---|---|
| attr() | 获取 class 和设置 class |
| addClass() | 追加样式 |
| removeClass() | 移除样式 |
| toggleClass() | 切换样式 |
| hasClass() | 判断是否含有某个样式 |
10.CSS-DOM操作
| 方法 | 描述 |
|---|---|
| css() | 获取和设置元素的样式属性 |
| opacity 属性 | 获取和设置元素透明度 |
| height(), width() | 获取和设置元素高度 |
| offset() | 获取可见元素在当前视窗中的相对位移。其返回对象包含了两个属性: top, left |
上一篇： Request对象
下一篇： 关于将java程序打包成exe