JQuery 基础知识学习（详尽版）

article/2025/9/29 7:18:06

JQuery 详尽的基础知识学习

    • jQuery 语法
    • jQuery 选择器
    • jQuery 选择器（大全）
    • jQuery 事件
      • ready()
      • holdReady()
      • on()
      • off()
      • one()
      • 其他事件
        • 案例01
    • jQuery CSS样式
      • 案例02
    • jQuery DOM遍历
      • 遍历父元素
        • 案例03
      • 遍历同级元素
        • 案例04
      • 遍历子元素
        • 案例05
      • first()
      • last()
      • eq(number)
      • filter(selector)
      • not(selector)
    • jQuery 增删元素
      • 增加元素
      • 删除元素
      • 案例06
    • jQuery 尺寸
    • jQuery 效果
      • 显示隐藏
      • 淡入淡出
      • 滑动
      • 动画
    • JQuery ajax
      • load()
      • get()
      • post()
      • getJSON()
      • 跨域

JQuery 基本操作
项目经理(作者)：张明星
掌握Jquery的下载、安装和使用的方法
掌握Jquery的选择器和事件机制 重点
掌握Jquery的元素遍历方法 重点
掌握Jquery样式的操作 重点

jQuery 安装
jQuery 是一个 JavaScript 库。
下载地址
在这里插入图片描述
如果下载不了直接在网页打开了，可以直接复制网页打开后的代码，新建js文件，复制粘贴即可

下载好之后直接复制js文件到项目中，使用script标签引入即可

<script src="jquery/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>

jQuery 语法

基础语法：

$(selector).action()

说明：

  • 美元符号($)：定义jQuery
  • 选择符(selector)：“查询"和"查找” HTML 元素
  • action()： 执行对元素的操作

获得内容 - text()、html() 以及 val()

  • text() - 设置或返回所选元素的文本内容 – innerText
  • html() - 设置或返回所选元素的内容（包括 HTML 标记） - innerHTML
  • val() - 设置或返回表单字段的值 – value
  • attr(‘name’) - 设置/改变属性值 – getAttribute - setAttribute

每个函数都可以接受函数类型的参数，如：

参数描述
function(index,oldValue)index - 选择器的 index 位置。element - 当前的元素（也可使用 “this” 选择器）
$("li").each(function(){ alert($(this).text()) 
});

如：

$("#test1").text("Hello world!");
$("#test1").text(function(index,oldValue){ return oldValue + "/jquery"; 
});$("#test2").html("<b>Hello world!</b>");
$("#test2").html(function(index,oldValue){ return oldValue + "/jquery"; 
});$("#test3").val("RUNOOB");
$("#test3").val(function(index,oldValue){ return oldValue + "/jquery"; 
});$("#runoob").attr("href","http://www.baidu.com ");
$("#runoob").attr({ "href" : "http://www.baidu.com ", "title" : "jQuery 教程" 
});
$("#runoob").attr("href", function(index,oldValue){ return oldValue + "/jquery"; 
});

jQuery 选择器

$("*")选取所有元素
$(this)选取当前 HTML 元素
$("p.intro")选取 class 为 intro 的 <p> 元素
$("p:first")选取第一个 <p> 元素
$("ul li:first")选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")选取带有 href 属性的元素
$("a[target='_blank']")选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")选取所有 target 属性值不等于 "_blank" 的 <a>元素
$(":button")选取所有 type="button" 的 <input>元素 和 <button> 元素
$("tr:even")选取偶数位置的 <tr> 元素
$("tr:odd")选取奇数位置的 <tr> 元素

jQuery 选择器（大全）

选择器实例选取
*$("*")所有元素
#id$("#lastname")id=“lastname” 的元素
.class$(".intro")所有 class=“intro” 的元素
element$("p")所有 <p>元素
.class.class$(".intro.demo")所有 class=“intro” 且 class=“demo” 的元素
:first$("p:first")第一个 <p> 元素
:last$("p:last")最后一个 <p> 元素
:even$("tr:even")所有偶数 <tr> 元素
:odd$("tr:odd")所有奇数 <tr> 元素
:eq(index)$("ul li:eq(3)")列表中的第四个元素（index 从 0 开始）
:gt(no)$("ul li:gt(3)")列出 index 大于 3 的元素
:lt(no)$("ul li:lt(3)")列出 index 小于 3 的元素
:not(selector)$("input:not(:empty)")所有不为空的 input 元素
:header$(":header") 所有标题元素 <h1> - <h6>
:animated所有动画元素
:contains(text)$(":contains('W3School')")包含指定字符串的所有元素
:empty$(":empty")无子（元素）节点的所有元素
:hidden$("p:hidden")所有隐藏的 <p>元素
:visible$("table:visible")所有可见的表格
s1,s2,s3$("th,td,.intro")所有带有匹配选择的元素
[attribute]$("[href]")所有带有 href 属性的元素
[attribute=value]$("[href='#']")所有 href 属性的值等于 “#” 的元素
[attribute!=value]$("[href!='#']")所有 href 属性的值不等于 “#” 的元素
[attribute$=value]$("[href$='.jpg']")所有 href 属性的值包含以 “.jpg” 结尾的元素
:input$(":input")所有<input>元素
:text$(":text")所有 type=“text” 的 <input>元素
:password$(":password")所有 type=“password” 的 <input>元素
:radio$(":radio")所有 type=“radio” 的 <input>元素
:checkbox$(":checkbox")所有 type=“checkbox” 的<input>元素
:submit$(":submit")所有 type=“submit” 的 <input> 元素
:reset$(":reset")所有 type=“reset” 的 <input> 元素
:button$(":button")所有 type=“button” 的<input> 元素
:image$(":image")所有 type=“image” 的 <input> 元素
:file$(":file")所有 type=“file” 的<input> 元素
:enabled$(":enabled")所有激活的 input 元素
:disabled$(":disabled")所有禁用的 input 元素
:selected$(":selected")所有被选取的 input 元素
:checked$(":checked")所有被选中的 input 元素

举例

//1.基本选择器
$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器//2.层次选择器$("#id>.classname ")    //子元素选择器
$("#id .classname ")    //后代元素选择器
$("#id + .classname ")    //紧邻下一个元素选择器
$("#id ~ .classname ")    //兄弟元素选择器//3.过滤选择器(重点)
$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li//3.2内容过滤选择器
$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素//3.3可见性过滤选择器
$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("li:visible")      //匹配所有可见元素//3.4属性过滤选择器
$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素//3.5状态过滤选择器
$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option//4.表单选择器
$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

jQuery 事件

ready()

文档加载完毕事件，当文档全部加载完毕之后执行，等价于window.onload事件

$(function() {// 代码
})
// Or
$(document).ready(function() {// 代码
});

holdReady()

暂停ready()事件，holdReady(true)暂停执行，holdReady(false)取消暂停，则会执行

$.holdReady(true)$(document).ready(function() {$("#first").click(function() {alert("解除延迟后被弹出");})
})$("#second").click(function() {$.holdReady(false);
})

on()

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。如需移除事件处理程序，请使用 off() 方法。

语法：

$(selector).on(event[,childSelector][,param],function)

如：

$(document).ready(function(){$("div").on("click","p",function(){alert("div中的p段落被点击了。");});
});

off()

off() 方法通常用于移除通过 on() 方法添加的事件处理程序。

参数描述
event必需。规定要从被选元素移除的一个或多个事件或命名空间。 由空格分隔多个事件值。必须是有效的事件。
selector可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。
function(eventObj)可选。规定当事件发生时运行的函数。
map规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

语法：

$(selector).off(event,selector,function(eventObj),map)

如：

$("button").click(function(){$("p").off("click");
});

one()

one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。

当使用 one() 方法时，每个元素只能运行一次事件处理器函数。

语法：

$(selector).one(event,param,function)

如：

$("p").one("click",function(){$(this).css("background-color","#ffffff");
});

其他事件

方法描述
blur()当失去焦点事件
focus()添加/触发获得焦点时
focusin()当元素（或在其内的任意元素）获得焦点时
focusout()当元素（或在其内的任意元素）失去焦点时
change()当内容改变时
click()当单机时
dblclick()当双击时
hover()当鼠标悬停时
keydown()当键盘按下时
keypress()当完成键盘按下并弹起整个过程时
keyup()当键盘弹起时
resize()当浏览器窗口调整大小时
scroll()当元素滚动时（需出现滚动条）
select()当输入框和文本域内容被选择时
trigger()触发被选元素的指定事件类型，执行事件的代码
submit()当表单提交时
contextmenu()右键单机时
mousedown()当鼠标按下时
mouseenter()当鼠标进入时
mouseleave()当鼠标离开时
mousemove()当鼠标移动时
mouseout()当鼠标移开时
mouseover()当鼠标悬停时
mouseup()当鼠标按下弹起时

如：

$("input").blur(function(){$(this).css("background-color","#ffffff");
});$("input").focus(function(){$(this).css("background-color","#cccccc");
});$("div").focusin(function(){$(this).css("background-color","#FFFFCC");
});$("div").focusout(function(){$(this).css("background-color","#FFFFFF");
});$(".field").change(function(){$(this).css("background-color","#FFFFCC");
});$("p").click(function(){$(this).css("background-color","#ffffff");
});$("p").dblclick(function(){$(this).hide();
});$("#p1").mouseenter(function(){alert('您的鼠标移到了 id="p1" 的元素上!');
});$("#p1").mouseleave(function(){alert("再见，您的鼠标离开了该段落。");
});$("#p1").mousedown(function(){alert("鼠标在该段落上按下！");
});$("#p1").mouseup(function(){alert("鼠标在段落上松开。");
});$("#p1").hover(function(){alert("你进入了 p1!");},function(){alert("拜拜! 现在你离开了 p1!");}
);$("input").keydown(function(){$("input").css("background-color","#FFFFCC");
});$("input").keydown(function(){$("span").text(i+=1);
});$("input").keyup(function(){$("input").css("background-color","#D6D6FF");
});$(window).resize(function() {$('span').text(x+=1);
});$("div").scroll(function() {$("span").text(x+=1);
});$("input").select(function(){$("input").after(" Text marked!");
});$("button").click(function(){$("input").trigger("select");
});

事件

方法描述
event.pageX返回相对于文档左边缘的鼠标位置
event.pageY返回相对于文档上边缘的鼠标位置
event.stopImmediatePropagation()阻止其他相同事件继续执行
event.stopPropagation()阻止事件向上传递到父容器
event.target返回哪个 DOM 元素触发事件
event.timeStamp鼠标左键第一次按下到最后一次抬起所消耗的毫秒数
event.preventDefault()阻止元素原本的事件
event.which返回指定事件上哪个键盘键或鼠标按钮被按下
event.result获取上一个相同事件返回的内容

案例01

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script></script></head><body><div style="background-color: red;">点击我<span style="background-color: yellow;">点我</span></div><button>按钮</button><input type="text" /></body><script type="text/javascript">//文档加载完毕事件$(document).ready(function() {$("div").click(function() {return "你点击我勒!";});$("div").click(function(event) {$("span").html(event.result);});});$(document).ready(function() {$("span").click(function(event) {event.stopPropagation();alert("DIV里面的SPAN被点击");});$("p").click(function(event) {alert("The p element was clicked.");});$("div").click(function() {alert("DIV被点击");});});$(document).ready(function() {$("div").click(function(event) {alert("事件句柄 1 被执行");event.stopImmediatePropagation();});$("div").scroll(function(event) {alert("事件句柄 2 被执行");});$("div").click(function(event) {alert("事件句柄 3 被执行");});});$(document).ready(function() {$("button").click(function(event) {$("span").text(event.timeStamp);});});$(document).ready(function() {$("input").keydown(function(event) {$("span").html("Key: " + event.which);});});</script>
</html>

效果展示
在这里插入图片描述

jQuery CSS样式

jQuery 拥有若干进行 CSS 操作的方法：

方法描述
addClass()向匹配的元素添加指定的类名。
hasClass()检查匹配的元素是否拥有指定的类。
removeAttr()从所有匹配的元素中移除指定的属性。
removeClass()从所有匹配的元素中删除全部或者指定的类。
toggleClass()从匹配的元素中添加或删除一个类。
css()设置或返回样式属性

如：

$("p").css({"background-color":"yellow","font-size":"200%"});

案例02

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.style {background-color: red;height: 60px;}</style><script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {$('button:nth-child(1)').click(function() {$('div').addClass('style');});$('button:nth-child(2)').click(function() {$('div').removeClass('style');});$('button:nth-child(3)').click(function() {$('div').toggleClass('style');});});</script></head><body><button>添加样式</button><button>删除样式</button><button>智能切换</button><div>测试样式</div></body>
</html>

效果展示
在这里插入图片描述

jQuery DOM遍历

遍历父元素

用于向上遍历 DOM 树：

  • parent(selector) - 被选元素的直接父元素
  • parents(selector) - 被选元素的所有祖先元素，一路向上直到文档的根元素<html>
  • parentsUntil(selector) - 向上直到给定元素之间的所有祖先元素

案例03

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style>.ancestors * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script></script><script>$(document).ready(function() {$("span").parentsUntil("div").css({"color": "red","border": "2px solid red"});});</script></head><body class="ancestors"> body (曾曾祖父元素)<div style="width:500px;">div (曾祖父元素)<ul>ul (祖父元素)<li>li (父元素)<span>span</span></li></ul></div></body>
</html>

效果展示
在这里插入图片描述

遍历同级元素

在 DOM 树进行水平遍历：

  • siblings(selector) - 返回被选元素的所有同胞元素
  • next(selector) - 返回被选元素的下一个同胞元素，只有紧挨着的一个
  • nextAll(selector) - 返回被选元素的所有同胞元素
  • nextUntil(selector) - 返回直到给定参数之间的所有跟随的同胞元素
  • prev(selector) - 同理向上遍历
  • prevAll(selector) - 同理向上遍历
  • prevUntil(selector) -同理向上遍历

案例04

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.siblings * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script>$(document).ready(function() {$("li.start").nextUntil("li.stop").css({"color": "red","border": "2px solid red"});});</script></head><body><div class="siblings"><ul>ul (父节点)<li>li (兄弟节点)</li><li>li (兄弟节点)</li><li class="start">li (类名为"start"的兄弟节点)</li><li>li (类名为"start"的li节点的下一个兄弟节点)</li><li>li (类名为"start"的li节点的下一个兄弟节点)</li><li>li (类名为"start"的li节点的下一个兄弟节点)</li><li class="stop">li (类名为"stop"的兄弟节点)</li></ul></div></body>
</html>

效果展示
在这里插入图片描述

遍历子元素

两个用于向下遍历 DOM 树的 jQuery 方法：

  • children(selector) - 返回被选元素的所有直接子元素
  • find(selector) - 返回被选元素的后代元素，一路向下直到最后一个后代

案例05

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style>.descendants * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script>$(document).ready(function() {$("div").children("p.1").css({"color": "red","border": "2px solid red"});});</script></head><body><div class="descendants">div (当前元素)<p class="1">p (儿子元素)<span>span (孙子元素)</span></p><p class="2">p (儿子元素)<span>span (孙子元素)</span></p></div></body>
</html>

效果展示
在这里插入图片描述

first()

返回被选元素的首个元素

$(document).ready(function(){$("div p").first();
});

last()

返回被选元素的最后一个元素

$(document).ready(function(){$("div p").last();
});

eq(number)

返回被选元素中带有指定索引（下标）号的元素

$(document).ready(function(){$("p").eq(1);
});

filter(selector)

筛选所选元素中满足特定条件的元素

$(document).ready(function(){$("p").filter(".url");
});

not(selector)

返回不匹配标准的所有元素

$(document).ready(function(){$("p").not(".url");
});

jQuery 增删元素

增加元素

  • append(arg1,arg2) - 在被选元素的结尾插入一个或者多个子元素
  • prepend(arg1,arg2) - 在被选元素的开头插入一个或者多个子元素
  • after(arg1,arg2) - 在被选元素之后插入一个或者多个内容
  • before(arg1,arg2) - 在被选元素之前插入一个或者多个内容

如：

$("p").append("追加文本");
$("div").append("<h1>追加文本</h1>");$("p").prepend("在开头追加文本");
$("div").prepend("<h1>在开头追加文本</h1>");$("img").before("在img前面添加文本");
$("img").before("<h1>在img前面添加文本</h1>");$("img").after("在img后面添加文本");
$("img").after("<h1>在img后面添加文本</h1>");

删除元素

  • remove() - 删除被选元素自身（及其子元素）
  • empty() - 从被选元素中删除子元素，把子元素清空

如：

$("#div1").remove(selector);
$("#div1").empty();

案例06

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">html,body {padding: 0;margin: 0;}#header {height: 200px;background-color: rgba(255, 0, 0, 0.1);overflow: hidden;}#footer {height: 200px;background-color: rgba(0, 255, 0, 0.1);overflow: hidden;}ul {list-style: none;}li {border: 1px solid rgba(10, 10, 10, 0.05);padding: 15px 20px;float: left;margin: 10px;cursor: pointer;}</style><script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">function top_bottom(t) {$('#footer ul').append('<li οnclick="bottom_top(this)">' + $(t).text() + '</li>');$(t).remove();}function bottom_top(t) {$('#header ul').append('<li οnclick="top_bottom(this)">' + $(t).text() + '</li>');$(t).remove();}</script></head><body><div id="header"><ul><li onclick="top_bottom(this)">功能1</li><li onclick="top_bottom(this)">功能2</li><li onclick="top_bottom(this)">功能3</li><li onclick="top_bottom(this)">功能4</li><li onclick="top_bottom(this)">功能5</li></ul></div><div id="footer"><ul><li onclick="bottom_top(this)">功能6</li><li onclick="bottom_top(this)">功能7</li><li onclick="bottom_top(this)">功能8</li><li onclick="bottom_top(this)">功能9</li><li onclick="bottom_top(this)">功能10</li></ul></div></body>
</html>

效果展示
在这里插入图片描述

jQuery 尺寸

处理尺寸的重要方法：

  • width() - 设置或返回元素的宽度（不包括内边距、边框或外边距）
  • height() - 设置或返回元素的高度（不包括内边距、边框或外边距）
  • innerWidth() - 返回元素的宽度（包括内边距）clientWidth
  • innerHeight() - 返回元素的高度（包括内边距）clientHeight
  • outerWidth() - 返回元素的宽度（包括内边距和边框）offsetWidth
  • outerHeight() - 返回元素的高度（包括内边距和边框）offsetHeight
  • offset() - left:元素距离左边的距离；top:元素距离顶部的距离
    在这里插入图片描述

jQuery 效果

显示隐藏

可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

  • hide(time,function) - 隐藏元素
  • show(time,function) - 显示元素
  • toggle(time,function) - 显示或者
  • stop() - 停止

语法:

$(selector).hide(time,function);
$(selector).show(time,function);
$(selector).toggle(time,function);

淡入淡出

fade可以实现元素的淡入淡出效果。

  • fadeIn(time,function) - 淡入效果
  • fadeOut(time,function) - 淡出效果
  • fadeToggle(time,function) - 淡入或者淡出
  • fadeTo(time, opacity ,function) - 渐变到指定透明度
  • stop() - 停止

语法：

$(selector).fadeIn(time, function);
$(selector).fadeOut(time, function);
$(selector).fadeToggle(time, function);
$(selector).fadeTo(time,opacity, function);

滑动

滑动方法：

  • slideDown() - 从上往下滑动
  • slideUp() - 从下往上滑动
  • slideToggle() - 点击向下出现，再点向上消失
  • stop() - 停止

语法：

$(selector).slideDown(time, function);
$(selector).slideUp(time, function);
$(selector).slideToggle(time, function);

动画

  • animate() 方法用于创建自定义动画。
  • stop() - 停止

语法：

$(selector).animate({params}, time, function);

JQuery ajax

ajax() 方法用于执行 AJAX（异步 HTTP）请求。所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

语法：

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

参数：

参数：

名称值/描述
async布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr)发送请求前运行的函数。
cache布尔值，表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status)请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
contentType发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。
data规定要发送到服务器的数据。
dataFilter(data,type)用于处理 XMLHttpRequest 原始响应数据的函数。
dataType预期的服务器响应的数据类型。
error(xhr,status,error)如果请求失败要运行的函数。
jsonp在一个 jsonp 中重写回调函数的字符串。
jsonpCallback在一个 jsonp 中规定回调函数的名称。
password规定在 HTTP 访问认证请求中使用的密码。
processData布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset规定请求的字符集。
success(result,status,xhr)当请求成功时运行的函数。
timeout设置本地的请求超时时间（以毫秒计）。
traditional布尔值，规定是否使用参数序列化的传统样式。
type规定请求的类型（GET 或 POST）。
url规定发送请求的 URL。默认是当前页面。
username规定在 HTTP 访问认证请求中使用的用户名。
xhr用于创建 XMLHttpRequest 对象的函数。

如：


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script></head><body><button>点击加载</button><div id="div1"></div></body><script type="text/javascript">$("button").click(function() {$.ajax({type: "POST",url: "demo.php",data: "name=张三&pswd=123456",success: function(data) {obj = JSON.parse(data);if(obj.status == "1") {$('#div1').text(obj.msg);} else {$('#div1').text(obj.msg);}}})});</script></html>

load()

jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);

参数

  • URL ：必需的 参数规定您希望加载的 URL。
  • data ：可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
  • callback ：可选的 callback 参数是 load() 方法完成后所执行的函数名称。参数如下：
  • responseTxt - 包含调用成功时的结果内容
  • statusTXT - 包含调用的状态
  • xhr - 包含 XMLHttpRequest 对象

如：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script></head><body><div id="div1"></div></body><script type="text/javascript">$("#div1").load("demo.txt #p1")</script>
</html>

或者

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script></head><body><button>点击加载</button><div id="div1"></div></body><script type="text/javascript">$("button").click(function() {$("#div1").load("demo.txt", function(responseTxt, statusTxt, xhr) {if(statusTxt == "success")alert("外部内容加载成功!");if(statusTxt == "error")alert("Error: " + xhr.status + ": " + xhr.statusText);});});</script></html>

get()

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：

$.get(URL,callback(data, status));

如：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script></head><body><button>点击加载</button><div id="div1"></div></body><script type="text/javascript">$("button").click(function() {$.get("demo.txt",function(data, status) {$('#div1').html("数据: " + data + "\n状态: " + status);});});</script></html>

效果图

post()

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

语法:

$.post(URL,data,callback(data, status));
  • 必需的 URL 参数规定您希望请求的 URL。
  • 可选的 data 参数规定连同请求发送的数据。
  • 可选的 callback 参数是请求成功后所执行的函数名。

如：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script></head><body><button>点击加载</button><div id="div1"></div>
</body>
<script type="text/javascript">$("button").click(function() {$.post("demo.php", {name: "张三",age: 23},function(data, status) {$('#div1').html("数据: \n" + data + "\n状态: " + status);});});
</script>
</html>

getJSON()

可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据，如 “myurl?callback=?”。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

语法：

jQuery.getJSON(url,data,success(data,status,xhr))

参数

参数说明
url必需。规定将请求发送的哪个 URL。
data可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)可选。规定当请求成功时运行的函数。额外的参数：data - 包含来自请求的结果数据status - 包含请求的状态xhr - 包含 XMLHttpRequest 对象

该函数是简写的 Ajax 函数，等价于：

$.ajax({url: url,data: data,success: callback,dataType: json});

跨域

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域.

当前页面url被请求页面url是否跨域原因
http://www.test.com/http://www.test.com/index.html否同源（协议、域名、端口号相同）
http://www.test.com/https://www.test.com/index.html跨域协议不同（http/https）
http://www.test.com/http://www.bai.com/跨域主域名不同（test/baidu）
http://www.test.com/http://blog.test.com/跨域子域名不同（www/blog）
http://www.test.com:8080/http://www.test.com:7001/跨域端口号不同 （8080/7001）

后端

HttpServletResponse response1 = (HttpServletResponse) response;
response1.setHeader("Access-Control-Allow-Origin", "*");
response1.setHeader("Access-Control-Allow-Methods", "POST, DELETE,PUT,GET,OPTIONS");
response1.setHeader("Access-Control-Max-Age", "3600");
response1.addHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

http://chatgpt.dhexx.cn/article/D3H4SAWs.shtml

相关文章

jQuery的知识汇总

jQuery的知识汇总

1.什么是jQuery? jQuery是JavaScript库&#xff0c;也即jQuery中是封装了很多的javaScript语句&#xff0c;函数。相当于Java的工具类&#xff0c;其也是一款跨主流浏览器的JavaScript库&#xff0c;简化了JavaScript对HTML,Dom的操作。大约是在2004年左右出现的。 所以我们…
阅读更多...
18道JQuery技术基础知识测试题

18道JQuery技术基础知识测试题

1、什么DOM对象&#xff08;&#xff09; A、是javascript访问页面元素的对象 B、html对象 C、C#对象 D、java对象 2、什么是jQuery对象&#xff08;&#xff09; A、jQuery库自身具有方法&#xff0c;获取页面元素的对象 B、C#对象 C、C对象 D、java对象 3、jQuery添加CSS样式…
阅读更多...
学习jQuery初级中级高级用法 | 一篇就够了

学习jQuery初级中级高级用法 | 一篇就够了

前言&#xff1a;本篇文章可以带你快速上手jQuery&#xff0c;本文包括jQuery各种常用以及高级用法&#xff0c;为后续学习可以做好铺垫&#xff0c;知识点非常全面。 目录 一、认识jQuery 1.1 举个例子 二、学习前的准备 2.1 第一步&#xff1a;下包 2.2 第二步&#xff…
阅读更多...
c引入静态链接库

c引入静态链接库

一、静态链接库项目 1、创建头文件library.h文件 #ifndef TESTC_LIB_LIBRARY_H #define TESTC_LIB_LIBRARY_Hvoid hello(void); void hello2(void);#endif //TESTC_LIB_LIBRARY_H 2、创建c文件library.c #include "library.h"#include <stdio.h>void hello…
阅读更多...
关于动态链接库和静态链接库

关于动态链接库和静态链接库

关于动态链接库和静态链接库 库是写好的现有的&#xff0c;成熟的&#xff0c;可以复用的代码。现实中每个程序都要依赖很多基础的底层库&#xff0c;不可能每个人的代码都从零开始&#xff0c;因此库的存在意义非同寻常。 本质上来说库是一种可执行代码的二进制形式&#xf…
阅读更多...
1.静态链接库的生成和使用

1.静态链接库的生成和使用

1.什么时静态链接库 静态库&#xff08;Static Library&#xff09;通常包含一堆程序员自定义的变量与函数&#xff0c;在编译期间由编译器和链接器将它集成到可执行文件中&#xff0c;也就是生成的.exe文件中 2.静态库的扩展名 在Windows下&#xff0c;静态库的扩展名是.li…
阅读更多...
基于vs2019的静态链接库的创建与使用（超详细）

基于vs2019的静态链接库的创建与使用（超详细）

文章目录 前言一、什么是静态链接库&#xff1f;二、静态链接库的建立与使用1、静态链接库的建立创建一个静态链接库项目创建一个头文件编写自己的静态库生成静态库 2、静态链接库的使用创建一个新项目写入自己定义的那个头文件重新打开vs时 总结 前言 在我们平时写代码的时候…
阅读更多...
C++的静态链接库和动态链接库

C++的静态链接库和动态链接库

在电脑上安装某个软件的时候&#xff0c;我们都能看到安装目录下有很多lib和dll文件&#xff0c;并且我相信&#xff0c;你在用某个软件工具的时候遇到过以下这个界面&#xff1a; 这个界面提示你如案件在运行过程中少了某一个文件&#xff0c;导致软件无法再进行运行下去。 再…
阅读更多...
静态链接库(Lib)和动态链接库(DLL)

静态链接库(Lib)和动态链接库(DLL)

序言&#xff1a;本文主要讲解静态链接库和动态链接库的区别&#xff0c;以及怎么样编译和引用两种库&#xff0c;怎么样从DLL中导出函数和导出C类。 一、静态链接库和动态链接库 1.静态链接库(.LIB)&#xff1a;函数和数据被编译进一个二进制文件。发布时&#xff0c;只需要发…
阅读更多...
C++静态链接库与动态链接库

C++静态链接库与动态链接库

C静态链接库与动态链接库 什么是库程序编译成可执行程序的步骤静态链接库与动态链接库的区别&#xff08;简易版&#xff09;&#xff1a;静态链接库调用实现动态链接库调用实现g&#xff08;gcc&#xff09;编译选项 什么是库 库是写好的、现有的、可复用的代码。库是一种可执…
阅读更多...
「C/C++」C/C++静态链接库与动态链接库

「C/C++」C/C++静态链接库与动态链接库

博客主页&#xff1a;何曾参静谧的博客 文章专栏&#xff1a;「C/C」C/C学习 目录 相关术语案例环境&#xff1a;Win10VS2019一、链接库介绍二、静态链接库&#xff08;Static Library&#xff09;2.1、静态库优缺点2.2、静态库的创建2.2.1、创建静态库项目2.2.2、添加.h头文件…
阅读更多...
C++封装静态链接库及使用

C++封装静态链接库及使用

一、为什么要把程序封装成库 有时我们需要把自己的程序交给第三方调用&#xff0c;但是又不想被别人看到自己的具体实现代码&#xff0c;就封装成库给别人使用。库有动态链接库和静态链接库&#xff0c;区别是动态链接库可以在程序运行时动态链接&#xff0c;而静态链接库相当于…
阅读更多...
C++ 创建静态链接库和动态链接库

C++ 创建静态链接库和动态链接库

上篇文章演示了如何使用C 编译的静态链接库和动态链接库&#xff0c;本篇文章主要介绍如何创建静态链接库和动态链接库&#xff0c;本文使用的工具是visual studio 2019 企业版&#xff0c;需要安装对应的Csdk&#xff0c;可以参考网上其他文章&#xff0c;本问不在赘述。 一、…
阅读更多...
动态链接库和静态链接库

动态链接库和静态链接库

转载自&#xff1a;https://www.cnblogs.com/king-lps/p/7757919.html &#xff08;有删减&#xff09; 1. 库的介绍 库是写好的现有的&#xff0c;成熟的&#xff0c;可以复用的代码。现实中每个程序都要依赖很多基础的底层库&#xff0c;不可能每个人的代码都从零开始&…
阅读更多...
静态链接库与动态链接库－－－－C/C++

静态链接库与动态链接库－－－－C/C++

平时我们写程序都必须include很多头文件&#xff0c;因为可以避免重复造轮子&#xff0c;软件大厦可不是单靠一个人就能完成的。但是你是否知道引用的那些头文件中的函数是怎么被执行的呢&#xff1f;这就要牵扯到链接库了&#xff01;&#xff01;&#xff01; 库有两种&#…
阅读更多...
【四、静态库与动态库（共享库）】揭开链接库的神秘面纱：手把手教你制作静态链接库与动态链接库

【四、静态库与动态库（共享库）】揭开链接库的神秘面纱：手把手教你制作静态链接库与动态链接库

前言 不管是在 Windows 下开发&#xff0c;还是在 Linux 下开发&#xff0c;我们都会经常性的使用一些库文件&#xff0c;这些库文件的特点就是&#xff0c;我们可以看到接口的原型并通过这些接口来调用这个函数的功能&#xff0c;但是我们无法查看这个功能的实现。这就是库文…
阅读更多...
静态链接库(.lib)和动态链接库(.dll)的使用

静态链接库(.lib)和动态链接库(.dll)的使用

静态链接库(.lib)和动态链接库(.dll)的使用 文章目录 静态链接库(.lib)和动态链接库(.dll)的使用一、静态链接库1. 静态链接库概述2. 创建静态链接库3. 调用静态链接库 二、动态链接库(dynamic linking library)1. 动态链接库概述2. 创建动态链接库并导出函数导出函数两种方式1…
阅读更多...
静态链接库

静态链接库

库 库的存在&#xff0c;大大方便了我们进行编程。因为有了库&#xff0c;我们不必再从0开始&#xff0c;例如我们大多数人C语言写的第一个程序Hello World!都是用了库函数。以printf为例&#xff0c;我们只需要在程序源代码中包含<stdio.h>这个头文件之后&#xff0c;就…
阅读更多...
史上最全Java类型转换

史上最全Java类型转换

讲类型转换之前&#xff0c;让我来贴张表 基本数据类型的表示范围 类型 长度 表示范围默认值byte8b-128&#xff5e;1270short16b-32768&#xff5e;327670int32b-21147483648&#xff5e;21474836470long64b-9223372036 854 775 808&#xff5e;9223372036 8547758070Lfloat3…
阅读更多...
Java：类型转换

Java：类型转换

public class Demo04 {public static void main(String[] args) {//低--------------------------> 高// byte,short,char->int->long->float->doubleint i 128;byte b (byte) i ;//内存溢出//强制转换 &#xff08;类型&#xff09;变量名 高--低//自动转换…
阅读更多...
推荐文章

Copyright @ 2022~2023