×

CH3Jquery基础教程

下载文档

ID：40532621

大小：312.81 KB

页数：11页

时间：2019-08-04

收藏

资源描述：

《CH3Jquery基础教程》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CH3创建HTML文本:

StyleSwitcher

Normal

NarrowColumn

LargePrint

2、到如下外观:首先.来编写LargePrint按钮的功能.需要一点CSS代码来实现页面的替换视图:body.larg.chapter{font-size:1.5em;}然后，编写Jquery脚本：$(document).ready(function(){$('#switcher-large').bind('click',function(){$('body').addClass('large');});});启用其他按钮：$(document).ready(function(){$('#switcher-defa

3、ult').bind('click',function(){$('body').removeClass('narrow');$('body').removeClass('large');});$('#switcher-narrow').bind('click',function(){$('body').addClass('narrow');$('body').removeClass('large');});$('#switcher-large').bind('click',function(){$('body'

4、).removeClass('narrow');$('body').addClass('large');});});添加配套的CSS规则：body.large.chapter{font-size:1.5em;}body.narrow.chapter{width:400px;}现在如果单机NarrowCulumn按钮和LargePrint按钮，随着相应的CSS生效，页面外观会如下所示：NarrowColumnLargePrint虽然样式传唤器的功能很正常，但我们并没有就哪个按钮处于当前在用状态对用户给出反馈，为此

5、，我们的方法是在按钮被单机时，为他应用selected类，同事从其他按钮上移除这个类：.selected{font-weight:bold;}当出发任何事件处理程序时，关键字this引用的都是些携带响应行为的DOM元素，$()函数可以将一个DOM元素作为参数，而this关键字正事这个功能有效的关键原因之一，通过在时间处理程序中使用$(this)，可以为响应的元素创建一个Jquery对象，然后就如同使用CSS选择符找到该元素一样对他进行操作：$(this).addClass('selected');将这行代码放到

6、三个时间处理的程序中。从其他按钮中移除这个类，可以利用Jquery的隐式迭代特性，利用下行代码会移除样式转换器中的每个按钮的selected类：$('#switcher.button').removeClass('selected');按照正确的次序防止它就可以得到如下代码：$(document).ready(function(){$('#switcher-default').bind('click',function(){$('body').removeClass('narrow');$('body').re

7、moveClass('large');$('#switcher.button').removeClass('selected');$(this).addClass('selected');});$('#switcher-narrow').bind('click',function(){$('body').addClass('narrow');$('body').removeClass('large');$('#switcher.button').removeClass('selected');$(this).a

8、ddClass('selected');});$('#switcher-large').bind('click',function(){$('body').removeClass('narrow');$('body').addClass('large');$('#switcher.button').removeClass('selected');$(this).addClass('se