jquery对DOM元素操作

最新推荐文章于 2022-07-28 21:14:32 发布

原创最新推荐文章于 2022-07-28 21:14:32 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #function #border #xhtml #html

jQuery 专栏收录该内容

56 篇文章

订阅专栏

本文澄清了一个常见的jQuery使用误区，即并非必须使用$(document).ready()函数来包裹所有的DOM操作。通过示例展示了直接进行DOM操作的可能性，并提供了具体的HTML、CSS及JavaScript代码实现。

从一开始接触jquery，一直以为如果想使用jquery，必须在script里写上

$(document).ready(function(){

});

这段代码，然后才能对DOM元素操作。

今天再看《Build iPhone APP with html css javascript》的时候，才发现自己的理解有误。其实，如果引入jquery库后，就可以对DOM元素操作了。写法和标准的JavaScript相同。

示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.test{border:1px solid;}</style> <mce:script type="text/javascript" src="lib/jquery/jquery-1.4.2.js" mce_src="lib/jquery/jquery-1.4.2.js"></mce:script> <mce:script type="text/javascript" src="jquery_sample.js" mce_src="jquery_sample.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <p>测试jquery function 是否需要 <pre> $(document).ready(function(){ }); </pre> </p> <span class="test" onclick="spanfunction()">This is a span.</span> </body> </html>