人活着就是一种修行，不要因为命运坎坷，就迷失了自己。不要把自己的命运，拴到了别人的裤腰带上。命运永远不会向你承诺什么，尤其是不会承诺给你幸福，一切都得靠自己争取!
总结：
- 同步请求，点击整个页面全部刷新一遍； 异步请求： 在页面不懂的基础上 与服务器进行交互；
- jquery ui 可以学习一下，在demo中 有很多样式；
一个JavaScript库，极大简化了JS编程。
jQuery库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
除了上述功能外，它之所以流行，是官方、非官方提供了海量的插件。
1. 安装
下载jquery，解压后，一个开发用的，一个min是压缩后的部署用。
<script src="jquery.js"></script>
提示： 将下载的文件放在网页的同一目录下，就可以使用jQuery。
2. 基本语法
$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的action() 执行对元素的操作
文档就绪函数
为了防止文档加载完之前就允许jQuery代码，需要一个网页加载完的函数。
// 第一种 ：基本没人使用
$(document).ready(function(){
/* jQuery functions go here */
});
可以简写为下面形式
$(function(){
/* jQuery functions go here */
});
// t1.html test text 红色
<html>
<head>
<title>test page</title>
<meta charset="utf-8">
<style type="text/css"></style>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#main').css('color','red')
});
</script>
</head>
<body>
<div id='main'>
test text
</div>
</body>
</html>
3. jQuery 元素选择器
jQuery 使用CSS 选择器来选取HTML 元素。
$("p.intro") 选取所有class="intro" 的 <p> 元素。
$("p#demo") 选取所有id="demo" 的 <p> 元素。
4. jQuery 属性选择器
jQuery 使用XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有href 属性的元素。
$("[href='#']") 选取所有带有href 值等于"#" 的元素。
$("[href!='#']") 选取所有带有href 值不等于"#" 的元素。
$("[href$='.jpg']") 选取所有href 值以".jpg" 结尾的元素。
5. jQuery事件函数
为jQuery对象增加事件回调函数，动态绑定的；审查源码 观察是越来越难了；
<html>
<head>
<title>test page</title>
<meta charset="utf-8">
<style type="text/css"></style>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#main').css('color','red')
$('button').click(function(){
console.log(this);
$(this).hide();
})
});
</script>
</head>
<body>
<div id='main'>
test text
</div>
<hr>
<button>test click</button>
</body>
</html>
注意
$('button.testclick').click() //调用click
$('button.testclick').click(function(){}) // 设置click事件定义 回调操作
<html>
<head>
<title>test page</title>
<meta charset="utf-8">
<style type="text/css"></style>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#main').css('color','red')
$('button').click(function(){
console.log(this);
$(this).hide();
});
var trs = $('.detail tr');
console.log(trs);
trs.each(function (index,domEle){
$(domEle).css("backgroundColor",index % 2 ? 'red': "yellow");
});
});
</script>
<style type="text/css">
table,td {
border:#000 solid 1px;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
padding: 5px;
}
</style>
</head>
<body>
<div id='main'>
test text
</div>
<hr>
<button>test click</button><br>
<table class='detail'>
<tr>
<td>1</td>
<td>test1</td>
</tr>
<tr>
<td>2</td>
<td>test2</td>
</tr>
</table>
</body>
</html>
6. Ajax
jQuery对XMLHttpRequest组件的调用接口实现了封装，更加方便调用。
默认是异步请求。
1. GET请求
# user/view.py/show
@auth # 认证拦截
def show(request:HttpRequest): # 方法的使用方式各不相同；
# print(request.user,'---------------------------')
print(1111,request.GET)
print(2222,request.POST)
print(3333,request.body)
return JsonResponse({'status':'ok'})
<head>
<title>test page</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#main').css('color','red');
$('button').click(function(){
console.log(this);
});
var trs = $('.detail tr');
console.log(trs);
trs.each(function (index,domEle){
$(domEle).css("backgroundColor",index % 2 ? 'red': "yellow");
});
// ajax
$('#ajaxget').click(function(){
$.get('http://127.0.0.1:8000/user/show?id=123',{name:'tom'},function(data) {
console.log(data)
});
});
$('#ajaxpost').click(function(){
$.post('http://127.0.0.1:8000/user/show?id=123',{name:'tom'},function(data) {
console.log(data)
});
});
});
Access-Control-Allow-Origin问题
服务器端响应头设置header = {'Access-Control-Allow-Origin': '*'}
POST请求
# t1.html
<html>
<head>
<title>test page</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#main').css('color','red');
$('button').click(function(){
console.log(this);
});
var trs = $('.detail tr');
console.log(trs);
trs.each(function (index,domEle){
$(domEle).css("backgroundColor",index % 2 ? 'red': "yellow");
});
// ajax
$('#ajaxget').click(function(){
$.get('http://127.0.0.1:8000/user/show?id=123',{name:'tom'},function(data) {
console.log(data)
});
});
$('#ajaxpost').click(function(){
$.post('http://127.0.0.1:8000/user/show?id=123',{name:'tom'},function(data) {
console.log(data)
console.log(data.test)
});
});
$('#ajaxjson').click(function(){
console.log('click +++++++++++++++--')
$.ajax({
type:"POST",
contentType:"application/json",
url:"http://127.0.0.1:8000/user/show?id=123",
// data:"name=John&location=Boston",
data:{name:'John',age:20},
success:function(data){
console.log(data);
}
});
});
});
</script>
<style type="text/css">
table,td {
border:#000 solid 1px;
}
table {
border-collapse: collapse;
width: 80%;
}
td {
padding: 5px;
}
</style>
</head>
<body>
<div id='main'>
test text
</div>
<hr>
<button>test click</button><br>
<table class="detail">
<tr>
<td>1</td>
<td>test1</td>
</tr>
<tr>
<td>2</td>
<td>test2</td>
</tr>
</table>
<hr>
<button id='ajaxget'>ajax get</button>
<button id='ajaxpost'>ajax post</button>
<button id='ajaxjson'>ajax json</button>
</body>
</html>
# setting 添加
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
# user/view.py 修改;
@auth # 认证拦截
def show(request:HttpRequest): # 方法的使用方式各不相同；
# print(request.user,'---------------------------')
print(1111,request.GET)
print(2222,request.POST)
print(3333,request.body)
res = JsonResponse({'test':'ok'})
res['Access-Control-Allow-Origin'] = '*'
return res
网友评论