欢迎光临散文网 会员登陆 & 注册

Java Web：jquery，基础DOM和CSS操作 ，PPT，阅读材料，作业，笔记，代码【诗书画唱】

2020-11-14 00:19 作者:诗书画唱  | 我要投稿


元素样式操作例子：

$(function(){

//鼠标点击次数

var count = 0;

$('#dv').click(function(){

//this就是id为dv的div

count ++;

$(this).toggleClass('bg', count% 3 == 0);

});

})



<div id="dv">Hello world</div>


DOM创作例子：



<!doctype html>

<html>

    <head>

        <title>Document</title>

<style type="text/css">

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 {

  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 {

  position: absolute;

  width: 120px;

  top: -20px;

  right: -180px;

  padding: 20px;

  font: italic 1.2em "Times New Roman", Times, serif;

  background: #e5e5e5;

  border: 1px solid #999;

  border-radius: 8px;

  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);

}



.inhabitants {

  border-left: 5px solid #800;

  padding-left: 5px;

}



</style>

<script type="text/javascript" srcc="jquery-1.11.1.min.js"></script>

        <script type="text/javascript">

    $(document).ready(function() {

//非样式属性

                $('div.chapter a[href*="wikipedia"]').attr({     

rel: 'external',     

title: function() {       

return 'Learn more about ' + $(this).text() + ' at Wikipedia.';     

},

//参数oldValue为修改之前该属性的值

id: function(index, oldValue) {       

return 'wikilink-' + index;     

}   

});  


//DOM元素属性

//取得"checked"属性的当前值 var currentlyChecked = $('.my-checkbox').prop('checked'); 

//设置"checked"属性的值 $('.my-checkbox').prop('checked', false); 

//prop()方法与attr()方法没有什么不同，比如它们都可以一次性接受一个包含多个值的对象，也支持值回调函数。


//表单控件的值

//在取得和设置表单控件的值时，不要使用.attr()方法。而对于选项列表呢，连.prop()方法也不要使用。建议使用jQuery提供的.val() 方法

//取得文本输入框的当前值 

//var inputValue = $('#my-input').val(); 

//取得选项列表的当前值 

//var selectValue = $('#my-select').val(); 

//设置单选列表的值 

//$('#my-single-select').val('value3'); 

//设置多选列表的值 

//$('#my-multi-select').val(['value1', 'value2']); 


//DOM树操作

//创建新元素

$('<a href="#top">back to top</a>').insertAfter('div.chapter p');   

$('<a id="top"></a>').prependTo('body');   


//在其他元素前、后插入新内容的一套方案

//insertBefore()在现有元素外部、之前添加内容；  

//prependTo()在现有元素内部、之前添加内容；  

//appendTo()在现有元素内部、之后添加内容；  

//insertAfter()在现有元素外部、之后添加内容。 


//移动元素

//提取脚注，然后把它们插入到文档的底部，具体来说，就是插入到<div>和<div id = "footer">之间。

//$('span.footnote').insertBefore('#footer'); 


//包装元素

//变化1：隐式迭代包装

/*$('span.footnote').insertBefore('#footer')

.wrapAll('<ol id="notes"></ol>')     

.wrap('<li></li>');*/

//变化2：显示迭代包装

                /*var $notes = $('<ol id="notes"></ol>').insertBefore('#footer');   

$('span.footnote').each(function(index) {

//为每个标注编号

//这里的操作顺序十分重要。必须要在脚注被移动之前插入这个编码，否则就找不到原始位置了

$('<sup>' + (index + 1) + '</sup>').insertBefore(this);     

$(this).appendTo($notes).wrap('<li></li>');   

});*/  


//变化3：反向插入

//像insertBefore()和appendTo()这样的插入方法，一般都有一个对应的反向方法。反向方法也执行相同的操作，只不过“目标”和“内容”正好相反

/*var $notes = $('<ol id="notes"></ol>').insertBefore('#footer');   

$('span.footnote').each(function(index) {     

    $(this).before('<sup>' + (index + 1) + '</sup>')       

.appendTo($notes)       

.wrap('<li></li>');   

});*/


//变化4:减少字符串拼接的+号

var $notes = $('<ol id="notes"></ol>').insertBefore('#footer');   

$('span.footnote').each(function(index) {     

    $(this).before([

    //在文本中的位置上创建一个指向对应脚注的链接

    '<a href="#footnote-',         

index + 1,         

'" id="context-',         

index + 1,         

'">',         

'<sup>',         

index + 1,         

'</sup></a>'

].join(''))       

.appendTo($notes)

    //在脚注中创建返回文本位置的链接(context链接)

.append([

    '&nbsp;(<a href="#context-',         

index + 1,         

'">context</a>)'       

].join('')) 

.wrap('<li id="footnote-' + (index + 1) + '"></li>');   

});


//复制元素

//在复制元素时，需要使用jQuery的clone()方法，这个方法能够创建任何匹配的元素集合的副本以便将来使用

//创建<div>中第一段落的副本并插入到<div>前

                //$('div.chapter p:eq(0)').clone().insertBefore('div.chapter'); 


//连同事件一起复制 

//在默认情况下，clone()方法不会复制匹配的元素或其后代元素中绑定的事件。

//不过，可以为这个方法传递一个布尔值参数，将这个参数设置为true， 就可以连同事件一起复制，即clone(true)。


//通过复制创建突出引用

/*$('span.pull-quote').each(function(index) {     

var $parentParagraph = $(this).parent('p');     

//父容器p背景色被染成了红色，引用的内容距离上p顶-20px

//当为pull-quote设置right属性时，值为0会使 pull-quote的右边与其父元素的右边对齐。

//如果设置为-180则表示往反方向（左边）移动

$parentParagraph.css('position', 'relative').css('backgroundColor','red');     

var $clonedCopy = $(this).clone();     

$clonedCopy.addClass('pulled').prependTo($parentParagraph);   

});*/


//设置内容

$('span.pull-quote').each(function(index) {     

var $parentParagraph = $(this).parent('p');     

$parentParagraph.css('position', 'relative');  

                    var $clonedCopy = $(this).clone();     

$clonedCopy.addClass('pulled').

find('span.drop')

//html实体表示省略号

.html('&hellip;')

.end()

.prependTo($parentParagraph);   

});


//dom操作总结

//(1) 要在HTML中创建新元素，使用$()函数。 

//(2) 要在每个匹配的元素中插入新元素，使用：  

//append()  

//appendTo()  

//prepend()  

//prependTo() 

                //(3) 要在每个匹配的元素相邻的位置上插入新元素，使用：  

//after()  

//insertAfter()  

//before()  

//insertBefore() 

//(4) 要在每个匹配的元素外部插入新元素，使用：  

//wrap()  

//wrapAll()  

//wrapInner() 

//(5) 要用新元素或文本替换每个匹配的元素，使用：  

//html()  

//text()  

//replaceAll()  

//replaceWith() 

//(6) 要移除每个匹配的元素中的元素，使用：  

//empty() 

//(7) 要从文档中移除每个匹配的元素及其后代元素，但不实际删除它们，使用：  

//remove()  

//detach()


}); 

</script>

    </head>

    <body>

        <div id="container">

            <h1 id="f-title">Flatland: A Romance of Many Dimensions</h1>

            <div id="f-author">by Edwin A. Abbott</div>

            <h2>Part 1, Section 3</h2>

            <h3 id="f-subtitle">Concerning the Inhabitants of Flatland</h3>

            <div id="excerpt">an excerpt</div>


            <div>

<p>Our Professional Men and Gentlemen are Squares (to which class I myself belong) and Five-Sided Figures or <a href="http://en.wikipedia.org/wiki/Pentagon">Pentagons</a>.</p>


<p class="nobility hexagon">Next above these come the Nobility, of whom there are several degrees, beginning at Six-Sided Figures, or <a href="http://en.wikipedia.org/wiki/Hexagon">Hexagons</a>, and from thence rising in the number of their sides till they receive the honourable title of <a href="http://en.wikipedia.org/wiki/Polygon">Polygonal</a>, 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 <a href="http://en.wikipedia.org/wiki/Circle">circle</a>, he is included in the Circular or Priestly order; and this is the highest class of all.</p>


<p><span>It is a Law of Nature <span>with us</span> that a male child shall have <strong>one more side</strong> than his father</span>, 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.</p>


<p>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.&hellip;</p>


<p>Rarely&mdash;in proportion to the vast numbers of Isosceles births&mdash;is a genuine and certifiable Equal-Sided Triangle produced from Isosceles parents. <span>"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.</span> 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.</p>


<p><span>The birth  of a True Equilateral Triangle from Isosceles parents is the subject of rejoicing in our country <span>for many furlongs round</span>.</span> 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. <span>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.</span></p>


<p>How admirable is the Law of Compensation! <span>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!</span> 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.&hellip;</p>


<p>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.</p>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

            </div>

            <div id="footer">

                <p>Read the

    <a href="http://web.archive.org/web/20050208012252/http://www.ibiblio.org/eldritch/eaa/FL.HTM">complete text of <i>Flatland</i></a>.

</p>

            </div>

        </div> 

    </body>

</html>



作业：

  <!--

(1) 修改添加back to top链接的代码，以便这些链接只从第四段后面才开始出现。 

(2) 在单击back to top链接时，为每个链接后面添加一个新段落，其中包含You were here字样。 确保链接仍然有效。 

(3) 在单击作者名字时，把文本改为粗体（通过添加一个标签，而不是操作类或CSS属性）。 

(4) 挑战：在随后单击粗体作者名字时，删除之前添加的<b>元素（也就是在粗体文本与正常文本之间切换）。 

(5) 挑战：为正文中的每个段落添加一个inhabitants类，但不能调用.addClass()方法(css())。 确保不影响现有的类。   

-->


//1

$(document).ready(function(){

    var $p=$('div.chapter p').eq(2).nextAll();

    $('<a href="#top">back to top</a>').insertAfter($p);

    $('<a id="top"></a>').prependTo('body');

})



//2


$(document).ready(function(){

    var $p=$('div.chapter p').eq(2).nextAll();

    $('<a href="#top">back to top</a>').insertAfter($p);

    $('<a id="top"></a>').prependTo('body');

    $('a[href$=#top]').click(function(){

        $('<p>You were here</p>').insertAfter(this);

    })

})

//3

$(document).ready(function(){

    var $name=$('div.chapter p a');

    $name.click(function(){

        $(this).wrap('<b></b>');

    })

})

//4


$(document).ready(function(){

     var $name=$('#f-author');

     $name.click(function(){

         if($(this).html()=="by Edwin A. Abbott"){

             $(this).html('<b>by Edwin A. Abbott</b>');

         }else{

         $(this).html('by Edwin A. Abbott');

              }

     })

})

//5

$(document).ready(function(){

    $('div.chapter p').attr({

        class:'+= inhabitants'

    });

})




<!doctype html>

<html>

    <head>

        <title>Document</title>

<style type="text/css">

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 {

  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 {

  position: absolute;

  width: 120px;

  top: -20px;

  right: -180px;

  padding: 20px;

  font: italic 1.2em "Times New Roman", Times, serif;

  background: #e5e5e5;

  border: 1px solid #999;

  border-radius: 8px;

  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);

}



.inhabitants {

  border-left: 5px solid #800;

  padding-left: 5px;

}



</style>

<script type="text/javascript" srcc="jquery-1.11.1.min.js"></script>

        <script type="text/javascript">

    $(document).ready(function() {

                $('div.chapter a[href*="wikipedia"]').attr({     

rel: 'external',     

title: function() {       

return 'Learn more about ' + $(this).text() + ' at Wikipedia.';     

},

id: function(index, oldValue) {       

return 'wikilink-' + index;     

}   

});  


$('<a href="#top">back to top</a>').insertAfter('div.chapter p');   

$('<a id="top"></a>').prependTo('body');   


var $notes = $('<ol id="notes"></ol>').insertBefore('#footer');   

$('span.footnote').each(function(index) {     

    $(this).before([

    '<a href="#footnote-',         

index + 1,         

'" id="context-',         

index + 1,         

'">',         

'<sup>',         

index + 1,         

'</sup></a>'

].join(''))       

.appendTo($notes)

.append([

    '&nbsp;(<a href="#context-',         

index + 1,         

'">context</a>)'       

].join('')) 

.wrap('<li id="footnote-' + (index + 1) + '"></li>');   

});


$('span.pull-quote').each(function(index) {     

var $parentParagraph = $(this).parent('p');     

$parentParagraph.css('position', 'relative');  

                    var $clonedCopy = $(this).clone();     

$clonedCopy.addClass('pulled').

find('span.drop')

.html('&hellip;')

.end()

.prependTo($parentParagraph);   

});

}); 




//1

$(document).ready(function(){

    var $p=$('div.chapter p').eq(2).nextAll();

    $('<a href="#top">back to top</a>').insertAfter($p);

    $('<a id="top"></a>').prependTo('body');

})



//2


$(document).ready(function(){

    var $p=$('div.chapter p').eq(2).nextAll();

    $('<a href="#top">back to top</a>').insertAfter($p);

    $('<a id="top"></a>').prependTo('body');

    $('a[href$=#top]').click(function(){

        $('<p>You were here</p>').insertAfter(this);

    })

})

//3

$(document).ready(function(){

    var $name=$('div.chapter p a');

    $name.click(function(){

        $(this).wrap('<b></b>');

    })

})

//4


$(document).ready(function(){

     var $name=$('#f-author');

     $name.click(function(){

         if($(this).html()=="by Edwin A. Abbott"){

             $(this).html('<b>by Edwin A. Abbott</b>');

         }else{

         $(this).html('by Edwin A. Abbott');

              }

     })

})

//5

$(document).ready(function(){

    $('div.chapter p').attr({

        class:'+= inhabitants'

    });

})

</script>

    </head>

    <body>

    <!--

(1) 修改添加back to top链接的代码，以便这些链接只从第四段后面才开始出现。 

(2) 在单击back to top链接时，为每个链接后面添加一个新段落，其中包含You were here字样。 确保链接仍然有效。 

(3) 在单击作者名字时，把文本改为粗体（通过添加一个标签，而不是操作类或CSS属性）。 

(4) 挑战：在随后单击粗体作者名字时，删除之前添加的<b>元素（也就是在粗体文本与正常文本之间切换）。 

(5) 挑战：为正文中的每个段落添加一个inhabitants类，但不能调用.addClass()方法(css())。 确保不影响现有的类。   

-->



        <div id="container">

            <h1 id="f-title">Flatland: A Romance of Many Dimensions</h1>

            <div id="f-author">by Edwin A. Abbott</div>

            <h2>Part 1, Section 3</h2>

            <h3 id="f-subtitle">Concerning the Inhabitants of Flatland</h3>

            <div id="excerpt">an excerpt</div>


            <div>

<p>Our Professional Men and Gentlemen are Squares (to which class I myself belong) and Five-Sided Figures or <a href="http://en.wikipedia.org/wiki/Pentagon">Pentagons</a>.</p>


<p class="nobility hexagon">Next above these come the Nobility, of whom there are several degrees, beginning at Six-Sided Figures, or <a href="http://en.wikipedia.org/wiki/Hexagon">Hexagons</a>, and from thence rising in the number of their sides till they receive the honourable title of <a href="http://en.wikipedia.org/wiki/Polygon">Polygonal</a>, 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 <a href="http://en.wikipedia.org/wiki/Circle">circle</a>, he is included in the Circular or Priestly order; and this is the highest class of all.</p>


<p><span>It is a Law of Nature <span>with us</span> that a male child shall have <strong>one more side</strong> than his father</span>, 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.</p>


<p>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.&hellip;</p>


<p>Rarely&mdash;in proportion to the vast numbers of Isosceles births&mdash;is a genuine and certifiable Equal-Sided Triangle produced from Isosceles parents. <span>"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.</span> 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.</p>


<p><span>The birth  of a True Equilateral Triangle from Isosceles parents is the subject of rejoicing in our country <span>for many furlongs round</span>.</span> 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. <span>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.</span></p>


<p>How admirable is the Law of Compensation! <span>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!</span> 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.&hellip;</p>


<p>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.</p>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

            </div>

            <div id="footer">

                <p>Read the

    <a href="http://web.archive.org/web/20050208012252/http://www.ibiblio.org/eldritch/eaa/FL.HTM">complete text of <i>Flatland</i></a>.

</p>

            </div>

        </div> 

    </body>

</html>


标签：

Java Web：jquery，基础DOM和CSS操作 ，PPT，阅读材料，作业，笔记，代码【诗书画唱】的评论 (共 条)

分享到微博请遵守国家法律