JQuery学习笔记

TheGodsHand

墨衍会员 · AI 创作全网分发码龄9年

关注

原创最新推荐文章于 2026-05-20 11:00:53 发布 406 阅读 AI 写同款· GEO 优化 ›

过程挖掘（Process Mining）1——始于颜值下周开始每周1-2篇的过程挖掘分享过程挖掘是什么？过程挖掘与过程管理的关系？过程挖掘与数据挖掘的关系？管理学还是计算机科学？阅读详情

一. jQuery教程

1. jQuery简介

jQuery是一个JavaScript函数库。

宗旨：“写的少，做的多”。

jQuery 的功能概括

1、html 的元素选取

2、html的元素操作

3、html dom遍历和修改

4、js特效和动画效果

5、css操作

6、html事件操作

7、ajax异步请求方式

8、Utilities

2. jQuery引用方式

1. 从 jquery.com 下载 jQuery 库并安装

Production version - 用于实际的网站中，已被精简和压缩。

Development version - 用于测试和开发（未压缩，是可读的代码）

<head>
	<script src="jquery-1.10.2.min.js" type="text/javascript></script>
</head>
/* 在 HTML5 中，可以不必添加type="text/javascript。因为JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！*/

2. 通过 CDN（内容分发网络）引用

BootCDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery

// 例如BootCDN
<head>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
</head>jQuery引用方式

3. jQuery语法

基础语法：$(selector).action()

$: jQuery标识符

selector: 选择符，查询和查找HTML元素

action(): 执行对元素的操作

实例：
	$(this).hide() - 隐藏当前元素
	$("p").hide() - 隐藏所有 <p> 元素
	$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
	$("#test").hide() - 隐藏所有 id="test" 的元素

jQuery入口函数（文档就绪事件）：

为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM (所有HTML标签）加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。

$(document).ready(function(){
    //  开始写jQuery代码...
})；

//   更简洁的写法
$(function(){
    // 写代码...
})

javaScript入口函数

JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

window.onload = function(){
    // 执行代码
}

4. jQuery选择器

基于已存在的css选择器和一些自定义的选择器

元素选择器（标签选择器）

$(document).ready(function(){
  $("button").click(function(){       // 选中所有button标签   点击事件
    $("p").hide();                    // 选择所有p标签   隐藏方法
  });
});

#id 选择器

$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});

.class 选择器

$(document),ready(function(){
    $("button").click(function(){
        $(".test").hide();
    });
});

等多实例：

$("*") 选取所有元素

$(this) 选取当前元素例如点击事件为一个按钮，那么当前元素就是该按钮

$(“p.test”) 选取class=test的

标签元素

$(“p:first”) 选取所有

标签中的第一个

$(“ul li:first”) 选取第一个

元素的第一个
元素

$(“ul li:first-child”) 选取每个

元素的第一个
元素

$("[href]") 选取带有href属性的元素属性选择器，注意有中括号

$(“a[target=’_blank’]”) 选取所有target属性值为’_blank’的标签元素

$(":button") 选取所有type="button"的元素和元素

$(“button”) 选取所有标签元素

$(“tr:even”) 选取偶数位置的元素包含表头

$(“tr:odd”) 选取奇数位置的元素不包含表头

5. jQuery事件

事件就是页面对不同访问者的响应；

事件处理程序就是指当HTML中发生某些事件时所调用的方法；

常见DOM事件：

鼠标事件：

click：当单击元素时，发生 click 事件。

$("p").click(function(){
    alert("段落被点击了");
});
//  click()方法触发click事件，function可选，规定点击事件发生时运行的函数

dbclick：用法类似单击，仅当双击时触发。

mouseenter：当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。

mouseleave：当鼠标指针离开被选元素时，会发生 mouseleave 事件。

$(document).ready(function(){
  $("p").mouseenter(function(){
    $("p").css("background-color","yellow");
  });
  $("p").mouseleave(function(){
    $("p").css("background-color","lightgray");
  });
});
//  mouseenter事件一般与mouseleave事件一起使用

**注意：**mouseenter事件与 mouseover 事件不同，mouseenter 事件只有在鼠标指针进入被选元素时被触发，mouseover 事件在鼠标指针进入任意子元素时也会被触发。

mouseleave事件与 mouseout 事件不同，mouseleave 事件只有在鼠标指针离开被选元素时被触发，mouseout 事件在鼠标指针离开任意子元素时也会被触发。

mousedown：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mouseup：当在元素上松开鼠标按钮时，会发生 mouseup 事件。

hover()方法用于模拟光标悬停事件，当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$("#p1").hover(
		function(){
			alert("你进入了 p1!");
		},
		function(){
			alert("拜拜! 现在你离开了 p1!");
		}
    )

键盘事件：

keypress：键被按下（不会触发所有的键，例如ALT、CTRL、SHIFT、ESC等）

$("input").keypress(function(){
    $("span").text(i+=1);
});

keydown：键按下的过程 (event.which属性返回被按下键的键码，若是keypress事件则拿到ASCII码) 兼容性问题有时候是keyCode

$("input").keydown(function(event){
    $("div").html("key:" + event.which);
});

keyup：键被松开

$("input").keydown(function(){
    $("input").css("background-color","yellow");
  });
  $("input").keyup(function(){
    $("input").css("background-color","pink");
  });

三种键盘事件的区别：

1.keydown：在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码;
2.keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。

3.keyup：用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.

传递数据给事件处理函数


var validKeys = { start: 65, end: 90  };
$("#keys").keydown( validKeys, function(event){
    var keys = event.data;  //拿到validKeys对象.
    return event.which >= keys.start && event.which <= keys.end;
} );

表单事件：

submit：提交表单时会触发submit事件，该事件只适用于元素

$("form").submit(function(){
    alert("是否确认提交？");
});

阻止submit按钮的默认行为(使用event.preventDefault()方法阻止表单被提交)：

$("form").submit(function(event){
    event.preventDefault();
    alert("阻止表单提交");
  });

change: 当元素的值改变时触发 change 事件（仅适用于表单字段）。

$("input").change(function(){
    alert("文本已被修改");
});
//  当input输入框中输入内容然后按下回车或者点击输入框外部时，change事件触发

focus：当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），发生 focus 事件。

$("input").focus(function(){
    $("span").css("display","inline").fadeOut(2000);
  });
//  输入框获得焦点时，<span>标签元素的css样式改为行内块元素，2秒内淡出

blur：当元素失去焦点时触发blur事件。

$("input").blur(function(){
    alert("输入框失去了焦点");
  });

文档/窗口事件：

load：当指定的元素已加载时，触发改事件；该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）以及 window 对象。根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。

load()方法在jQuery1.8版本已废弃！！！

$("img").load(function(){
    alert("图片已载入");
  });

unload：当用户离开页面时，会发生 unload 事件。unload() 方法只应用于 window 对象。

当发生以下情况下，会触发 unload 事件：

点击某个离开页面的链接

在地址栏中键入了新的 URL

使用前进或后退按钮

关闭浏览器窗口

重新加载页面

unload() 方法在 jQuery 版本 1.8 中被废弃，在 3.0 版本被移除！！！！！！！！！

resize：当调整浏览器窗口大小时，发生 resize 事件。

$(window).resize(function(){
    $("span").text(x+=1);
  });
  // 统计窗口大小调整的次数（窗口大小变化过程中实时变化）

scroll：当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

 $("div").scroll(function(){
    $("span").text(x+=1);
  });
// 滚动统计意义不大

二、jQuery效果

1. 隐藏/显示

简单的hide()方法：

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
// 点击当前元素即可隐藏

隐藏文本（不止在某一个标签中）：

$(document).ready(function(){
  $(".ex .hide").click(function(){
    $(this).parents(".ex").hide("slow");
  });
});

隐藏与显示：

$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});

带参数的隐藏与显示：

$(selector).hide(speed, callback); show也一样

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数说明：

1.$(selector)选中的元素的个数为n个，则callback函数会执行n次；

2.callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行，只

会调用一次，如果不加括号，元素显示或隐藏后调用函数，才会调用多次；

3.callback既可以是函数名，也可以是匿名函数；

toggle()方法切换隐藏与显示：

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

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

### 2. 淡入淡出

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

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。.

可选的 callback 参数是 fading 完成后所执行的函数名称。

fadeOut(): 语法及参数相同，用法相同。

fadeToggle(): 切换淡入淡出，参数与用法相同。

fadeTo(): 渐变为给定的不透明度（值介于 0 与 1 之间）

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

必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});
//  0为完全透明，1为不透明，保持原本颜色

3. 滑动(折叠)

slideDown(): 向下滑动元素；下拉

$(selector).slideDown(speed, callback); 参数及用法相同

slideUp()：向上滑动元素；收起

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

slideToggle(): 切换上滑下滑状态

4. 动画

animate(): 创建自定义动画；

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

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
//  实现div盒子右移的效果（单个属性）
//  注意：默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

animate(): 可以同时操作多个属性

$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left:'250px',
            opacity:0.5,
            height:'150px',
            width:'150px'
        },'slow');
    });
});
//  animate()方法几乎可以操纵所有css属性，不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 驼峰 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。同时，色彩动画并不包含在核心 jQuery 库中。

animate(): 使用相对值(该值相对于元素的当前值)

//  代码类似，此处只写有变化处
$("div").animate({
    left:'250px',
    height:'+=150px',
    width:'-=150px'
});
//  由于是相对于当前值的变化，所以多次运行时将会有持续变化的效果

animate(): 使用预定义的值，如’show’, ‘hide’, 'toggle’等

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

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");
});
//  按顺序执行一条后再执行下一条

5. 停止动画

stop()方法：在动画或效果完成之前停止，适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画等。

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

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

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

$("div").animate({left:'100px'},5000);
    $("div").animate({fontSize:'3em'},5000);
  });
  $("#stop").click(function(){
    $("div").stop();       //  停止当前激活动画，后续可在此激活
  });
  $("#stop2").click(function(){
    $("div").stop(true);   //  停止所有动画
  });
  $("#stop3").click(function(){
    $("div").stop(true,true); //停止所有动画且显示当前激活动画的最终完成效果（未激活的不显示）
  });

6. 链（Chaining）

相同的元素上运行多条 jQuery 命令（点方法链接，语法不是很严格，可以在链接的过程中换行缩进）

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

三、jQuery HTML

### 1. 捕获

获得内容：

text() 设置或返回所选元素的文本内容

html() 设置或返回所选元素的内容（包括HTML标签）

val() 设置或返回表单字段的值（即表单里面的value值）

// 若 <p id="test">这是段落中的 <b>粗体</b> 文本。</p>
$("#btn1").click(function(){
    alert("Text:"  + $("#test").text());  // 显示  这是段落中的 粗体 文本。
});
$("#btn2").click(function(){
    alert("HTML:"  +  $("#test").html());  // 显示 这是段落中的 <b>粗体</b> 文本。
});

获取属性：

attr() 获取属性的值，例如链接

//  <a href="http://www.runoob.com" id="runoob"></a>
$("button").click(function(){
    alert($("#runoob").attr("href"));    // 显示 www.runoob.com
  });
// 建议：对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。
      // 对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。
<a href="#" id="link1" action="delete" rel="nofollow">删除</a>
//  这个例子里 <a> 元素的 DOM 属性有: href、id 和 action，很明显，前两个是固有属性，而后面一个 action 属性是我们自己自定义上去的，<a> 元素本身是没有这个属性的。

2. 设置

设置内容：

text() html() val() 直接在括号里面放入想要设置的内容

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

text()、html() 以及 val() 的回调函数

回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text(function(i,origText){    //  origText 原始文本，i 原始文本下标
      return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
  });

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

});

设置属性：

attr() 可以同时设置多个属性值

$("button").click(function(){
    $("#runoob").attr({             
        "href": "http://www.runoob.com";
        "title": "jQuery 教程"
    });
});
//  同时修改多个属性时用字典的方式
//  修改单个属性时
$("#runoob").attr("href", "http://www.runoob.com");

attr() 的回调函数:

$("button").click(function(){
    $("#runoob").attr("href",function(i, origValue){
        return origValue + "/jQuery";
    });
});
// 直接修改了href的链接地址

3. 添加元素

四种添加新的HTML内容（包括文本与标签）的jquery方法

append() ：在被选元素结尾插入内容（仍然在选中元素的内部）

$("p").append("追加文本")
//  若原文本为“段落。”，那么新文本为“段落。追加文本”

prepend()：在被选元素的开头插入内容（仍然在选中元素的内部）

$("p").prepend("<b>在开头追加文本</b>")
//  显示为在原文本开头加入加粗版的“在开头追加文本”

after() ：在被选元素之后插入内容（在选中元素的外部）

$("img").before("<b>之前</b>");

before()：在被选元素之前插入内容（在选中元素的外部）

$("img").after("<i>之后</i>");

创建元素的几种方法：

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);        // 追加新元素
}
//  三者创建出来的都是段落 “文本。”

append()/prepend()与after()/before()之间的区别：

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>
// 结果是这样的
<p>
  <span class="s1">s1</span>
  <span class="s2">s2</span>
</p>

// 而after()的结果是这样的
<p>
  <span class="s1">s1</span>
</p>
<span class="s2">s2</span>

**总结：**append/prepend 是在选择元素内部嵌入。after/before 是在元素外面添加。

4. 删除元素

remove() - 删除被选元素（及其子元素）

$("button").click(function(){
    $("#div").remove();
  });
  // 删除div及其内部所有元素
  
  // 可以接受一个参数，允许对被删元素进行过滤。
  $("p").remove(".italic");
  // 删除所有类名为italic的p标签

empty() - 从被选元素中删除子元素

$("button").click(function(){
    $("#div").empty();
  });
  // 删除div里面的所有元素，不包括div本身

5. CSS类

通过 jQuery，可以很容易地对 CSS 元素进行操作，获取或设置

addClass() 方法：向被选元素添加一个或多个CSS类

// 向不同的元素添加 class 属性
$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

// 向单个元素添加多个类属性
 $("body div:first").addClass("important blue");

removeClass() - 从被选元素删除一个或多个类

$("h1,h2,p").removeClass("blue");

toggleClass() - 对被选元素进行添加/删除类的切换操作

$("h1,h2,p").toggleClass("blue");
// 有则删除，没有则添加

6. css()方法

css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性：返回第一个匹配到元素的指定属性

$("p").css("background-color");
// 若第一个匹配到的元素没有该指定的属性，则不返回或者返回不确定

设置 CSS 属性：将所有匹配元素设置为指定的属性

$("p").css("background-color","yellow");
//   将所有p标签 背景色 设置为黄色，不管原标签有没有设置过背景色

//  同时设置多个css属性     用字典的方式
$("p").css({"background-color":"yellow","font-size":"200%"});

7. 尺寸

通过 jQuery，很容易处理元素和浏览器窗口的尺寸

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

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

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

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

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

/* <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>  */

$("button").click(function(){
    var txt="";
    txt+="div 宽度: " + $("#div1").width() + "</br>";
    txt+="div 高度: " + $("#div1").height() + "</br>";
    txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight() + "</br>";
    txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
    txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight() + "</br>;
    
    $("#div1").html(txt);
  });
  
  /* div 宽度: 300
	div 高度: 100
	div 宽度，包含内边距: 320
	div 高度，包含内边距: 120
	div 宽度，包含内边距和边框: 322
	div 高度，包含内边距和边框: 122
    div 宽度，包含内边距、边框和外边距: 328
	div 高度，包含内边距、边框和外边距: 128
  */

四、jQuery遍历

###1.遍历

通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

注意：祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。

2. 祖先

用parent()、parents()、parentsUntil()等方法向上遍历 DOM 树，以查找元素的祖先。

parent() 方法：返回被选元素的直接父元素（一般只有一个）

//  只更改span标签的直接父级元素的样式
$("span").parent().css({"color":"red","border":"2px solid red"});

parents() 方法：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。

$("span").parents().css({"color":"red","border":"2px solid red"});
// 从span一直向上到body到html为止

//  加参数进行过滤  只更改祖先元素中的ul
$("span").parents("ul").css({"color":"red","border":"2px solid red"});

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

//  选定span，指定div，返回该两者之间的属于span的祖先元素
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

3. 后代

用children()、find()向下遍历 DOM 树，查找后代元素

children() 方法：返回被选元素的所有直接子元素（一个或者多个）

$("div").children().css({"color":"red","border":"2px solid red"});

// 添加参数进行过滤
$("div").children("p.1").css({"color":"red","border":"2px solid red"});

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

// 所有后代
$("div").find("*").css({"color":"red","border":"2px solid red"});

// 指定的后代元素
$("div").find("span").css({"color":"red","border":"2px solid red"});

4. 同胞

有多种方法可以在DOM树中进行水平遍历

siblings()方法：返回被选元素的所有同胞元素。

//  选择h2的所有同胞元素并修改其样式（不包括h2本身）
$("h2").siblings().css({"color":"red","border":"2px solid red"});

// 添加参数进行过滤
$("h2").siblings("p").css({"color":"red","border":"2px solid red"});

next() 方法：返回被选元素的下一个同胞元素，只会返回一个元素。

// h2的下一个同胞元素，
$("h2").next().css({"color":"red","border":"2px solid red"});

nextAll() 方法：返回被选元素的所有跟随的同胞元素。

// h2后面的所有同胞元素
$("h2").nextAll().css({"color":"red","border":"2px solid red"});

nextUntil() 方法：返回介于两个给定参数之间的所有跟随的同胞元素。

// 选中的h2以及指定的h6之间的所有同胞元素
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已

5. 过滤

使用方法而不是参数来过滤数据

first() 方法：返回被选元素的首个元素。

// 匹配div标签下的p标签，选择其第一个
$("div p").first().css("background-color","yellow");

last() 方法：返回被选元素的最后一个元素。

// 匹配div标签下的p标签，选择其最后一个
$("div p").last().css("background-color","yellow");

eq() 方法：返回被选元素中带有指定索引号的元素。

// 匹配索引号为1 的p标签    <p> 携带索引号(index 1)。</p>
$("p").eq(1).css("background-color","yellow");

filter() 方法：返回与规定标准相匹配的元素。

// p标签下类名为url的所有元素
$("p").filter(".url").css("background-color","yellow");

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

//   p标签下类名不为url的所有元素
 $("p").not(".url").css("background-color","yellow");

五、Ajax

1. Ajax简介

AJAX = 异步 JavaScript 和 XML

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。如果没有jQuery，AJAX编程的实现有一些难度。

2. load()方法

jQuery load() 方法是简单但强大的 AJAX 方法，它可以从服务器加载数据，并把返回的数据放入被选元素中。

语法：$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

//   加载外部文件来更改指定元素内容
$("#div1").load("/try/ajax/demo_test.txt");

//   在URL参数中添加jQuery选择器，指定加载外部文件中id为p1的元素
 $("#div1").load("/try/ajax/demo_test.txt #p1");

callback函数的参数：

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

//  先执行函数里面的内容，再执行页面上内容的更改（例如本例是先跳出弹窗）
/*  本例中responseTxt为"demo_test.txt"里面的内容，statusTxt为success时，xhr.status=200,xhr.statusText=ok;而当status为error时，xhr.status=404,xhr.statusText=pag not found（错误情况的一个例子）
*/
$("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
//

3. AJAX的get()和post()方法

HTTP请求GET —— 从指定的资源请求数据

HTTP请求POST—— 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 主要是提交数据，也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

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

语法： $.get(URL, callback)；

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

//  data为“demo_test.php”文件里面的内容，状态为请求成功success或错误error
$.get("/try/ajax/demo_test.php",function(data,status){
			alert("数据: " + data + "\n状态: " + status);
		});

$.post() 方法：通过 HTTP POST 请求向服务器提交数据。

语法：$.post(URL, data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。字典的形式

可选的 callback 参数是请求成功后所执行的函数名。

$.post("/try/ajax/demo_test_post.php",{
			name:"菜鸟教程",
			url:"http://www.runoob.com"
		},
		function(data,status){
			alert("数据: \n" + data + "\n状态: " + status);
		});

六、jQuery的替代符号$有冲突时的解决办法

1. jQuery 和其他 JavaScript 框架同时使用$

这时候两个框架产生冲突，$符号不知道指代谁。

jQuery内置的noConflict() 方法解决此问题

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

//   释放$，此时别的框架可以使用
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

// 创建自定义的jQuery简写
var jq=$.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});

//  将$作为参数传递后，函数内仍可以使用$，但函数外不能，只能使用jQuery
$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});

七、JSONP

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。

同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。

所谓同源是指，域名，协议，端口相同。浏览器在执行一个脚本时会检查这个脚本属于哪个页面，即检查是否同源，只有同源时，该脚本才会在相应的浏览器页面运行。

jQuery中使用JSON：

$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
    
    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';
    $('#divCustomers').html(html); 
});