jquery学习总结 jquery怎么学

转载

网络锐评 2024-01-30 01:56:03

文章标签 jquery学习总结 jquery javascript css jQuery 文章分类 jQuery 前端开发

jQuery 自学教程

前言
jQuery简介
jQuery安装
jQuery 语法
jQuery 选择器

jQuery 元素选择器
jQuery 属性选择器
jQuery CSS 选择器

jQuery 事件

jQuery 事件函数
单独文件中的函数
jQuery 名称冲突

jQuery 代码需要遵循的规则
jQuery 效果

jQuery 隐藏/显示
jQuery 淡入淡出
jQuery 滑动
jQuery 动画
jQuery stop()
jQuery Callback
jQuery Chaining

jQuery HTML

jQuery 获得内容和属性
jQuery 设置
jQuery 添加元素
jQuery 删除
jQuery CSS类
jQuery 尺寸

jQuery 遍历
jQuery AJAX
参考文献

前言

在开始学习之前应该具备的知识

HTML
CSS
JavaScript

jQuery简介

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

jQuery库包含的特性：

HTML元素的选取
HTML元素的操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX
Utilities

jQuery安装

下载jQuery

jQuery有两个版本可供下载：
Production version 用于实际的网站中，已被精简和压缩。
Development version 用于测试和开发(未压缩，是可读的代码)。
这两个版本都可以从 jQuery.com 下载。
$jquery学习总结 jquery怎么学_jquery$

把jQuery添加到您的网页

因为jQuery库是一个JavaScript文件，您可以使用HTML的 <script> 标签引用它：
<head> <script src="jquery.js"></script> </head>

替代方案

如果您不希望下载并存放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 代码需要遵循的规则

把所有的jQuery代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把jQuery代码置于单独的 .js 文件中
如果存在命名冲突，则重命名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'});
});

$jquery学习总结 jquery怎么学_css_02$

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

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

实例：

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

$jquery学习总结 jquery怎么学_css_02$ 可以用 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方法(在相同的元素上)。
$jquery学习总结 jquery怎么学_jQuery_04$ 这样的话，浏览器不必多次查找相同的元素。

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

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

jQuery HTML

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

jQuery 获得内容和属性

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

jQuery DOM操作
jQuery 中非常重要的部分，就是操作DOM的能力。
jQuery 提供一系列与DOM相关的方法，这使访问和操作元素和属性变得很容易。
$jquery学习总结 jquery怎么学_jQuery_04$ 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); }); });

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：spring boot加responsebody注解飘红 springboot repository注解

下一篇：网上下载的UniStorm如何安装 un在线安装

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯