JQuery高级编程脑图思维导图_编号x2964015-TreeMind树图

笔灵AI论文写作三步搞定，GO>>

当前位置:树图

思维导图模板

IT互联网

产品结构

JQuery高级编程脑图思维导图

免费下载

免费使用文件

灰色と青

浏览量：9

2023-11-30 19:58:38

已被使用2次

查看详情

JavaScript 框架数据库编程知识讲解

树图思维导图提供 JQuery高级编程脑图在线思维导图免费制作，点击“编辑”按钮，可对 JQuery高级编程脑图进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：f8bcb77af00adeeb5e740a7b8ea5a368

JavaScript 高级编程编程语言

举报/反馈

思维导图大纲

JQuery高级思维导图模板大纲

JQuery文档操作

html()

//html() //往h1标签中添加文本内容 $("h1").html("标题1");

//往h1标签中添加html标签内容 $("h1").html("<span>span标签内容</span>");//会把h1标签中的内容全部覆盖，并且会解析Html标签

text()

//往h1标签中添加文本内容 $("h1").text("标题1")

//往h1标签中添加html标签内容 $("h1").text("<span>span标签内容</span>");//会把h1标签中的内容全部覆盖，但不会解析Html标签

//val()

$("input").val("动态添加的内容");

插入，删除，复制

内部插入

append(content) 在标签内容之后添加content $("xxxx").append("xxxxx")

appendTo(content) 将指定内容添加到content对应的标签内容的结尾 “xxx”.appendTo($("xxxx"))

prependTo(content) 将指定内容添加到content对应的标签内容的头部 “xxx”.prependTo($("xxxx"))

prepend(content) 在标签内容之前添加content $("xxxx").prepend("xxxxx")

content参数可以是html标签或者文本或者是jQuery选择器

外部插入

after(content) 在每个匹配的元素之后插入内容

before(content) 在每个匹配的元素之前插入内容。

. 删除

empty() 清除当前元素的所有内容（包括子元素）

remove() 将当前元素从DOM树中删除(包括文本内容和所有子元素)

复制

clone[even, [deepEven]] 克隆匹配的DOM元素并且选中这些克隆的副本

可选参数说明：

1. 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。 2. 一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据进行复制。

jQuery事件

绑定事件的方式

jQueryObj.on(event, [data], fn) (推荐)

$("#btnaddstu").on("click",function(){

jQueryObj.click([[data], fn]); / jQueryObj.change([[data], fn]);

取消绑定事件的方式

off(event, [data], fn) (推荐）

事件类型

blur([[data],fn]) 元素失去焦点。 change([[data],fn]) 域的内容被改变。 click([[data],fn]) 当用户点击某个对象时调用的事件句柄。 dblclick([[data],fn]) 当用户双击某个对象时调用的事件句柄。 focus([[data],fn]) 元素获得焦点。 focusin([data],fn) 元素或其任意子元素获得焦点时 focusout([data],fn) 元素或其任意子元素失去焦点时 keydown([[data],fn]) 某个键盘按键被按下。 keypress([[data],fn]) 某个键盘按键被按下并松开。 keyup([[data],fn]) 某个键盘按键被松开。 mousedown([[data],fn]) 鼠标按钮被按下。 mouseenter([[data],fn]) 鼠标进入到元素 mouseleave([[data],fn]) 鼠标指针离开元素时 mousemove([[data],fn]) 鼠标被移动。 mouseout([[data],fn]) 鼠标从某元素移开（或移到其子元素上）。 mouseover([[data],fn]) 鼠标移到某元素之上（或移到其子元素上）。 mouseup([[data],fn]) 鼠标按键被松开。 resize([[data],fn]) 窗口或框架被重新调整大小。 scroll([[data],fn]) 元素滚动时 select([[data],fn]) 文本被选中。 submit([[data],fn]) 确认按钮被点击。

事件对象

event.data 传递额外的参数到事件处理函数中 event.target 最初触发事件的DOM元素。 event.pageX 鼠标指针的位置，相对于文档的左边缘。 event.pageY 鼠标指针的位置，相对于文档的上边缘。 event.type 事件触发的类型

jQuery事件冒泡和默认行为

event.stopPropagation() 阻止jQuery事件冒泡

event.preventDefault() 阻止元素默认行为

Ajax异步请求

Ajax是什么?

“Asynchronous Javascript And XML”（异步JavaScript和XML），Ajax异步请求并不是新的技术，只是把原有的技术，整合到一起而已。一般的网页如果需要更新内容，必需重新加载而使用 AJAX 则可以实现浏览器与服务器进行少量数据交换，就可以使网页实现内容的异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新。刷新整个页面。

同步访问和异步访问的区别

同步: 在一段时间内,只能做一个事情；同步访问：在访问服务器时,客户端只能等待服务器的响应,不能做其他事情

异步：在一段时间内，在做一个事情的时候，还能不受影响的做另外一个事情；异步访问：在访问服务器时,客户端在等待服务器的响应时还能做继续做其他事情。

JQuery Ajax

JQuery帮我们封装了原生Ajax，我们使用JQuery封装的操作会更简单，这个是工作中常用的。

底层ajax写法

body

<button id="btn">点我请求后台服务器数据</button> <div class="welcomeContent"></div>

//给button按钮设置点击事件，发送ajax请求访问后端程序，获取后端程序返回的数据 //http响应状态码： 200请求成功 404请求失败，资源找不到 500请求失败，服务器出错

script

//jquery默认会识别服务器端返回的数据格式，自动进行处理 $("#btn").on("click",function(){ //发送ajax请求 //语法：$.ajax(url, [settings]); $.ajax( "http://43.143.190.87:8091/panghudaojiaBackend/community/communityList", { type:"GET",//请求方式，get请求和post请求 data:{ //前端传递给后端程序的数据 communityName:"学府" //后端需要什么数据，前端就传什么数据 }, success:function(data,status){ //请求后端服务器成功，访问的函数，可以接收后端服务器返回的数据 //data：后端服务器传递的数 //status：状态信息 console.log("状态信息为："+status); //jquery将200的状态更改为了success console.log(data.data.list[0].communityName); $(".welcomeContent").html("<span style='color:red'>"+data.status+":"+data.data.list[0].communityName+" </span>") }, error:function(data,status){ //data：失败的信息 //status：失败状态信息 console.log("失败的数据："+data); console.log("失败的状态信息："+status); } } ); });

get请求

post请求

function jqueryAjaxPost(){ //post请求 //http://43.143.190.87:8091/panghudaojiaBackend/community/communityList //请求参数：post请求参数不会拼接到请求路径上，而是存放到http请求头信息的请求体中传输 $.post( "http://43.143.190.87:8091/panghudaojiaBackend/community/communityList", { communityName:"学府" //后端需要什么数据，前端就传什么数据 }, function(data,status){ //请求之后调用的函数 //data：响应的信息 //status：状态信息 console.log("状态信息为："+status); //jquery将200的状态更改为了success $(".welcomeContent").html("<span style='color:red'>"+data.status+":"+data.errorMessage+"</span>") } ); //前端发送请求注意事项：1.传输数据要和后端一致；2.接收处理后端传递的数据；3.请求发送需要和后端支持的请求方式保持一致 }

客户端和服务器数据传输的方式

. xml

xml格式的数据的特点是传输数据时比较安全，但缺点是数据整体会比较大，因为无效数据占比太大，阅读困难。所以现在基本已经被json格式淘汰掉了

. json

json格式数据是现在前后端通信最常用的数据格式，具有阅读性更好、占用空间更小的特点。 json格式数据本质上就是拥有特殊格式的字符串。

{ "id": 1, "name": "中国", "city": [ { "id": 1, "pid": 1, "cname": "深圳" }, { "id": 2, "pid": 1, "cname": "东莞" } ] } 或 {"id":1,"name":"中国","city":[{"id": 1,"pid": 1,"cname": "深圳"},{"id": 2,"pid": 1,"cname": "东莞"}]}

现在主流的方式是json，xml方式使用率已经非常低了

. 前端处理json

方式一：在发送请求时指定请求返回的是json格式数据，jquery会自动处理成json对象，通过 "对象.属性"的方法获取对应属性的值。

dataType:"json" }

}, "json" );

$.getJSON( //发送的get请求