通过id选择器获取元素点击按钮显示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<script>
// 页面加载事件
$(function(){
// 根据id选择器获取按钮,添加点击事件,修改按钮的value属性值
$("#btn").click(function(){
// this.value = "哈哈";
// 错误的
// this.val('哈哈');
console.log($(this).val());
$(this).val('嘎嘎,下雨了');
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
</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属性的值")---->某个元素
* 标签选择器
* $("标签名字")---->多个元素或者是某个元素
*
*/
// .text()方法相当于DOM中的.innerText属性
// 对象.text()---->获取该元素的文本内容
// 对象.text('值')---->设置该元素的文本内容
// 本身代码没有循环操作,jQuery中内部帮助我们循环操作的---->隐式迭代
// 页面加载的事件
$(function(){
// 根据id选择器获取按钮,添加点击事件
$("#btn").click(function(){
// 根据标签选择器获取p标签
$("p").text('我们都是p');
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<p>鸣人</p>
<p>佐助</p>
<p>卡卡西</p>
<p>自来也</p>
<p>大蛇丸</p>
</body>
</html>类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cls{
width:200px;
height: 100px;
background-color: pink;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
// 类选择器:$(".类样式的名字")----某个或者是多个
// .css("属性","值");----设置某个元素的css样式属性值
$(function(){
// 根据id选择器获取按钮,添加点击事件
$("#btn").click(function(){
// 获取所有应用cls类样式的元素,改变背景颜色
$(".cls").css("backgroundColor","yellow");
$(".cls").css("border",'1px solid red');
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div class="cls"></div>
<p class="cls">这是一个p</p>
<p>山东盛产一种补药,药力极强</p>
</body>
</html>交集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<style>
.cls {
background-color: blue;
}
</style>
<script>
$(function(){
// 根据id选择器获取按钮,添加点击事件
$("#btn").click(function(){
// 交集选择器----标签+类选择器
// 先找p标签,从p标签中找应用了cls样式的元素
$("p.cls").css("backgroundColor","green");
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<p class="cls">小苏喜欢助教很久了</p>
<p>其实助教也喜欢小苏</p>
<ul>
<li>小苏</li>
<li>助教</li>
<li>班主任</li>
</ul>
<span class="cls">我和小苏坐地铁上班</span>
</body>
</html>并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 400px;
height: 200px;
background-color: green;
}
.cls {
background-color: red;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
/**
* 交集选择器 标签名.类样式的名字
* 并集选择器 选择器,选择器,选择器...
*/
// 页面加载的事件
$(function(){
$("#btn").click(function(){
// div,p,span
$("#dv,p,.cls").css("backgroundColor","orange");
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv"></div>
<p>这是一个p</p>
<span class="cls">这是一个span</span>
<ul>
<li>小苏喜欢吃榴莲</li>
<li>助教喜欢吃臭豆腐</li>
<li>班主任都喜欢吃</li>
</ul>
</body>
</html>