• JavaWeb之jQuery

    文章目录

    1.开篇基础

    1.1 DOM对象

    文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展 标志语言的标准编程接口。 通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节 点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。

    1.2 DOM对象与jQuery对象

    更加通俗的来说，使用JS语法创建的对象叫做JS对象，也叫做DOM对象。

    var obj = document.getElementById("txt1")

    • 1

    而使用JQuery语法创建的对象叫做JQuery对象。

    var jobj = $("#txt1")

    • 1

    不过要注意的是，jQuery对象是一个数组，即使只有一个值也是数组。

    1.3 DOM对象和jQuery对象的相互转换

    有时候我们DOM对象想要使用JQuery的方法，JQuery对象想使用DOM对象的方法，所以我们就需要对对象的类型进行转换。

    • DOM对象转jQuery对象：

      • var obj = $(jobj)

        • 1

    • JQuery对象转DOM对象：

      • 我们已经知道jQuery对象是一个数组，所以我们可以使用下标的方式获取DOM对象

      • var obj = jobj.get(index)
var obj = jobj[index]

        • 1
        • 2

    2.选择器

    选择器就是定位条件；通知 jquery 函数定位满足条件的 DOM 对象。

    2.1 基本选择器

    2.1.1 id选择器

    这个就是通过标签的ID来定位到某个具体的对象，这里id是参数

    var jobj = $("#id")

    • 1

    2.1.2 类选择器

    这个就是通过类名获取所有该类的标签，这里class是类名。

    var jobj = $(".class")

    • 1

    2.1.3 标签选择器

    标签选择器就是根据标签的名字获取DOM对象，这里div是示例标签名。

    var jobj = $("div")

    • 1

    2.1.4 所有选择器

    所有选择器就是选取页面中所有 DOM 对象。

    var jobj = $("*")

    • 1

    2.1.5 组合选择器

    所谓的组合选择器就是将id、类名、标签名组合起来选取对应的DOM对象。

    var jobj = $("id,class,标签名")

    • 1

    2.2 表单选择器

    表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单，均可做出相应选择。表单选择器是为了能更加容易地操作表单。

    $(":type属性值")
<!-- 例子 -->
$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    3.过滤器

    过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选，过滤条件不能独立出现在 jquery 函数，如果使用只能出现在选择器后方。

    3.1 基本过滤器

    • 选择第一个 first, 保留数组中第一个 DOM 对象：
    $("选择器:first")  

    • 1
    • 选择最后一个 last, 保留数组中最后 DOM 对象
    $("选择器:last")

    • 1
    • 选择数组中指定对象
    $("选择器:eq(数组索引)") 

    • 1
    • 选择数组中小于指定索引的所有 DOM 对象
    $("选择器:lt(数组索引)") 

    • 1
    • 选择数组中大于指定索引的所有 DOM 对象
    $("选择器:gt(数组索引)")

    • 1

    注意索引是从0开始。

    3.2 表单属性过滤器

    • 选择可用的文本框
    $(":text:enabled")

    • 1
    • 选择不可用的文本框
    $(":text:disabled")

    • 1
    • 复选框选中的元素
    $(":checkbox:checked")

    • 1
    • 选择指定下拉列表的被选中元素
    $("选择器 > option:selected")

    • 1

    最后一个有点抽象，举个例子吧：

    <select id="lang">
    <option value="抽烟">抽烟option>
    <option value="喝酒" selected>喝酒option>
    <option value="烫头">烫头option>
select>

    • 1
    • 2
    • 3
    • 4
    • 5

    下面我们使用最后一个过滤器获得下拉列表中被选中的元素

    var obj = $("#lang > option:selected")

    • 1

    4.函数

    4.1 val()

    无参的话则默认返回JQuery对象（这是一个数组前面已经说过了）中第一个DOM对象的value值

    $(选择器).val()

    • 1

    有参的话，那么就会对JQuery对象中所有DOM对象进行统一赋值

    $(选择器).val("参数")

    • 1

    4.2 text()

    无参则读取所有DOM对象中的文本内容，将其拼接成一个字符串返回

    $(选择器).text()

    • 1

    有参则对JQuery对象中的所有DOM对象的文本显示内容统一赋值

    $(选择器).text("参数")

    • 1

    4.3 attr()

    无参的情况下默认获取第一个DOM对象的第一个属性值

    $(选择器).attr()

    • 1

    有一个参数的情况下获取指定属性名的值

    $(选择器).attr("src")

    • 1

    有两个参数的情况下则给指定属性赋值

    $(选择器).attr("src", "img/img.jpg")

    • 1

    4.4 hide()

    将JQuery对象中的所有DOM对象隐藏起来

    $(选择器).hide()

    • 1

    4.5 show()

    将数组中的所有DOM对象展示出来

    $(选择器).show()

    • 1

    4.6 remove()

    将数组中的所有DOM对象及其子对象删除

    $(选择器).remove()

    • 1

    4.7 empty()

    将数组中所有 DOM 对象的子对象删除

    $(选择器).empty()

    • 1

    4.8 append()

    为数组中所有DOM对象添加子对象

    $(选择器).append("
    测试样例
    ")

    • 1

    4.9 html()

    该函数设置或返回被选元素的内容（innerHTML）

    无参获取 DOM 数组第一个匹元素的内容

    $(选择器).html()

    • 1

    有参则对所有DOM对象的内容赋值

    $(选择器).html("设置文本内容")

    • 1
    • html()与text()函数的区别：
      • 这里如果DOM对象的内容包含了HTML代码（例如
        哈
        哈
        ）,使用text函数返回的是”哈哈“，而如果使用html函数则返回的是”哈
        哈“

    4.10 each()

    each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数

    $.each( 要遍历的对象, function(index,element) { 处理程序 } )

    • 1

    5.事件

    5.1 定义元素监听事件

    监听事件名称是 js 事件中去掉 on 后的内容， js 中的 onclick 的监听事件名称是 click。

    $(选择器).监听事件名称(处理函数)
$("#id").click(function(...))

    • 1
    • 2

    5.2 on()绑定事件

    on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利，推荐使用该方法。

    语法规则：

    $().on(event,data,function)

    • 1
    • event：可以为一个或者多个事件，多个事件用空格隔开。
    • data：可选，规定传递到函数的额外数据，使用json 格式
    • function：可选。规定当事件发生时运行的函数。

    6.AJAX

    jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新 到 DOM 对象

    6.1 $.ajax()

    $.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。

    语法规则：

    $.ajax({
	name:value,
	name:value,
	name:value,
	...
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    该函数的参数是一组json格式的数据。下面我们来说常用的参数：

    • async：boolean值，表示请求是否异步处理，默认是true
    • contentType：发送数据到服务器的内容类型，默认是"application/x-www-form-unlencoded"
    • data：规定要发送到服务器的数据，可以是string、数组，多数是json
    • dataType：期望从服务器响应的数据类型。jQuery 从 xml, json, text, html 这些中测试最可能的类型
    • error(xhr,status,error)：如果请求失败要运行的函数, 其中 xhr, status, error 是自定义的形参名
    • success(result,status,xhr)：当请求成功时运行的函数，其中 result, status, xhr 是自定义的形参名
    • type：规定请求的类型（GET 或 POST 等），默认是 GET， get，post 不用区分大小写 url：规定发送请求的 URL。

    以上xhr是XMLHttpRequest对象。

    举个例子：

    $.ajax({
    // 请求方式
    type : "get",
    // 请求路径
	url : "/ajax/listArea",
    // 附加数据
    data : "t=" + new Date().getTime(),
    // 支持异步
    async : true,
    // 请求成功，zhi'xing'ha
    success : function(jsonArr){

		var html = "";
		for (var i = 0; i < jsonArr.length; i++) {
			var area = jsonArr[i]
			html += "+area.name+""
		}
		$("#province").html(html)
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
  • 相关阅读:
    GFS 分布式文件系统
    Node.js 实战 第2章 Node 编程基础 2.9 异步开发的难题
    第一章：前言
    【视频】报告分享|展望人工智能银行：当银行遇到AI
    前端面试题：基础理论整理（篇2）
    【业务场景】用户连点
    【Mybatis源码】XMLConfigBuilder构建器 - 加载XML与创建Configuration对象的过程
    深度学习YOLOv5车辆颜色识别检测 - python opencv 计算机竞赛
    目标检测算法——YOLOV6
    聊一聊责任链模式
  • 原文地址：https://blog.csdn.net/qq_52002412/article/details/126692873