jquery_元素文本值、属性值的获取、修改、添加（text、prop、attr、css）
1、text()获取、修改元素文本值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
div1 = $('#div1')
// 获取文本值
div1_text = div1.text()
// 修改文本值
div1.text(div1_text + "-----修改")
});
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
2、prop()获取、修改、增加元素固有属性
所谓元素固有属性就是元素本身自带的属性，比如<a>里面的href，比如 <input>里面的type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
div1 = $('#div1')
// 获取id属性值值
div1.prop("id")
// 修改id属性值值
div1.prop("id", "div666")
bt = $("[type=button]")
// prop获取元素固有属性值
bt.prop("value")
// 修改属性值
bt.prop("value", "commit")
});
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
<input type="button" value="提交">
</body>
</html>
3、attr()获取、修改、增加自定义属性
不属于标签自带的属性均属于自定义属性，比如下面代码中使用 prop()方法获取div和input标签的name属性，input可以获取到，div就获取不到。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
// 使用prop()获取input的name属性值，可以获取到
input_name = $("#a").prop("name")
console.log(input_name)
// 使用prop()获取div的name属性值，无法获取到
div1 = $("#div1")
div_name = div1.prop("name")
console.log(div_name)
// 对于自定义属性可以使用attr()获取其值
div_name_attr = div1.attr("name")
console.log(div_name_attr)
// 使用attr（）可以新增或修改自定义属性，属性存在则修改，不存在则新增
div1.attr("zdy", "自定义")
});
</script>
</head>
<body>
<input type="text" name="input_name" id="a">
<div id="div1" name="div_name">这是一个div元素</div>
</body>
</html>
获取值的情况如下：
attr()可以新增或修改自定义属性，属性存在则修改，不存在则新增
4、css()增加、修改、删除元素css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
div1 = $("#div1")
// 单个css属性可以入参方式传入。若属性不存在则添加，若属性存在则修改
div1.css("color", "red")
// 多个css属性，以对象格式传入，对象可以只有1个css属性
div1.css({"font-size": "25px"})
// 有连字符“-”的属性可修改为驼峰式，比如font-size等价于fontSize
div1.css({"backgroundColor": "green", "font-weight": "bold"})
// 删除css属性
div1.css({"color": ""})
});
</script>
</head>
<body>
<div id="div1" name="div_name" style="color: blue">这是一个div元素</div>
</body>
</html>
