高端网站建设谷美,wordpress 百度广告插件,wordpress模版建站,德州网站怎样建设JQuery工具框架
直接使用js编程比较麻烦#xff0c;而且还必须考虑浏览器的差异性。
为了简化javascript的开发#xff0c;一些javascript库诞生了。当今流行的javascript库有#xff1a;jQuery诞生于2005 年#xff0c;Dojo、 EXT_JS、DWR、YUI…
jQuery是John Resig在…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!JQuery1jQuery是一个挺好的轻量级的JS框架能帮助程序员快速的开发JS应用并在一定程度上改变了编写JS代码的习惯
JQuery基本使用
首先需要导入jQuery类库也可以使用webjars的方式由maven进行管理
可以下载jQuery类库并在本地导入 下载时有2个版本一个是mini版一般用于生产环境文件体积较小没有提示信息甚至没 有换行一个是开发版其中包含有日志显示和提示信息所以开发中一般使用开发版官方网站 jquery.com 在连网状态下直接导入远程jQuery类库
script srcjslib/jquery-3.6.3.js/script
p idshow
飞雪连天射白鹿br/
笑书神夏一臂猿br/
/p
script
window.onloadfunction(){
$(#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οadfunction(){} (function())实际上是(function(){})实际上是(function())实际上是(document).ready(function(){})的缩写表示的是在当前页面的DOM加 载完毕则立即执行的回调函数 p idshow
飞雪连天射白鹿br/
笑书神夏一臂猿br/
/p
button idbtn1显示/button
script
$(function (){
$(#show).hide(); //隐藏指定idshow的元素
$(#btn1).click(function(){ //给idbtn1添加点击事件处理函数
$(#show).show(); //显示idshow的元素
});
});
/script区别 window.onload或者使用 定义页面加载完毕后执行的回调函数页面加载完 毕不等于渲染显示完毕这个函数只能定义一个如果多次定义则最后一次定义生效其他无效 jquery中的(function())或者(function())或者(function())或者(document).ready(function(){})用于定义DOM加载完毕后执行的回 调函数可以定义多次都会执行 在编程过程中经常会使用定位器用于查找指定的页面元素基础语法 $(expression,[context]) 接收 一个包含 CSS 选择器的字符串然后用这个字符串去匹配一组元素。jQuery 的核心功能都是通过这个函数实现的
功能
获取页面的部分内容 p idp1一段文本信息/p
buton idbtn1获取显示文本内容/buton
script
$(function(){
$(#btn1).click(function(){
alert($(#p1).html()); //获取idp1中的innerHTML内容
});
});
/script修改页面的外观
p idp1一段文本信息/p
buton idbtn1获取显示文本内容/buton
script
$(function(){
$(#btn1).click(function(){
$(#p1).css(background-color,red);
});
});
/script修改页面的内容
p idp1一段文本信息/p
buton idbtn1获取显示文本内容/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滑动显示无刷新返回服务器端的信息 .ajax()功能较为丰富的ajax函数.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
liCoffee/li
liMilk/li
liSoda/li
/ulAJAX常见属性配置
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))
msgfont colorred用户名称已经被占用/font;
else
msgfont colorblue用户名称可以使用/font;
return msg;
}
ResponseBody
PostMapping(/add)
public JsonResult add(String username, String password){
System.out.println(username--password);
return JsonResult.success(新增用户成功);
}
}页面中使用ajax
form idfrm1
input idusername nameusername/span iderr/spanbr/
input typepassword/br/
/form
button idbtn1提交数据/button
script srcjslib/jquery-3.6.3.js/script
script
$(function () {
$(#username).blur(function () {// 给idusername的元素上添加
onblurfunction(){}
//获取数据,可以使用CSS定位器查找元素也可以使用this
var uname $(#username).val(); //相当于于针对元素调用value获取
用户输入的数据
if (uname ) {
$(#err).html(font colorred用户名称不能为空!/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.href001.html;
}
}
});
});
});
/scriptJQuery默认的Serialize和SerializeArray可以把form表单的数据进行序列化这里只是 keyvaluekey1value1 的格式不是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对象了只需直接调用该对象即可
