JQuery dom 操作总结
2024-08-31 05:09:44
DOM 操作之获取值
获得内容 - text():设置或返回所选元素的文本内容
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
html() : 设置或返回所选元素的内容(包括 HTML 标记)
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
val(): 设置或返回表单字段的值
$("button").click(function(){
alert("Value: " + $("#test").val());
});
获取属性 - attr() :
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("href"));
});
});
</script>
</head> <body>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>显示 href 值</button>
</body> </html>
设置内容 - text()、html() 以及 val()
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
</head> <body>
<p id="test1">这是段落。</p>
<p id="test2">这是另一个段落。</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。attr() 方法也允许您同时设置多个属性。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ws").attr({
"href" : "http://www.ibbidream.cn/",
"title" : "jQuery 教程"
});
});
});
</script>
</head> <body>
<p><a href="http://www.baidu.com" id="ws">Baidu</a></p>
<button>改变 href 和 title 值</button>
<p>请把鼠标指针移动到链接上,或者点击该链接,来查看已经改变的 href 值和已经设置的 title 值。</p>
</body>
</html>
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法:
- append() - 在被选元素的结尾插入内容
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
}); $("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
</script>
</head> <body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item </li>
<li>List item </li>
<li>List item </li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>
- prepend() - 在被选元素的开头插入内容
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>Prepended text</b>. ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>Prepended item</li>");
});
});
</script>
</head>
<body> <p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item </li>
<li>List item </li>
<li>List item </li>
</ol> <button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button> </body>
</html>- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>Before</b>");
}); $("#btn2").click(function(){
$("img").after("<i>After</i>");
});
});
</script>
</head> <body>
<img src="http://www.ibbidream.cn/img/ico.jpg" alt="test" />
<br><br>
<button id="btn1">在图片前面添加文本</button>
<button id="btn2">在图片后面添加文本</button>
</body>
</html>
删除元素/内容
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
- remove() - 删除被选元素(及其子元素)
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head> <body> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div> <br>
<button>删除 div 元素</button> </body>
</html>- empty() - 从被选元素中删除子元素
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
</head> <body> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div> <br>
<button>清空 div 元素</button> </body>
</html>
最新文章
- jquery实现百度类似搜索提示功能(AJAX应用)
- 做一个高效的IOS开发工程师
- atitit. 日志系统的原则and设计and最佳实践(1)-----原理理论总结.
- [Javascript,JSON] JQuery处理json与ajax返回JSON实例
- myeclipse和eclipse安装Java反编译插件
- with admin option 与with grant option
- 读jquery.cookie.js源码学到的几个技巧
- uva 10655 - Contemplation! Algebra(矩阵高速幂)
- 平板不能设置代理的情况下利用随身wifi进行http代理访问
- 1.7 理解dropout
- elementui左侧菜单栏刷新后还是原来的状态
- 用ASP.NET Core 2.0 建立规范的 REST API -- 预备知识
- Chrome - JavaScript调试技巧总结(浏览器调试JS)
- <;TCP/IP原理>; (四) IP编址
- 不同IDE对maven项目静态资源处理
- spring-IoC的配置文件applicationContext.XML
- tomcat免安装版做成windows系统服务
- C++中字符数组与string的相互转换
- 常用css属性
- c#依参数自动生成控件