jQuery笔记

最新推荐文章于 2024-01-20 21:49:50 发布

竹马223

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量270

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/u011521239/article/details/54909254

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用前：

在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);
        }
      });
});

名称值/描述