`jq操作頁面文檔`http://jquery.cuishifeng.cn/ jq初始 jq選擇器 jq事件 jq內容操作 jq樣式操作 ...
jq操作頁面文檔http://jquery.cuishifeng.cn/
jq初始
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq初始</title>
</head>
<body>
<h1>jQuery就是js的工具庫 - 一系列功能的集合體</h1>
<h2>jq內部語法採用的就是原生js</h2>
<h2>jq環境如何搭建 - 在需要使用jq的html中引入jquery.js即可</h2>
<h2>jq就是優化了原生js魚頁面進行交互的邏輯</h2>
</body>
<!-- CDN 連接 外部資源 -->
<!---->
<!---->
</html>jq選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="d" class="box"></div>
<input type="text" id="d2" class="box" />
<h3 class="h3"></h3>
</body>
</html>jq事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq事件</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: orange;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
</body>
</html>jq內容操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq內容操作</title>
</head>
<body>
<h1 class="title">標題</h1>
<input type="text" class="title">
<button class="btn">改標題</button>
</body>
</html>jq樣式操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq樣式操作</title>
<style>
.box {
/*width: 200px;*/
height: 200px;
background-color: pink;
}
.sup-box {
/*width: 400px;*/
height: 100px;
background-color: orange;
border-radius: 50%;
line-height: 100px;
text-align: center;
color: red;
}
</style>
</head>
<body>
<div class="box" style="width: 600px">文本</div>
</body>
</html>
