学习JQuery - 14

第5章 操纵DOM

1. 操作属性

我们在第四章已经使用jQuery来读取和设置CSS,在本章我们使用jQuery来操作DOM。

本节介绍一个常用的方法:attr()

参数:属性名和属性值

例如,我们把下面的链接上增加提示

js代码

$('div.chapter a').attr('title', 'external');

html文件见附录。

当我们获取属性值的时候,必须是定义的。

js代码

window.alert($('p.square').attr('font'));

学习JQuery - 14

如下代码即可正常运行

window.alert($('p.square').attr('class'));

学习JQuery - 14

当我们要设置多个值时,需要使用大括号。

js代码

$('div.chapter a').attr({ title: 'This is Demo', id: function(index, oldValue) {return 'wikilink-' + index;} });

我们使用Chrome来观看设置结果。按F12进入Developer Tools
学习JQuery - 14

在HTML中有一类经常使用的便签:input。

在这个标签里都会有“value”属性,为了简便读取或者设置他,我们使用val()。

读取

var inputVal = $('#input1').val();

设置

$('#input1').val('0');

附:

chapter5-1.html

Flatland <script src="jquery-1.10.2.js"></script> <script src="chapter05-1.js"></script>

Flatland: A Romance of Many Dimensions

by Edwin A. Abbott

Part 1, Section 3

Concerning the Inhabitants of Flatland

an excerpt

Our Professional Men and Gentlemen are Squares (to which class I myself belong) and Five-Sided Figures or Pentagons.

Next above these come the Nobility, of whom there are several degrees, beginning at Six-Sided Figures, or Hexagons, and from thence rising in the number of their sides till they receive the honourable title of Polygonal, or many-Sided. Finally when the number of the sides becomes so numerous, and the sides themselves so small, that the figure cannot be distinguished from a circle, he is included in the Circular or Priestly order; and this is the highest class of all.

It is a Law of Nature with us that a male child shall have one more side than his father, so that each generation shall rise (as a rule) one step in the scale of development and nobility. Thus the son of a Square is a Pentagon; the son of a Pentagon, a Hexagon; and so on.

But this rule applies not always to the Tradesman, and still less often to the Soldiers, and to the Workmen; who indeed can hardly be said to deserve the name of human Figures, since they have not all their sides equal. With them therefore the Law of Nature does not hold; and the son of an Isosceles (i.e. a Triangle with two sides equal) remains Isosceles still. Nevertheless, all hope is not such out, even from the Isosceles, that his posterity may ultimately rise above his degraded condition.…

Rarely—in proportion to the vast numbers of Isosceles births—is a genuine and certifiable Equal-Sided Triangle produced from Isosceles parents. "What need of a certificate?" a Spaceland critic may ask: "Is not the procreation of a Square Son a certificate from Nature herself, proving the Equal-sidedness of the Father?" I reply that no Lady of any position will marry an uncertified Triangle. Square offspring has sometimes resulted from a slightly Irregular Triangle; but in almost every such case the Irregularity of the first generation is visited on the third; which either fails to attain the Pentagonal rank, or relapses to the Triangular. Such a birth requires, as its antecedents, not only a series of carefully arranged intermarriages, but also a long-continued exercise of frugality and self-control on the part of the would-be ancestors of the coming Equilateral, and a patient, systematic, and continuous development of the Isosceles intellect through many generations.

The birth of a True Equilateral Triangle from Isosceles parents is the subject of rejoicing in our country for many furlongs round. After a strict examination conducted by the Sanitary and Social Board, the infant, if certified as Regular, is with solemn ceremonial admitted into the class of Equilaterals. He is then immediately taken from his proud yet sorrowing parents and adopted by some childless Equilateral. The Equilateral is bound by oath never to permit the child henceforth to enter his former home or so much as to look upon his relations again, for fear lest the freshly developed organism may, by force of unconscious imitation, fall back again into his hereditary level.

How admirable is the Law of Compensation! And how perfect a proof of the natural fitness and, I may almost say, the divine origin of the aristocratic constitution of the States of Flatland! By a judicious use of this Law of Nature, the Polygons and Circles are almost always able to stifle sedition in its very cradle, taking advantage of the irrepressible and boundless hopefulness of the human mind.…

Then the wretched rabble of the Isosceles, planless and leaderless, are ether transfixed without resistance by the small body of their brethren whom the Chief Circle keeps in pay for emergencies of this kind; or else more often, by means of jealousies and suspicious skillfully fomented among them by the Circular party, they are stirred to mutual warfare, and perish by one another's angles. No less than one hundred and twenty rebellions are recorded in our annals, besides minor outbreaks numbered at two hundred and thirty-five; and they have all ended thus.

Read the complete text of Flatland.

html>

chapter05.css

/*************************************** Default Styles ***************************************/ html, body { margin: 0; padding: 0; } body { font: 62.5% Verdana, Helvetica, Arial, sans-serif; color: #000; background: #fff; } #container { font-size: 1.2em; margin: 10px 2em; } h1 { font-size: 2.5em; margin-bottom: 0; } h2 { font-size: 1.3em; margin-bottom: .5em; } h3 { font-size: 1.1em; margin-bottom: 0; } code { font-size: 1.2em; } a { color: #06581f; } /*************************************** Chapter Styles ***************************************/ .chapter { margin-right: 200px; } #f-title { font-size: 1.5em; } #excerpt { font-style: italic; } span.footnote { font-style: italic; font-family: "Times New Roman", Times, serif; display: block; margin: 1em 0; } .chapter span.footnote { display: inline; } .text-reference { font-weight: bold; } #notes { margin-top: 1em; border-top: 1px solid #dedede; } #notes li { margin: 1em 0; } #footer { margin-top: 1em; border-top: 1px solid #dedede; } .pulled { background: #e5e5e5; position: absolute; width: 120px; top: -20px; right: -180px; padding: 20px; font: italic 1.2em "Times New Roman", Times, serif; } .rounded-top { background: transparent url(rounded-top.png) no-repeat scroll left top; width: 160px; padding: 20px 0 0 0; } .rounded-bottom { background: transparent url(rounded-bottom.png) no-repeat scroll left bottom; width: 120px; padding: 0 20px 20px 20px; } .inhabitants { border-left: 5px solid #800; padding-left: 5px; }

chapter05-1.js

$(document).ready(function() { $('div.chapter a').attr({ title: 'This is Demo', id: function(index, oldValue) {return 'wikilink-' + index;} }); });

分类:默认分类 时间:2012-01-13 人气:5
本文关键词:
分享到:

相关文章

  • jQuery 的对象构建.初始化 2012-01-01

    jQuery 作为当今最优秀的js 类库之一,必须是要花时间好好学习下的,今天正好蛋疼,读了里面一些代码,小结一下: 整个类库定义在一匿名函数中,杜绝了全局变量的产生; 将undefined 作为缺失的参数传递,防止了undefined 变量的污染; 可以看出$(...) 实际上返回的是jQuery.fn.init 对象的实例,随后将该对象的prototype 指向了jQuery.prototype (语句jQuery.fn.init.prototype = jQuery.fn),因此产生的实例

  • 强大的JQuery(三)--操作html与遍历 2012-01-05

    前两篇博客讲到了JQuery的基础知识以及其动画效果,本篇将为大家介绍jquery操纵html以及jquery的遍历。 一、jquery操作html 1.获取内容和属性 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 attr()- 方法用于获取属性值。 实例: $("#btn1").click(function(){ alert("Text: " + $("#test").text())

  • JQuery UI Dialog的样式设置问题 2012-01-05

    本篇文章主要是对JQuery中UI Dialog的样式设置问题进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 最近在用一个JQUERY UI Dialog的插件,感觉特别强大,但样式设置比较麻烦,研究了俩天终于搞定了。 运行插件,需要的环境如下 <script src="../../JS/jquery-1.4.2.js" type="text/javascript"></script> <script src="../JS/jquery.ui.j

  • jquery中对于批量deferred的处理方法 2012-01-07

    这篇文章主要介绍了jquery中对于批量deferred的处理方法,有需要的朋友可以参考一下 此代码仿照jquery源码中$.when()的实现 代码如下: function test(i) { var dfd = $.Deferred(); if(i%2 == 0) { console.log("resolve " + i); dfd.resolve(); } else { console.log("failure " + i); dfd.reject(); } return dfd.prom

  • jQuery父级以及同级元素查找的实例 2012-01-12

      父级以及同级元素的查找在使用过程中还是蛮频繁的,下面为大家介绍下jQuery是如何实现的,感兴趣的朋友可以参考下   jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$(“span”).parent()或者$(“span”).parent(“.class”)   jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素   jQuery.children(expr).返回所有子节点,这个方

  • jQuery对select操作小结(遍历option,操作option) 2012-01-17

    本篇文章是关于jQuery对select的操作进行了总结介绍,需要的朋友可以参考下 //遍历option和添加、移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){ $("select[@name=ISHIPTYPE] option").each(function(){ if($(this).val(

  • jQuery中Dom的基本操作小结 2012-01-20

    本篇文章主要是对jQuery中Dom的基本操作进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 jquery中各个节点的基本操作 代码如下: <!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/xht

  • jQuery-DesktopGrid 2012-01-20

    jQueryDesktopGrid jQuery desktop, jQuery desktop grid, jQuery mac os x, jQuery system. to make an beautiful desktop like os system to enhance user experience. clone the project, then just run the index.html, you will see the demo. About author qq 195

  • jQuery MiniUI 快速入门:Hollo, world!(二) 2012-01-21

    我们开始编写第一个MiniUI程序,代码如下: <!DOCTYPE html /> <html> <head> <title> Hello MiniUI!</title> <!--jQuery js--> <script src="../jquery.js" type="text/javascript"></script> <!--MiniUI--> <link href="../t

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.048 (s). 10 q(s)