请自行替换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——尺寸
methoddescribe
width()/height()设置或返回元素的高度或宽度(不包括内边距,边框,外边距innerWidth()/innerHeight()返回元素的宽度或高度(包括内边距)outerWidth()/outerHeight()返回元素的宽度/高度(包括内,外边距,边框)
