首页 前端知识 JQuery工具框架

JQuery工具框架

2024-02-22 11:02:38 前端知识 前端哥 292 616 我要收藏

JQuery工具框架

直接使用js编程比较麻烦,而且还必须考虑浏览器的差异性。

为了简化javascript的开发,一些javascript库诞生了。当今流行的javascript库有:jQuery诞生于2005
年,Dojo、 EXT_JS、DWR、YUI…

jQuery是John Resig在2006年初创建的,对使用Javascript开发进行简化的框架(库、官方定义),能
解决DOM脚本和Ajax开发中重复的工作

  • 其宗旨是: Write Less,Do More
  • 它是轻量级的js库(压缩后只有21k),这是其他js库所不及的!它兼容各大浏览器(甚至是怪异的
    IE6!,JQuery1)
  • jQuery是一个挺好的轻量级的JS框架,能帮助程序员快速的开发JS应用,并在一定程度上改变了编写JS代码的习惯

JQuery基本使用

首先需要导入jQuery类库,也可以使用webjars的方式由maven进行管理

  • 可以下载jQuery类库,并在本地导入
    • 下载时有2个版本,一个是mini版一般用于生产环境,文件体积较小,没有提示信息,甚至没
      有换行;一个是开发版,其中包含有日志显示和提示信息,所以开发中一般使用开发版
    • 官方网站 jquery.com
  • 在连网状态下,直接导入远程jQuery类库
<script src="jslib/jquery-3.6.3.js"></script>
<p id="show">
飞雪连天射白鹿<br/>
笑书神夏一臂猿<br/>
</p>
<script>
window.onload=function(){
$('#show')
.slideUp('slow') //slideUp() 方法用于向上滑动元素
.slideDown('slow'); //slideDown() 方法用于向下滑动元素
}
</script>

用途

  • 解决浏览器兼容性问题:兼容CSS3,还兼容各种浏览器IE 6.0+, FireFox1.5+, Safari 2.0+, Opera
    9.0+等。【如果需要使用较为古老的浏览器则需要考虑所使用的jquery版本】
  • 使用户能更方便地处理HTML文档、事件、实现动画效果,并且方便地为网站提供Ajax交互

<script>$(function(){alert(“test”);})</script>

window.onload用于定义页面加载完毕则执行回调函数 window.οnlοad=function(){}
( f u n c t i o n ( ) ) 实际上是 (function(){})实际上是 (function())实际上是(document).ready(function(){})的缩写,表示的是在当前页面的DOM加
载完毕则立即执行的回调函数

<p id="show">
飞雪连天射白鹿<br/>
笑书神夏一臂猿<br/>
</p>
<button id="btn1">显示</button>
<script>
$(function (){
$('#show').hide(); //隐藏指定id=show的元素
$('#btn1').click(function(){ //给id=btn1添加点击事件处理函数
$('#show').show(); //显示id=show的元素
});
});
</script>

区别:
window.onload或者使用 定义页面加载完毕后执行的回调函数,页面加载完
毕不等于渲染显示完毕,这个函数只能定义一个,如果多次定义则最后一次定义生效,其他无效
jquery中的 ( f u n c t i o n ( ) ) 或者 (function())或者 (function())或者(document).ready(function(){})用于定义DOM加载完毕后执行的回
调函数,可以定义多次,都会执行

在编程过程中经常会使用定位器用于查找指定的页面元素,基础语法 $(expression,[context]) 接收
一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。jQuery 的核心功能都是通过这个函数实现的

功能

  • 获取页面的部分内容
<p id="p1">一段文本信息</p>
<buton id="btn1">获取显示文本内容</buton>
<script>
$(function(){
$('#btn1').click(function(){
alert($('#p1').html()); //获取id=p1中的innerHTML内容
});
});
</script>
  • 修改页面的外观
<p id="p1">一段文本信息</p>
<buton id="btn1">获取显示文本内容</buton>
<script>
$(function(){
$('#btn1').click(function(){
$('#p1').css('background-color','red');
});
});
</script>
  • 修改页面的内容
<p id="p1">一段文本信息</p>
<buton id="btn1">获取显示文本内容</buton>
<script>
$(function(){
$('#btn1').click(function(){
$('#p1').html('新的显示内容'); //如果使用html()则是获取内容,如果使用
html(参数)则是修改内容,对应innerHTML
});
});
</script>
  • 在页面中响应用户的交互

KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲btn1').click(fu…(‘#btn1’).click();则是触发一次
点击事件

  • 给页面加上动画
    show/hide显示或者隐藏,slidexxx滑动显示
  • 无刷新返回服务器端的信息
    . a j a x ( ) 功能较为丰富的 a j a x 函数, .ajax()功能较为丰富的ajax函数, .ajax()功能较为丰富的ajax函数,.get或者$.post等
  • 还提供改进基本的 JavaScript 结构,如迭代和数组操作。实际上将更改编写JS代码的方式
<script>
$(document).ready(function(){
$("button").click(function(){ //通过标签名称定为页面元素,查找所有的
button标签;给button添加click点击事件处理函数
$("li").each(function(){ //获取所有的li标签,.each循环遍历每个
li元素
alert($(this).text()) $(this)获取被遍历的当前元素,text()
获取内部的文本信息,类似于innerText
});
});
});
</script>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>

AJAX常见属性配置

  • url规定发送请求的 URL。默认是当前页面
  • type规定请求的类型(GET 或 POST),默认使用GET提交。
  • async布尔值,表示请求是否异步处理。默认是 true。
  • data规定要发送到服务器的数据
  • dataType预期的服务器响应的数据类型
  • error(xhr,status,error)如果请求失败要运行的函数
  • success(result,status,xhr)当请求成功时运行的函数。

在具体的开发中使用单一字符串返回数据内容比较少,所以具体开发中一般会自定义一个JsonResult
类,其中封装所需要返回的数据,最后在Controller方法上添加@ResponseBody使其以json格式返回

@Data
public class JsonResult implements Serializable {
private int code; //人为自定义的响应状态码,不是http规范中的响应状态码
private boolean success;//用于表示处理是否成功
private String message; //响应的提示信息
private Object data;//响应数据
}

控制器

@Controller
public class UserController {
@ResponseBody
@GetMapping("/exists")
public String exists(String username){
String msg="";
if("yanjun".equals(username))
msg="<font color=red>用户名称已经被占用</font>";
else
msg="<font color=blue>用户名称可以使用</font>";
return msg;
}
@ResponseBody
@PostMapping("/add")
public JsonResult add(String username, String password){
System.out.println(username+"-->"+password);
return JsonResult.success("新增用户成功");
}
}

页面中使用ajax

<form id="frm1">
<input id="username" name="username"/><span id="err"></span><br/>
<input type="password"/><br/>
</form>
<button id="btn1">提交数据</button>
<script src="jslib/jquery-3.6.3.js"></script>
<script>
$(function () {
$('#username').blur(function () {// 给id=username的元素上添加
onblur=function(){}
//获取数据,可以使用CSS定位器查找元素,也可以使用this
var uname = $('#username').val(); //相当于于针对元素调用value,获取
用户输入的数据
if (uname == '') {
$('#err').html('<font color=red>用户名称不能为空!</font>')
} else {
$.get('exists', {username: uname}, function (data) {
$('#err').html(data);
});
}
});
});
$(function () {
$('#btn1').click(function () {
$.ajax({
url: 'add',
type:'POST',
data:$('#frm1').serialize(),
dataType:'json',
success:function(res){
console.log(res);
if(res.success){
alert(res.message);
location.href='001.html';
}
}
});
});
});
</script>

JQuery默认的Serialize和SerializeArray可以把form表单的数据进行序列化,这里只是
key=value&key1=value1 的格式,不是JSON。

  • $("#formID").serialize() 将表单内容序列化成一个字符串。这样在ajax提交表单数据时,就
    不用一一列举出每一个参数。只需将data参数设置为 $(“form”).serialize() 即可
  • var jsonData = $("#formID").serializeArray() 可以将页面表单序列化成一个JSON结构的
    对象。注意不是JSON字符串。比如[{"name":"yanjun"},{...}]获取数据为 jsonData[0].name

GET和POST方法的区别

  • 发送的数据数量。在GET中,只能发送有限数量的数据,因为数据是在URL中发送的。在POST中,可以发送大量的数据,因为数据是在正文主体中发送的。
  • 安全性。GET方法发送的数据不受保护,因为数据在URL栏中公开,这增加了漏洞和黑客攻击的风险。POST方法发送的数据是安全的,因为数据未在 URL 栏中公开,还可以在其中使用多种编码技术,这使其具有弹性。
  • 加入浏览器的历史记录中。GET查询的结果可以加入书签中,因为它以URL的形式存在;而POST查询的结果无法加入书签中。
  • 编码。在表单中使用GET方法时,数据类型中只接受ASCII字符。在表单提交时,POST方法不绑定表单数据类型,并允许二进制和ASCII字符。
  • 可变大小。GET方法中的可变大小约为2000个字符;POST方法理论上说是没有上限的,一般最多允许8Mb的可变大小。
  • 缓存。GET方法的数据是可缓存的,而POST方法的数据是无法缓存的。
  • 主要作用。GET方法主要用于获取信息。而POST方法主要用于更新数据。

JSON格式

JSON即 JS 对象简谱是一种轻量级的数据交换格式。它基于 ECMAScript欧洲计算机协会制定的js规范的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

具体语法格式

数组是由方括号括起来的一组值构成,具体格式为[元素1,元素2,…],如[3, 1, 4, 1, 5, 9, 2, 6]
对象由花括号括起来的逗号分割的成员构成,成员是字符串键和对应的值由逗号分割的键值对组
成,如 {“name”: “John Doe”, “age”: 18, “address”: {“country” : “china”, “zipcode”: “10000”}}

json处理方法1

对于服务器返回的JSON字符串,如果jquery异步请求没做类型说明,或者以字符串方式接受,那么需要做一次对象化处理,方式不是太麻烦,就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象

json处理方法2

jQuery提供了方法parseJSON,这需要一个标准的JSON字符串,并返回生成的JavaScript对象

  • 处理思路实际上和eval函数调用是一致的,只是jQuery提供了安全的调用
  • 要求返回的字符串必须是正规标准的 JSON 字符串

json处理方法3 [推荐]

对于服务器返回的JSON字符串,如果jquery异步请求将type设为 json,或者利用$.getJSON()方法获得服务器返回,那么就不需要eval方法了,因为这时候得到的结果已经是json对象了,只需直接调用该对象即可

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2502.html
标签
评论
发布的文章

程序员的中秋节

2024-03-09 09:03:01

js中几种追加元素的方法

2024-03-08 10:03:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!