我爱中华
大好河山
华夏九州
概念:
- jQuery 是一个 JavaScript 库。极大地简化了 JavaScript 编程,例如JS原生代码几十行实现的功能,jQuery可能一两行就可以实现,因此得以广泛应用,官方网站。
- 使用jQuery可以简化代码编写,解决浏览器的兼容性。
发行版本:
- 1.x:常用版本,运维人员已够使用。
- 2.x,3.x:除非特殊要求,一般用的少。
- jQuery代码编写位置与JS位置一样,但需要先head标签里引入jquery.min.js文件。
下载地址:
- https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js
- https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js
- https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js
1.下载到本地,引用本地文件方式。
2.直接指定jquery库文件网址。
- 语法格式:$(selector).action()
- $:代表jQuery本身,只要是使用jQuery语法,就必须使用$符号。
- (selector):选择器,查找HTML元素。
- action():对元素的操作,和js使用方式大致相同。
名称 | 语法 | 示例 |
---|---|---|
标签选择器 | element | $(“h2”) 选取所有h2元素 |
类选择器 | .class | $(“.title“) 选取所有class为title的元素 |
ID选择器 | #id | $(“#title”) 选取id为title的元素 |
并集选择器 | selector1,selector2,… | $(“div,p,.title”) 选取所有div、p和拥有class为title的元素 |
属性选择器 | $(“input[name=‘username’]”) 选取input标签名为username的元素。 $(“[href=‘#’]”) 选取href值等于“#”的元素 |
- hide() :隐藏某个元素。
- show() :显示某个元素。
- toggle() :hide()和show()方法之间切换。
1.设置三个按钮,点击”隐藏“按钮,则隐藏标签内容;点击"显示"按钮,则显示标签内容。
JQ测试
我的名字是:卿君
- text():设置或返回所选元素的文本内容。
- html():设置或返回所选元素的HTML内容。
- val():设置或返回表单字段的值。
1.对比文本内容和html内容区别。
JQ测试
演讲主题:
正文。
2.设置返回表单字段的值。
JQ测试
欢迎访问运维管理系统
用户名:
密码:
- attr():设置或返回所选元素的属性值。
- removeAttr():删除属性值。
1.获取元素属性值。
JQ测试
百度一下
JQ测试
百度一下
3.删除属性值。
JQ测试
百度一下
- append() 在被选中元素的结尾插入内容。
- prepend() 在被选中元素的开头插入内容。
- after() 在被选中元素之后插入内容。
- before() 在被选中元素之前插入内容。
1.示例代码。
JQ测试
我爱中华
大好河山
华夏九州
- remove():删除被选元素及子元素。
- empty():清空被选元素(删除下面所有子元素)。
1.删除div标签内容,包括其下所有的标签内容。
JQ测试
我爱中华
大好河山
华夏九州
- css() 设置或返回样式属性(键值)。
- addClass() 向被选元素添加一个或多个类样式。
- removeClass() 从被选元素中删除一个或多个类样式。
- toggleClass() 对被选元素进行添加/删除类样式的切换操作。
1.直接设置样式属性。
JQ测试
我爱中华
大好河山
华夏九州
//点击按钮修改字体大小。
//点击按钮修改字体颜色和样式。
JQ测试
我爱中华
大好河山
华夏九州
//点击按钮修改字体颜色。
JQ测试
我爱中华
大好河山
华夏九州
//点击按钮去除原本的字体颜色。
概念:
- Ajax(Asynchronous JavaScript And XML,异步JavaScript和XML),AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。例如在不刷新页面的情况下查询数据、登录验证等。
- 可以减少带宽、服务器负载;提高用户体验。
- 使用场景:网页局部刷新
工作流程:
- jQuery Ajax主要使用$.ajax()方法实现,用于向服务端发送HTTP请求。
- 基本语法:$.ajax([settings]);
- settings 是$.ajax ( )方法的参数列表,用于配置 Ajax 请求的键值对集合。
参数 | 类型 | 描述 |
---|---|---|
url | string | 发送请求的地址,默认为当前页地址 |
type | string | 请求方式,默认为GET |
data | obejct、array、string | 发送到服务器的数据 |
dataType | string | 预期服务器返回的数据类型,包括JSON、XML、text、HTML等 |
contentType | string | 发送信息至服务器时内容编码类型。默认值: “application/xwww-form-urlencoded”。 |
timeout | number | 设置请求超时时间 |
global | Boolean | 表示是否触发全局Ajax事件,默认为true |
headers | obejct | 设置请求头信息 |
async | Boolean | 默认true,所有请求均为异步请求。设置false发送同步请求 |
- 回调函数:参数引用一个函数,并将数据作为参数传递给该函数。
- jqXHR:一个XMLHttpRequest对象
参数 | 函数格式 | 描述 |
---|---|---|
beforeSend | function(jqXHR,object) | 发送请求前调用的函数,例如添加自定义HTTP头 |
success | function(data, String textStatus,jqXHR) | 请求成功后调用的函数,参数data:可选,由服务器返回的json数据 |
error | function(jqXHR,String textStatus,errorThrown) | 请求失败时调用的函数 |
complete | function(jqXHR, String textStatus) | 请求完成后(无论成功还是失败)调用的函数 |
- HTTP方法:向服务器提交数据,服务器根据对应方法操作。
HTTP方法 | 数据处理 | 说明 |
---|---|---|
POST | 新增 | 新增一个资源 |
GET | 获取 | 取得一个资源 |
PUT | 更新 | 更新一个资源 |
DELETE | 删除 | 删除一个资源 |
1.创建好一个Django基础项目。
###########################################################
1.项目根url路由规则。
from django.urls import path,re_path
from qingjun import views
urlpatterns = [
re_path('^$',views.qingjun)
]
###########################################################
2.创建一个应用模块qingjun。
python manage.py startapp qingjun
###########################################################
3.qingjun.views.py视图文件。
from django.shortcuts import render
def qingjun(request):
return render(request,'index.html')
###########################################################
4.定义index.html模板。
平台首页
首页
###########################################################
5.导入jquery库文件,存放目录/static/js/jquart.min.js。
库文件下载地址:https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js
###########################################################
6.更改django默认静态文件地址,settings.py文件末尾追加以下内容。
STATICFILES_DIRS = (
os.path.join(BASE_DIR,'static'),
)
1.html文件中写js脚本,使用jQuery Ajax编写。
平台首页
首页
这是Ajax请求的数据
- 表单输入新内容,点击提交按钮,Ajax向后端API发起数据。
1.项目url路由规则代码。
from django.urls import path,re_path
from qingjun import views
urlpatterns = [
re_path('server/', views.server),
]
2.应用qingjun中的视图函数server代码。
from django.shortcuts import render
from django.http import JsonResponse
def server(request):
if request.method == "GET":
return render(request, 'server.html')
elif request.method == "POST":
print(request.POST)
try:
pass
# 获取提交的字段,使用模型类入库。
code = 0
msg = "数据库添加成功!"
except Exception:
code = 1
msg = "数据库添加失败!"
result = {'code': code, 'msg': msg}
return JsonResponse(result)
3.html模板内容。
新增服务器
添加服务器信息
##默认from表单是通过submit提交按钮来触发事件进行提交数据,默认提交到action的url地址,为空则是当前页面。
##若要使用from表单的submit提交按钮,需要在from标签中添加参数onsubmit="return false,可以去掉触发提交事件。
##Ajax提交from表单会重复提交url,添加#表示不触发from提交事件。
- 点击”批量删除“按钮,Ajax向后端API发送要删除的数据ID。
1.项目url路由规则代码。
from django.urls import path,re_path
from qingjun import views
urlpatterns = [
re_path('server_table/', views.server_table),
]
2.应用qingjun中的视图函数server代码。
from django.shortcuts import render
from django.http import JsonResponse
def server_table(request):
if request.method == "GET":
return render(request,'server_table.html')
elif request.method == "POST":
ids = request.POST.get("ids")
try:
# a = b
for i in ids.split(','):
print(i)
# 基于ID,使用模型类从数据库中删除
code = 0
msg = "删除数据成功!"
except Exception:
code = 1
msg = "删除数据失败!"
result = {'code': code, 'msg': msg}
return JsonResponse(result)
3.html模板内容。
服务器列表
{% csrf_token %}
全选
主机名
IP
操作系统
test1
192.168.1.10
CentOS7
test2
192.168.1.11
CentOS7
test3
192.168.1.11
CentOS7