【Web】JQuery、Ajax框架基础知识

最新推荐文章于 2022-11-01 21:47:38 发布

雨下一整晚real

最新推荐文章于 2022-11-01 21:47:38 发布

阅读量208

点赞数

分类专栏： Web前端文章标签： jquery ajax javascript

本文链接：https://blog.csdn.net/qq_43103529/article/details/119978731

版权

Web前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

JQuery框架

一、概念

一个JavaScript框架，简化js开发

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库 (或JavaScript框架) 。jQuery设计的宗旨是“write Less, Do More”，即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

JavaScript框架：本质上就是一些js文件，封装了js的原生代码

二、快速入门

下载使用

进入网站可以查看到各种版本的jQuery版本包，选择需要使用的版本下载或者引用都可。

建议生产环境中使用min.js结尾的版本，体积更小，加载速度更快

第一个程序：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
  <div id="div1">div1...</div>
  <div id="div2">div2...</div>
</body>
<script>
  // 使用jQuery获取元素
  var div1 = $("#div1");
  alert(div1.html());
  var div2 = $("#div2");
  alert(div2.html());
</script>
</html>

其中，$是一个jQuery中内置的函数名。可以通过这个方法获取到html中的各种元素。

jQuery对象和js对象

// 使用js获取div元素
var divs = document.getElementsByTagName("div");
alert(divs);      // [object HTMLCollection]  数组
// 使用jQuery方式获取div元素
var $divs = $("div");
alert($divs);     // [object Object]  数组
// 二者区别在于：使用js数组对象的时候，要进行遍历操作；使用jq对象的时候不需要
var html = $divs.html("aaa");

/*区别：
* jq对象使用更加方便简洁
* jq对象和js对象中的方法不通用
* jq对象和js对象相互转换：
* jq ---> js  jq[index] / jq.get(index)
* js ---> jq  $(js Object)
* */

三、选择器

选择器：筛选具有相同特征的元素（标签）

基本语法

事件绑定：为jQuery获取到的元素添加事件绑定

<input type="button" value="点击" id="b1">

// 需求：给按钮绑定事件
// 1. 获取元素
$("#b1").click(function () {
    alert("abc");
})

添加事件绑定的时候直接使用jq提供的方法，使用匿名函数的方式。

入口函数：jq中的执行入口

// js中原生的onload，页面加载完毕时执行该函数
window.onload = function() {

}
// jq入口函数，当页面加载结束时执行，相当于js中原生的onload
$(function () {
    
});

/*
* window.onload和$(function)的区别
* window.onload只能使用一次，定义多次将只会执行最后定义的那次
* $(function)可以执行多次
* */

样式控制：利用jq中的方法控制css样式

// 样式控制
$(function () {
   // $("#div1").css("background-color","red");
   $("#div1").css("backgroundColor","red");
});

两种写法都能生效，参数为键值对的形式。

DOM操作

内容操作

html() 获取/设置元素的标签体内容，设置的时候会将标签体内容全部替换

text() 获取/设置元素的标签体纯文本内容，设置的时候会将标签体内容全部替换

val() 获取/设置元素的value属性值

属性操作

通用属性操作

attr():获取/设置元素的属性
removeAttr():删除属性
prop():获取/设置元素的属性
removeProp():删除属性

attr和prop区别：
1.如果操作的是元素的固有属性，则建议使用prop
2.如果操作的是元素自定义的属性，则建议使用attr

对class属性操作

addClass():添加class属性值
removeClass():删除class属性值
toggleClass():切换class属性
css():获取/设置元素的css样式

toggleClass("one")：判断如果元素对象上存在class=“one”，则将属性值one删除掉。如果元秦对象上不存在，则添加属性值one

CRUD操作

append():父元素将子元秦追加到末尾
- 对象1.append(对象2):将对象2添加到对象1元秦内部，并且在末尾
prepend():父元素将子元素追加到开头
- 对象1. prepend(对象2) :将对象2添加到对象1元秦内部，并且在开头
appendTo()
- 对象1. appendTo(对象2):将对象1添加到对象2内部，并且在末尾
prependTo()
- 对象1. prependTo(对象2) :将对象1添加到对象2内部，并且在开头
after():添加元素到元素后边
- 对象1.after(对象2) :将对象2添加到对象1后边。对象1和对象2是兄弟关系
before():添加元素到元素前边
- 对象1. before(对象2) :将对象2添加到对象1前边。对象1和对象2是兄弟关系
insertAfter()
- 对象1. insertAfter(对象2) :将对象2添加到对象1后边。对象1和对象2是兄弟关系
insertBefore()
- 对象1. insertBefore(对象2) :将对象2添加到对象1前边。对象1和对象2是兄弟关系
remove()：移除元素
- 对象.remove() :将对象删除
empty() :清空元素的所有后代元素
- 对象. empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

四、动画

三种方式显示和隐藏元秦

默认显示和隐藏方式

show( [speed,[easing],[fn]])
hide([speed, [easing],[fn]])
toggle([speed],[easing],[fn])

滑动显示和隐藏方式

slideDown([ speed],[easing],[fn])
slideUp( [speed, [easing],[fn]])
slideToggle([speed],[easing],[fn])

淡入淡出显示和隐藏方式

fadeIn( [speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed,[easing],[fn]])

参数：
speed:动画的速度。三个预定义的值(“slow”,“normal”, “fast” )或表示动画时长的毫秒数值(如: 1000)
easing:用来指定切换效果，默认是"swing", 可用参数" linear"
swing:动画执行时效果是先慢，中间快，最后又慢
linear :动画执行时速度是匀速的
fn :在动画完成时执行的函数，每个元素执行一次

五、遍历

js的遍历方式

for(初始化值;循环结束条件;步长)

jq的遍历方式

jq对象.each(callback)
$.each(object，[callback])
for. .of

$(function () {
    let cities = $("#city li");
    for (let i = 0; i < cities.length; i++) {
        console.log(i + ":" + cities[i].innerHTML);
    }
    
    cities.each(function (index, element) {
        // 获取li元素 this
        // console.log(this.innerHTML);
        // 获取li元素 参数列表添加 索引,元素
        console.log(index + ":" + element.innerHTML);
        if ("上海" === $(element).html()){
            // function内部，返回true跳过本次循环，相当于continue
            // 返回false，结束循环，相当于break
            return false;
        }
        alert(index + ":" + element.innerHTML);
    });

    $.each(cities, function (index, element) {
        console.log(index + ":" + $(element).html());
    });

    // for ... of 该方法是jq 3.0 版本之后提供的方法
    for (city of cities) {
        console.log($(city).html());
    }
});

六、事件绑定

jquery标准的绑定方式

jq对象.事件方法(回调函数) ;

注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为
表单对象.submit();//让表单提交

$(function () {
    // 1. 获取name对象，绑定点击事件
    $("#name").click(function () {
        alert("我被点击了...");
    });

    // 2. 链式编程，绑定多个事件
    $("#name").mouseover(function () {
        alert("鼠标来了...");
    }).mouseout(function () {
        alert("鼠标走了...");
    }).focus();     // 让文本框获得焦点
});

on绑定事件/off解除绑定

jq对象.on(“事件名称” ,回调函数)
jq对象. off(“事件名称”)
如果off方法不传递任何参数，则将组件上的所有事件全部解绑

$(function () {
    // 1. 使用on绑定单击事件
    $("#btn1").on("click", function () {
        alert("点击事件绑定成功！");
    });
    // 2. 使用off解绑单击事件
    $("#btn2").click(function () {
        // $("btn1").off("click");
        $("#btn1").off();        // 将组件上所有事件解绑
    });
});

事件切换: toggle

jq对象. toggle(fn1,fn2…)
当单击jq对象对应的组件后，会执行fn1，第二次点击会执行fn2…执行的过程是一个循环

// 需要使用migrate插件
$(function () {
    $("#btn1").toggle(function () {
        $("#myDiv").css("backgroundColor", "green");
    }, function () {
        $("#myDiv").css("backgroundColor", "red");
    });
});

七、插件

实现方式

$.fn.extend(object)

增强通过jQuery获取的对象的功能

$.fn.extend({
	// 定义一个check方法，所有的jq对象都可以使用
	check:function() {
		alert(123);
	}
});
// 调用方法
$("#id").check();

$.extend(object)

增强jQuery对象自身的功能

$.enxtend({
	// 获取最大值
	max:function(a, b) {
		return a >= b ? a : b;
	}
});
// 调用方法
$.max(2, 3);

Ajax框架

一、概念

Ajax：Asynchronous JavaScript And XML，异步的JavaScript 和XML

异步和同步：客户端和服务器端相互通信的基础上

同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

同步的请求，客户端在发出请求之后，是需要等待服务端完成相应之后才能继续下一步操作的；而异步的请求发出之后，客户端可以继续下一步操作，不需要等到服务器响应完成之后再进行。

Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页(不使用Ajax) 如果需要更新内容，必须重载整个网页页面。

使用Ajax的好处是能够提升用户交互体验，减少不必要的数据请求，节省带宽。

二、实现方式

原生的js方式

function fun() {
    // 发送异步请求
    // 1. 创建核心对象
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 2. 建立连接
    /**
     * 参数：
     * 请求方式：GET、POST
     *      get 方式：请求参数直接在url后面拼接，send方法空参
     *      post方式：请求参数定义在send方法的参数中
     * 请求的URL
     * 同步或异步请求：true（异步） false（同步）
     */
    xmlhttp.open("GET", "ajaxServlet?username=xxx", true);

    // 3. 发送请求
    xmlhttp.send();

    // 4. 服务器处理请求
    // 首先要了解什么时候获取请求->服务器响应完成后获取
    xmlhttp.onreadystatechange = function () {
        // 判断就绪状态是否为4，响应状态码是否为200
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            // 获取服务器的响应结果
            let responseText = xmlhttp.responseText;
        }
    }
}

jQuery方式

$.ajax()

语法：$.ajax({key, value});

// 发送异步请求
$.ajax({
    url: "ajaxServlet",      // 请求路径
    type: "POST",           // 请求方式
    // data: "username=xx&age=20", // 请求参数
    data: {"username": "xx", "age": 20},
    success: function (element) {
        alert(element);
    },     // 响应成功后的回调函数，参数为服务器端编写的回调数据
    error: function () {
        alert("出错了...");
    },     // 表示出现错误后执行的回调函数
    dataType: "json",       // 设置接收到的响应数据格式
});

$.get()：发送get请求

语法：$.get(url, [data], [callback], [type]);

$.get(
    "ajaxServlet",              // 请求URL
    {"username":"jack"},        // 请求数据
    function () {
        alert("hello");
    },          // 回调函数
    "text"      //  响应数据格式
);

$.post()：发送post请求

语法：$.post(url, [data], [callback], [type]);

$.post(
    "ajaxServlet",              // 请求URL
    {"username":"jack"},        // 请求数据
    function () {
        alert("hello");
    },          // 回调函数
    "text"      //  响应数据格式
);

雨下一整晚real

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Web】JQuery、Ajax框架基础知识

JQuery框架一、概念一个JavaScript框架，简化js开发jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库 (或JavaScript框架) 。jQuery设计的宗旨是“write Less, Do More”，即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。JavaScript框架：本质
复制链接

扫一扫