JQuery 查询文档元素

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 会找使用样式的元素并将新的样式加上去,而只写一三行的代码。

JQuery 查询文档元素相关推荐

1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画...
这周的学习让我初步了解到JQuery作为js库的封装的伟大性.Write less Do more 才是我们真正应该做到的! 1.jQuery基础语法 · 链式编程 $("#div1&quo ...
选取文档元素的API
除了现在常用的选取API 1 document.getElementById() 2 document.getElementsByName() 3 document.getElementsByTagN ...
jQuery基础文档(持续更新)
文章目录 jQuery基础文档(持续更新) 1 jQuery入门仪式: jQuery基础文档(持续更新) 1 jQuery入门仪式: 还是先上一段代码吧,对照这看: <!DOCTYPE html ...
jQuery (筛选文档处理)
大家好,我是小陽,我又来了,今天我给大家带来的是jQuery的筛选and文档处理,希望能给大家带来一些知识上的帮助! 目录一.思维导图二.jQuery的筛选三.jQuery的文档处理一.思维导 ...
DOM概述选取文档元素
脚本化文档客户端js的存在使得静态的html文档变成了可交付式的web应用 DOM概述文档对象(DOM)是表示和操作html和xml文档内容的基础api. <!doctype html> ...
jquery获取文档高度和窗口高度的例子
jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...
elasticsearch查询文档数量
查询文档数量时很常见的操作,一般可以直接使用count获取文档数,但是获取到数量信息,在[分页]应用中,意味着需要查询分页然后再查询总数. 有另一种方法,可以让我们在一次查询中获取分页数据并得到总量. ...
DOM概述选取文档元素 1
脚本化文档客户端js的存在使得静态的html文档变成了可交付式的web应用 DOM概述文档对象(DOM)是表示和操作html和xml文档内容的基础api. <!doctype html> ...
利用xsl和xml转html没有内容_HTML文档元素的属性介绍
这节内容是"VBA信息获取与处理"教程中第八个专题"VBA与HTML文档"的第四节.这个专题内容比较枯燥,但确实是非常重要的内容,在平台发表时甚至不可以直接导入 ...

JQuery 查询文档元素

JQuery 查询文档元素相关推荐

最新文章

热门文章