jquery基础总结

最新推荐文章于 2022-06-14 21:43:06 发布

xushiyu1996818

最新推荐文章于 2022-06-14 21:43:06 发布

阅读量275

点赞数

分类专栏： js jquery 总结

本文链接：https://blog.csdn.net/xushiyu1996818/article/details/85340666

版权

总结同时被 3 个专栏收录

25 篇文章 1 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

jquery

6 篇文章 0 订阅

订阅专栏

捕获、修改html，txt，value，属性

jQuery prev(), prevAll() & prevUntil() 方法

简介

什么是 jQuery ？

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

最大的功能是可以选取（查询，query） HTML 元素，并对它们执行主动的或者被动的"操作"（actions）。

其他的功能会用插件提供。

jQuery库包含以下功能：

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

提示： 除此之外，Jquery还提供了大量的插件。

安装

引入js即可

可以用本地的

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

也可以用网上的

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

选择器

选择器是jquery很重要的功能，基础语法是

 $(selector).action()

选择器就是其中的selector部分，通过改变selector，决定$(selector)代表那些元素。

注意：selector是一个字符串，要用双引号引起来

基本选择器

基本选择器是jquery最基础的选择器

元素选择器

$("*") 代表选择所有元素
$("p") 代表选择所有p元素

#id 选择器

#id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

$("#test") 代表选中id=“test”的元素

.class 选择器

可以通过指定的 class 查找元素。

$(".test") 代表选中class="test"的元素

$(".intro.demo") 所有 class="intro" 且 class="demo" 的元素（两个.）

$("p.test") 代表选中class="test"的p元素

层次选择器

层次是根先选定一个元素，再根据它的父节点，子节点，兄弟节点的关系，得到对应的元素

子选择器

$(“parent > child”) 选择所有指定”parent”元素中指定的”child”的直接子元素

//子选择器
//$('div > p') 选择所有div元素里面的直接子元素P
//$('div > p').css("border", "3px groove yellow");

后代选择器

$(“ancestor descendant”) 选择给定祖先ancestor元素的所有后代元素，包括子元素，孙子元素等全部后代元素

         //后代选择器
        //$('div  p') 选择所有div元素里面的p元素
        $('div p').css("border", "1px groove red");
        $("ul li")   选择所有ul下的所有的li

相邻兄弟选择器

$(“prev + next”) 选择所有紧接在prev元素后的next元素

        //相邻兄弟选择器
        //选取prev后面的第一个的div兄弟节点
        $('.prev + div').css("border", "3px groove red");

一般兄弟选择器

$(“prev ~ siblings”) 匹配“prev”元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤出“siblings”选择器。

        //一般相邻选择器
        //选取prev后面的所有的div兄弟节点
        $(".prev ~ div").css("border", "3px groove blue");

过滤选择器

有时候一个元素多个类似的，比如一个table下有多个tr，要选择其中第一个，最后一个，第n个，奇数个，等等

通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。

:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素
:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素
:header	$(":header")	所有标题元素 <h1> - <h6>
:animated		所有动画元素
:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格

表单选择器

利用表单选择器我们可以极其方便地获取表单的某个或某类型的元素。

:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素

:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

属性选择器

选择专门的属性的选择器，比如href，等等

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素

$("a[target='_blank']")

选取所有 target 属性值等于 "_blank" 的 <a> 元素

事件

jquery事件基础

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当网页中的某些元素（根据jquery选择器）发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

$("p").click(); 代表所有的p元素被点击

在click的圆括号中，加入function(){ } 代表所有p元素被点击时，调用的方法

例如

  $("#test").click(function(){
    $("p").hide();
  });

这段代码，表示，id=test的元素被点击时，引发一个函数，函数的内容是所有p元素隐藏。

所以说，基础的语法就是：

$(selector).action(function(){

//要执行的内容

});

selector是选择器，action是这些元素被进行了什么操作。

注意：

$(function() {}) 是$(document).ready(function()的简写。

jquery事件(action)分类

普通action例子

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

所有action

方法	描述
bind()	向匹配元素附加一个或更多事件处理器
blur()	触发、或将函数绑定到指定元素的 blur 事件
change()	触发、或将函数绑定到指定元素的 change 事件
click()	触发、或将函数绑定到指定元素的 click 事件
dblclick()	触发、或将函数绑定到指定元素的 double click 事件
delegate()	向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()	移除所有通过 live() 函数添加的事件处理程序。
error()	触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()	返回 event 对象上是否调用了 event.preventDefault()。
event.pageX	相对于文档左边缘的鼠标位置。
event.pageY	相对于文档上边缘的鼠标位置。
event.preventDefault()	阻止事件的默认动作。
event.result	包含由被指定事件触发的事件处理器返回的最后一个值。
event.target	触发该事件的 DOM 元素。
event.timeStamp	该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type	描述事件的类型。
event.which	指示按了哪个键或按钮。
focus()	触发、或将函数绑定到指定元素的 focus 事件
keydown()	触发、或将函数绑定到指定元素的 key down 事件
keypress()	触发、或将函数绑定到指定元素的 key press 事件
keyup()	触发、或将函数绑定到指定元素的 key up 事件
live()	为当前或未来的匹配元素添加一个或多个事件处理器
load()	触发、或将函数绑定到指定元素的 load 事件
mousedown()	触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()	触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()	触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()	触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()	触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()	触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()	触发、或将函数绑定到指定元素的 mouse up 事件
one()	向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()	文档就绪事件（当 HTML 文档就绪可用时）
resize()	触发、或将函数绑定到指定元素的 resize 事件
scroll()	触发、或将函数绑定到指定元素的 scroll 事件
select()	触发、或将函数绑定到指定元素的 select 事件
submit()	触发、或将函数绑定到指定元素的 submit 事件
toggle()	绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
trigger()	所有匹配元素的指定事件
triggerHandler()	第一个被匹配元素的指定事件
unbind()	从匹配元素移除一个被添加的事件处理器
undelegate()	从匹配元素移除一个被添加的事件处理器，现在或将来
unload()	触发、或将函数绑定到指定元素的 unload 事件

普通的js事件

将一个函数直接绑定在一个元素上

一个行动，引起一个函数（比如第一个）

或者一个行动执行不执行，根据一个函数的返回值（比如第二个）

<input type="text" size="30" id="email" onchange="checkEmail()">
<form method="post" action="xxx.htm" onsubmit="return checkForm()">

function myFunction()
{
    alert("Hello World!");
}

js直接设置函数绑定在元素（dom0）

var btn5 = document.getElementById('btn5');
btn5.onclick=function(){
   console.log(this.id);//btn5   
};

基于DOM0的事件，对于同一个dom节点而言，只能注册一个，后边注册的同种事件会覆盖之前注册的。利用这个原理我们可以解除事件，btn5.onclick＝null;

DOM2级事件处理程序

DOM2支持同一dom元素注册多个同种事件，事件发生的顺序按照添加的顺序依次触发（IE是相反的）。

DOM2事件通过addEventListener和removeEventListener管理

//addEventListener(eventName,handlers,boolean);removeEventListener(),两个方法都一样接收三个参数,第一个是要处理的事件名,第二个是事件处理程序,第三个值为false时表示在事件冒泡阶段调用事件处理程序,一般建议在冒泡阶段使用,特殊情况才在捕获阶段;

注意：通过addEventListener()添加的事件处理程序只能用removeEventListener()来移除，并且移除时传入的参数必须与添加时传入的参数一样；比如

var btn2 = document.getElementById('btn2');
var handlers = function () {
   console.log(this.id);
};

btn2.addEventListener('click',handlers,false);

btn2.removeEventListener('click',handlers.false);

jquery效果

jquery效果，是jquery自带的一些函数，让选择的元素做出一定的效果，比如显示，消失，上升下降等等

基础语法是$(selector).action();

隐藏和显示

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

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

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

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

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法：

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

jQuery toggle()

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

显示被隐藏的元素，并隐藏已显示的元素：

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

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

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

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

淡入淡出

淡入指的是一个已经被隐藏的元素慢慢显现出来，淡出是指慢慢消失

jQuery 拥有下面四种 fade 方法：

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

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

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

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

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

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

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

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

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

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

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

这三种例子

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

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

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

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

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

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。（0是没有，1是完全出现）

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

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

滑动

滑动是指一种元素显示消失的效果，元素以它上边的那一条边为基准，这条边不动

如果本来隐藏，向下滑动，slideDown，下面那条边逐渐下滑，整个元素逐渐显示出来

如果本来显示，向上滑动，slideUp，下面那条边逐渐向上移动，直到整个元素消失

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

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

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

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

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

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

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

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

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

停止效果

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

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

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

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

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

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

例如

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

CallBack函数

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

注意：

$("p").hide(1000);
alert("The paragraph is now hidden");

如果是上面那样写，可以看到p元素用1秒来消失，但是在他完全消失前会弹出窗口

因为由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。

所以如果要动画完成后执行一个函数，需要设置callback函数

$(selector).hide(speed,callback)

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

方法链chaining

通过 jQuery，您可以把动作/方法链接起来。

Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。后一个动作会在前一个动作完成后被执行

下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：

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

这样写也可以运行：

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

操作DOM元素

捕获、修改html，txt，value，属性

html

获取

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

比如

<p id="test">这是段落中的 <b>粗体</b> 文本。</p>

$("#test").html()=这是段落中的 <b>粗体</b> 文本。

注意：html（）方法，不包括这个元素本身的html，只包括它内部的html

设置

如果（）有东西，可以设置这个元素的html内容

$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});

会变成<p id="test"><b>Hello world!</b></p>

回调函数

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

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

text

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

$("#test").text指的是<p id="test">1234<b>Hello world!</b></p>

中的1234Hello world!

得到，捕获，回调函数与html（）类似

如

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

val

val() - 设置或返回表单字段的值

val支持回调函数

val函数专门指的是表单中的元素的value属性

$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

attr

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

attr支持回调函数

例如<a href="www.baidu.com">1234</a>

中元素a就有属性 href

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

增加元素

append

append() 方法在被选元素的结尾插入内容（新元素仍然该元素的内部）。

例如在

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

$("ol").append("<li>追加列表项</li>");

会变成

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>追加列表项</li>
</ol>

prepend

prepend() 方法在被选元素的开头插入内容。

类似于append，也是在内部，在内部的一开始加入

会变成

<ol>
<li>追加列表项</li>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

append，prepend增加多个元素

append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

append

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

最终会在尾部出现

文本1。

文本2。

文本3。

说明后面的参数在前面的下面

如果改为prepend，也是

文本1。

文本2。

文本3。

后面的参数在前面的下面

after和before

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

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

这两种方法，新元素在被选元素外面。

比如

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

会在img的前后出现东西

after和 before添加多个新元素

如同prepend和append方法，这两个方法都可以接受多个参数

如

$("img").after(txt1,txt2,txt3);

在img后会依次出现1,2,3

变成 img 1 2 3

$("img").before(txt1,txt2,txt3);

会变成 1 2 3 img

删除元素

remove

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

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

empty

empty() 方法删除被选元素的子元素。

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

<div id="div1" >

这是 div 中的一些文本。

</div>

会变成

<div id="div1" >

</div>

过滤删除

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

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素：

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

css操作

增加、减少class类

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

可以选取多个元素，也可以添加多个类

$("button").click(function(){
  $("body div:first").addClass("important blue");
});

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

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

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

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

设置css属性

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值：

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

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值：

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

如需设置多个 CSS 属性，请使用如下语法：

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

下面的例子将为所有匹配元素设置 background-color 和 font-size：

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

元素尺寸

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

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

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

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

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

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

例如

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

遍历

元素之间的关系

遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

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

<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。

<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素

左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。

<span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

两个 <li> 元素是同胞（拥有相同的父元素）。

右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。

<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

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

祖先

祖先是父、祖父或曾祖父等等。

通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。

parent() 方法

parent() 方法返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

下面的例子返回每个 <span> 元素的的直接父元素：

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

parents() 方法

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

下面的例子返回所有 <span> 元素的所有祖先：

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

可以使用可选参数来过滤对祖先元素的搜索。

下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：

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

parentsUntil() 方法

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

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

$(document).ready(function(){
  $("span").parentsUntil("div");
});

后代

后代是子、孙、曾孙等等。

通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。

children() 方法

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。

下面的例子返回每个 <div> 元素的所有直接子元素：

$(document).ready(function(){ $("div").children(); });

可以使用可选参数来过滤对子元素的搜索。

下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：

$(document).ready(function(){ $("div").children("p.1"); });

find() 方法

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

下面的例子返回属于 <div> 后代的所有 <span> 元素：

$(document).ready(function(){ $("div").find("span"); });

返回 <div> 的所有后代：

$(document).ready(function(){ $("div").find("*"); });

同胞

同胞拥有相同的父元素。

通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。

siblings() 方法

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

下面的例子返回 <h2> 的所有同胞元素：

$(document).ready(function(){
  $("h2").siblings();
});

可以使用可选参数来过滤对同胞元素的搜索。

下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素：

$(document).ready(function(){
  $("h2").siblings("p");
});

next() 方法

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

该方法只返回一个元素。

下面的例子返回 <h2> 的下一个同胞元素：

$(document).ready(function(){
  $("h2").next();
});

nextAll() 方法

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

下面的例子返回 <h2> 的所有跟随的同胞元素：

$(document).ready(function(){
  $("h2").nextAll();
});

nextUntil() 方法

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

下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

jQuery prev(), prevAll() & prevUntil() 方法

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

过滤

缩写搜索元素的范围

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first() 方法

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

下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：

$(document).ready(function(){
  $("div p").first();
});

last() 方法

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

下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素：

$(document).ready(function(){
  $("div p").last();
});

eq() 方法

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

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：

$(document).ready(function(){
  $("p").eq(1);
});

filter() 方法

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

下面的例子返回带有类名 "intro" 的所有 <p> 元素：

$(document).ready(function(){
  $("p").filter(".intro");
});

not() 方法

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

提示：not() 方法与 filter() 相反。

下面的例子返回不带有类名 "intro" 的所有 <p> 元素：

$(document).ready(function(){
  $("p").not(".intro");
});

注意事项

单独文件中的函数

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

当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 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）来代替 $ 符号。

xushiyu1996818

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery基础总结

目录简介安装选择器基本选择器元素选择器#id 选择器.class 选择器层次选择器子选择器后代选择器相邻兄弟选择器一般兄弟选择器过滤选择器表单选择器属性选择器事件jquery事件基础jquery事件(action)分类普通的js事件将一个函数直接绑定在一个元素上js直接设置函数绑定在元素（dom0）DOM2级事...
复制链接

扫一扫