jQuery笔记

2024-04-27 15:10:48

字体：大中小

来源：转载

供稿：网友

使用前：

在head标签内：<script src="jquery-1.10.2.min.js"></script>or <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

选择器

$("*") 选取所有元素 $(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> 元素

事件

$(document).ready() 方法允许我们在文档完全加载完后执行函数。

$(“p”).click(function(){ // 动作触发后执行的代码!! }); 当双击元素时，会发生 dblclick 事件。当鼠标指针穿过元素时，会发生 mouseenter 事件。当鼠标指针离开元素时，会发生 mouseleave 事件。当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。当在元素上松开鼠标按钮时，会发生 mouseup 事件。 hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。当元素获得焦点时，发生 focus 事件。当元素失去焦点时，发生 blur 事件。

效果（淡化、动画、、、）

隐藏显示

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

$(selector).hide(speed,callback);$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

通过 jQuery，您可以使用 toggle(speed ,callback ) 方法来切换 hide() 和 show() 方法。

淡入淡出

jQuery fadeIn() 用于淡入已隐藏的元素。

$(selector).fadeIn(speed,callback);

jQuery fadeOut() 方法用于淡出可见元素。

$(selector).fadeOut(speed,callback);

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).fadeTo(speed,opacity,callback);

滑动

jQuery slideDown() 方法用于向下滑动元素。

$(selector).slideDown(speed,callback);$("#flip").click(function(){ $("#panel").slideDown(speed,callback);});panel.display == none //开始时

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。 jQuery slideUp() 方法用于向上滑动元素。

动画

jQuery animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

$("div").animate({ left:'250px'， opacity:'0.5', height:'150px', width:'150px'});

animate() - 使用相对值： height:’+=150px’, width:’+=150px’

您甚至可以把属性的动画值设置为 “show”、”hide” 或 “toggle”： height:’toggle’

animate() - 使用队列功能：按顺序执行

var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow");

jQuery stop() 方法用于停止动画或效果，在它们完成之前。stop() 方法适用于所有 jQuery 效果函数

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

Callback 函数在当前动画 100% 完成之后执行。

链（chaining）

jQuery 方法链接 下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。”p1” 元素首先会变为红色，然后向上滑动，再然后向下滑动：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery HTML

jQuery 拥有可操作 HTML 元素和属性的强大方法。

获取内容(设置内容)

text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值（输入值或存在的值）

text(“xxx”) xxx为设置的内容 回调函数 回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

$("#test1").text(function(i,origText){ return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; });

获取属性值（设置属性值）

jQuery attr( href/id/name/style、、) 方法用于获取属性值。 attr(attribute,attribute value)设置属性值

$("#runoob").attr("href","http://www.runoob.com/jquery") $("#runoob").attr({ "href" : "http://www.runoob.com/jquery", "title" : "jQuery 教程"});

回调同上：

$("#runoob").attr("href", function(i,origValue){ return origValue + "/jquery"; });

添加元素

jQuery append() 方法在被选元素的结尾插入内容。

$("p").append("追加文本");

jQuery PRepend() 方法在被选元素的开头插入内容。 三种方式创建text/html

function appendText(){ var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本 var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本 var txt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素}

jQuery after() 方法在被选元素之后插入内容。 jQuery before() 方法在被选元素之前插入内容。

$("img").after("在后面添加文本");$("img").before("在前面添加文本");

同上三种方法可以添加在元素之前和之后

删除元素

jQuery remove() 方法删除被选元素及其子元素。

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

jQuery empty() 方法删除被选元素的子元素。 jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

$("p").remove(".italic");//删除 class="italic" 的所有 <p> 元素：

jQuery 操作 CSS（类 .xx定义的样式）

addClass() - 向被选元素添加一个或多个类

$("#div1").addClass("important blue");

removeClass() - 从被选元素删除一个或多个类 toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作

css() 方法设置或返回被选元素的一个或多个样式属性。 如需返回指定的首个匹配元素 CSS 属性的值： css(“propertyname”); 如需设置指定的所有匹配元素 CSS 属性， css(“propertyname”,”value”); 如需设置多个 CSS 属性： css({“propertyname”:”value”,”propertyname”:”value”,…});

尺寸（元素、窗口大小）

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。 height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。 innerWidth() 方法返回元素的宽度（包括内边距）。 innerHeight() 方法返回元素的高度（包括内边距）。 outerWidth() 方法返回元素的宽度（包括内边距和边框）。 outerHeight() 方法返回元素的高度（包括内边距和边框）。 outerWidth(true) 方法返回元素的宽度（全部）。 outerHeight(true) 方法返回元素的高度（全部）。

jQuery遍历

jQuery 遍历，意为”移动”，用于根据其相对于其他元素的关系来”查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。祖先 parent() 方法返回被选元素的直接父元素。 parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素。使用可选参数来过滤对祖先元素的搜索

$("span").parents("ul");返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

$("span").parentsUntil("div");返回介于 <span> 与 <div> 元素之间的所有祖先元素

后代 children() 方法返回被选元素的所有直接子元素。可选参数来过滤对子元素的搜索

$("div").children("p.1");返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

$("div").find("span");返回属于 <div> 后代的所有 <span> 元素： $("div").find("*");返回 <div> 的所有后代：

同胞（水平遍历） siblings() 方法返回被选元素的所有同胞元素。可选参数来过滤对同胞元素的搜索。 next() 方法返回被选元素的下一个同胞元素。 nextAll() 方法返回被选元素的所有跟随的同胞元素。 nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。 prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素 遍历过滤 first() 方法返回被选元素的首个元素。

$("div p").first();选取首个 <div> 元素内部的第一个 <p> 元素

last() 方法返回被选元素的最后一个元素。 eq() 方法返回被选元素中带有指定索引号的元素。

$("p").eq(1);索引号从 0 开始，选取第二个 <p> 元素（索引号 1）

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

$("p").filter(".url");返回带有类名 "url" 的所有 <p> 元素

not() 方法返回不匹配标准的所有元素。

jQuery Ajax

AJAX = 异步 javaScript 和 xml（Asynchronous Javascript and XML）。 load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

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

也可以把 jQuery 选择器添加到 URL 参数。

$("#div1").load("demo_test.txt #p1");把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中

callback 参数规定当 load() 方法完成后所要允许的回调函数

responseTxt - 包含调用成功时的结果内容statusTXT - 包含调用的状态statusTxt==”success” or “error”xhr - 包含 xmlhttpRequest 对象

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。 POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

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

其他

noConflict() 方法会释放会对$ 标识符的控制，这样其他脚本（JavaScript其他框架）就可以使用它了。

$.noConflict();jQuery(document).ready(function(){ jQuery("button").click(function(){jQuery("p").text("jQuery 仍然在工作!"); });});

创建自己的简写

var jq = $.noConflict();

把美元符号作为变量传递给 ready 方法,函数内使用美元符号了 - 而在函数外，依旧不得不使用 “jQuery”：

$.noConflict();jQuery(document).ready(function($){$("button").click(function(){$("p").text("jQuery 仍然在工作!");});});

常用AJAX操作

$("button").click(function(){ $.ajax({ url:"demo_test.txt", success:function(result){ $("#div1").html(result); } });});

名称值/描述

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

上一篇：Yii2 验证错误信息改为全局中文

下一篇：JS判断Iframe是否加载完毕