jquery大全

Posted 2020-08-30

jQuery 元素选择器
$("*") 所有元素
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("#lastname") id="lastname" 的元素
$(".intro") 所有 class="intro" 的元素
$("p") 所有 <p> 元素
$(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
$("p:first") 第一个 <p> 元素
$("p:last") 最后一个 <p> 元素
$("tr:even") 所有偶数 <tr> 元素
$("tr:odd") 所有奇数 <tr> 元素
$("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始）
$("ul li:gt(3)") 列出 index 大于 3 的元素
$("ul li:lt(3)") 列出 index 小于 3 的元素
$("input:not(:empty)") 所有不为空的 input 元素
$(":header") 所有标题元素 <h1> - <h6>
$(":animated") 所有动画元素
$(":contains(‘W3School‘)") 包含指定字符串的所有元素
$(":empty") 无子（元素）节点的所有元素
$("p:hidden") 所有隐藏的 <p> 元素
$("table:visible") 所有可见的表格
$("th,td,.intro") 所有带有匹配选择的元素
$("[href]") 所有带有 href 属性的元素
$("[href=‘#‘]") 所有 href 属性的值等于 "#" 的元素
$("[href!=‘#‘]") 所有 href 属性的值不等于 "#" 的元素
$("[href$=‘.jpg‘]") 所有 href 属性的值包含以 ".jpg" 结尾的元素
$(":input") 所有 <input> textare botton 元素
$(":text") 所有 type="text" 的 <input> 元素
$(":password") 所有 type="password" 的 <input> 元素
$(":radio") 所有 type="radio" 的 <input> 元素
$(":checkbox") 所有 type="checkbox" 的 <input> 元素
$(":submit") 所有 type="submit" 的 <input> 元素
$(":reset") 所有 type="reset" 的 <input> 元素
$(":button") 所有 type="button" 的 <input> 元素
$(":image") 所有 type="image" 的 <input> 元素
$(":file") 所有 type="file" 的 <input> 元素
$(":enabled") 所有激活的 input 元素
$(":disabled") 所有禁用的 input 元素
$(":selected") 所有被选取的 input 元素
$(":checked") 所有被选中的 input 元素
$("input[name=username]").val();
$(":input[name=username]");
-------------------------------------------------------------------------------------------
jQuery 参考手册 - 事件
jQuery 事件方法
事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。
触发实例：
$("button#demo").click()
将触发 id="demo" 的 button 元素的 click 事件。
绑定实例：
$("button#demo").click(function(){$("img").hide()})
点击 id="demo" 的按钮时隐藏所有图像。

方法 描述
console.log() 输出日志
bind() 绑定方法
blur() 去焦点 (blur) 时改变 $("input").blur(function(){
change() 改变事件 $(".field").change(function()
click() 点击事件 $("button").click(function(){
dblclick() 双击 $("button").dblclick(function(){
delegate() $("div").delegate("button","click",function(){
die() 移除所有通过 live() $("p").die();
error() 没有正确地加载 添加的方法
event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。
event.pageX 显示鼠标指针的位置 $(document).mousemove(function(e){ e.pageX
event.pageY e.pageY
event.preventDefault() 阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。
event.result 包含由被指定事件触发的事件处理器返回的最后一个值。
event.target 触发该事件的 DOM 元素 event.target.nodeName
event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type 描述事件的类型。
event.which 会显示键位序号
focus() $("input").focus(function(){
keydown() 下按键时 $("input").keydown(function(){
keypress() keypress 事件与 keydown 事件类似。
keyup() 触发、或将函数绑定到指定元素的 key up 事件
live() 和bind()类似
load() 加载时 $("img").load(function(){
mousedown() 按下鼠标按钮时 $("button").mousedown(function()
mouseenter() 鼠标指针进入（穿过）元素时 只有在鼠标指针穿过被选元素时，才会触发$("p").mouseenter(function(){
mouseleave() 鼠标离开 $("p").mouseleave(function(){
mousemove() 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mouseout() $("p").mouseout(function(){
mouseover() 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
mouseup() 松开鼠标按钮时
one() 每个元素只能触发一次该处理器。$("p").one("click",function(){
resize() 对浏览器窗口调整大小进行 $(window).resize(function() {
scroll() 元素滚动时 $("div").scroll(function() {
select() 文本被选中 $("input").select(function(){
submit() 提交表单时 $("form").submit(function(e){
toggle() $(selector).toggle(function1(),function2(),functionN(),...)
trigger() trigger() 方法触发被选元素的指定事件类型。
triggerHandler()请注意，与 trigger() 方法不同，triggerHandler() 方法不会引起所发生事件的默认行为（文本不会被选中）。
unbind() 从匹配元素移除一个被添加的事件处理器$("p").unbind();
undelegate() 从所有元素删除由 delegate() 方法添加的事件处理器
unload() 当用户离开页面时，会发生 unload 事件。
animate() $("#box").animate({height:"300px"});
clearQueue() 对被选元素移除所有排队的函数（仍未运行的）$("#box").clearQueue();
delay() 对被选元素的所有排队函数（仍未运行）设置延迟
dequeue() 运行被选元素的下一个排队函数
fadeIn() 逐渐改变被选元素的不透明度，从隐藏到可见$("p").fadeIn();
fadeOut() 逐渐改变被选元素的不透明度，从可见到隐藏$("p").fadeOut();
fadeTo() 把被选元素逐渐改变至给定的不透明度$("p").fadeTo(1000,0.4);
hide() 隐藏被选的元素$("p").hide();
queue() 显示被选元素的排队函数
show() 显示被选的元素 $("p").show();
slideDown() 通过调整高度来滑动显示被选元素$("p").slideDown();
slideToggle() 对被选元素进行滑动隐藏和滑动显示的切换$("p").slideToggle();
slideUp() 通过调整高度来滑动隐藏被选元素 $("p").slideUp();
stop() 停止在被选元素上运行动画$("#box").stop();
toggle() 对被选元素进行隐藏和显示的切换 $("p").toggle();
--------------------------------------------------------------------------------
jQuery DOM 操作
text() - 设置或返回所选元素的文本内容 $("#test1").text("Hello world!");
html() - 设置或返回所选元素的内容（包括 HTML 标记）$("#test2").html("<b>Hello world!</b>");
val() - 设置或返回表单字段的值 $("#test3").val("Dolly Duck");
attr() 方法用于获取属性值。 $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
attr() 方法也允许您同时设置多个属性。
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
----------------------------------------------------------------------------------
jQuery 文档操作方法
addClass() 向匹配的元素添加指定的类名。
after() 在匹配的元素之后插入内容。
append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容。
appendTo() 向目标结尾插入匹配元素集合中的每个元素。
attr() 设置或返回匹配元素的属性和值。
before() 在每个匹配的元素之前插入内容。
clone() 创建匹配元素集合的副本。
detach() 从 DOM 中移除匹配元素集合。
empty() 删除匹配的元素集合中所有的子节点。
hasClass() 检查匹配的元素是否拥有指定的类。
html() 设置或返回匹配的元素集合中的 HTML 内容。
insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore() 把匹配的元素插入到另一个指定的元素集合的前面。
prepend() 向匹配元素集合中的每个元素开头插入由参数指定的内容。
prependTo() 向目标开头插入匹配元素集合中的每个元素。
remove() 移除所有匹配的元素。
removeAttr() 从所有匹配的元素中移除指定的属性。
removeClass() 从所有匹配的元素中删除全部或者指定的类。
replaceAll() 用匹配的元素替换所有匹配到的元素。
replaceWith() 用新内容替换匹配的元素。
text() 设置或返回匹配元素的内容。
toggleClass() 从匹配的元素中添加或删除一个类。
val() 设置或返回匹配元素的值。
----------------------------------------------------------------------------
wrap() 把匹配的元素用指定的内容或元素在外面包裹起来。
wrapAll() 把所有匹配的元素用指定的内容或元素在外面包裹起来。
wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素在外面包裹起来。
unwrap() 移除并替换指定元素的父元素。
wrapInner() 把匹配的元素用指定的内容或元素在里面包裹起来。
jQuery append() 方法
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text."; // 通过 DOM 来创建文本
$("body").append(txt1,txt2,txt3); // 追加新元素
-----------------------------------------------------------------------------
jQuery remove() 方法删除被选元素及其子元素。
jQuery empty() 方法删除被选元素的子元素。
过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素：
实例
$("p").remove(".italic");
-----------------------------------------------------------------------------------
jQuery addClass() 方法
jQuery removeClass() 方法
jQuery toggleClass() 方法
jQuery css() 方法 单个值 $("p").css("background-color","yellow"); 多个值 $("p").css({"background-color":"yellow","font-size":"200%"});
css() 设置或返回匹配元素的样式属性。
height() 设置或返回匹配元素的高度。
offset() 返回第一个匹配元素相对于文档的位置。两个整型属性：top 和 left
offsetParent() 返回最近的定位祖先元素。
position() 返回第一个匹配元素相对于父元素的位置。
scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。
width() 设置或返回匹配元素的宽度。
------------------------------------------------------------------------------------
jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。$(document).width();
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。$(window).height();
设置 指定的 <div> 元素的宽度和高度：$("#div1").width(500).height(500);
---------------------------------------------------------------------------------
jQuery 遍历函数
.add() 将元素添加到匹配元素的集合中。
.andSelf() 把堆栈中之前的元素集添加到当前集合中。
.children() 获得匹配元素集合中每个元素的所有子元素。
.closest() 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。
.contents() 获得匹配元素集合中每个元素的子元素，包括文本和注释节点。
.each() 对 jQuery 对象进行迭代，为每个匹配元素执行函数。
.end() 结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。
.eq() 将匹配元素集合缩减为位于指定索引的新元素。
.filter() 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
.find() 获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。
.first() 将匹配元素集合缩减为集合中的第一个元素。
.has() 将匹配元素集合缩减为包含特定元素的后代的集合。
.is() 根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。
.last() 将匹配元素集合缩减为集合中的最后一个元素。
.map() 把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。
.next() 获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
.nextUntil() 获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。
.not() 从匹配元素集合中删除元素。
.offsetParent() 获得用于定位的第一个父元素。
.parent() 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。
.parents() 获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。
.parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。
.prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。
.prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
.prevUntil() 获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。
.siblings() 获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。
.slice() 将匹配元素集合缩减为指定范围的子集。
.clearQueue() 从队列中删除所有未运行的项目。
.data() 存储与匹配元素相关的任意数据。
jQuery.data() 存储与指定元素相关的任意数据。
.dequeue() 从队列最前端移除一个队列函数，并执行它。
jQuery.dequeue() 从队列最前端移除一个队列函数，并执行它。
jQuery.hasData() 存储与匹配元素相关的任意数据。
.queue() 显示或操作匹配元素所执行函数的队列。
jQuery.queue() 显示或操作匹配元素所执行函数的队列。
.removeData() 移除之前存放的数据。
jQuery.removeData() 移除之前存放的数据。
-------------------------------------------------------------------------------------------------
jQuery ajax - post() 方法
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
【if(statusTxt=="success")alert("外部内容加载成功！");】
dataType可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。

使用 ajax 请求发送表单数据：
$.post("test.php", $("#testform").serialize());
请求 test.php 页面，并一起发送一些额外的数据（同时仍然忽略返回值）：
$.post("test.php", { name: "John", time: "2pm" } );
向服务器传递数据数组（同时仍然忽略返回值）：
$.post("test.php", { ‘choices[]‘: ["Jon", "Susan"] });

jQuery load() 方法是简单但强大的 AJAX 方法。
$(‘#test‘).load(‘/example/jquery/demo_test.txt‘);
$("#div1").load("demo_test.txt");
$("#div1").load("demo_test.txt #p1");

jQuery $.get() 方法
$.get("demo_test.asp",function(data,status){
alert("数据: " + data + "状态: " + status);});
$.get() 的第一个参数是我们希望请求的 URL（"demo_test.asp"）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
jQuery Ajax 操作函数
jQuery.ajax() 执行异步 HTTP (Ajax) 请求。
.ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError() 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend() 在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup() 设置将来的 Ajax 请求的默认值。
.ajaxStart() 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop() 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess() 当 Ajax 请求成功完成时显示一条消息。
jQuery.get() 使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript() 使用 HTTP GET 请求从服务器加载 javascript 文件，然后执行该文件。
.load() 从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param() 创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post() 使用 HTTP POST 请求从服务器加载数据。
.serialize() 将表单内容序列化为字符串。
.serializeArray() 序列化表单元素，返回 JSON 数据结构数据。
---------------------------------------------------------------------------------------------------