jQuery学习

mac2024-07-11  9

jQuery效果

六、jQuery - Chaining

Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上),一条接着另一条。 把 css(), slideUp(), and slideDown() 链接在一起。“p1” 元素首先会变为红色,然后向上滑动,然后向下滑动:

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function() { $("button").click(function(){ $("#p1").css("color","red").slideUp(2000).slideDown(2000); }); }); </script> </head> <body> <p id="p1">jQuery 乐趣十足!</p> <button>点击这里</button> </body> </html>

当进行链接时,代码行会变得很差。不过,jQuery 在语法上不是很严格;您可以按照希望的格式来写,包含折行和缩进。

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function() { $("button").click(function(){ $("#p1").css("color","red") .slideUp(2000) .slideDown(2000); }); }); </script> </head> <body> <p id="p1">jQuery 乐趣十足!</p> <button>点击这里</button> </body> </html>

jQuery 会抛掉多余的空格,并按照一行长代码来执行上面的代码行。

jQuery - 获得内容和属性

jQuery DOM 操作

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

DOM = Document Object Model(文档对象模型)

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

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

获得内容 - text()、html() 以及 val()

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

text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值

通过 jQuery text() 和 html() 方法来获得内容:

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); }); </script> </head> <body> <p id="test">这是段落中的<b>粗体</b>文本。</p> <button id="btn1">显示文本</button> <button id="btn2">显示 HTML</button> </body> </html>

通过 jQuery val() 方法获得输入字段的值:

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert("Value: " + $("#test").val()); }); }); </script> </head> <body> <p>姓名:<input type="text" id="test" value="米老鼠"></p> <button>显示值</button> </body> </html>

获取属性 - attr() 获得链接中 href 属性的值:

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert($("#cor").attr("href")); }); }); </script> </head> <body> <p><a href="xxx" id="col">School</a></p> <button>显示 href 值</button> </body> </html>
最新回复(0)