脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-ѧϰJQuery - 1,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
建议的开发环境:
1. web浏览器
(1) GOOGLE Chrome(V31.0.1650.63 m +)
(2) Firefox(V26.0+)
调试插件:Firebug(V1.12.5+)
2. HTML编辑器
Adobe Dreamweaver CS6(V12.0+)
3. jquery(V1.10.2+)
第一章:
请把下面的HTML文件中的“YKCOWREBBAJ”和“JABBERWOCKY”部分加高亮。
chapter1-1.html
by Lewis Carroll
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, -for it's all in some language I don't know, she said to herself.
It was like this.
sevot yhtils eht dna ,gillirb sawT'
;ebaw eht ni elbmig dna eryg diD
,sevogorob eht erew ysmim llA
.ebargtuo shtar emom eht dnA
She puzzled over this for some time, but at last a bright thought struck her. 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.
This was the poem that Alice read.
'Twas brillig, and the slithy toves
Did gyre and gimble in the wabe;
All mimsy were the borogoves,
And the mome raths outgrabe.
此HTML主要的由两个class为poem的p组成。
chapter01.css
@charset utf-8; /* CSS Document */ html, body { margin: 0; padding: 0; } body { font: 62.5% Verdana, Geneva, sans-serif; background: #fff; color: #000; } #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; } .poem { margin: 0 2em; } .highlight { background-color: #ccc; border: 1px solid #888; font-style: italic; margin: 0.5em 0; padding: 0.5em; }本例主要用到.poem和.highlight。
把css中定义的“.highlight”增加到poem-stanza的p中
chapter01.js
$(document).ready(function() { $('p.poem-stanza').addClass('highlight'); });
其中
$(document).ready(function() { // TODO });是JQuery的标准写法。只要我们使用JQuery都要在TODO中编写代码。
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-ѧϰJQuery - 1全部内容,希望文章能够帮你解决javascript代码实例教程-ѧϰJQuery - 1所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。