使用jQuery实验室学习 jQuery

分享于 

44分钟阅读

Web开发

  繁體

介绍

是一个javascript库,帮助开发人员编写兼容的浏览器和代码。 jQuery库完全用javascript编写。 :DOM混乱,它的行为在所有的浏览器中都是不同的。 因此,为了在DOM之上创建公共层,可以处理每个浏览器插件和其他类库中的DOM的所有奇怪行为,这些库已经演变成了一种。 一天将会出现,没有人会直接编写javascript代码来执行操作。遍历和任何它的他行为改变。 JavaScript会成为机器或者图书馆的一级语言,人们将使用 DOJO,Prototype,,YUI,代码,代码,代码,代码,代码,代码,代码,代码,代码,代码。

背景

LearnJQueryByLab/2.PNG

jQuery是一个复杂的JavaScript对象。 我们可以将它的作为扩展的jQuery功能的选定DOM元素的包装。 在jQuery命令中,每个命令都归结为 2个只选择DOM元素并执行一些操作的命令。 当通过传递搜索表达式编写jQuery命令时,jQuery Sizzle选择器引擎搜索给定的搜索表达式。 DOM中所选元素组合在 array 中,相同的array 将包装在jQuery对象中,并将返回。 因此,你可以在所选DOM元素上再次使用jQuery功能。 它就像一个选择的DOM元素链,在每次执行jquery命令之后返回。

我们要解决什么问题?

为了学习 jQuery,首先应该从简单简单的jQuery命令开始。 但是,问题是应该编写。执行和查看comomand的结果。 我已经用这个创建了一个 ASP.NET Web应用程序,可以执行jQuery命令,运行它们,查看结果,并可以快速学习 jQuery。

我把它称为 jQuery。 我从Action操作手册中引进了这个JQuery实验室的想法。 我通过阅读这本书学习了 JQuery。 我将强烈推荐阅读这本书,它非常有用,它已经很好地解释了jquery的概念。 以实用的方式学习新语言实际上是一个有趣且快速的学习方法。

实验室是我们解决问题的解决方案。

jQuery实验室是一个dot应用程序,它允许你执行jQuery命令并向你展示结果。 它包含了一个可以运行jQuery命令的虚拟 DOM。 它可以从链接下载源代码: 下载 jQueryLab.zip 43.64 KB。 下载这里应用程序后,可以将 Lab.aspx 页面作为启动页面运行。 below 是souce代码和 Lab.aspx 页面的屏幕截图。

LearnJQueryByLab/project.PNG 340 x"alt="learnjquerybylab/pic1.png"src="https://www.codeproject.com/KB/scripting/LearnJQueryByLab/pic1.PNG">

jquery实验室页面包含 below 内容:

  • 示例 DOM:
    DOM将有一个网格视图和一个 DIV。 网格视图包含几行,Div将为空。 这个DIV将有名为 empty的类。 我们将通过在这个示例DOM上运行样例查询来学习 jquery。 below 是jQuery实验室中使用的示例DOM的html。
<divid="domWrapper"><asp:GridViewID="gvLab"runat="server"BackColor="White"BorderColor="#DEDFDE"BorderStyle="None"BorderWidth="1px"CellPadding="4"ForeColor="Black"GridLines="Vertical"AutoGenerateColumns="false"><Columns><asp:BoundFieldHeaderText="Name"DataField="Name"/><asp:BoundFieldHeaderText="Town"DataField="Town"/><asp:BoundFieldHeaderText="Age"DataField="Age"/><asp:BoundFieldHeaderText="Employee Id"DataField="Id"/><asp:BoundFieldHeaderText="Skills"DataField="Skills"/></Columns><RowStyleBackColor="#F7F7DE"/><FooterStyleBackColor="#CCCC99"/><PagerStyleBackColor="#F7F7DE"ForeColor="Black"HorizontalAlign="Right"/><HeaderStyleCssClass="header"/><AlternatingRowStyleBackColor="White"/></asp:GridView></div><divclass="empty"id="emptydiv"> Empty Container</div>
  • 文本编辑器:
    在 black background 颜色中有一个文本区域,在这里可以编写/paste 命令。
  • 执行按钮:
    在给定文本区域中编写jquery代码后,如果用户单击执行按钮,那么它将执行查询。 选定的元素将在页面左侧显示的样例DOM上显示厚红色边框。 在选定元素上突出显示的工作将由实验室内部代码完成,以便显示所选元素。 所以不要感到困惑,为什么选择的元素会被突出显示:)
  • DOM按钮:
    单击DOM按钮,它将只显示选定的元素 html below 按钮。
  • 重置按钮:
    单击重置按钮时,将重置文本区域。

$ 是jQuery对象的别名。 在页面中引用jquery文件之后 <script src="jquery-1.5.1.js" type="text/javascript"></script> jQuery对象或者 $ 全局可用。 我们将使用jquery的别名 NAME 来学习/编写jquery示例命令。 在 $,的参数中,我们可以通过搜索表达式或者新的html来创建元素。

示例命令及其 explainations

让我们从开始学习jQuery插件。 below 是jQuery示例命令。 inside 实验室项目有一个

包含已经列出的所有示例代码并在本文中讨论 below的
samples.js
文件。 我已经使用了几个css类,这些类可以在源代码中的lab.css 文件中找到。 请阅读解释和学习一个通过运行下面的命令 jQuery实验室的命令。

我们将从基本的jQuery选择器开始学习。 在 below 讨论中,我将编写,然后将编写代码,然后将解释相同的代码。

搜索所有表
$('table'); 

在 上面 查询中,我们将元素 NAME 'table' 作为搜索表达式传递给 $的参数。 因此,jquery将搜索页面DOM中存在的所有 table 元素。 在DOM中有 3个表,用于搜索 table的上面 jquery命令将返回一个包含 3个 table 对象的array 对象。 请查看 below 屏幕快照。

LearnJQueryByLab/1.PNG

搜索所有行
$('tr');

这里查询将搜索DOM中的所有 TR 元素,并返回 tr 对象的array。 如果你在 Lab 中运行 上面 代码,那么你将会看到所有行都用红色边框突出显示,所选行的html显示在DOM部分中的below。

搜索所有单元格
$('td');

这里查询将搜索DOM中的所有 TD 元素,并返回 tr 对象的array。 如果你在 Lab 中运行 上面 代码,那么你将看到所有的table 单元格都将用红色边框突出显示。

按类别 NAME 搜索
$(".empty");

.empty 是搜索表达式,它查找所有有空作为类 NAME的元素。 jQuery将返回一个包装器对象 contaning array,这些元素的类名为空。

创建新的DIV元素
$("<div>Hi</div>");

使用jQuery我们只能在运行时在客户机端创建元素。 在 上面 代码中,我们创建div元素并将它的包装在jquery对象上。 现在这个新创建的div可以在任何地方使用/附加。

遍历

在DOM中,最困难的部分是遍历。 这个单词很难表示,一个可以转换为元素,然而,遍历元素的javascript代码与浏览器中的元素并不相同。 如果某些代码在mozila上工作,那么同样的代码可能无法在 IE 上工作。 然而,如果我们使用 jQuery,那么我们必须编写 LESS 代码,并且不必为浏览器兼容。 jQuery会处理这个问题。 jQuery代码将在所有浏览器中运行 homogenously。 因此开发者可以更专注于功能,而不是编写 100行代码来处理多个浏览器的DOM遍历行为。 因此,jQuery非常强大,它对编写在所有浏览器上运行的代码做出了标准。

儿童的身体不断发育成长.
$("table").children().children(); 

.children() 是一个命令,它获取当前元素中 inside的所有元素。 假设有一个表,当你说 table.children() 时,它将获取表中的元素,这只是 tbody。 就像前面所说,jquery命令返回自身以及所选的DOM元素集。 因此,可以再次调用jquery命令来操作所选的DOM元素。 因此,如果你看到 "$('table').children().children()",在这个命令中,我们已经编写了 .children() 命令 2次。 第一次 $('table').children(),选中的DOM只是 table,我们寻找它的子元素。 第二次 "$('table').children().children()" 为 tbody,因为 table的第一个子级为 tbody。 然后我们再来寻找tbody的孩子。 finally,整个查询将返回整个行 inside。

添加
$("table>tbody tr").add("td") ;

在这个代码中我们使用特殊的字符 >,它意味着它将获取所选元素的所有直接子。 $("table>tbody") 将获得Tbody元件。 在我们的搜索表达式中,有一个空格和 tr,这意味着在选择的tbody 中查找所有 TRs。 因此,$("table>tbody tr") 将返回tbody的所有 trs。 我们也可以使用 .find的方法来做类似 $("table>tbody").find("tr") 那样的事情。 之后我们使用了 add 命令。 它在所选DOM元素之上添加另一组包装的DOM元素。 在我们的命令中,首先选择所有 TRs,然后将所有 TDs 添加到所选trs的顶部。
add 命令有助于合并多个被包装的元素。 例如,假设所有链接/锚都是绿色的,然后想要具有href属性的链接应该粗体。 在那里你可以使用add命令。 这些代码是

$('a').css("color","green").add('a[href^=http]').css("font-weight","bold");
筛选器
$("table>tbody>tr").filter("td"); 

在 上面 查询中,我们使用 filter 命令。 筛选器命令将返回在筛选表达式中写入的元素。 所以在这个命令中,它只返回所有的tds。

$("table>tbody>tr").add("td").not("tr"); 

这里我们使用了 not 命令。 not命令removes删除not表达式written的所有元素,也可以说它不返回搜索表达式中存在的元素。 在这个 上面 编写的查询中,它将只返回 tds。

结尾
$("table>tbody>tr").add("td") //all TDs are being returned$("table>tbody>tr").add("td").end(); //all Trs are being returned.

这里我们使用了 end 命令。 我们必须先理解jQuery中的一个重要概念,才能理解结束命令

当用户想要返回到初始选中的包装DOM集合时,用户可以返回并再次操作它们。 让我们用代码中的示例了解堆栈,我们首先搜索 tr,然后添加 td。 因此,jquery将在内部创建堆栈,首先它将存储包装的tr 集,然后包装 td 集合。 当我们说结束时,它会返回并从堆栈中取出所有的tr 并返回给你。 所以结束只是后退一步。

操作

Manipulation,通过注入新DOM或者删除现有DOM来改变DOM布局,如我已经说过的那样,操作在DOM中是困难的,因为在不同的浏览器集合中操作是困难的。 因此,应该学习jQuery操作命令,以编写标准代码在所有浏览器中统一操作 DOM。 JQuery选择所有满足搜索表达式的元素,然后将所有选定元素中的操作命令应用到一个快照。 因此,我们不必循环每个元素并单独应用命令。 这是jQuery非常强大的一点,因为它减少了代码行。 DOM操作会导致DOM重排,从而增加页面的呈现时间。 我们可以一种有组织的方式使用jquery命令来避免DOM回流。

空白
$("table").empty(); 

这里我们使用了 empty 命令。 它将删除 table 中的所有行,因此只有 table 元素没有行。

假设在执行之前有 below html:

<table><tbody><tr><th>header</th></tr><tr><td>column</td></tr></tbody></table>
执行 上面 命令后
<table></table>
移除
$("table").remove(); 

remove 命令从DOM中完全删除选定的元素。 当我们在运行时将html元素注入到DOM中,通常会隐藏页面大小,这是非常有用的。 因此,我们应该完全从DOM中删除它,而不是隐藏。

执行前:

<table><tbody><tr><th>header</th></tr><tr><td>column</td></tr></tbody></table>
执行后:
//No Table element present. It was removed completely from DOM
appendTo
$("<div>Appended in empty div</div>").appendTo(".empty");

appendTo 命令将所选元素附加到目标html元素 换句话说,(source)appendTo(target)。 在 上面 命令中,我们在运行时创建一个 DIV,并将它的附加到具有类 NAME empty的元素。 执行 上面 查询后,将创建一个新的DIV,并将它的移动并追加到现有的包含. empty 类名称的DIV。

执行前:

<divclass="empty"></div>
执行后:
<divclass="empty"><div>Appended in empty div</div></div>
附加
$(".empty").append("<div>I have been appended dynamically</div>") 

append 命令将参数中给定的元素追加到选定的DOM元素 IE。(target)append(source)。 在附加的上面 查询中,我们创建并传递了一个新的DIV。 执行 上面 查询后,新的DIV将被附加到包含类 NAME empty的DIV中。

执行前:

<divclass="empty"></div>
执行后:
<divclass="empty"><div>Appended in empty div</div></div>
$(".empty").after($("<div>I am after the empty</div>")) 

after 命令在选定的DOM元素之后追加实参中给出的元素。 在 上面 查询中,我们在 after 命令的参数中创建并传递了一个新的DIV。 执行 上面 查询后,将在包含类 NAME empty的DIV后面追加新的DIV。

执行前:

<divclass=""empty""></div>
执行后:
<divclass=""empty""></div><div>I am after the empty<div></div></div>
$(".empty").before($("<div>I am before the empty</div>")) 

before 命令将参数中给定的元素追加到选定的DOM元素之前。 在 上面 查询中,我们在 before 命令的参数中创建并传递了一个新的DIV。 执行 上面 查询后,新的DIV将被追加到包含类 NAME empty的DIV之前。

执行前:

<divclass=""empty""></div>
执行后:
<div>I am after the empty<div><divclass=""empty""></div></div></div>
换行
$("table").wrap("<fieldset>I am the Wrapper</fieldset>") 

wrap 是一种强大且有用的方法。 它将所选的元素包装在提供的html元素下。 在 上面 查询中,我们创建一个新的fieldset 并将 table inside 包装在字段集。 你可以在实验室运行这个查询,以查看操作中的。

执行前:

<table></table>
执行后:
<fieldset>I am the Wrapper<table></table></fieldset>

选择器

执行后: 让我们学习几个选择器查询。

选择偶数行(: 偶数)
$("table>tbody>tr:even td") 

我们可以使用 :even:odd 等过滤器命令。 :even 命令将返回选定的偶数组元素。 :odd 命令将返回选定的奇数组元素。 上面 查询,将返回所有偶数行,包括gridview的页脚。

:最后
$("table>tbody>tr:last td")

:last 命令将返回最后选定的元素集。 上面 查询,将返回最后一行的所有单元格。

选择 header (: 第一个)
$("table>tbody>tr:first th")

:first 命令将返回第一个选定的元素集。 上面 查询,将返回第一个行的所有单元格。

选择 header &页脚(: 最后一个,: 第一个)
$("table>tbody>tr:last td, :first th")

在Gridview中,始终需要使用 background 颜色或者其他方法操作 header 和页脚。 我们可以使用 上面 命令来选择 header 和页脚。 选择这两个选项后,我们可以应用 background 颜色或者做任何需要的。 我们的上面,查询将返回 header 和页脚单元格。

选择除 header 和页脚以外的行
$("table>tbody>tr:not(:first,:last):even td") 

我们使用 :not:first, :last, :even。 这里命令将通过筛选 header 和脚注行返回所有偶数行。

包含
$("#gvLab>tbody>tr>td:contains('Rupesh')") 

:contains 搜索确切的单词,并且大小写敏感。 它返回包含搜索单词的DOM元素。 在 上面 查询中,它将返回包含 "Rupesh" 单词的所有单元格。

$("#gvLab>tbody td:not(:contains('Rupesh'))") 

在 上面 查询中,它将返回不包含 "Rupesh" word的所有单元格。

:按钮
$(":button") 

我们可以根据元素的类型进行搜索。 :button:checkbox:submit 等等 一样,上面 命令将返回DOM中的所有按钮。

$("input:reset") 

为了减少搜索范围,我们还可以对元素名称应用过滤器。 在 上面 查询中我们编写了 input,因此它将查找所有输入元素的类型为 reset。 上面 查询将返回所有类型为reset的输入元素。

使用属性搜索
$("[ID^=btn]") 

上面的查询将返回所有输入类型为reset的输入元素。 因此,我们可以使用jquery属性选择器轻松地获取元素。

我们可以通过编写元素的属性 NAME 和值来搜索元素。 假设要查找具有值 ID的元素的元素以 btn 开头。 然后我们可以编写给定查询,它将返回所有元素,这些元素将以开始。 假设有带有 id = btnSet。id=btnSubmit或者id=btnReset的按钮,那么这些按钮将被包装并返回。 我们还可以使用其他匹配标准,如:

  • 假设有带有 id = btnSet。id=btnSubmit或者id=btnReset的按钮,那么这些按钮将被包装并返回。 ID NAME 可以是 $l101Control_btnSubmit 或者 $l102Control_btnSearch。 如果你想要 btnsubmit,那么你可以写 $("[ID$=btnSubmit]")
  • 类似地,我们可以使用其他标准: == 意思是寻找精确匹配。
  • *= 意思是查找任何匹配。

属性 & CSS

在操作中,有时需要更改元素的属性或者元素的CSS样式。 这也可以通过使用jquery命令在所有浏览器中统一完成。

更改CSS规则
$("#gvLab").css("font-size","18px") 

在CSS方法的参数中,我们可以将样式键和值传递给CSS样式。 上面 写入的查询将选择具有 gvLab的gridview,并将它的字体大小更改为 18像素。

Chaning多个CSS规则
$("#gvLab>tbody>tr:first").css({"backgroundColor":"green","color":"Orange"}) 

如果我们希望同时创建/更新多个CSS规则,那么可以将CSS规则键和值的一个对象传递给CSS方法。 在 上面 查询中,我们创建了一个包含 backgroundColorcolor 值的对象。 执行这里命令后,header的第一行将更改它的background 颜色为绿色,并将字体颜色改为橙色。

将红色应用到偶数行。
$("table>tbody>tr:even").css("backgroundColor","red") 

在我们的web应用程序开发中,总是需要更改gridview的替代行颜色。 可以用jquery中的一行代码实现。 如果我们希望所有偶数行都有 background 颜色,那么我们可以执行 上面 查询。

header 和页脚的Chaning background 颜色
$("table>tbody>tr:last,tr:first").css("backgroundColor","red") 

这里查询会将 header 和页脚 background 颜色更改为红色。

更改除 header 和页脚以外的所有行
$("table>tbody>tr:not(:first,:last):even").css("backgroundColor","red") 

上查询将更改偶数行的background 颜色为红色,除了 header 和页脚。

addClass
$("#gvLab td").addClass("blackTheme") 

addClass 是一个非常有用的命令,它将类 NAME 应用到所选元素。 在 上面 查询中,我们选择gridview的所有单元并将 blackTheme 类应用到它们。 如果在实验室中运行这个查询,那么你将看到网格将拥有 background 颜色。

removeClass
$("#gvLab td").removeClass("blackTheme") 

removeClass 执行 addClass的反向操作。 它从选定元素中删除给定的类 NAME。 在 上面 查询中,我们从gridview的整个单元格中删除 blackTheme 类,它的id为 gvLab

应用/修改属性(。attr )
$("#gvLab td:first").attr("title","My Name").css("cursor","hand") 
 $("#gvLab td:first").attr({"title":"My Name", "class":"MyClass"}); //passing object of attributes key and vlues.

我们可以使用 .attr 命令来改变元素的属性。 在我们的上面 查询中,首先选择整个 1st 单元格,然后将 title 属性应用到它们,然后应用一个css规则。 类似于 .attr 方法中的.css 方法,我们可以传递具有多个属性的对象。

更改内部 html (。html )
$(".empty").html($("#gvLab").attr("class")) 

我们可以使用 .html 命令来改变元素的内部 html。 在我们的上面 编写查询中,我们在innerhtm中传递gridview的类 NAME。 执行 上面 查询后,DIV将显示gridview的类 NAME。

hasClass
$(".empty").html($("#gvLab").hasClass("blackTheme")) 

hasClass 是检查给定类 NAME 所选元素的方法。 如果找到具有suplied类 NAME的选定元素,则返回 true,返回 false。 如果gridview具有 NAME blackTheme 类,则 $("#gvLab").hasClass("blackTheme") 为 chcking。

:隐藏
$(".empty").text( $("#gvLab").is(":hidden")) 

如果 :hidden 是隐藏的或者不存在的,则为搜索条件? 如果元素有 style="display:none",那么它返回 true。 上面 查询将根据gridview的隐藏状态显示 true 或者 false。 你可以在实验室中运行这个查询,并查看结果。

绑定事件

点击和颜色乐趣
$("#gvLab>tbody>tr>td:nth-child(2)") //finding the 2nd column of the grid.. click(function(){ //binding click event $(this).css("backgroundColor","pink"); //applying backgroundcolor pink. }) 
. mouseleave(function(){ //binding mouseleave event $(this).css("backgroundColor","yellow"); //applying backgroundcolor yellow. }) 
. mouseenter(function(){ //binding mouseenter event $(this).css("backgroundColor","aqua"); //applying backgroundcolor aqua.}); 

我们可以使用jquery绑定元素上的事件。 点击和颜色乐趣 我们可以使用jquery绑定元素上的事件。 它获取位于给定索引号处的子元素,索引以 1开始。 在这里我们找到了 2列 $("#gvLab>tbody>tr>td:nth-child(2)") 然后,在 2nd 列位置的所有单元格上绑定click事件。 在click事件中,我们将 background 颜色分配给粉红色。 类似地,我们绑定了 mouseleavemouseenter 事件。 在click事件中,我们将背景颜色分配给粉色。

让我们显示自定义工具提示
//Search cells that contians"Rupesh" $('table>tbody>tr>td:contains("Rupesh")') 
. css('cursor','pointer') //apply css with cursor as pointer . click( function(event) { //binding click event on selected cell $("<div>") //creating new div element on click event.. css({ //assigning few styles to the new DIV  backgroundColor:'khaki', 
 color:'black', 
 padding:'20px', 
 left:event.pageX, 
 top:event.pageY, 
 position:'absolute', 
 width:'56px' }) 
. html($(this).text()) //on the new DIV, we are putting the text of the cell.. click(function(){ //binding click event on newly created DIV element. $(this).hide() //here this is the newly created DIV. We are hiding the div itself on click of it.  }) 
. appendTo("body") //Finally, we are appending this div in the body to show in the UI. });
 </div>

在我们的上面 查询中,单击gridview的2nd 单元格,在运行时创建新的div,然后将它的显示为工具提示。 这只是一个想法,人们可以在上面工作,创建一些更漂亮的工具提示。

效果

jQuery提供各种效果和动画。 许多前端开发人员学习 jquery,因为它提供的效果和动画。 这些命令很容易理解和 impliment。

隐藏
$("#gvLab>tbody>tr:not(:contains('Rupesh'))").hide()

hide 将隐藏所选元素

切换
$("#gvLab").toggle("slow") 

toggle 是根据所选元素的初始值更改它的style=display 属性的方法。 如果显示值已经隐藏,则 toggle 命令将使显示值显示出来,反之亦然。 我们可以通过 "slow""normal""fast" 这些是动画速度的值。

fadeTo
$("#gvLab>tbody>tr>td:contains('Rupesh')").fadeTo("fast",.5);

fadeTo 是一种将元素淡入到给定数值的方法。 在我们的上面 查询中,我们通过 0.5.

淡出
$('td').mouseover(function(){ 
 $(this).fadeOut(); 
 }); 

fadeOut 是隐藏选定元素的方法。

fadeIn
$("#gvLab").fadeIn("slow") 

fadeIn 是显示选定元素的方法。

slideUp
$("#gvLab").slideUp() 

slideUp 是隐藏选定元素的方法。 隐藏元素时,它开始将它的隐藏在底部。 它看起来像百叶窗。

slideDown
$("#gvLab").slideDown() 

slideDown 是显示选定元素的方法。 在显示元素时,它从顶部开始逐渐淡出。 它看起来像 shutter。

slideToggle
$("#gvLab").slideToggle() 

slideToggle 是记住所选元素的初始样式的一种方法。 如果最初它是隐藏的,那么它会使它可见,反之亦然。

动画
$("td:first")//selecting first td..css({//adding css rules to selected td element position:'absolute',
 top: $("td:first").offset().top,
 left: $("td:first").offset().left
 })
.animate(//calling animate method {top:0,left:0}//final position of the animated element., 4000//total time for animation, 'linear'//easing of animation., function(){ //callback method after animation done alert("done!!")
 }
);

在jQuery中,我们可以使用 animate 方法来设置元素的动画。 方法的第一个参数是 final poistion,2nd 参数是动画的总持续时间,3rd 参数是 "linear" 或者 "swing" 摆动。 4th 参数是在动画完成后自动调用的回调方法。 在我们的上面 查询中,我们动画gridview的第一个单元格并将它的移动到屏幕左上角。 4th 参数是在动画完成后自动调用的回调方法。

使用jQuery的Ajax

使用jquery实用工具方法进行Ajax调用是非常简单和容易的。

装载
$('.empty').load(//calling load method on the div having empty class name.'default.aspx'//loading this page., {} // passing empty javascript object to the server., function(){ //callback method that would be executed automatically after the successful load of page. alert("data.htm page is loaded successfully")
});

使用 load 方法,这个方法会异步加载所选元素中的页面。 装载 如果在获取/加载给定页面时出现错误,那么回调方法将不会被触发。

$('.empty').load('default.aspx li:first',{},function(){alert("data.htm page is loaded successfully")}) 

在选定元素中加载页面时。 我们可以过滤出想要从页面中提取出来的DOM元素。 在 上面 2nd 查询中,请参见我们将搜索表达式放在 NAME 本身的'default.aspx li:first 中。 这将获得 default.aspx 页面,然后搜索第一个列表项 li:first,并只获取它。 因此,在空容器DIV中,我们只加载默认页面的第一个列表项。

在获取路径之前,这个过滤是很酷的,并且节省了大量带宽,如果你只想从这个页面中获取它。 因此,在空容器DIV中,我们只加载默认页面的第一个列表项。

高级 Ajax

jquery内部的所有ajax实用工具方法都使 $.ajax 方法调用成为可能。 如果使用 $.get 方法,那么它将使用 type:get 调用相同的ajax方法。 因此,jquery的主要/common ajax方法是 $.ajax。 如果我们想要更多的控制ajax调用,并且希望利用ajax调用的adavance特性,那么我们应该只使用 $.ajax 方法。

使用get命令加载默认页面
$.ajax({ //making ajax call, it is same as $.get method call url:"default.aspx", //url to fetch success:function(data){ //success calback method alert(data);
 },
 type:"get"//passing type as get.});

在 上面 查询中,我们使用 $.ajax 方法加载 default.aspx 页面,并通过 type:get。 我们使用了 Success 事件,这是在ajax调用成功完成时会自动触发的事件。 在成功加载页面时,我们调用 alert 方法来显示页面数据。

加载默认页面并使用完整和beforeSend事件。
$.ajax({ 
 url : "default.aspx"//url of the page to fetch, success : function(data) { //callback method called on successful load. alert(data); 
 }
, type : "get"//making get call., complete : function( ) { //creating event handler for complete event. $(".load").remove();//removing the dynamic div after completion of the ajax call.  }, 
, beforeSend : function( ) {
 $("body").append($("<div class="load">Loading</div>")) //creating  }
}); 

在 上面 查询中,我们使用了ajax方法的below 事件

  • beforeSend,这是在进行ajax调用之前会自动触发的事件。 在这个回调方法中,我们使用消息 loading 创建一个动态div并显示它。 它就像在从服务器获取数据时显示进度条。
  • complete,这是在ajax调用完成时会自动触发的事件。 在这个回调方法中,我们删除动态创建的loading

使用 jQuery ajax调用web服务

使用 $.ajax 方法,可以调用 Webservice webmethodsWCF methods 或者 static method of. aspx page 让我们来看看使用 jquery ajax方法调用web服务方法的一个例子。

$.ajax({ 
 type:"POST"//type is post because, we are sending few data from client side., dataType:"json"//datatype says that the response type from the server. , contentType: "application/json; charset=utf-8"//contenttype is the formate of communication protocol, it could be html or json., url:"mySvc.asmx/getEmpByName('Rupesh')"//method name with svc name and parameter to be passed., success:function(data){ //callback method on suceess. $(".empty").html(data[0].Name); 
 } 
, error:function(data){ //callback method on error. $(".empty").html(data.message); 
 } 
, beforeSend:function ( ) { //callback method on before making ajax call $("body").append($("div",{"id":"dynDiv","class":"load"}))} 
, complete:function(){ //callback method on completion of the ajax call. $(".load").remove() 
 } 
}) 

在 上面 查询中,我们调用web服务 mySvc.asmxgetEmpByName 方法。 调用webservice时,应该注意将默认数据作为字符串 "{}" 传递,并通过 contentType:"application/json; charset=utf-8" 我将推荐阅读dave的文章

插件

如果你想使jquery更加有用并扩展它的功能,那么你可以创建一个具有自己方法的插件。 假设你想创建自己的方法 $.myPlugin() 这个方法在jQuery中不存在。 要将它添加到jquery对象中,你必须创建自己的插件。 请参见 below 代码:

我的第一个插件
//creating plugin. $(
 function(){ //creating anonymous method and passing it in the argument of $. $.fn.myPlugin = function(){ //adding on method myPlugin into prototype of jquery object.return $(this).each(function(){ //returning the selected elements to continue the chain. $(this).css('background-color','green'); //chaing background color to green }); 
 }; 
 }
 ); 
 //calling our own method on odd rows of gridview. $("table>tbody>tr:odd").myPlugin() 

在编写插件时,应该关注 below的事情:

  • 将插件方法 inside 写入DOM的ready event。 准备好的事件由jquery在创建DOM时触发并准备解析。 这是在html元素上绑定事件或者向jquery对象添加自定义方法的正确步骤。 可以通过编写代码 inside 并将它的传递到 $() 方法的参数来挂接Ready事件。
 $(function(){
 // write line of codes for getting executed on the ready event of the DOM//$('button').click(function ( ){ });//binding events to elements.//...write plugin related code.});
因这里,你可以在我们的上面 查询中看到,我们开始编写我们的插件相关代码 inside 只是匿名方法。
  • 将插件的方法附加到jquery对象的Prototype$.fn 是jquery对象Prototype的别名。 在 上面 示例中,我们在jquery的Prototype对象中添加了新方法 myPlugin
  • 使用 $.each helper 方法。在插件方法中,我们应该将每个方法都用于选定的元素。
  • 返回选定包装元素的插件方法后,返回所选的元素集,这样链将再次应用所选的jquery命令。
  • 在 上面 查询中,定制插件方法 myPlugin 使所选DOM元素的background 颜色成为绿色。 请在实验室运行这个插件,并查看操作。

引用

联机教程

我建议阅读在线教程,如 随着强烈推荐阅读的行动书

使用jQuery实验室的jQuery视频会话

我上了一个会话 JQuery using <a href="https://www.codeproject.com/Articles/260362/Learning-jQuery-using-jQuery-Lab#l">jQuery Lab </a> 我已经在jQuery实验室中运行了列出的jQuery示例代码,在这个会话中解释了 jQuery。 我上了一个会话

视频会话分为两部分:部分JQuery第1部分。 我希望这些视频能帮助你更好地学习 jquery。

这是我在视频聊天中使用的演示文稿幻灯片的副本。

http://www.slideshare.net/roopkt/basics-of-j-query

OBJECT OBJECT OBJECT OBJECT OBJECT OBJECT OBJECT OBJECT PARAM PARAM PARAM PARAM PARAM PARAM PARAM PARAM PARAM PARAM PARAM PARAM PARAM PARAM PARAM PARAM PARAM PARAM PARAM

结束语

我试图在本文中解释jquery的基础。 结束语 无论如何,我已经在本文中讨论过,这些将适用于所有版本的jQuery。 因为,我已经讨论过所有版本中相同的jquery的基础。 然而,在最新版本的jquery中,他们有一些更快捷的快捷方式创建元素,增加附加方法的速度和一些其他方法执行的方法,并完成了许多良好的工作。 人们可以阅读并得到更新。 欢迎任何建议。问题或者反馈 !


learn  
相关文章