JQuery基本知识(3)
2024-10-19 03:27:56
JQuery基本知识(3)
一、JQuery拥有可操作HTML元素和属性的强大方法。
1、JQuery DOM操作(DOM文档对象模型)
获取内容的方法:
text():设置或返回所选元素的文本内容
html():设置或返回所选元素的内容(包括HTML标记)
val():设置或返回表单字段的值。
attr():获取标签的属性值
它们有各自对应的回调函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery操作DOM</title>
<script src="../js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#btnText").click(function(){
alert("显示的文本是:"+$("p").text());
});
$("#btnHtml").click(function(){
alert("显示的HTML是:"+$("p").html());
});
$("#btnVal").click(function(){
alert("显示值是:"+$("#txt").val());
});
$("#btnAtt").click(function(){
alert("获取的属性值是:"+$("#txt").attr("id"));
});
});
</script>
</head>
<body>
<p> <input type="text" id="txt" value="这是一个值" />这是一个富强民主的国家</p>
<input type="button" value="text()" id="btnText"/>
<input type="button" value="html()" id="btnHtml"/>
<input type="button" value="val()" id="btnVal"/>
<input type="button" value="attr()" id="btnAtt"/>
</body>
</html>
设置内容的方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery设置DOM对象</title>
<script src="../js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("更换了text");
});
$("#btn2").click(function(){
$("#test2").html("<a href='#'>我是被添加的一个a标签</a>");
});
$("#btn3").click(function(){
$("#test3").val("我的val值被更换了");
});
$("#btn4").click(function(){
$("#test3").attr("value","我是属性值");
});
});
</script>
</head>
<body>
<p id="test1">段落1</p>
<p id="test2">段落1</p>
<p >段落3<input type="text" value="测试的值" id="test3"></p>
<input type="button" id="btn1" value="设置文本"/>
<input type="button" id="btn2" value="设置HTML"/>
<input type="button" id="btn3" value="设置值"/>
<input type="button" id="btn4" value="改变属性值"/>
</body>
</html>
2、JQuery的添加方法:
append():在被选元素的结尾插入内容
prepend():在备选要的开头插入内容
after():在被选元素之后插入内容
before():在被选之前插入内容
3、JQuery删除元素的方法
remove():删除被选元素及其子元素
empty():从被选元素中删除子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery-3.1.1.min.js" type="text/javascript"></script>
<title>JQuery添加的方法</title>
<script>
$(document).ready(function(){
//append方法在被选中元素的结尾添加
$("#btnAddL").click(function(){
$("p").append("<b>我的追加的文本哦</b>");
});
$("#btnList").click(function(){
$("ol").append("<li>我是新加的列表项</li>");
});
//prepend在被选中元素的开头进行添加
$("#btnpre").click(function(){
$("p").prepend("<b>我的追加的文本哦</b>");
});
$("#btnListpre").click(function(){
$("ol").prepend("<li>我是新加的列表项</li>");
});
//删除整个元素
$("#btnRemove").click(function(){
$("#div1").remove();
});
$("#btnEmpty").click(function(){
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="border: 2px; width: 200px; height: 200px; background-color: dodgerblue;">
<!--<img src="http://pic2.cxtuku.com/00/02/31/b945758fd74d.jpg">-->
<p>这是一个段落</p>
<p>这是二个段落</p>
<ol>
<li>这是列表</li>
<li>这是列表</li>
<li>这是列表</li>
</ol>
</div>
<input type="button" value="追加文本append" id="btnAddL">
<input type="button" value="添加列表项append" id="btnList">
<input type="button" value="文本前追加prepend" id="btnpre">
<input type="button" value="列表前添加prepend" id="btnListpre">
<input type="button" value="remove方法删除整个DIV" id="btnRemove" />
<input type="button" value="empty清除选中元素的子元素" id="btnEmpty" />
</body>
</html>
最新文章
- 平易近人、兼容并蓄——Spark SQL 1.3.0概览
- 金额input框控制只能小数点后有两位的有效数字
- sharedevelop iis express
- 关于STM32下载问题的简单理解
- RSA算法原理(二)
- Java基础知识强化之集合框架笔记04:Collection集合的基本功能测试
- logo集锦
- PHP基础入门(一)---世界上最好用的编程语言
- JS画几何图形之一【直线】
- BZOJ 1998: [Hnoi2010]Fsk物品调度 [置换群 并查集]
- ZooKeeper入门搭建教程
- Apollo
- Spring框架源码阅读之Springs-beans(一)容器的基本实现概述(待续)
- mysql /tmp目录爆满问题的处理
- 分享Azure DevOps技术,来微信群吧!
- 存储过程+Jquery+WebService实现三级联动:
- 【Python】【有趣的模块】【Requests】session &; cookie
- ADO.NET目录汇总1
- Django(框架、模板)
- 设计模式原则(4)--Interface Segregation Principle(ISP)--接口隔离原则
热门文章
- Java之旅_高级教_集合框架
- Bloom Filter 数据结构去重
- wait()函数的详细分析
- AT2567 RGB Sequence dp
- 关于javascript中defineProperty的学习
- ES6面试题总结
- Failed to load bundle(http://loaclhost:8081/index.bundle?platfrom=ios.....
- vuex 子组件传值
- swiper默认第二个且居中
- Java知识点ArrayList