请自行替换jQuery
jQuery获取内容和属性
获取内容的三个方法
- text() -设置或者返回所选元素的文本内容
- html() -设置或返回所选元素的内容(包括HTML标记)
- val() -设置或返回表单的值
获取属性
attr()方法
获取元素内容和属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.3.1.min.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
$(".one").click(function () {
alert("text: "+$(".name").text());
});
$(".two").click(function () {
alert("html:"+$(".name").html());
});
});
</script>
</head>
<body>
<p class="name">this is a test where was <b>B</b></p>
<button class="one">显示文本</button>
<button class="two"type="button">显示html</button>
</body>
</html>
回调函数的两个参数,当前元素的下标一节原始值
.text(function(i,origText){});
jQuery——添加元素
- append()-在所选元素的结尾插入内容
- prepend()-在所选元素的开头插入内容
- after()-在所选元素的之后插入内容
- before()-在所选元素之前插入内容
jQuery-删除
- remove() -删除被选元素(及其子元素)
- empty()-删除被选元素的子元素
$("div").empty();
$("div")remove();
jQuery-CSS类
- addClass()–添加一个类
- removeClass()–从被选元素中删除一个或多个类
- toggleClass()–对被选元素进行添加/删除类的操作
- css()-设置或者返回样式属相
设置多个CSS属性$(“p”).css({
“background-color”:“yellow”,
“font-size”:“200%”
});
更多内容请走这扇门——?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" rel="stylesheet">
.color{
background-color: lightgreen;
color:red;
}
</style>
<script src="../jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".change").click(function () {
$("p").toggleClass("color");
});
});
</script>
</head>
<body>
<p>fdhis</p>
<p>fhdvsd</p>
<p>difospo[s</p>
<button type="button" class="change">跟换CSS属相</button>
</body>
</html>
— jQuery——尺寸
method | describe |
---|---|
width()/height() | 设置或返回元素的高度或宽度(不包括内边距,边框,外边距 |
innerWidth()/innerHeight() | 返回元素的宽度或高度(包括内边距) |
outerWidth()/outerHeight() | 返回元素的宽度/高度(包括内,外边距,边框) |