jQuery 自学教程

前言

  • 在开始学习之前应该具备的知识
    • HTML
    • CSS
    • JavaScript

jQuery简介

jQuery是一个JavaScript库。jQuery库可以通过一行简单的标记被添加到网页中。

  • jQuery库包含的特性:
    • HTML元素的选取
    • HTML元素的操作
    • CSS操作
    • HTML事件函数
    • JavaScript特效和动画
    • HTML DOM遍历和修改
    • AJAX
    • Utilities

jQuery安装

  1. 下载jQuery

    jQuery有两个版本可供下载:
    Production version 用于实际的网站中,已被精简和压缩。
    Development version 用于测试和开发(未压缩,是可读的代码)。
    这两个版本都可以从 jQuery.com 下载。
    提 示 : \color{orange}{提示:} 您可以把下载的文件放到与页面相同的目录中,这样更方便使用。

  2. 把jQuery添加到您的网页

    因为jQuery库是一个JavaScript文件,您可以使用HTML的 <script> 标签引用它:

    <head>
    <script src="jquery.js"></script>
    </head>
    
  3. 替代方案

    如果您不希望下载并存放jQuery,那么也可以通过 CDN (内容分发网络) 引用它。
    Google CDN:

    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    </head>
    

    Microsoft CDN

    <head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    </head>
    

jQuery 语法

jQuery 语法是为HTML元素的选取编制的,可以对元素执行某些操作。

  • 基础语法是:$(selector).action()
    • 美元符号是定义jQuery
    • 选择符(selector) “查询"和"查找” HTML元素
    • jQuery 的 action() 执行对元素的操作

示例:

<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $(this).hide() //隐藏当前元素
                // $("p").hide() //隐藏所有段落
                // $(".test").hide() //隐藏所有class="test"的元素
                // $("#test").hide() //隐藏所有id="test"的元素
            });
        });
    </script>
</head>
<body>
    <h2 class="test">This is a heading</h2>
    <p class="test">This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">Click me</button>
</body>
</html>

文档就绪函数

$(document).ready(function(){
    //jquery code in here
});

为什么要将jQuery代码写在文档就绪函数中?

是为了防止文档在完全加载(就绪)之前运行jQuery代码。
如果在文档未完全加载之前就运行函数,操作可能失败。如:

  • 试图隐藏一个不存在的元素
  • 获取未完全加载的图像大小

jQuery 选择器

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元素进行选择。
选择器允许您对HTML元素组或单个元素进行操作。
在HTML DOM 术语中:选择器允许您对DOM元素组或单个DOM节点进行操作。
jQuery 选择器参考手册

jQuery 元素选择器

jQuery 使用CSS选择器来选取HTML元素。

实例:

$("p") //选取 <p> 元素
$("p.intro") //选取所有 class="intro" 的 <p> 元素
$("p#demo") //选取所有 id="demo" 的 <p> 元素

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

实例:

$("[href]") //选取所有带有href属性的元素。
$("[href='#']") //选取所有带有href值等于"#"的元素。
$("[href!='#']") //选取所有带有href值不等于"#"的元素。
$("[href$='.jpg']") //选取所有带有href值以".jpg"结尾的元素。

jQuery CSS 选择器

jQuery CSS选择器可用于改变HTML元素的CSS属性。

实例:

$("p").css("background-color","red"); //把所有p元素的背景颜色更改为红色。

jQuery 事件

jQuery 是为事件处理特别设计的。
jQuery 事件参考手册

jQuery 事件函数

jQuery 事件处理方法是jQuery中的核心函数。
事件处理程序指的是当HTML中发生某些事件时所调用的方法。术语由事件"触发"(或"激发")经常会被使用。
通常会把jQuery代码放到<head>部分的事件处理方法中:

实例:

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () { // 当按钮的点击事件被触发时会调用一个函数
                $("p").hide(); // 隐藏所有的<p>元素
            });
        });
    </script>
</head>
<body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button>Click me</button>
</body>
</html>

单独文件中的函数

如果您的网站包含许多页面,并且您希望您的jQuery函数易于维护,那么请把您的jQuery函数放到独立的 .js 文件中。

实例:通过script标签的src属性来引用文件。

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

jQuery 名称冲突

jQuery 使用$符号作为jQuery的简介方式。
某些其他JavaScript库中的函数(比如 Prototype) 同样使用$符号。
jQuery 使用名为 noConflict() 方法解决该问题。

var jq = jQuery.noConflict(); // 用 jq 来代替 $ 符号

jQuery 代码需要遵循的规则

  1. 把所有的jQuery代码置于事件处理函数中
  2. 把所有事件处理函数置于文档就绪事件处理器中
  3. 把jQuery代码置于单独的 .js 文件中
  4. 如果存在命名冲突,则重命名jQuery库

jQuery 效果

jQuery 效果包括隐藏、显示、切换、滑动、淡入淡出,以及动画。
jQuery 效果参考手册

jQuery 隐藏/显示

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

语法:

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

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

实例:

<!DOCTYPE html>
<html>

<head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#hide").click(function () {
                $("p").hide();
            });
            $("#show").click(function () {
                $("p").show();
            });
        });
    </script>
</head>

<body>
    <p id="p1">如果点击“隐藏”按钮,我就会消失。</p>
    <button id="hide" type="button">隐藏</button>
    <button id="show" type="button">显示</button>
</body>

</html>

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

功能描述:显示被隐藏的元素,并隐藏已显示的元素。

语法:

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

可选参数speed规定隐藏和显示的速度,可以取以下值:“slow”、“fast” 或毫秒。
可选参数 callback 是 toggle() 方法完成后所执行的函数名称。

实例:

$("button").click(function(){
    $("p").toggle();
})

jQuery 淡入淡出

通过jQuery, 您可以实现元素的淡入淡出效果。

jQuery 拥有四种 fade 方法:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

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

语法:

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

可选参数speed规定效果时长,它可以取以下值:“slow”、“fast” 或毫秒。
可选参数callback是fading完成后所执行的函数名称。

实例:

$("button").click(function(){
    $("#div1").fadeIn();
    $("#div1").fadeIn("slow");
    $("#div1").fadeIn(3000);
})

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

语法:

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

可选参数 speed 规定效果时长,它可以取以下值:“slow”、“fast” 或毫秒。
可选参数 callback 是 fading 完成后所执行的函数名称。

实例:

$("button").click(function(){
    $("#div").fadeOut();
    $("#div").fadeOut("slow");
    $("#div").fadeOut(3000);
})

jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

功能描述:

  • 如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
  • 如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

语法:

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

可选参数 speed 规定效果时长,它可以取以下值:“slow”、"fast"或毫秒。
可选参数 callback 是 fading 完成后所执行的函数名称。

实例:

$("button").click(function(){
    $("#div").fadeToggle();
    $("#div").fadeToggle("slow");
    $("#div").fadeToggle(3000);
})

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

语法:

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

必须参数 speed 规定效果时长,它可以取以下值:“slow”、"fast"或毫秒。
必须参数 opacity 将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选参数 callback 是该函数完成后所执行的函数名称。

实例:

$("button").click(function(){
    $("#div").fadeTo("slow",0.15);
    $("#div").fadeTo("slow",0.4);
    $("#div").fadeTo("slow",0.7);
})

jQuery 滑动

jQuery 滑动方法可使元素上下滑动。

jQuery 拥有三种滑动方法:

  • slideDown()
  • slideUp()
  • slideToggle()

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

语法:

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

可选参数 speed 规定效果时长,它可以取以下值:“slow”、“fast” 或毫秒。
可选参数 callback 是滑动完成后执行的函数名称。

实例:

$("#flip").click(function(){
    $("#panel").slideDown();
});

jQuery slideUp()方法
jQuery slideUp()方法用于向上滑动元素。

语法:

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

可选参数 speed 规定效果时长,它可以取以下值:“slow”、“fast” 或毫秒。
可选参数 callback 是滑动完成后执行的函数名称。

实例:

$("flip").click(function(){
    $("#panel").slideUp();
});

jQuery slideToggle()方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

功能描述:

  • 如果元素向下滑动,则 slideToggle() 可向上滑动它们。
  • 如股元素向上滑动,则 sideToggle() 可向下滑动它们。

语法:

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

可选参数 speed 规定效果时长,它可以取以下值:“slow”、“fast” 或毫秒。
可选参数 callback 是滑动完成后执行的函数名称。

实例:

$("#flip").click(function(){
    $("#panel").slideToggle();
});

jQuery 动画

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

语法:

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

必须参数 params 定义形成动画的CSS属性。
可选参数 speed 规定效果时长,它可以取以下值:“slow”、“fast” 或毫秒。
可选参数 callback 是动画完成后所执行的函数名。

实例:把 <div> 元素移动到左边,直到 left 属性等于 250 像素为止。

$("button").click(function(){
    $("div").animate({left:'250px'});
});

提 示 : \color{orange}{提示:} :

  • 默认地,所有元素都有一个静态位置,且无法移动。
  • 如需对位置进行操作,要记得首先把元素的CSS position 属性设置为 relative、fixed 或 absolute。

jQuery animate() 操作多个属性
请注意,生成多个动画的过程中可同时使用多个属性。

实例:

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

提 示 : \color{orange}{提示:} : 可以用 animate() 方法来操作所有 CSS 属性吗?
是的,几乎可以!当使用 animate() 时,必须使用Canel标记法书写所有属性名。
比如,paddingLeft 代替 padding-left


jQuery animate() 使用相对值
定义相对值(该值相对于元素的当前值),需要在值的前面加上 += 或 -=

实例:

$("button").click(function(){
    $("div").animate({
        left:'250px',
        height:'+=150px',
        width:'+=150px'
    });
});

jQuery animate() 使用预定义的值
可以把属性的动画值设为"show"、“hide”、“toggle”。

实例:

$("button").click(function(){
    $("div").animate({
        height:'toggle'
    });
});

jQuery animate() 使用队列功能
默认jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用"内部队列",然后逐一运行这些 animate 调用。

实例:

$("button").click(function(){
    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");
});

实例:把<div> 元素移动到右边,然后增加文本字号。

$("button").click(function(){
    var div = $("div");
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
});

jQuery stop()

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
stop() 方法适用于所有jQuery效果函数,包括滑动、淡入淡出和自定义动画。

语法:

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

可选参数 stopAll 规定是否应该清除动画队列,默认是false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选参数 goToEnd 规定是否立即完成当前动画,默认是false。
因此默认的,stop() 会清除在被选元素上指定的当前动画。

实例:

$("#stop").click(function(){
    $("#panel").stop();
});

jQuery Callback

Callback 函数在当前动画100%完成之后执行。
由于JavaScript语句(指令)是逐一执行的 按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。
为了避免这个情况,您可以以参数的形式添加Callback函数。

语法:

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

callback 参数是一个在hide操作完成后被执行的函数。

实例:

$("p").hide(1000,function(){
    alert("The paragraph is now hidden");
});

jQuery Chaining

通过jQuery, 您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个jQuery方法(在相同的元素上)。
提 示 : \color{orange}{提示:} 这样的话,浏览器不必多次查找相同的元素。

实例:"p1"元素首先会变红色,然后向上滑动,然后向下滑动。

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

jQuery HTML

jQuery 文档操作
jQuery 属性操作
jQuery CSSC操作

jQuery 获得内容和属性

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

jQuery DOM操作
jQuery 中非常重要的部分,就是操作DOM的能力。
jQuery 提供一系列与DOM相关的方法,这使访问和操作元素和属性变得很容易。
提 示 : \color{orange}{提示:} DOM = Document Object Model(文档对象模型)。

获得内容 text()、html()、val()
三个简单实用的用于DOM操作的jQuery方法

  • text() 设置或返回所选元素的文本内容
  • html() 设置或返回所选元素的内容(包括HTML标记)
  • val() 设置或返回表单字段的值

实例:

$("#tn1").click(function(){
    alert("text:" + $("#test").text());
    alert("HTML:" + $("#test").html());
    alert("Value:" + $("#test").val());
});

获取属性 attr()
jQuery attr() 方法用于获取属性值。

实例:获得链接中的href属性值

$("button").click(function(){
    alert($("#w3s").attr("href"));
});

jQuery 设置

设置内容 text()、html()、val()
三个简单实用的用于DOM操作的jQuery方法

  • text() 设置或返回所选元素的文本内容
  • html() 设置或返回所选元素的内容(包括HTML标记)
  • val() 设置或返回表单字段的值

实例:

$("#btn1").click(function(){
    $("#test1").text("Hello world");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</>");
});
$("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
});

text()、html()、val() 的回调函数
回调函数由两个参数:被选元素列表中当前元素的下标,以及原始值,然后以函数新值返回您希望使用的字符串。

实例:

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "Old text:" + origText + "new text:Hello world! (index: " + i + ")";
    });
});

$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "Old html:" + origText + " New html: Hello <b>world</b>(index:"+ i +")";
    });
});

设置属性 attr()
jQuery attr() 方法也用于设置/改变属性值。

实例:

$("button").click(function(){
    $("#w3s").attr("href":"[http://](http://www.w3school.com.cn/jquery)");
});

实例:同时设置多个属性

$("button").click(function(){
    $("#w3s").attr({
        "href":"http://www.w3school.com.cn/jquery",
        "title":"W3School jQuery Tutorial"
    });
});

attr() 的回调函数
回调函数由两个参数:被选元素列表中当前元素的下标,以及原始值,然后以函数新值返回您希望使用的字符串。

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

jQuery 添加元素

通过jQuery,可以很容易地添加元素/内容。
添加新的HTML内容
添加新内容的方法

  • append() 在被选元素的结尾插入内容
  • prepend() 在被选元素的开头插入内容
  • after() 在被选元素之后插入内容
  • before() 在被选元素之前插入内容

jQuery append()方法

实例:

$("p").append("Some appended text");

jQuery prepend()方法

实例:

$("p").prepend("Some prepended text");

通过append() 和 prepend() 方法添加若干新元素
append() 和 prepend() 方法能够通过参数接收无限数量的新元素。

实例:

function appendText()
{
    var txt1 = "<p>Text</p>"; //以HTML创建新元素
    var txt2 = $("<p></p>").text("Text"); //以jQuery创建新元素
    var txt3 = document.createElement("p"); //以DOM创建新元素
    txt3.innerHtml = "Text";
    $("p").append(txt1,txt2,txt3);
}

jQuery after() 和 brfore() 方法

实例:

$("img").after("Some text after");
$("img").before("Some text before");

通过after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。

实例:

function afterText()
{
    var txt1 = "<b>I</b>";
    var txt2 = $("<i></i>").text("love");
    var txt3 = document.createElement("big");
    txt3.innerHtml = "jQuery";
    $("p").after(txt1,txt2,txt3);
}

jQuery 删除

通过jQuery, 可以很容易地删除已有元素。

删除元素和内容
两个删除元素和内容的方法:

  • remove() //删除被选元素(及其子元素)
  • empty() //从被选元素中删除子元素

jQuery remove() 方法

实例:

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

jQuery empty() 方法

实例:

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

过滤被删除的元素
jQuery remove() 方法也可接受一个参数,允许您对被删除元素进行过滤。
该参数可以是任何jQuery选择器的语法。

实例:删除class="italic"的所有<p>元素。

$("p").remove(".italic");

jQuery CSS类

通过jQuery,可以很容易地对CSS元素进行操作。

jQuery 操作 CSS
jQuery 拥有若干进行CSS操作的方法。

  • addClass() 向被选元素添加一个或多个类
  • removeClass() 从被选元素删除一个或多个类
  • toggleClass() 对被选元素进行添加/删除类的切换操作
  • css() 设置或返回样式属性
.important
{
    font-weight:bold;
    font-size:xx-large;
}

.blue
{
    color:blue;
}

jQuery addClass()方法

实例:选取多个元素添加类 添加多个类

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

$("button").click(function(){
  $("#div1").addClass("important blue");
});

jQuery removeClass()

实例:

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

jQuery toggleClass() 方法

实例:

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

jQuery css() 方法
返回CSS属性的语法:

css("propertyname");

实例:

$("p").css("background-color");

设置CSS属性值的语法:

css("propertyname","value")

实例:

$("p").css("background-color","yellow");

设置多个CSS属性语法:

css({"propertyname":"value",.....})

实例:

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery 尺寸

jQuery 提供多个处理尺寸的重要方法:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

实例:返回指定的 <div> 元素的宽度和高度

$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});

jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。

实例:返回指定的 <div> 元素的 inner-width/height:

$("button").click(function(){
  var txt="";
  txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
  txt+="Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。

实例:返回指定的 <div> 元素的 outer-width/height:

$("button").click(function(){
  var txt="";
  txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
  txt+="Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。

实例:

$("button").click(function(){
  var txt="";
  txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
  txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
});

jQuery - 更多的 width() 和 height()

实例:返回文档(HTML 文档)和窗口(浏览器视口)的宽度和高度:

$("button").click(function(){
  var txt="";
  txt+="Document width/height: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="Window width/height: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
});

实例:设置指定的

元素的宽度和高度:

$("button").click(function(){
  $("#div1").width(500).height(500);
});

jQuery 遍历

什么是遍历?
jQuery 遍历意为"移动",用于根据其相对于其他元素的关系来查找和选取HTML元素,以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素。
jQuery 遍历参考手册

遍历DOM
jQuery提供了多种遍历DOM的方法。
遍历方法中最大的种类是树遍历(tree-traversal)

jQuery 祖先

向上遍历 DOM 树,查找元素的祖先
常用于向上遍历DOM树的方法:

  • parent() 返回被选元素的直接父元素
  • parents() 返回被选元素的所有祖先元素,它会一路向上直到文档的根元素(<html>)
  • parentsUtils() 返回介于两个给定元素之间的所有祖先元素

实例:

$(document).ready(function(){
 $("span").parent();
 $("span").parents();
 $("span").parentsUtil("ul");
});

jQuery 后代

通过jQuery,向下遍历DOM树,以查找元素后代。
向下遍历DOM树的方法:

  • children() 返回被选元素的所有直接子元素
  • find() 返回被选元素的所有后代子元素,一路向下直到最后一个后代。

实例:

$(document).ready(function(){
 $("div").children();
 $("div").children("p.1"); //返回所有div的直接子元素,并且这些子元素是p标签且它们的类名是1。
 $("div").find("span");
 $("div").find("*");
});

jQuery 同胞

通过jQuery, 在DOM树中水平遍历,以查找同胞元素。
水平遍历DOM树的方法:

  • siblings() 返回被选元素的所有同胞元素
  • next() 返回被选元素的下一个同胞元素
  • nexrAll() 返回被选元素的所有跟随的同胞元素
  • nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素
  • prev() 返回被选元素的上一个同胞元素
  • prevAll() 返回被选元素的所有上面的同胞元素
  • prevUntil() 返回介于两个给定参数之间的所有上面的同胞元素

实例:

$(document).ready(function(){
 $("h2").siblings();
 $("h2").siblings("p");
 $("h2").next();
 $("h2").nextAll();
 $("h2").nextUntil("h6");
 $("h2").prev();
 $("h2").prevAll();
 $("h2").preVUntil("h6");
})

jQuery 过滤

缩小搜索元素的范围
三个最基本的过滤方法:

  • first() 返回被选元素的首个元素
  • last() 返回被选元素的最后一个元素
  • eq() 返回被选元素中带有指定索引号的元素
  • filter() 允许您规定一个标准,不匹配这个规则的元素将会从集合中删除,匹配的元素将被返回。
  • not() 返回不匹配所有标准的所有元素

实例:

$(document).ready(function(){
 $("div p").first();
 $("div p").last();
 $("p").eq(1);  //元素索引从0开始
 $("p").filter(".intro");
 $("p").not(".intro");
})

jQuery AJAX

什么是AJAX?

AJAX = Asynchronous JavaScript and XML
AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的刷新。

jQuery 与 AJAX

jQuery 提供了多个与AJAX有关的方法
jQuery 团队为我们解决了不同浏览器的兼容问题,可以使用简短的语句使用AJAX。

jQuery AJAX load()方法

load() 从服务器加载数据,并把返回数据加载到被选元素。
语法:

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

必需参数 URL 规定您希望加载的 URL。
可选参数 data 规定与请求一同发送的查询字符串键/值对集合。
可选参数 callback 是 load() 方法完成后所执行的函数名称。
回调函数的参数:

  • responseTxt - 包含调用成功时的结果内容
  • statusTXT - 包含调用的状态
  • xhr - 包含 XMLHttpRequest 对象

实例:

$("div").load("demo.txt");
$("div").load("demo.txt #p1")
$("button").click(function(){
 $("#div1").load("demo.txt", function(responseTxt,statusTxt,xhr){
  if(statusTxt === "success"){
   console.log("内容加载成功")}
  if(statusTxt === "error"){
   console.log("Error: "+xhr.status+": "+xhr.statusText)
  }
 })
})

jQuery AJAX Get/Post 方法

jQuery get() 和 post() 方法用于通过HTTP GET 或 POST 请求从服务器请求数据。
HTTP 亲求:GET 和 POST:

  • GET:从指定的资源请求数据。
  • POST:向指定的资源提交要处理的数据

jQuery $.get() 方法:通过HTTP GET请求从服务器请求数据。
语法:

$.get(URL,callback);

必须参数URL规定您希望请求的URL。
可选参数callback是请求成功后执行的函数名。
实例:

$("button").click(function(){
$.get("demo_test.asp",function(data,status){
  alert("Data: " + data + "\nStatus: " + status);
});
});

jQuery $.post()方法通过HTTP POST请求从服务器上请求数据。
语法:

$.post(URL,data,callback);

必须参数URL规定您希望请求的URL。
可选参数data规定连同请求发送的数据。
可选参数callback请求成功后执行的函数名。
实例:

$("button").click(function(){
$.post("demo_test_post.asp",
{
  name:"Donald Duck",
  city:"Duckburg"
},
function(data,status){
  alert("Data: " + data + "\nStatus: " + status);
});
});

参考文献

jQuery 教程

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

高建伟-joe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值