岛乒惺孤复红卡颂疾派烈坎竭
初始结构：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div></div> </body> </html>
html()与attr(),css()一样,根据参数不同,自带读取与设置功能
1.设置元素内容,可以包括任何内容:子元素或文本,与原生的innerHTML属性一样
创建文本节点
向div中添加内容
js代码：
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
var res=$('div').html("jquery很好玩")
//控制台查看结果
console.log(res)
</script>
执行，成功向div添加内容
创建元素节点
在div里面添加标签h2 和内容
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
var res=$('div').html("<h2>jquery很好玩</h2>")
//控制台查看结果
console.log(res)
</script>
执行：
获取元素内容
获取div里面的元素内容
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('div').html("<h2>jquery很好玩</h2>")
var res=$('div').html()
//控制台查看结果
console.log(res)
</script>
执行，可以看到html()获取到的div里面的内容是：<h2>jquery很好玩</h2>
2.text()设置文本内容
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('div').text("jquery很好玩")
</script>
执行：
获取文本：
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('div').text("jquery很好玩")
var res=$('div').text()
console.log(res)
</script>
执行：
text()仅仅能够设置文本内容，不能创建标签
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('div').text("<h2>jquery很好玩</h2>")
var res=$('div').text()
console.log(res)
</script>
执行：可以看到h2标签并没有被创建，而是原样输出
页面代码；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
邮箱<input type="text" name="email"/>
<button>提交</button>
</form>
</body>
</html>
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button:first').click(function(){
alert(111)
})
</script>
执行：
ja代码还可以改为以下代码，效果一致：
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button:eq(0)').click(function(){
alert(111)
})
</script>
或：
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(0).click(function(){
alert(111)
})
</script>
3.val()
获取或设置表单控件中的数据: val(),等价于原生中的表单元素的value属性
获取email内容：
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(0).click(function(){
// :text 获取所有文本框的内容 当前页面只有一个 为email
alert($(':text').val())
})
</script>
输入邮箱，点击提交时，即可看见邮箱内容
还可以设置value属性的值
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(0).click(function(){
// :text 获取所有文本框的内容 当前页面只有一个 为email
alert($(':text').val('ppp@123.com'))
})
</script>
执行，类型为json对象，可以使用原生js函数解析
懦亮鳖揩奥蒂少抡钉椭蔽踞凰