jquery教程练习小家电维修

2023-04-17 19:57:00

915 125

本次练习参考的是w3cschool，可以参考w3cschool的官方文档:

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

jQuery是一个JavaScript函数库。

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

jQuery库包含以下功能：

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

目前网络上有大量开源的JS框架,但是jQuery是目前最流行的JS框架，而且提供了大量的扩展。

很多大公司都在使用jQuery，例如:

可以通过多种方法在网页中添加jQuery。您可以使用以下方法：

提示：将下载的文件放在网页的同一目录下，就可以使用jQuery。

您是否很疑惑为什么我们没有在

这是一个标题

这是一个段落。

这是另一个段落。

点击前

点击后

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

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

通过id选取元素语法如下：

$("#test")

当用户点击按钮后，有id="test"属性的元素将被隐藏：

李泽雄-小家电维修-测试

这是一个标题

这是一个段落

这是另外一个段落

点击前

jQuery类选择器可以通过指定的class查找元素。

语法如下：

$(".test")

用户点击按钮后所有带有class="test"属性的元素都隐藏：

李泽雄-小家电维修-测试这是一个标题这是一个段落。

这是另外一个段落。

点击前

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

下面的例子把所有p元素的背景颜色更改为红色：

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

$("*")

李泽雄-小家电维修-测试

这是标题

这是一个段落。

这是另外一个段落。

$("*")点击前

$(this)

李泽雄-小家电维修-测试

这是标题

这是一个段落。

这是另外一个段落。

$(this)点击前

$("p.intro")

李泽雄-小家电维修-测试这是一个标题这是一个段落，点击按钮隐藏。

这是另一个段落，点击按钮不会隐藏。

ViewCode点击前

$("p:first")

李泽雄-小家电维修-测试

这是标题

这是一个段落。

这是另外一个段落。

$("p:first")点击前

$("ulli:first")

李泽雄-小家电维修-测试

List1:

Coffee
Milk
Tea

List2:

Coffee
Milk
Tea

$("ulli:first")点击前

$("ulli:first-child")

李泽雄-小家电维修-测试

List1:

Coffee
Milk
Tea

List2:

Coffee
Milk
Tea

$("ulli:first-child")点击前

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

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

$(":button")

这是标题

这是一个段落。

这是另外一个段落。

$(":button")点击前

$("tr:even")

$("tr:odd")

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

当我们在教程中演示jQuery时，会将函数直接添加到部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过src属性来引用文件）：

jQuery是为事件处理特别设计的。

页面对不同访问者的响应叫做事件。

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

实例：

在事件中经常使用术语"触发"（或"激发"）例如："当您按下按键时触发keypress事件"。

常见DOM事件：

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

$("p").click(function(){//actiongoeshere!!});

$(document).ready()

click()

click()方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击HTML元素时执行。

在下面的实例中，当点击事件在某个

元素上触发时，隐藏当前的

元素：

李泽雄-小家电维修-测试

如果你点我，我就会消失。

点我消失!

点我也消失!

结果，这个结果就不演示点击前点击后了

dblclick()

当双击元素时，会发生dblclick事件。

dblclick()方法触发dblclick事件，或规定当发生dblclick事件时运行的函数：

李泽雄-小家电维修-测试

双击鼠标左键的，我就消失。

双击我消失！

双击我也消失！

结果，这个结果就不演示点击前点击后了

mouseenter()

当鼠标指针穿过元素时，会发生mouseenter事件。

mouseenter()方法触发mouseenter事件，或规定当发生mouseenter事件时运行的函数：

李泽雄-小家电维修-测试鼠标指针进入此处，会看到弹窗。

结果

mouseleave()

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

李泽雄-小家电维修-测试这是一个段落。

结果

mousedown()

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

mousedown()方法触发mousedown事件，或规定当发生mousedown事件时运行的函数：

李泽雄-小家电维修-测试这是一个段落

结果

mouseup()

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

mouseup()方法触发mouseup事件，或规定当发生mouseup事件时运行的函数：

李泽雄-小家电维修-测试这是一个段落。

结果

hover()

hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

这是一个段落。

结果

focus()

当元素获得焦点时，发生focus事件。

当通过鼠标点击选中元素或通过tab键定位到元素时，该元素就会获得焦点。

focus()方法触发focus事件，或规定当发生focus事件时运行的函数：

李泽雄-小家电维修-测试Name:
Email:结果

blur()

当元素失去焦点时，发生blur事件。

blur()方法触发blur事件，或规定当发生blur事件时运行的函数：

在jQuery中可以使用hide()和show()方法来隐藏和显示HTML元素，以及使用toggle()方法能够切换hide()和show()方法。

jQueryhide()

简单的jQueryhide()方法演示。

李泽雄-小家电维修-测试

你点我，我就会消失。

点我!

点击前

另一个hide()实例。演示如何隐藏文本。

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

如果你点击“隐藏”按钮，我将会消失。

隐藏显示结果

语法:

$(selector).hide(speed,callback);$(selector).show(speed,callback);可选的speed参数规定隐藏/显示的速度，可以取以下值："slow"、"fast"或毫秒。

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

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

这是个段落，内容比较少。

这是另外一个小段落

结果

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

这是一个文本段落。

这是另外一个文本段落。

结果

$(selector).toggle(speed,callback);可选的speed参数规定隐藏/显示的速度，可以取以下值："slow"、"fast"或毫秒。

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

可选的callback参数，具有以下三点说明：

在jQuery中可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：fadeIn()、fadeOut()、fadeToggle()以及fadeTo()，本文通过实例来为你讲解如何在jQuery中使用这四个方法。

jQueryfadeIn()

演示jQueryfadeIn()方法。

以下实例演示了fadeIn()使用了不同参数的效果。

结果

jQueryfadeOut()

演示jQueryfadeOut()方法。

以下实例演示了fadeOut()使用了不同参数的效果。

结果

jQueryfadeToggle()

演示jQueryfadeToggle()方法。

李泽雄-小家电维修-测试

实例演示了fadeToggle()使用了不同的speed(速度)参数。

结果

jQueryfadeTo()

演示jQueryfadeTo()方法。

演示fadeTo()使用不同参数

结果

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

jQuery拥有下面四种fade方法：

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

$(selector).fadeIn(speed,callback);可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。.

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

下面的例子演示了带有不同参数的fadeIn()方法：

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

$(selector).fadeOut(speed,callback);可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

下面的例子演示了带有不同参数的fadeOut()方法：

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

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

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

$(selector).fadeToggle(speed,callback);可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

下面的例子演示了带有不同参数的fadeToggle()方法：

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

$(selector).fadeTo(speed,opacity,callback);必需的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

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

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

下面的例子演示了带有不同参数的fadeTo()方法：

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

jQueryslideDown()

演示jQueryslideDown()方法。

jQueryslideUp()

演示jQueryslideUp()方法。

jQueryslideToggle()

演示jQueryslideToggle()方法。

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

$(selector).slideDown(speed,callback);可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

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

下面的例子演示了slideDown()方法：

#panel,#flip{padding:5px;text-align:center;background-color:#e5eecc;border:solid1px#c3c3c3;}#panel{padding:50px;display:none;}点我滑下面板Helloworld!结果

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

$(selector).slideUp(speed,callback);可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

下面的例子演示了slideUp()方法：

#panel,#flip{padding:5px;text-align:center;background-color:#e5eecc;border:solid1px#c3c3c3;}#panel{padding:50px;}点我拉起面板Helloworld!结果

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

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

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

$(selector).slideToggle(speed,callback);可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

下面的例子演示了slideToggle()方法：

#panel,#flip{padding:5px;text-align:center;background-color:#e5eecc;border:solid1px#c3c3c3;}#panel{padding:50px;display:none;}点我，显示或隐藏面板。Helloworld!结果

在使用jQuery动画时，你可能想要实现更加丰富的效果，那么你可以通过使用jQueryanimate()方法自定义动画来达到目的，具体的使用方法如下文所述。

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

语法：

$(selector).animate({params},speed,callback);必需的params参数定义形成动画的CSS属性。

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

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

下面的例子演示animate()方法的简单应用。它把

元素往右边移动了250像素：

默认情况下，所有的HTML元素有一个静态的位置，且是不可移动的。如果需要改变为，我们需要将元素的position属性设置为relative,fixed,或absolute!

结果

默认情况下，所有HTML元素都有一个静态位置，且无法移动。

如需对位置进行操作，要记得首先把元素的CSSposition属性设置为relative、fixed或absolute！

注意：在jQuery的animate()方法中，第一个参数是一个必须参数，表示一个CSS属性和值的对象。

请注意，生成动画的过程中可同时使用多个属性：

默认情况下，所有的HTML元素有一个静态的位置，且是不可移动的。如果需要改变为，我们需要将元素的position属性设置为relative,fixed,或absolute!

结果

可以用animate()方法来操作所有CSS属性吗？

是的，几乎可以！不过，需要记住一件重要的事情：当使用animate()时，必须使用Camel标记法书写所有的属性名，比如，必须使用paddingLeft而不是padding-left，使用marginRight而不是margin-right，等等。

同时，色彩动画并不包含在核心jQuery库中。

如果需要生成颜色动画，您需要从jquery.com下载ColorAnimations插件。

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上+=或-=：

默认情况下，所有的HTML元素有一个静态的位置，且是不可移动的。如果需要改变为，我们需要将元素的position属性设置为relative,fixed,或absolute!

结果

您甚至可以把属性的动画值设置为"show"、"hide"或"toggle"：

默认情况下，所有的HTML元素有一个静态的位置，且是不可移动的。如果需要改变为，我们需要将元素的position属性设置为relative,fixed,或absolute!

结果

默认地，jQuery提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个animate()调用，jQuery会创建包含这些方法调用的"内部"队列。然后逐一运行这些animate调用。

默认情况下，所有的HTML元素有一个静态的位置，且是不可移动的。如果需要改变为，我们需要将元素的position属性设置为relative,fixed,或absolute!

结果

下面的例子把

元素往右边移动了100像素，然后增加文本的字号：

默认情况下，所有的HTML元素有一个静态的位置，且是不可移动的。如果需要改变为，我们需要将元素的position属性设置为relative,fixed,或absolute!

HELLO

点击前

jQuerystop()滑动

演示jQuerystop()方法。

#panel,#flip{padding:5px;text-align:center;background-color:#e5eecc;border:solid1px#c3c3c3;}#panel{padding:50px;display:none;}停止滑动点我向下滑动面板Helloworld!结果

jQuerystop()动画(带参数)

演示jQuerystop()方法

开始停止停止所有停止动画，但完成动作

点击"开始"按钮开始动画。

点击"停止"按钮停止当前激活的动画，但之后我们能再动画队列中再次激活。

点击"停止所有"按钮停止当前动画，并清除动画队列，所以元素的所有动画都会停止。

点击"停止动画，但完成动作"快速完成动作，并停止它。

HELLO结果

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

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

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

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

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

下面的例子演示stop()方法，不带参数：

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

许多jQuery函数涉及动画。这些函数也许会将speed或duration作为可选参数。

例子：$("p").hide("slow")

speed或duration参数可以设置许多不同的值，比如"slow","fast","normal"或毫秒。

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

为了避免这个情况，您可以以参数的形式添加Callback函数。

以下实例在隐藏效果完全实现后回调函数:

使用callback实例

我们段落内容，点击“隐藏”按钮我就会消失

结果

以下实例没有回调函数，警告框会在隐藏效果完成前弹出：

没有callback(回调)

这是一个段落，内容很少

结果

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

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

直到现在，我们都是一次写一条jQuery语句（一条接着另一条）。

不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条jQuery命令，一条接着另一条。

提示：这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

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

百度!!

结果

如果需要，我们也可以添加多个方法调用。

提示：当进行链接时，代码行会变得很差。不过，jQuery语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。

如下书写也可以很好地运行：

jQuery会抛掉多余的空格，并当成一行长代码来执行上面的代码行。

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

jQuery中非常重要的部分，就是操作DOM的能力。

DOM=DocumentObjectModel（文档对象模型）

DOM定义访问HTML和XML文档的标准：

"W3C文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。"

三个简单实用的用于DOM操作的jQuery方法：

下面的例子演示如何通过jQuerytext()和html()方法来获得内容：

这是段落中的粗体文本。

显示文本显示HTML结果

下面的例子演示如何通过jQueryval()方法获得输入字段的值：

名称:

结果

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

下一章会讲解如何设置（改变）内容和属性值。

我们将使用前一章中的三个相同的方法来设置内容：

下面的例子演示如何通过text()、html()以及val()方法来设置内容：

这是一个段落。

这是另外一个段落。

输入框:

设置文本设置HTML设置值结果

上面的三个jQuery方法：text()、html()以及val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的text()和html()：

这是一个有粗体字的段落。

这是另外一个有粗体字的段落。

显示新/旧文本显示新/旧HTML结果

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

attr()方法也允许您同时设置多个属性。

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

下面的例子演示带有回调函数的attr()方法：

通过jQuery，可以很容易地添加新元素/内容。

我们将学习用于添加新内容的四个jQuery方法：

jQueryappend()方法在被选元素的结尾插入内容

这是一个段落。

这是另外一个段落。

Listitem1
Listitem2
Listitem3

添加文本添加列表项结果

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

这是一个段落。

这是另外一个段落。

Listitem1
Listitem2
Listitem3

添加文本添加列表项结果

在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。

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

在下面的例子中，我们创建若干个新元素。这些元素可以通过text/HTML、jQuery或者JavaScript/DOM来创建。然后我们通过append()方法把这些新元素追加到文本中（对prepend()同样有效）：

这是一个段落。

追加文本结果

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

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

之前插入之后插入结果

after()和before()方法能够通过参数接收无限数量的新元素。可以通过text/HTML、jQuery或者JavaScript/DOM来创建新元素。

在下面的例子中，我们创建若干新元素。这些元素可以通过text/HTML、jQuery或者JavaScript/DOM来创建。然后我们通过after()方法把这些新元素插到文本中（对before()同样有效）：

之后插入结果

提示：在jQuery中，append/prepend是在选择元素内部嵌入，而after/before是在元素外面追加。

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

如需删除元素和内容，一般可使用以下两个jQuery方法：

这是div中的一些文本。

这是在div中的一个段落。

这是在div中的另外一个段落。

结果

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

这是div中的一些文本。

这是在div中的一个段落。

这是在div中的另外一个段落。

结果(点击清除后)

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

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

下面的例子删除class="italic"的所有

元素：

这是一个段落。

这是另外一个段落。

结果（删除后）

jQuery拥有若干进行CSS操作的方法。我们将学习下面这些：

下面的样式表将用于本页的所有例子：

.important{font-weight:bold;font-size:xx-large;}.blue{color:blue;}

下面的例子展示如何向不同的元素添加class属性。当然，在添加类时，您也可以选取多个元素：

.important{font-weight:bold;font-size:xx-large;}.blue{color:blue;}

标题1

标题2

这是一个段落。

这是另外一个段落。

这是一些重要的文本!

添加前

添加后

您也可以在addClass()方法中规定多个类：

.important{font-weight:bold;font-size:xx-large;}.blue{color:blue;}这是一些文本。这是一些文本。
添加前

下面的例子演示如何在不同的元素中删除指定的class属性：

.important{font-weight:bold;font-size:xx-large;}.blue{color:blue;}标题1标题2这是一个段落。

这是另外一个段落。

移除前

移除后

下面的例子将展示如何使用jQuerytoggleClass()方法。该方法对被选元素进行添加/删除类的切换操作：

.blue{color:blue;}标题1标题2这是一个段落。

这是另外一个段落。

这个就不进行结果演示了，这个添加移除都可以。

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

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

css("propertyname");下面的例子将返回首个匹配元素的background-color值：

这是一个标题

这是一个段落。

结果

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

css("propertyname","value");下面的例子将为所有匹配元素设置background-color值：

这是一个标题

这是一个段落。

设置前

设置后

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

css({"propertyname":"value","propertyname":"value",...});下面的例子将为所有匹配元素设置background-color和font-size：

这是一个标题

这是一个段落。

设置前

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

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

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

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

下面的例子返回指定的

元素的宽度和高度：

width()-返回元素的宽度

height()-返回元素的高度

结果

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

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

下面的例子返回指定的

元素的inner-width/height：

innerWidth()-返回元素的宽度(包含内边距)。

innerHeight()-返回元素的高度(包含内边距)。

结果

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

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

下面的例子返回指定的

元素的outer-width/height：

outerWidth()-返回元素的宽度(包含内边距和边框)。

outerHeight()-返回元素的高度(包含内边距和边框)。

结果

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

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

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

图示解析：

遍历方法中最大的种类是树遍历（tree-traversal）。

下一章会讲解如何在DOM树中向上、下以及同级移动。

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

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

这些jQuery方法很有用，它们用于向上遍历DOM树：

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

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

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

div(曾祖父元素)

li(父元素)span

div(祖父元素)

p(父元素)span

结果

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

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

body(曾曾祖父元素)div(曾祖父元素)

li(父元素)span

结果

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

下面的例子返回所有元素的所有祖先，并且它是

body(great-great-grandparent)div(great-grandparent)

li(directparent)span

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

下面的例子返回介于与

元素之间的所有祖先元素：

body(曾曾祖父元素)div(曾祖父元素)

li(父元素)span

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

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

下面是两个用于向下遍历DOM树的jQuery方法：

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

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

下面的例子返回每个

元素的所有直接子元素：

div(当前元素)

p(儿子元素)span(孙子元素)

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

下面的例子返回类名为"1"的所有

元素，并且它们是

的直接子元素：

div(当前元素)p(儿子元素)span(孙子元素)

p(儿子元素)span(孙子元素)

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

下面的例子返回属于

后代的所有元素：

div(当前元素)

p(儿子元素)span(孙子元素)

下面的例子返回

的所有后代：

div(当前元素)

p(儿子元素)span(孙子元素)

同胞拥有相同的父元素。

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

有许多有用的方法让我们在DOM树进行水平遍历：

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

下面的例子返回

的所有同胞元素：
div(父元素)
p
span
h2
h3
p
结果
您也可以使用可选参数来过滤对同胞元素的搜索。
下面的例子返回属于

的同胞元素的所有
元素：
div(父元素)
p
span
h2
h3
p
结果
next()方法返回被选元素的下一个同胞元素。
该方法只返回一个元素。
下面的例子返回

的下一个同胞元素：
div(父元素)
p
span
h2
h3
p
结果
nextAll()方法返回被选元素的所有跟随的同胞元素。
下面的例子返回

的所有跟随的同胞元素：
div(父元素)
p
span
h2
h3
p
结果
nextUntil()方法返回介于两个给定参数之间的所有跟随的同胞元素。
下面的例子返回介于

与

元素之间的所有同胞元素：
div(父元素)
p
span
h2
h3
h4
h5
h6
p
结果
prev(),prevAll()以及prevUntil()方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在DOM树中沿着同胞元素向后遍历，而不是向前）。
三个最基本的过滤方法是：first(),last()和eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如filter()和not()允许您选取匹配或不匹配某项指定标准的元素。
下面的例子选取首个
元素内部的第一个
元素：
欢迎访问我的主页
这是div中的一个段落。
这是另外一个div中的一个段落。
这是一个段落。
结果
下面的例子选择最后一个
元素中的最后一个
元素：
欢迎访问我的主页
这是div中的一个段落。
这是另外一个div中的一个段落。
这是一个段落。
结果
索引号从0开始，因此首个元素的索引号是0而不是1。下面的例子选取第二个
元素（索引号1）：
下面的例子返回带有类名"intro"的所有
元素：
提示：not()方法与filter()相反。
下面的例子返回不带有类名"intro"的所有
元素：
AJAX是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
使用jQueryAJAX
使用前
使用后
AJAX=异步JavaScript和XML（AsynchronousJavaScriptandXML）。
简短地说，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。
使用AJAX的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。
jQuery提供多个与AJAX有关的方法。
通过jQueryAJAX方法，您能够使用HTTPGet和HTTPPost从远程服务器上请求文本、HTML、XML或JSON-同时您能够把这些外部数据直接载入网页的被选元素中。
如果没有jQuery，AJAX编程还是有些难度的。
编写常规的AJAX代码并不容易，因为不同的浏览器对AJAX的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现AJAX功能。
load()方法从服务器加载数据，并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);必需的URL参数规定您希望加载的URL。
可选的data参数规定与请求一同发送的查询字符串键/值对集合。
可选的callback参数是load()方法完成后所执行的函数名称。
这是示例文件（"demo_test.txt"）的内容：
jQueryandAJAXisFUN!!!
Thisissometextinaparagraph.
下面的例子会把文件"demo_test.txt"的内容加载到指定的
元素中：
使用jQueryAJAX
结果
也可以把jQuery选择器添加到URL参数。
下面的例子把"demo_test.txt"文件中id="p1"的元素的内容，加载到指定的
元素中：
可选的callback参数规定当load()方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
下面的例子会在load()方法完成后显示一个提示框。如果load()方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：
使用jQueryAJAX修改该文本
结果
提示：在jQuery的load()方法中，无论AJAX请求是否成功，一旦请求完成（complete）后，回调函数（callback）立即被触发。
jQueryget()和post()方法用于通过HTTPGET或POST请求从服务器请求数据。
两种在客户端和服务器端进行请求-响应的常用方法是：GET和POST。
GET基本上用于从服务器获得（取回）数据。注释：GET方法可能返回缓存数据。
POST也可用于从服务器获取数据。不过，POST方法不会缓存数据，并且常用于连同请求一起发送数据。
$.get(URL,callback);必需的URL参数规定您希望请求的URL。
可选的callback参数是请求成功后所执行的函数名。
下面的例子使用$.get()方法从服务器上的一个文件中取回数据：
W3Cschool在线教程(w3cschool.cn)结果
$.get()的第一个参数是我们希望请求的URL（"demo_test.php"）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
提示：这个PHP文件("demo_test.php")类似这样：
$.post(URL,data,callback);必需的URL参数规定您希望请求的URL。
可选的data参数规定连同请求发送的数据。
下面的例子使用$.post()连同请求一起发送数据：
$.post()的第一个参数是我们希望请求的URL("demo_test_post.php")。
然后我们连同请求（name和city）一起发送数据。
"demo_test_post.php"中的PHP脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
提示：这个PHP文件("demo_test_post.php")类似这样：

THE END

上一篇

服务型家电电商兴.docx

下一篇

家电维修视频教程百度云

相关文章

最新家电维修教程视频，轻松掌握家电维修技巧，应对日常问题光电器材
原创TRIZ创新方法论案例集通过22个实例领略方法论的魅力
服务型家电电商兴.docx
jquery教程练习小家电维修
家电维修视频教程百度云
视频相关技术电视维修技术电视技术论坛家电维修论坛
海尔L32R1系列液晶彩电维修实例
家电维修论坛手机版app家电维修论坛技术论坛下载v2.0.6官方版

1.修理工,一分钟完成一件电器,这技术是在中国都名列前茅!视频从北京到巴西利亚的两首歌丫丫的脸逐渐向着正圆发展制片人晒王宝强转账记录世界青年乌镇话数字未来 763名在缅中国籍嫌犯移交我方赵心童晋级斯诺克英锦赛正赛郭碧婷怀孕生子是一件很美好的事谷歌一夜蒸发7000亿中国载人航天精彩可期朝鲜半岛局势恶化锦衣之下作者蓝色狮去世胖东来神似倪妮员工离职 https://m.163.com/v/video/VQGM1IUA2.html
2.维修网交流技术文章资料维修实例和经验视频教学本站是专业的维修网站,旨在提供从事维修行业的网友一个交流平台,多年来得到广大维修人员的支持,在维修当中遇到的疑难问题大家互相帮助,使同行能够快速解决问题,在维修网团队和广大维修人员的努力下搜集了大量的各种技术文章、资料、维修实例和经验、视频教学等。https://www.weixiu.name/
3.电磁炉通电不加热——检修实例谢明富家电维修分享6热度 30点赞3评论 0 复制页面地址复制页面地址进入维库电子市场网最新发布 1054 瑞隆源(RUILON)SPD事业部研发团队,采用半固态包封材料和一次成型生产工艺,成功开发出大通流量深圳市瑞隆源电子有限公司 112 一分钟了解ASRPRO语音开发板硬件结构 https://v.dzsc.com/9082.html
4.创维液晶电视42E65SE(8R68)主板维修实例家电维修摘要: 客户送来一台创维液晶电视42E65SE 打开电源机器绿灯亮就是不能二次开机,即无光无声,拆开机壳测量电源背光整合板接口反复按压遥控待机键BL端始终电压为0V像死机一样,再测量电源板上各输出电压都正常,然后再转移到主板上测量U24/3.3V 输出3.38V U20/1.2V 输出1.29V U18/1.8V输出1.79V U19/5.0V输出4.98https://tech.hqew.com/circuit_1967687
5.家电维修视频大全–搜库电脑维修视频教程大全主板维修实例电脑维修视频教程大全 0 12年前 27:24 家电维修教程大全家电维修视频教维戈1 0 11年前 39:09 家电维修视频教程大全摄像机1 家电维修教程大全 0 11年前 41:26 家电维修视频教程大全摄像机2 家电维修教程大全 0 11年前 52:19 家电维修视频教程大全数码相机维家https://www.soku.com/search_ikuvideo/q_%E5%AE%B6%E7%94%B5%E7%BB%B4%E4%BF%AE%E8%A7%86%E9%A2%91%E5%A4%A7%E5%85%A8_orderby_1_limitdate_0?site=14&page=3
6.家电常见故障维修视频理想股票技术论坛提供常见家电故障维修的视频教程,包括各类家电的维修方法和步骤,帮助用户快速解决家电故障问题。 ,理想股票技术论坛https://www.55188.com/tag-9028747.html
7.『家电维修论坛163DZ.COM』冷静浪子2007-12-14 11:46(转)康佳VCT3801A/03A机心维修实例康佳S系列彩电采用VCT3801A(或VCT3803A)为核心的超级电视处理芯片,具有完善的逻辑保护功能,并具有独特的开机黑电平自检调整功能,这些电路特点使得该机在维修中故障较为复杂,往往不知何从下手,下面就是本人在实际维修中遇到的几个检修实例。 http://www2.163dz.com/bbs/viewthread.php?action=printable&tid=115821
8.家电维修一看就会(第2版)全本书评在线阅读本书采用全彩+全解+微视频的方式,系统*地介绍了家电维修常用工具仪表的使用方法、家电产品基础电路的识图技巧及家电产品的结构、工作原理、维修分析、维修方法等。读者在学习过程中,用手机扫描页面上的二维码,就可打开相应知识技能的微视频, 配合图文讲解,轻松完成学习。本书摒弃传统图书冗长的文字表述和不适用的http://e.dangdang.com/products/1901339087.html
9.家用电器维修总结6篇(全文)在设备维修方面因为现在是刚刚毕业实习,在机械设备维修上几乎没什么经历,但是在平常生活中有时候经常对一般的家用电器方面做过一些相应的简单维修,也见过不少大型家电的维修实例,在这里做一个总结。家电维修维修一般是拿到商家指定的维修点进行维修的,但是大型家如果不在保修期进行维修时的各种收费一般不会很便宜,所以https://www.99xueshu.com/w/filed92cn73l.html
10.家用电器维修培训教材·家电维修从入门到精通丛书:液晶彩电修理从本书从实用的角度出发,全面而详细地介绍了液晶彩电的基本组成、结构、单元电路及整机电路分析,液晶彩电各种典型故障的维修方法和技巧,特别对液晶彩电接口电路及液晶显示屏的维修等内容做了详细的介绍,提供了很多非常实用的液晶彩电维修实例,以指导初学者快速入门、步步提高、逐渐精通,成为液晶彩电维修的行家里手。 https://windowsfront.com/books/10065693
11.扬州市家电扬州市家电专注冰箱、电视、洗衣机、壁挂炉、空气能、太阳能、热水器、集成灶、燃气灶维修及扬州市中央空调修理/移机加氟/安装清洗,附近师傅上门维修电话:18109031094或联系甘肃售后点。http://linxia.ttcaiwu.cn/
12.全彩图解空调器维修从入门到精通李志锋家电维修图和实物照片相结合,并在图片上增加标注的方法来介绍空调器维修所必须具备的基本知识和技能,主要内容包括空调器结构和工作原理、空调器制冷系统维修、空调器漏水和噪声故障排除、空调器电控系统维修(主要元器件以及单元电路原理、检测和维修)、挂式和柜式空调器的原装主板的安装和通用板的代换、变频空调器故障维修实例等https://www.winxuan.com/product/1200465540
13.家电维修技术资料,家电维修资料网美的电磁炉还是一个大品牌,使用美的电磁炉的用户也很多,电磁炉使用方便但也会出现一些故障,而美的电磁炉滴滴响不加热就是常见故障之一,下面主要介绍一下美的电磁炉滴滴响不加热维修方法。从实例讲解维修方法,希望对大家有帮助。分享电磁炉维修口诀及技巧日期:2020-01-03作者:电子爱好者标签:电磁炉电路图 http://www.dziuu.com/dz/25/
14.2016中国APP分类排行榜参选入围产品公示此次颁奖晚宴主题是:惊喜的构想只需要1分钟,而惊人的产品却需要许多共性内涵——天下高见,多有相合。此次将要发布的APP分类排行榜,深刻剖析市场动态,解读新时代创新定义,分析用户真实需求,从不同的角度以产品实例为众人作答。以下为迄今的入围产品名单(注:现仍在查遗补缺中)。https://blog.csdn.net/weixin_34062469/article/details/86230184
15.家电一点通是家电维修资料网站,包含:电器资料故障代码查询家电维修资料网、家电维修论坛、家电资料大全、维修视频、学习资料、电路基础、故障代码查询、厂家技术手册、各种电器图纸图纸、说明书、维修手册、芯片程序、厂家资料、元件在线识别、计算工具、多联机调试软件、电路计算软件、免费生成网站等https://www.jdedt.com/
16.启明家电维修网带有独立维修业务管理和元器件材料出入库数量、价格管理软件,相当于财务与仓库管理软件。带有国内优秀的家电、汽车等教学视频链接,帮助用户(即便是初学者)入门和学习,方便用户下载,且无广告干扰。优质的售后咨询服务: ①及时解答用户使用本软件遇到的疑难 http://www.qmstar.com/
17.家电维修走进课堂(精选11篇)前一个星期布置学生双休日到家电城或家电维修部去认识各种家电,并观察和记录各种家电的铭牌,对不了解其意义的参数请教家电销售人员和维修人员。 (设计意图:让学生深入社会、深入生活,通过从生活到物理的认识过程,激发学生的求知欲,从而培养学生的探索精神和实践能力,改革以书本为主,实验为辅的教学模式,提倡多样化的学习https://www.360wenmi.com/f/filel2faeygw.html
18.重庆附近上门电器维修中心的微博重庆一口介维修重庆报价维修我们是重庆“一口价”维修师傅**在重庆这座山城,有一群特殊的人,他们穿梭在大街小巷,为市民们解决各种家电维修问题。我、们就是我们的“一口价”维修师傅。“一口价”不仅是一个价格承诺,更是一种服务理念。我们深知,维修行业鱼龙混杂,价格不透明、乱收费等现象时有 .https://weibo.com/6114786479