jquery
- 01-選擇集轉移.html
- 02-獲取標簽內容.html
- 03-獲取和設定標簽屬性.html
- 04-jquery 事件.html
- 05-靜態 web服務器-面向物件版.py
- 05-事件冒泡.html
- 06-事件系結出現的問題.html
- 07-事件代理.html
- 08-JS 物件.html
- 09-json字串.html
- 10-天氣頁面.html
01-選擇集轉移.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function (){
// 選擇文字 3 的標簽
$li = $('#box');
$li.css({'background': 'red'});
// 選擇上一個
$li.prev().css({'background': 'blue'});
// 上邊所有的
$li.prevAll().css({'color':'green'});
// 下邊一個
$li.next().css({'background': 'yellowgreen'});
// 下邊所有的
$li.nextAll().css({'color': 'orange'});
// 出了自己之外同一級節點
$li.siblings().css({'font-size': '26px'});
// 選擇父級
$('ul').parent().css({'background': 'pink'});
// 選擇孩子, 整體的 div 不會有變化
$('div').children().css({'background': 'blue'});
// find() 查找的是子標簽,最終選擇的是子標簽,
$('div').find('.c_p').css({'color': 'red'});
// has 過濾,查找的是子標簽,選擇的是自己
$('div').has('.c_p').css({'font-size': '30px'})
});
</script>
</head>
<body>
<ul>
<!-- li{文字$}*8 -->
<li>文字1</li>
<li>文字2</li>
<li id="box">文字3</li>
<li>文字4</li>
<li>文字5</li>
<li>文字6</li>
<li>文字7</li>
<li>文字8</li>
</ul>
<div>
這是第一個 div
<p>
這是 第一個div 中的p
</p>
</div>
<div>
這是第二個 div
<p class="c_p">
這是 第二個 div 中的p
</p>
</div>
</body>
</html>
02-獲取標簽內容.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 獲取標簽的內容
var sResult = $('div').html();
alert(sResult);
// 修改標簽的內容
$('div').html('good good study !');
// 追加內容
$('div').append('<a href="http://www.baidu.com">百度</a>');
});
</script>
</head>
<body>
<div>
好好學習
</div>
</body>
</html>
03-獲取和設定標簽屬性.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $A = $('a');
// 獲取 a 標簽的 href 屬性
// alert($A.prop('href'));
// 設定屬性
$A.prop({'href':'http://www.itcast.cn', 'target': '_blank'});
})
function fnClick(){
// 獲取 input 標簽
alert($('#box').prop('value'));
}
function fnAdd(){
// alert($('#box').prop('value'));
var result = $('#box').val();
// 默認獲取到的內容是字串型別, 想要進行數字加法,需要進行型別轉換
result = parseInt(result);
$('#box').val(result + 10);
}
</script>
</head>
<body>
<div>
<a href="http://www.baidu.com">百度</a>
</div>
<div>
<input type="text" name="" id="box" value="10">
<input type="button" value="點擊獲取 input 中的內容" onclick="fnClick()">
<input type="button" value="點擊,對 input 中的數字 + 10" onclick="fnAdd()">
</div>
</body>
</html>
04-jquery 事件.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 80px;
background: red;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 滑鼠點擊事件
$('div').click(function(){
// 特殊的變數, this, 發生事件的標簽物件
console.log('滑鼠點擊了:', $(this).html());
});
// 滑鼠進入
$('div').mouseover(function(){
console.log('滑鼠進入了:');
$(this).css({'background': 'green'})
});
// 滑鼠離開
$('div').mouseleave(function(){
console.log('滑鼠離開了:');
$(this).css({'background': 'red'})
});
// 獲得焦點 輸入框
$('input').focus(function(){
$(this).prop({'placeholder':' '});
$(this).css({'font-size': '28px'});
});
// 失去焦點
$('input').blur(function(){
$(this).prop({'placeholder':'請輸入內容'});
$(this).css({'font-size': ''});
});
})
</script>
</head>
<body>
<div>
這是一個 div
</div>
<input type="text" placeholder="請輸入內容">
</body>
</html>
05-靜態 web服務器-面向物件版.py
import socket
import threading
class HTTPWebServer(object):
def __init__(self):
self.server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
self.server_socket.bind(('', 9090))
self.server_socket.listen(128)
def __del__(self):
self.server_socket.close()
def start(self):
while True:
new_socket, ip_port = self.server_socket.accept()
print(f'{ip_port} 連接了.....')
sub_thread = threading.Thread(target=self.handle_client_request, args=(new_socket, ip_port))
sub_thread.start()
@staticmethod
def handle_client_request(n_socket, client_ip_port):
# 接收請求報文
buf = n_socket.recv(4096)
if buf:
buf = buf.decode() # 轉換為 str
# 決議資源路徑
file_name = buf.split(' ', 2)[1]
print(f"請求的資源未: {file_name}")
if file_name == '/':
file_name = '/index.html'
# 6.1 回應行
response_line = 'HTTP/1.1 200 OK\r\n'
# 6.2 回應頭
response_header = 'Server:PY\r\nName:Py42\r\nContent-Type: text/html;charset=utf-8\r\n'
# 6.3 空行 \r\n
# 6.4 回應體(具體的頁面資料), 回傳 index.html 的頁面
try:
f = open('static' + file_name, 'rb') # 讀取到是 bytes 型別
data = f.read()
f.close()
except FileNotFoundError:
f = open('static/error.html', 'rb')
data = f.read()
f.close()
response_line = 'HTTP/1.1 404 NOT FOUND\r\n'
# 合成回應體
response = (response_line + response_header + '\r\n').encode() + data
n_socket.send(response)
else:
print(f"{client_ip_port} 關閉了")
n_socket.close()
if __name__ == '__main__':
# 1. 創建服務器物件
web = HTTPWebServer()
# 2. 啟動服務器
web.start()
05-事件冒泡.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background: red;
}
.box2{
width: 100px;
height: 100px;
background: blue;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('div').click(function(){
$(this).css({'background': 'pink'})
});
})
</script>
</head>
<body>
<div class="box1">
這是一個 div
<div class="box2">
好好學習
</div>
</div>
</body>
</html>
06-事件系結出現的問題.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 事件系結,只能對在系結之前已經存在的標簽進行系結,新加入的標簽不能系結
$('li').click(function(){
console.log($(this).html());
})
});
function fnClick(){
// 添加 li 標簽
$('ul').append('<li>文字' + ($('li').length+1) + '</li>')
}
</script>
</head>
<body>
<ul>
<li>文字1</li>
<li>文字2</li>
<li>文字3</li>
<li>文字4</li>
<li>文字5</li>
</ul>
<input type="button" value="點擊添加 li 標簽" onclick="fnClick()">
</body>
</html>
07-事件代理.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// $('li').click(function(){
// console.log($(this).html());
// })
// 事件代理,讓父標簽代理子標簽的事件
$('ul').delegate('li', 'click', function(){
console.log($(this).html());
});
});
function fnClick(){
// 添加 li 標簽
$('ul').append('<li>文字' + ($('li').length+1) + '</li>')
}
</script>
</head>
<body>
<ul>
<li>文字1</li>
<li>文字2</li>
<li>文字3</li>
<li>文字4</li>
<li>文字5</li>
</ul>
<input type="button" value="點擊添加 li 標簽" onclick="fnClick()">
</body>
</html>
08-JS 物件.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// JS 物件兩種創建方式
// 方式一 new Object
var oPerson = new Object();
// 可以給物件添加屬性
oPerson.name = '小王';
oPerson.age = 18;
// 添加方法
oPerson.sayName = function (){
alert(this.name);
};
// 呼叫屬性
// alert(oPerson.age);
// 呼叫方法
// oPerson.sayName();
// 方式二, 使用字面量 推薦
oStudent = {
name: '小明',
age: 12,
sayName:function(){
alert(this.name);
}
}
// 呼叫
alert(oStudent.age);
oStudent.sayName();
</script>
</head>
<body>
</body>
</html>
09-json字串.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// json 本質是字串
var sS = '["1", 2, {"name":"小明", "age": 18}]';
console.log(sS, typeof(sS));
// 將 json 轉換為 JS 物件
var oObj = JSON.parse(sS);
console.log(oObj, typeof(oObj));
console.log(oObj[0], oObj[1], oObj[2].name, oObj[2].age);
</script>
</head>
<body>
</body>
</html>
10-天氣頁面.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>天氣查詢</h3>
<p>
<input type="text">
<input type="button" value="查詢">
</p>
<hr>
<h3>查詢結果</h3>
<ul>
<li>所在城市: 無</li>
<li>城市天氣: 無</li>
<li>城市溫度: 無</li>
<li>空氣級別: 無</li>
<li>風力級別: 無</li>
</ul>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/396228.html
標籤：其他