第一个jQuery
注意，本文章所链接的所有jQuery在复制时需要修改路径！请按照自己的路径修改！示例所用的jQuery版本是 jquery-1.12.4.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>什么是jQuery选择器</title>
</head>
<style>
#myDiv{
border: 1px soild black;
width:300px;
height:300px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
alert("第一个jQuery!");
//设置背景颜色
$("#myDiv").css("background-color","red");
});
});
</script>
<body>
<input type="button" value="确定" id="btn" /><br />
<div id="myDiv">我是一个div</div>
</body>
</html>
图示效果
主要代码
alert("第一个jQuery!");
//设置背景颜色
$("#myDiv").css("background-color","red");
层次选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>
div {
border: 1px solid black;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
//id选择器
$("#dv").css("background","pink");
//类选择器
//$(".byClass").css("background","#a0edbc");
//元素选择器
//$("p").css("color","red");
//通配符选择器
//$("*").css("background","yellow");
//$(".byClass,#byId").css("background","yellow");
});
});
</script>
</head>
<body>
<input type="button" value="确定" id="btn" /><br /><br />
<p>这是div前面的p元素</p>
<div id="dv">
<p>这是div中的第1个p元素</p>
<ul>
<li class="byClass">这是第1个li元素</li>
<li><p>这是第2个li中的p元素</p></li>
</ul>
<p>这是div中的第2个p元素</p>
</div>
<p>这是div后面的第1个p元素</p>
<p>这是div后面的第2个p元素</p>
<p>这是div后面的第3个p元素</p>
</body>
</html>
$("#dv").css("background","pink");
↓ ↓ ↓ ↓ ↓
(".byClass").css("background","#a0edbc");
↓ ↓ ↓ ↓ ↓
$("p").css("color","red");
↓ ↓ ↓ ↓ ↓
$("*").css("background","yellow");
↓ ↓ ↓ ↓ ↓
$(".byClass,#byId").css("background","yellow");
↓ ↓ ↓ ↓ ↓
扫一扫
1294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
