前端基础4——jQuery

文章目录

  • 一、基本了解
    • 1.1 导入jQuery库
    • 1.2 基本语法
    • 1.3 选择器
  • 二、操作HTML
    • 2.1 隐藏和显示元素
    • 2.2 获取与设置内容
    • 2.3 获取、设置和删除属性
    • 2.4 添加元素
    • 2.5 删除元素
    • 2.6 设置CSS样式
  • 三、jQuery Ajax
    • 3.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.x,3.x:除非特殊要求,一般用的少。

1.1 导入jQuery库

  • 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.下载到本地,引用本地文件方式。
前端基础4——jQuery_第1张图片
2.直接指定jquery库文件网址。
前端基础4——jQuery_第2张图片

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.设置三个按钮,点击”隐藏“按钮,则隐藏标签内容;点击"显示"按钮,则显示标签内容。




    
    JQ测试
    


我的名字是:卿君

2.查看效果。
前端基础4——jQuery_第3张图片

2.2 获取与设置内容

  • text():设置或返回所选元素的文本内容。
  • html():设置或返回所选元素的HTML内容。
  • val():设置或返回表单字段的值。

1.对比文本内容和html内容区别。




    
    JQ测试
    



演讲主题: 正文

前端基础4——jQuery_第4张图片
前端基础4——jQuery_第5张图片

2.设置返回表单字段的值。




    
    JQ测试
    


欢迎访问运维管理系统

用户名:
密码:

前端基础4——jQuery_第6张图片

2.3 获取、设置和删除属性

  • attr():设置或返回所选元素的属性值。
  • removeAttr():删除属性值。

1.获取元素属性值。




    
    JQ测试
    


百度一下

前端基础4——jQuery_第7张图片
2.设置超链接,从第一个网址跳转到第二个网址。




    
    JQ测试
    


百度一下

3.删除属性值。




    
    JQ测试
    


百度一下

前端基础4——jQuery_第8张图片

2.4 添加元素

  • append() 在被选中元素的结尾插入内容。
  • prepend() 在被选中元素的开头插入内容。
  • after() 在被选中元素之后插入内容。
  • before() 在被选中元素之前插入内容。

1.示例代码。




    
    JQ测试
    


我爱中华

大好河山

华夏九州

2.查看效果。
前端基础4——jQuery_第9张图片

2.5 删除元素

  • remove():删除被选元素及子元素。
  • empty():清空被选元素(删除下面所有子元素)。

1.删除div标签内容,包括其下所有的标签内容。




    
    JQ测试
    


我爱中华

大好河山

华夏九州

前端基础4——jQuery_第10张图片
2.隐藏div标签内容。
前端基础4——jQuery_第11张图片

2.6 设置CSS样式

  • css() 设置或返回样式属性(键值)。
  • addClass() 向被选元素添加一个或多个类样式。
  • removeClass() 从被选元素中删除一个或多个类样式。
  • toggleClass() 对被选元素进行添加/删除类样式的切换操作。

1.直接设置样式属性。




    
    JQ测试
    


我爱中华

大好河山

华夏九州

//点击按钮修改字体大小。 //点击按钮修改字体颜色和样式。

前端基础4——jQuery_第12张图片
2.引用类修改样式属性。




    
    JQ测试
    
    


我爱中华

大好河山

华夏九州

//点击按钮修改字体颜色。

前端基础4——jQuery_第13张图片
3.删除属性样式。




    
    JQ测试
    
    


我爱中华

大好河山

华夏九州

//点击按钮去除原本的字体颜色。

前端基础4——jQuery_第14张图片

三、jQuery Ajax

概念:

  • Ajax(Asynchronous JavaScript And XML,异步JavaScript和XML),AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。例如在不刷新页面的情况下查询数据、登录验证等。
  • 可以减少带宽、服务器负载;提高用户体验。
  • 使用场景:网页局部刷新

工作流程:

  1. 浏览器第一次访问网站一个页面时,Web服务器处理完后会以消息体方式返回浏览器,浏览器自动解析HTML内容。
  2. 当有局部有新数据需要更新时,Ajax会在背后去请求服务端拿到数据,再交给js处理html,最后渲染填充到那个div板块。此时就达到不需要刷新网页,就可以加载刷新局部数据的功能。
    前端基础4——jQuery_第15张图片

3.1 基本语法

  • 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发送同步请求

3.2 回调函数

  • 回调函数:参数引用一个函数,并将数据作为参数传递给该函数。
  • 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) 请求完成后(无论成功还是失败)调用的函数

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模板。



    
    平台首页
    


首页


###########################################################
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'),
)

前端基础4——jQuery_第16张图片

3.4.2 准备一个api接口地址

1.添加代码。
前端基础4——jQuery_第17张图片
2.查看效果。
前端基础4——jQuery_第18张图片

3.4.3 定义Ajax执行逻辑

1.html文件中写js脚本,使用jQuery Ajax编写。




    
    平台首页
    


首页

这是Ajax请求的数据

2.查看结果。
前端基础4——jQuery_第19张图片

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 = 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提交事件。
//创建一个post提交表单。 {% csrf_token %} 主机名:
IP地址:
操作系统:
{# onsubmit="return false" #}

4.测试效果。
前端基础4——jQuery_第20张图片

前端基础4——jQuery_第21张图片

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 = 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

4.查看效果。
前端基础4——jQuery_第22张图片

你可能感兴趣的:(python开发,前端,jquery,javascript,python,运维开发)