jQuery
参考菜鸟教程jQuery 教程jQuery 教程 | 菜鸟教程
目录
jQuery - 获取或者内容text/HTML/val和属性attr
jQuery css() 方法设置或返回被选元素的一个或多个样式属性
jQuery - AJAX get() 和 post() 方法
jQuery - noConflict() 方法 释放jQuery对$的控制
引用
下载后
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
在线
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
jQuery 语法
基础语法: $(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
选择符有this当前元素,p元素,p.test 元素下面的test元素,#test id为test的元素
下图选择整个文档,行为是加载好了。
$(document).ready(function(){
// 开始写 jQuery 代码...
});
上图也称为入口函数
jQuery 选择器
元素选择器
元素选择器基于元素名选择元素
$("p") 选择全体p标签
#id 选择器
$("#test")
.class 选择器
$(".test")
更多实例
$("*") 选取全部元素
$("p:first") 选取第一个 <p> 元素
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素
$("[href]") 选取带有 href 属性的元素
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") 选取偶数位置的 <tr> 元素
$("tr:odd") 选取奇数位置的 <tr> 元素
jQuery 事件
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick 双击标签 | keydown | change input的字段改变(离开此input时看是否改变) | resize |
mouseenter 进入标签 | keyup | focus(input获得焦点时,也就是进入input标签) | scroll |
mouseleave 离开标签 | blur (当input标签失去焦点时) | unload | |
hover 鼠标悬停在上面 |
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
input获得焦点触发
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
input失去焦点时触发
jQuery 效果- 隐藏和显示
hide() 隐藏行为
show() 显示行为
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
隐藏和显示设置速度
$("button").click(function(){
$("p").hide(1000);
});
上代码消失的过程有一秒
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").hide(1000,"linear",function(){
alert("Hide() 方法已完成!");
});
});
});
上代码一秒内消失,jQuery自身提供"linear" 和 "swing"缓动函数,这里使用linear,并使用回调函数,也就是相当于一个返回值,当运行到最后就会返回,也就是运行这个函数
来回切换显示与隐藏
$("button").click(function(){
$("p").toggle();
});
按一下按钮就会执行回调函数,对p标签就会执行toggle函数,也就是由显示变为隐藏,由隐藏变为显示
同样,切换函数同样有特效
$(selector).toggle(speed,callback);
jQuery 效果 - 标签隐藏或显示添加淡入淡出效果
- fadeIn() 由隐藏变为显示,会有淡入的效果
- fadeOut() 由显示变为隐藏,会有淡出的效果
- fadeToggle()显示和隐藏的开关
- fadeTo()颜色变淡
以上方法都可以加上时间,提供了"slow"、"fast" 或多少毫秒。.也可以再加上回调函数
$("#div2").fadeOut("slow");
$("#div3").fadeIn(3000);
jQuery 效果 - 元素滑动(显示和隐藏加上滑动效果)
- slideDown()向下滑动元素,由隐藏变为显示
- slideUp() 向上滑动元素,由显示变为隐藏
- slideToggle()上面两个合起来
以上方法都可以加上时间,提供了"slow"、"fast" 或多少毫秒。.也可以再加上回调函数.
$("#panel").slideToggle("slow");
jQuery 效果- 动画-animate() 方法
$("div").animate({left:'250px'}); 向左移动250像素
默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。 如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!
生成动画的过程中可同时使用多个属性
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
使用定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
下面比当前高度高150px,宽度宽150px
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
jQuery animate() - 使用预定义的值
可以把属性的动画值设置为 "show"、"hide" 或 "toggle"
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
toggle是显示或者隐藏变换
jQuery animate() - 使用队列功能
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
将变高,变宽,再变窄,再变短
jQuery 停止动画
$("#panel").stop(); 如果上述动画还没完成,将停止动画
jQuery - 链(Chaining)
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
将会都执行
jQuery - 获取或者内容text/HTML/val和属性attr
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
- attr() 方法用于获取属性值
$("#test1").text("Hello world!"); 往里加文本,()里面没东西就就是获得内容
$("#test2").html("<b>Hello world!</b>"); 对id为test2 添加内容,()没有内容就是获得内容
$("#runoob").attr("href","http://www.runoob.com/jquery"); 设置属性,可以同时设置多个
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程" }); //同时设置多个属性
上面函数的回调函数
回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值
$("#test1").text(function(i,origText){ return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; });
jQuery - 添加HTML元素/内容
- append() - 在被选元素的结尾插入内容 (仍然在该元素的内部)
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
$("p").append("追加文本");
添加多个HTML标签
下面将标签内容变成一个变量,然后到最后的时候添加进去
function appendText(){
var txt1="<p>文本-1。</p>"; // 使用 HTML 标签创建文本
var txt2=("body").append(txt1,txt2,txt3); // 追加新元素
}
jQuery - 删除HTML元素
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
$("#div1").remove(); 移除id为div1的标签
$("#div1").empty(); 将div1里面的内容置空(也就是删除所有子元素)
过滤被删除的元素
在remove里面加内容,将指定只删除这个
$("p").remove(".italic"); 只删除italic的内容
jQuery - 获取并设置 CSS 类
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类 删除类里面的元素
- toggleClass() - 对被选元素进行添加/删除类的切换操作
有一个类为
.important {
font-weight:bold;
font-size:xx-large;
}
执行 $("h1,h2,p").addClass("blue"); 将会对h1,h2,p都增加里面两条css样式
因此可以对一些样式包装一个类,然后对元素添加这个类
jQuery css() 方法设置或返回被选元素的一个或多个样式属性
返回属性
$("p").css("background-color");
设置属性
$("p").css("background-color","yellow");
设置多个属性
$("p").css(
{"background-color":"yellow","font-size":"200%"});
jQuery 尺寸
- width() 设置或返回元素的宽度 $("#div1").width()
- height() 设置或返回元素的高度
- innerWidth()返回元素的宽度(包括内边距)
- innerHeight()返回元素的高度(包括内边距)
- outerWidth()返回元素的宽度(包括内边距和边框)
- outerHeight()返回元素的高度(包括内边距和边框)
jQuery 遍历 找 祖先
- parent() 返回被选元素的直接父元素
- parents()返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)
- parentsUntil()返回介于两个给定元素之间的所有祖先元素。
过滤,在()里面加入元素
$("span").parents("ul");返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素
$("span").parentsUntil("div");返回介于 <span> 与 <div> 元素之间的所有祖先元素:
jQuery 遍历 找 后代
- children() 返回被选元素的所有直接子元素 该方法只会向下一级对 DOM 树进行遍历
- find()返回被选元素的后代元素,一路向下直到最后一个后代。
$("div").children();返回每个 <div> 元素的所有直接子元素
$("div").find("span");返回属于 <div> 后代的所有 <span> 元素
过滤,在()加入元素
$("div").children("p.1");返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素
jQuery 遍历 找 同胞(siblings)
- siblings()返回被选元素的所有同胞元素
- next()返回被选元素的下一个同胞元素
- nextAll()返回被选元素的所有跟随的同胞元素
- nextUntil()介于两个给定参数之间的所有跟随的同胞元素
- prev() 前面的一个同胞
- prevAll()前面的所有同胞
- prevUntil()前面介于两个给定参数之间的所有跟随的同胞元素
过滤,在()加入元素
$("h2").siblings("p");返回属于 <h2> 的同胞元素的所有 <p> 元素
$("h2").nextUntil("h6");返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
jQuery 遍历- 过滤
它们允许基于其在一组元素中的位置来选择一个特定的元素。
- first()返回被选元素的首个元素
- last() 返回被选元素的最后一个元素
- eq()返回被选元素中带有指定索引号的元素
- filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
- not() 方法返回不匹配标准的所有元素,not() 方法与 filter() 相反
$("div p").first(); 选取首个 <div> 元素内部的第一个 <p> 元素 注意这里加了空格
$("p").eq(1); 索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。此例子选取第二个 <p> 元素(索引号 1)
$("p").filter(".url");返回带有类名 "url" 的所有 <p> 元素:
jQuery ajax() 方法
jQuery - AJAX load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
$("#div1").load("demo_test.txt"); 比如这个将在div1里面加载后台txt文件
callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
为了避免多页面情形下的代码重复 使用load方法解决
//1.当前文件中要插入的地方使用此结构: <div class="include" file="***.html"></div> //2.代码: $(".include").each(function() { if (!!$(this).attr("file")) { var $includeObj = $(this); $(this).load($(this).attr("file"), function(html) { $includeObj.after(html).remove(); //加载的文件内容写入到当前标签后面并移除当前标签 }) } }); //3.***.html中放入内容,用html格式仅仅因为会有编辑器的书写辅助。。 或者在index文件里只写重复部分,剩下的一股脑放各自单独文件 load() 进来~
jQuery - AJAX get() 和 post() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
$.get(URL,callback);
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
$.post(URL,data,callback);
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
GET 和 POST 方法的区别:
1、发送的数据数量
在 GET 中,只能发送有限数量的数据,因为数据是在 URL 中发送的。
在 POST 中,可以发送大量的数据,因为数据是在正文主体中发送的。
2、安全性
GET 方法发送的数据不受保护,因为数据在 URL 栏中公开,这增加了漏洞和黑客攻击的风险。
POST 方法发送的数据是安全的,因为数据未在 URL 栏中公开,还可以在其中使用多种编码技术,这使其具有弹性。
3、加入书签中
GET 查询的结果可以加入书签中,因为它以 URL 的形式存在;而 POST 查询的结果无法加入书签中。
4、编码
在表单中使用 GET 方法时,数据类型中只接受 ASCII 字符。
在表单提交时,POST 方法不绑定表单数据类型,并允许二进制和 ASCII 字符。
5、可变大小
GET 方法中的可变大小约为 2000 个字符。
POST 方法最多允许 8 Mb 的可变大小。
6、缓存
GET 方法的数据是可缓存的,而 POST 方法的数据是无法缓存的。
7、主要作用
GET 方法主要用于获取信息。而 POST 方法主要用于更新数据。
jQuery - noConflict() 方法 释放jQuery对$的控制
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍然在工作!");
});
});
仍然可以通过全名替代简写的方式来使用 jQuery
jsonp
【原创】说说JSON和JSONP,也许你会豁然开朗,含jQuery用例 - 随它去吧 - 博客园
jQuery 选择器
选择器 | 实例 | 选取 |
---|---|---|
* | $("*") | 所有元素 |
#id | $("#lastname") | id="lastname" 的元素 |
.class | $(".intro") | class="intro" 的所有元素 |
.class,.class | $(".intro,.demo") | class 为 "intro" 或 "demo" 的所有元素 |
element | $("p") | 所有 <p> 元素 |
el1,el2,el3 | $("h1,div,p") | 所有 <h1>、<div> 和 <p> 元素 |
:first | $("p:first") | 第一个 <p> 元素 |
:last | $("p:last") | 最后一个 <p> 元素 |
:even | $("tr:even") | 所有偶数 <tr> 元素,索引值从 0 开始,第一个元素是偶数 (0),第二个元素是奇数 (1),以此类推。 |
:odd | $("tr:odd") | 所有奇数 <tr> 元素,索引值从 0 开始,第一个元素是偶数 (0),第二个元素是奇数 (1),以此类推。 |
:first-child | $("p:first-child") | 属于其父元素的第一个子元素的所有 <p> 元素 |
:first-of-type | $("p:first-of-type") | 属于其父元素的第一个 <p> 元素的所有 <p> 元素 |
:last-child | $("p:last-child") | 属于其父元素的最后一个子元素的所有 <p> 元素 |
:last-of-type | $("p:last-of-type") | 属于其父元素的最后一个 <p> 元素的所有 <p> 元素 |
:nth-child(n) | $("p:nth-child(2)") | 属于其父元素的第二个子元素的所有 <p> 元素 |
:nth-last-child(n) | $("p:nth-last-child(2)") | 属于其父元素的第二个子元素的所有 <p> 元素,从最后一个子元素开始计数 |
:nth-of-type(n) | $("p:nth-of-type(2)") | 属于其父元素的第二个 <p> 元素的所有 <p> 元素 |
:nth-last-of-type(n) | $("p:nth-last-of-type(2)") | 属于其父元素的第二个 <p> 元素的所有 <p> 元素,从最后一个子元素开始计数 |
:only-child | $("p:only-child") | 属于其父元素的唯一子元素的所有 <p> 元素 |
:only-of-type | $("p:only-of-type") | 属于其父元素的特定类型的唯一子元素的所有 <p> 元素 |
parent > child | $("div > p") | <div> 元素的直接子元素的所有 <p> 元素 |
parent descendant | $("div p") | <div> 元素的后代的所有 <p> 元素 |
element + next | $("div + p") | 每个 <div> 元素相邻的下一个 <p> 元素 |
element ~ siblings | $("div ~ p") | <div> 元素同级的所有 <p> 元素 |
: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)") | 所有不为空的输入元素 |
:header | $(":header") | 所有标题元素 <h1>, <h2> ... |
:animated | $(":animated") | 所有动画元素 |
:focus | $(":focus") | 当前具有焦点的元素 |
:contains(text) | $(":contains('Hello')") | 所有包含文本 "Hello" 的元素 |
:has(selector) | $("div:has(p)") | 所有包含有 <p> 元素在其内的 <div> 元素 |
:empty | $(":empty") | 所有空元素 |
:parent | $(":parent") | 匹配所有含有子元素或者文本的父元素。 |
:hidden | $("p:hidden") | 所有隐藏的 <p> 元素 |
:visible | $("table:visible") | 所有可见的表格 |
:root | $(":root") | 文档的根元素 |
:lang(language) | $("p:lang(de)") | 所有 lang 属性值为 "de" 的 <p> 元素 |
[attribute] | $("[href]") | 所有带有 href 属性的元素 |
[attribute=value] | $("[href='default.htm']") | 所有带有 href 属性且值等于 "default.htm" 的元素 |
[attribute!=value] | $("[href!='default.htm']") | 所有带有 href 属性且值不等于 "default.htm" 的元素 |
[attribute$=value] | ='.jpg']") | 所有带有 href 属性且值以 ".jpg" 结尾的元素 |
[attribute|=value] | $("[title|='Tomorrow']") | 所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串 |
[attribute^=value] | $("[title^='Tom']") | 所有带有 title 属性且值以 "Tom" 开头的元素 |
[attribute~=value] | $("[title~='hello']") | 所有带有 title 属性且值包含单词 "hello" 的元素 |
[attribute*=value] | $("[title*='hello']") | 所有带有 title 属性且值包含字符串 "hello" 的元素 |
[name=value][name2=value2] | ='man']" ) | 带有 id 属性,并且 name 属性以 man 结尾的输入框 |
: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") | 所有启用的元素 |
:disabled | $(":disabled") | 所有禁用的元素 |
:selected | $(":selected") | 所有选定的下拉列表元素 |
:checked | $(":checked") | 所有选中的复选框选项 |
.selector | $(selector).selector | 在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器 |
:target | $( "p:target" ) | 选择器将选中ID和URI中一个格式化的标识符相匹配的<p>元素 |
jQuery 实用工具
方法 | 描述 |
---|---|
$.boxModel | 在版本 1.8 中被废弃。检测浏览器是否使用W3C的CSS盒模型渲染当前页面 |
$.browser | 在版本 1.9 中被废弃。返回用户当前使用的浏览器的相关信息 |
$.contains() | 判断另一个DOM元素是否是指定DOM元素的后代 |
$.each() | 遍历指定的对象和数组 |
$.extend() | 将一个或多个对象的内容合并到目标对象 |
$.fn.extend() | 为jQuery扩展一个或多个实例属性和方法 |
$.globalEval() | 全局性地执行一段JavaScript代码 |
$.grep() | 过滤并返回满足指定函数的数组元素 |
$.inArray() | 在数组中查找指定值并返回它的索引值(如果没有找到,则返回-1) |
$.isArray() | 判断指定参数是否是一个数组 |
$.isEmptyObject() | 检查对象是否为空(不包含任何属性) |
$.isFunction() | 判断指定参数是否是一个函数 |
$.isNumeric() | 判断指定参数是否是一个数字值 |
$.isPlainObject() | 判断指定参数是否是一个纯粹的对象 |
$.isWindow() | 判断指定参数是否是一个窗口 |
$.isXMLDoc() | 判断一个DOM节点是否位于XML文档中,或者其本身就是XML文档 |
$.makeArray() | 将一个类似数组的对象转换为真正的数组对象 |
$.map() | 指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回 |
$.merge() | 合并两个数组内容到第一个数组 |
$.noop() | 一个空函数 |
$.now() | 返回当前时间 |
$.parseHTML() | 将HTML字符串解析为对应的DOM节点数组 |
$.parseJSON() | 将符合标准格式的JSON字符串转为与之对应的JavaScript对象 |
$.parseXML() | 将字符串解析为对应的XML文档 |
$.trim() | 去除字符串两端的空白字符 |
$.type() | 确定JavaScript内置对象的类型 |
$.unique() | 在jQuery 3.0中被弃用。对DOM元素数组进行排序,并移除重复的元素 |
$.uniqueSort() | 对DOM元素数组进行排序,并移除重复的元素 |
$.data() | 在指定的元素上存取数据,并返回设置值 |
$.hasData() | 确定一个元素是否有相关的jQuery数据 |
$.sub() | 创建一个新的jQuery副本,其属性和方法可以修改,而不会影响原来的jQuery对象 |
$.speed | 创建一个包含一组属性的对象用来定义自定义动画 |
$.htmlPrefilter() | 通过jQuery操作方法修改和过滤HTML字符串 |
$.readyException() | 处理包裹在jQuery()中函数同步抛出的错误 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)