JQuery 基础知识学习(详尽版)
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");
JQuery 基础知识学习(详尽版)相关推荐
- Javascript 基础知识学习
Javascript 基础知识学习 参考自:https://www.w3cschool.cn/javascript/ javascript 简介 JavaScript 是互联网上最流行的脚本语言,这门 ...
- 原创《SQL基础知识第2版》PDF高清版,限时下载!
内容简介 <SQL基础知识第2版>是一本为新手同学特地准备的入门文档,由公众号[SQL数据库开发]原创出品. 内容涵盖了SQL基础语法的所有内容,不仅有SQL各个语法的解释,而且还附有大量 ...
- python基础知识学习笔记(1)
python 基础知识学习笔记(1) 总结一下Python基础知识,以防忘记. 文章目录 python 基础知识学习笔记(1) 一.起步 1.python安装与编译环境 二.变量和简单数据类型 三.列 ...
- Linux操作系统基础知识学习
Q1.什么是GNU?Linux与GNU有什么关系? A: 1)GNU是GNU is Not Unix的递归缩写,是自由软件基金会(Free Software Foundation,FSF)的一个项目, ...
- numeric比较大小 数据库_数据库基础知识个人整理版-强烈推荐
<数据库基础知识个人整理版-强烈推荐>由会员分享,可在线阅读,更多相关<数据库基础知识个人整理版-强烈推荐(20页珍藏版)>请在人人文库网上搜索. 1.数据库知识要点总结第一章 ...
- uniapp 基础知识学习
uniapp 基础知识学习 uniapp 基础知识学习 [uniapp 介绍](https://uniapp.dcloud.io/README) 有哪些uni-app的作品 uni-app的社区规模 ...
- 《SQL基础知识第2版》PDF高清版,限时下载!
内容简介 <SQL基础知识第2版>是一本为新手同学特地准备的入门文档,由公众号[SQL数据库开发]原创出品. 内容涵盖了SQL基础语法的所有内容,不仅有SQL各个语法的解释,而且还附有大量 ...
- jQuery基础知识整理
jQuery基础知识整理 jQuery简介 什么是jQuery(了解) jQuery简化JS代码 jQuery的核心思想:"写的更少,但做的更多"(write less,do mo ...
- jQuery小测试系列之jQuery基础知识
日期:2012-4-17 来源:GBin1.com 这是jQuery小测试系列第一部分:基础知识. 来源:jQuery小测试系列之jQuery基础知识
最新文章
- arXiv 2021《Transformer in Transformer》论文笔记
- 彻底搞定C指针-——第五篇:函数参数的传递
- C和指针之高级指针话题通过函数指针实现在链表中找到特定的值
- [原创]java WEB学习笔记36:Java Bean 概述,及在JSP 中的使用,原理
- k8s核心技术-Pod(调度策略)_影响Pod调度(资源限制和节点选择器)---K8S_Google工作笔记0025
- Web前端笔记(8) 管后台理页面
- (转)Java ConcurrentModificationException异常原因和解决方法
- 从具体案例了解知识图谱构建流程
- JUC和线程池的详细讲解
- jsp+ssh+mysql Java web学生考勤管理系统源码附视频指导运行教程
- 挑战程序设计竞赛 — 知识总结
- 计算机网络谢希仁第七版课后习题答案
- Google App Engine初探
- 温度记录仪,基础版,刚学习c时写的
- 简历包装严重,作为面试官,我是如何甄别应聘者的包装程度
- HDU 5713 K个联通块(状压DP)
- 移动应用程序设计基础——期末考核——登录界面与简单日记本的综合实践
- open stack——Nove计算服务
- snmp工具_运维超级好用工具大PK,你在用哪个?
- Android8.0以上的Service、Notification和广播适配问题