点击按钮设置某个元素的标签内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 400px;
height: 200px;
background: green;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
// 案例:点击按钮在div中添加一个p标签
/**
* .val();----设置或者获取标签标签的value属性值
* .text();----设置或者是获取标签中的文本内容----就相当于DOM中的innerText
* .css();----设置元素的css样式属性值
* .html();----设置或者是获取标签中的html内容----就相当于DOM中的innerHTML
*/
$(function(){
// 点击按钮
$("#btn").click(function(){
$("#dv").html("<p>这是一个p标签</p>");
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv"></div>
</body>
</html>设置元素的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<script>
// 点击按钮,设置div的宽,高,背景颜色,边框
$(function(){
$("#btn").click(function(){
$("#dv").css("width","200px");
$("#dv").css("height","200px");
$("#dv").css("backgroundColor","red");
$("#dv").css("border","1px solid green");
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv"></div>
</body>
</html>层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 500px;
height: 400px;
border: 2px solid green;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
// 点击按钮,设置div中span的样式
// 层次选择器----后代选择器(直接子元素,孙子元素)
$("#btn").click(function(){
// 获取的是div这个父级元素中所有span标签
// $("#dv span").css("backgroundColor","red");
// 获取的是div这个父级元素中直接的子元素
// $("#dv>span").css("backgroundColor","red");
// 获取的是div这个父级元素后面的所有的兄弟元素----span
// $("#dv~span").css("backgroundColor","red");
// 获取的是div后面直接的兄弟元素
// $("#dv+span").css("backgroundColor","red");
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<span>这是div前面的兄弟元素span</span>
<div id="dv">
<span>这是第一个span标签</span>
<ul>
<li>第一个li</li>
<li>第二个li
<span>第二个li中的span</span>
</li>
<li>第三个li</li>
</ul>
<span>这是第二个span标签</span>
<span>这是第三个span标签</span>
</div>
<!-- <p>这是p</p> -->
<span>这是div后面的兄弟元素span</span>
<span>这是div后面的兄弟元素span</span>
<span>这是div后面的兄弟元素span</span>
<span>这是div后面的兄弟元素span</span>
</body>
</html>总结选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<script>
// id选择器
// $("#id属性值")
// 标签选择器
// $("#标签名字")
// 类选择器
// $(".类样式的名字")
// 交集选择器----标签+类选择器
// $("标签名.类样式名字")
// 并集选择器----多条件选择器
// $("标签名字,类样式名字,#id选择器")
// 层次选择器
// $("选择器 选择器");====>$("#dv span")
// $("选择器>选择器");====>$("#dv span")
// $("选择器~选择器");====>$("#dv span")
// $("选择器+选择器");====>$("#dv span")
</script>
</head>
<body>
</body>
</html>