JQuery 查询文档元素

最新推荐文章于 2022-07-11 07:34:00 发布

lilp_ndsc

最新推荐文章于 2022-07-11 07:34:00 发布

阅读量2.4k

点赞数

分类专栏： jQuery 读书笔记文章标签： jquery 文档 class div stylesheet xhtml

jQuery 读书笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JQuery

jQuery 为web脚本编程提供了通用的抽象层,使得它几乎用于任何脚本编程的情形。

jQuery 能够满足如下功能：

l 取得页面的元素

l 修改页面的外观

l 改变页面的内容

l 响应用户页面的操作

l 为页面添加动态效果

l 无需刷新页面即可从服务器获取信息

l 简化常见的javascript 任务

开发前准备:

jquery.js jQuery 的类库

开发第一个jquery 例子:

创建一个HMTL文件 index.html 内容如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="alice.css" mce_href="alice.css" type="text/css"/> <mce:script src="jquery.js" mce_src="jquery.js" type="text/javascript"></mce:script> <mce:script src="alice.js" mce_src="alice.js" type="text/javascript"></mce:script> <title>Through the Looking-Glass</title> </head> <body> <h1>Through the Looking-Glass</h1> <div class="author">by Lewis Carroll</div> <div class="chapter" id="chapter-1"> <h2 class="chapter-title">1. Looking-Glass House</h2> <p>There was a book lying near Alice on the table, and while she sat watching the White King (for she was still a little anxious about him, and had the ink all ready to throw over him, in case he fainted again), she turned over the leaves, to find some part that she could read, <span class="spoken">"—for it's all in some language I don't know,"</span> she said to herself.</p> <p>It was like this.</p> <div class="poem"> <h3 class="poem-title">YKCOWREBBAJ</h3> <div class="poem-stanza"> <div>sevot yhtils eht dna ,gillirb sawT'</div> <div>;ebaw eht ni elbmig dna eryg diD</div> <div>,sevogorob eht erew ysmim llA</div> <div>.ebargtuo shtar emom eht dnA</div> </div> </div> <p>She puzzled over this for some time, but at last a bright thought struck her. <span class="spoken">"Why, it's a Looking-glass book, of course! And if I hold it up to a glass, the words will all go the right way again."</span></p> <p>This was the poem that Alice read.</p> <div class="poem"> <h3 class="poem-title">JABBERWOCKY</h3> <div class="poem-stanza"> <div>'Twas brillig, and the slithy toves</div> <div>Did gyre and gimble in the wabe;</div> <div>All mimsy were the borogoves,</div> <div>And the mome raths outgrabe.</div> </div> </div> </div> <div class="poem-stanza"> my dear!I love you!!! </div> </body> </html>

创建一个slice.css 样式表文件，内容如下：

body { font: 62.5% Arial, Verdana, sans-serif; } h1 { font-size: 2.5em; margin-bottom: 0; } h2 { font-size: 1.3em; margin-bottom: .5em; } h3 { font-size: 1.1em; margin-bottom: 0; } .poem { margin: 0 2em; } .highlight { font-style: italic; border: 1px solid #888; padding: 0.5em; margin: 0.5em 0; background-color: #ffc; }

创建一个js文件，编写需要的jQuery代码,如下：

$(document).ready(function(){

$('.poem-stanza').addClass('highlight');

});

需要解释一下：

$代表一个jquery对象 $(document).ready() 是jQuery 预定的在页面加载完后可以执行一个操作。()中可以传一个函数。

$()是jQuery 查询文档元素的操作，（）里面可以传多种类型的参数：比较常用如下：

$(‘p’) 会取文档中的所有段落元素

$(‘#some-id’) 查找文档中使用 “some-id” ID的元素

$(“.some-class”) 查找文档中使用 “some-class” CSS类选择器的元素

上面一行码的意思就是：从文档中找到使用 poem-stanza 样式的元素，并给它替换成 highlight 样式.

执行效果如下： jQuery 会找使用样式的元素并将新的样式加上去,而只写一三行的代码。