宁波网站建设哪家快,网站建设公司的方案,网站建设怎么设置网址,网站建设群发广告词文章目录 一、基本了解1.1 导入jQuery库1.2 基本语法1.3 选择器 二、操作HTML2.1 隐藏和显示元素2.2 获取与设置内容2.3 获取、设置和删除属性2.4 添加元素2.5 删除元素2.6 设置CSS样式 三、jQuery Ajax3.1 基本语法3.2 回调函数3.3 常用HTTP方法3.4 案例一3.4.1 准备工作3.4.2… 文章目录 一、基本了解1.1 导入jQuery库1.2 基本语法1.3 选择器 二、操作HTML2.1 隐藏和显示元素2.2 获取与设置内容2.3 获取、设置和删除属性2.4 添加元素2.5 删除元素2.6 设置CSS样式 三、jQuery Ajax3.1 基本语法3.2 回调函数3.3 常用HTTP方法3.4 案例一3.4.1 准备工作3.4.2 准备一个api接口地址3.4.3 定义Ajax执行逻辑 3.5 案例二提交表单3.6 案例三数据表格 一、基本了解 概念 jQuery 是一个 JavaScript 库。极大地简化了 JavaScript 编程例如JS原生代码几十行实现的功能jQuery可能一两行就可以实现因此得以广泛应用官方网站。使用jQuery可以简化代码编写解决浏览器的兼容性。 发行版本 1.x常用版本运维人员已够使用。2.x3.x除非特殊要求一般用的少。 1.1 导入jQuery库 jQuery代码编写位置与JS位置一样但需要先head标签里引入jquery.min.js文件。 下载地址 https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.jshttps://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.jshttps://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js 1.下载到本地引用本地文件方式。 2.直接指定jquery库文件网址。
1.2 基本语法 语法格式$(selector).action()$代表jQuery本身只要是使用jQuery语法就必须使用$符号。(selector)选择器查找HTML元素。action()对元素的操作和js使用方式大致相同。 1.3 选择器
名称语法示例标签选择器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值等于“#”的元素
二、操作HTML
2.1 隐藏和显示元素 hide() 隐藏某个元素。show() 显示某个元素。toggle() hide()和show()方法之间切换。 1.设置三个按钮点击”隐藏“按钮则隐藏标签内容点击显示按钮则显示标签内容。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJQ测试/titlescript typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/script
/head
body
p iddemo我的名字是卿君/p
button idhide typebutton隐藏/button
button idshow typebutton显示/button
button idtoggle typebutton切换/buttonscript typetext/javascript$(#hide).click(function () {$(p).hide();});$(#show).click(function () {$(p).show();});$(#toggle).click(function () {$(p).toggle();})
/script
/body
/html2.查看效果。
2.2 获取与设置内容 text()设置或返回所选元素的文本内容。html()设置或返回所选元素的HTML内容。val()设置或返回表单字段的值。 1.对比文本内容和html内容区别。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJQ测试/titlescript typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/script
/head
bodyp idtxt演讲主题b正文/b。
/p
button typebutton id1显示文本/button
button typebutton id2显示HTML/button
p id3/pscript typetext/javascript$(#1).click(function () {x $(#txt).text(); //打印idtxt标签的文本内容。$(#3).text(x); //将获取的内容传入id3的标签。$(#3).text(x).css(color,red) //不会解析b标签});$(#2).click(function () {x $(#txt).html(); //获取html内容。$(#3).html(x).css(color,blue) //会解析b标签.html()设置})
/script
/body
/html2.设置返回表单字段的值。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJQ测试/titlescript typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/script
/head
body
h1欢迎访问运维管理系统/h1
用户名input typetext iduname nameusernamebr
密码input typepassword idpwd namepasswordbr
button typebutton idbtn显示输入内容/button
p iddemo/p
script typetext/javascript$(#btn).click(function () {a $(#uname).val();b $(#pwd).val();$(#demo).text(a , b).css(color,red)})
/script
/body
/html2.3 获取、设置和删除属性 attr()设置或返回所选元素的属性值。removeAttr()删除属性值。 1.获取元素属性值。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJQ测试/titlescript typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/script
/head
body
a hrefhttp://www.baidu.com ida1百度一下/abr
button typebutton idbtn查看CSS属性值/button
p iddemo/p
script typetext/javascript$(#btn).click(function () {x $(#a1).attr(href); //获取属性值$(#demo).text(x) //将属性值作为内容设置元素})
/script
/body
/html 2.设置超链接从第一个网址跳转到第二个网址。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJQ测试/titlescript typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/script
/head
body
a hrefhttp://www.baidu.com ida1百度一下/abr
button typebutton idbtn查看CSS属性值/button
p iddemo/p
script typetext/javascript$(#btn).click(function () {x $(#a1).attr(href,http://www.redis.cn/); //从百度跳转到redis官网。})
/script
/body
/html 3.删除属性值。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJQ测试/titlescript typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/script
/head
body
a hrefhttp://www.baidu.com ida1百度一下/abr
button typebutton idbtn删除CSS属性值/button
p iddemo/p
script typetext/javascript$(#btn).click(function () {x $(#a1).removeAttr(href); //删除href属性。})
/script
/body
/html 2.4 添加元素 append() 在被选中元素的结尾插入内容。prepend() 在被选中元素的开头插入内容。after() 在被选中元素之后插入内容。before() 在被选中元素之前插入内容。 1.示例代码。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJQ测试/titlescript typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/script
/head
body
div idmainp我爱中华/pp大好河山/pp华夏九州/p
/div
button typebutton idwenben1追加文本/button
button typebutton idwenben2开头新增文本/button
button typebutton idwenben3追加段落/button
script typetext/javascript$(#wenben1).click(function () {$(#main).append(追加的文本内容);})$(#wenben2).click(function () {$(#main).prepend(新增的文本内容);})$(#wenben3).click(function () {$(#main).append(p追加的段落/p);})
/script
/body
/html2.查看效果。
2.5 删除元素 remove()删除被选元素及子元素。empty()清空被选元素删除下面所有子元素。 1.删除div标签内容包括其下所有的标签内容。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJQ测试/titlescript typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/script
/head
body
div idmainp我爱中华/pp大好河山/pp华夏九州/p
/divbutton typebutton idwenben1追加文本/button
button typebutton idwenben2开头新增文本/button
button typebutton idwenben3追加段落/button
button typebutton idwenben4删除/button
script typetext/javascript$(#wenben1).click(function () {$(#main).append(追加的文本内容);})$(#wenben2).click(function () {$(#main).prepend(新增的文本内容);})$(#wenben3).click(function () {$(#main).append(p追加的段落/p);})$(#wenben4).click(function () {$(#main).remove();})
/script
/body
/html2.隐藏div标签内容。
2.6 设置CSS样式 css() 设置或返回样式属性键值。addClass() 向被选元素添加一个或多个类样式。removeClass() 从被选元素中删除一个或多个类样式。toggleClass() 对被选元素进行添加/删除类样式的切换操作。 1.直接设置样式属性。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJQ测试/titlescript typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/script
/head
body
div idmainp我爱中华/pp大好河山/pp华夏九州/p
/div
button typebutton idziti修改字体大小/button //点击按钮修改字体大小。
button typebutton idcolor修改字体颜色和样式/button //点击按钮修改字体颜色和样式。script typetext/javascript$(#ziti).click(function () {$(#main).css(font-size,6px);})$(#color).click(function () {$(#main).css({color:blue,font-style:italic});})
/script
/body
/html2.引用类修改样式属性。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJQ测试/titlescript typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/scriptstyle //定义通用属性样式。.mm {color: orange;font-size: 10px;}/style
/head
body
div idmainp我爱中华/pp大好河山/pp华夏九州/p
/div
button typebutton idziti修改字体颜色和大小/button //点击按钮修改字体颜色。
script typetext/javascript$(#ziti).click(function () {$(#main).addClass(mm);})
/script
/body
/html3.删除属性样式。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJQ测试/titlescript typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/scriptstyle //定义通用属性样式。.mm {color: orange;font-size: 10px;}/style
/head
body
div idmain classmmp我爱中华/pp大好河山/pp华夏九州/p
/div
button typebutton idziti删除字体属性/button //点击按钮去除原本的字体颜色。
script typetext/javascript$(#ziti).click(function () {$(#main).removeClass(mm);})
/script
/body
/html三、jQuery Ajax 概念 AjaxAsynchronous JavaScript And XML异步JavaScript和XMLAJAX 是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。例如在不刷新页面的情况下查询数据、登录验证等。可以减少带宽、服务器负载提高用户体验。使用场景网页局部刷新 工作流程 浏览器第一次访问网站一个页面时Web服务器处理完后会以消息体方式返回浏览器浏览器自动解析HTML内容。当有局部有新数据需要更新时Ajax会在背后去请求服务端拿到数据再交给js处理html最后渲染填充到那个div板块。此时就达到不需要刷新网页就可以加载刷新局部数据的功能。 3.1 基本语法 jQuery Ajax主要使用$.ajax()方法实现用于向服务端发送HTTP请求。基本语法$.ajax([settings]);settings 是$.ajax ( )方法的参数列表用于配置 Ajax 请求的键值对集合。 参数类型描述urlstring发送请求的地址默认为当前页地址typestring请求方式默认为GETdataobejct、array、string发送到服务器的数据dataTypestring预期服务器返回的数据类型包括JSON、XML、text、HTML等contentTypestring发送信息至服务器时内容编码类型。默认值: “application/xwww-form-urlencoded”。timeoutnumber设置请求超时时间globalBoolean表示是否触发全局Ajax事件默认为trueheadersobejct设置请求头信息asyncBoolean默认true所有请求均为异步请求。设置false发送同步请求
3.2 回调函数 回调函数参数引用一个函数并将数据作为参数传递给该函数。jqXHR一个XMLHttpRequest对象 参数函数格式描述beforeSendfunction(jqXHR,object)发送请求前调用的函数例如添加自定义HTTP头successfunction(data, String textStatus,jqXHR)请求成功后调用的函数参数data可选由服务器返回的json数据errorfunction(jqXHR,String textStatus,errorThrown)请求失败时调用的函数completefunction(jqXHR, String textStatus)请求完成后无论成功还是失败调用的函数
3.3 常用HTTP方法 HTTP方法向服务器提交数据服务器根据对应方法操作。 HTTP方法数据处理说明POST新增新增一个资源GET获取取得一个资源PUT更新更新一个资源DELETE删除删除一个资源
3.4 案例一
3.4.1 准备工作
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模板。
!DOCTYPE html
html langen
headmeta charsetUTF-8title平台首页/titlescript src/static/js/jquart.min.js/script
/head
body
首页
/body
/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),
)3.4.2 准备一个api接口地址
1.添加代码。 2.查看效果。
3.4.3 定义Ajax执行逻辑
1.html文件中写js脚本使用jQuery Ajax编写。
!DOCTYPE html
html langen
headmeta charsetUTF-8title平台首页/titlescript src/static/js/jquart.min.js/script
/head
body
首页
p ida这是Ajax请求的数据/p
script$.ajax({type: GET,url: /user_api/, //ajax请求地址。success: function (abc) { //abc位置参数是服务端返回的json数据。console.log(abc);$(#a).text(abc) //将请求结果打印到p标签显示。},error: function () {alert(请求错误)}})
/script
/body
/html2.查看结果。
3.5 案例二提交表单 新增数据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 0msg 数据库添加成功except Exception:code 1msg 数据库添加失败result {code: code, msg: msg}return JsonResponse(result)3.html模板内容。
!DOCTYPE html
html langen
headmeta charsetUTF-8title新增服务器/titlescript src/static/js/jquart.min.js/script
/head
body
h1添加服务器信息/h1##默认from表单是通过submit提交按钮来触发事件进行提交数据默认提交到action的url地址为空则是当前页面。
##若要使用from表单的submit提交按钮需要在from标签中添加参数onsubmitreturn false可以去掉触发提交事件。
##Ajax提交from表单会重复提交url添加#表示不触发from提交事件。
form action# methodpost //创建一个post提交表单。{% csrf_token %}主机名input typetext namehostnamebrIP地址input typetext nameipbr操作系统input typetext nameosbr
{# input typesubmit value提交 idbtn onsubmitreturn false #}button typebutton idbtn提交/button
/formp idnotice/p
script$(#btn).click(function () {// 1.先获取表单中所有值。var hostname $(input[namehostname]).val(); //通过jquery的属性选择器获取表单输入的值。var ip $(input[nameip]).val();var os $(input[nameos]).val();var csrf_token $(input[namecsrfmiddlewaretoken]).val();// 2.将表单的值统一放到对象。data {hostname: hostname, ip: ip, os: os, csrfmiddlewaretoken:csrf_token};// 3.通过ajax将这个对象提交到服务端数据接口。$.ajax({type: POST,url: /server/, //数据接口data: data,success: function (result) {if(result.code 0) {$(#notice).text(result.msg).css(color, blue)} else if(result.code 1){$(#notice).text(result.msg).css(color, red)}},error: function(){alert(服务器异常)}})});
/script
/body
/html4.测试效果。 3.6 案例三数据表格 批量删除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 bfor i in ids.split(,):print(i)# 基于ID使用模型类从数据库中删除code 0msg 删除数据成功except Exception:code 1msg 删除数据失败result {code: code, msg: msg}return JsonResponse(result)3.html模板内容。
!DOCTYPE html
html langen
headmeta charsetUTF-8title服务器列表/titlescript src/static/js/jquart.min.js/script
/head
body
{% csrf_token %}
table border1theadtrthinput typecheckbox idselectAll全选/thth主机名/ththIP/thth操作系统/th/tr/theadtbody idtbtrtdinput typecheckbox value1 nameid/tdtdtest1/tdtd192.168.1.10/tdtdCentOS7/td/trtrtdinput typecheckbox value2 nameid/tdtdtest2/tdtd192.168.1.11/tdtdCentOS7/td/trtrtdinput typecheckbox value3 nameid/tdtdtest3/tdtd192.168.1.11/tdtdCentOS7/td/tr/tbody
/tablebutton idbtn批量删除发送AJAX请求/button
p idnotice/pscript$(#selectAll).click(function(){var all_num $(#tb input).length; // 获取总行数var select_num $(#tb input:checked).length; // 获取选择的数量if(all_num select_num) { // 如果等于说明是全选再点击的目的是取消全选$(#tb input).prop(checked,false) // 设置未选中} else {$(#tb input).prop(checked,true) // 设置未选中}// 获取当前选中的input值var check $(#tb input:checked); //获取是一个数组check[0].value获取第一个input值// 将选中的input的id放到数组var ids new Array()for(var i0;icheck.length;i) {// for(i in check){console.log(check[i].value);ids.push(check[i].value);{#ids[i] check[i].value#}}ids ids.join(,);console.log(ids);var csrf_token $(input[namecsrfmiddlewaretoken]).val();// 2.将表单的值统一放到对象data {ids: ids, csrfmiddlewaretoken:csrf_token};// 3.通过ajax将这个对象提交到服务端数据接口});$(#btn).click(function(){$.ajax({type: POST,url: /server_table/, //数据接口data: data,success: function (result) {if(result.code 0) {$(#notice).text(result.msg).css(color, blue)} else if(result.code 1){$(#notice).text(result.msg).css(color, red)}},error: function(){alert(服务器异常)}})})
/script
/body
/html4.查看效果。
