JQUERY：DOM，生成二维码，on,bind,delegate区别，事件传播和默认操作【诗书画唱】
多播事件委托的原生JS代码：
提醒：下面的代码要想有效果就要注意相对路径等等：
可能以后会常用的遍历：
// var arr = $('input[name="demo"]');
// for(var i = 0;i < arr.length;i ++) {
// var e = arr[i];
// //$(e).attr('value',i + 1);
// $(e).val(i + 1);
// }
$('input[name="demo"]').attr('value',function(i){
//return的值就是value属性的修改值
return i + 1;
});
//设置title属性第n个输入文本框
$('input[name="demo"]').attr('title',function(i){
return '这是第' + (i + 1) + '个文本框';
});
生成扫后跳转到对应网站等链接的二维码：
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" srcc="js/qrcode.js" ></script>
$(document).ready(function(){
$('#code').qrcode("http://www.baidu.com"); //网址或者任意字符串
// $("#code").qrcode({
// render: "table", //table方式
// width: 200, //宽度
// height:200, //高度
// text: "www.taobao.com" //任意内容
// });
});
<div id="code"></div>
事件的例子集合：
<!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;
}
.poem {
margin: 0 5em;
}
.chapter {
margin: 1em;
}
.switcher {
float: right;
background-color: #ddd;
border: 1px solid #000;
margin: 10px;
padding: 10px;
font-size: .9em;
}
.switcher h3 {
margin: .5em 0;
}
#header {
clear: both;
}
/* 给large类和chaper类添加字体样式 */
body.large .chapter {
font-size: 1.5em;
}
body.narrow .chapter {
width: 250px;
}
.selected {
font-weight: bold;
}
.hidden {
display: none;
}
/*
:hover伪类选择符，这个选择符可以让样式表在用户鼠标指针
悬停在某个元素上时，影响元素的外观
*/
.hover {
cursor: pointer;
background-color: #afa;
}
</style>
<script type="text/javascript" srcc="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//关于on,bind,delegate的区别。
//1.选择器匹配到的元素比较多时，不要用bind()迭代绑定
//2.用id选择器时，可以用bind()
//3.需要给动态添加的元素绑定时，用delegate()或者on()
//4.用delegate()和on()方法，dom树不要太深
//5.尽量使用on()
/*$('#switcher-default').addClass('selected')
.on('click', function() {
$('body').removeClass('narrow');
$('body').removeClass('large');
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});
$('#switcher-narrow').on('click', function() {
$('body').addClass('narrow');
$('body').removeClass('large');
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});
$('#switcher-large').on('click', function() {
$('body').removeClass('narrow');
$('body').addClass('large');
//注意这里对3个按钮同时进行了移除操作
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
}); */
//简化1
//可以把负责突出显示的代码提取到一个单独的处理程序中，因为针对3个按钮的突出显示代码都一样
/*$('#switcher-default').addClass('selected')
.on('click', function() {
$('body').removeClass('narrow').removeClass('large');
});
$('#switcher-narrow').on('click', function() {
$('body').addClass('narrow').removeClass('large');
});
$('#switcher-large').on('click', function() {
$('body').removeClass('narrow').addClass('large');
});
$('#switcher button').on('click', function() {
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
}); */
//简化2
//removeClass()方法的参数是可选的，当省略参数时，该方法会移除元素中所有的类。
/*$('#switcher-default').addClass('selected')
.on('click', function() {
$('body').removeClass();
});
$('#switcher-narrow').on('click', function() {
$('body').removeClass().addClass('narrow');
});
$('#switcher-large').on('click', function() {
$('body').removeClass().addClass('large');
});
$('#switcher button').on('click', function() {
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});*/
//简化3
//把通用的处理程序转移到特殊的处理程序上方，
//因为removeClass()需要先于addClass()执行。
//在jquery中，事件绑定的函数总是按照注册顺序依次执行
/*$('#switcher-default').addClass('selected');
$('#switcher button').on('click', function() {
$('body').removeClass();
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});
$('#switcher-narrow').on('click', function() {
$('body').addClass('narrow');
});
$('#switcher-large').on('click', function() {
$('body').addClass('large');
});*/
//简化5
//根据单击的按钮不同，
//bodyClass变量的值可能是default、narrow或large。
//在用户单击<button id="switcher-default">时给<body>
//添加default类。
//虽然在这儿添加这个类也用不着，但与因此降低的复杂性相比，
//仅仅添加一个用不上的类名还是很划算的。
/*$('#switcher-default').addClass('selected');
$('#switcher button').on('click', function() {
var bodyClass = this.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});*/
//简化6
//鉴于为某个事件（例如简单的单击事件）绑定处理程序极为常用，
//jQuery提供了一种简化事 件操作的方式——简写事件方法，
//简写事件方法的原理与对应的.on()调用相同，
//可以减少一定的代码输入量。
/*$('#switcher-default').addClass('selected');
$('#switcher button').click(function() {
var bodyClass = this.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});*/
//变化1
//实现的效果是在标签上单击能够隐藏所有按钮后只剩一个标签；
//而再次单击标签则会恢复这些按钮
/*$('#switcher h3').click(function() {
$('#switcher button').toggleClass('hidden');
});*/
//变化2
//通过css中的hover伪类和jquery中的hover帮助函数实现翻转功能
/*$('#switcher h3').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});*/
//变化3
//这种改变会使样式转换器的整个区域都可以通过单击切换其可见性。
//但同时也造成了一个问题，即单击按钮会在修改内容区的样式之后折叠样式转换器。
/*$('#switcher').click(function() {
$('#switcher button').toggleClass('hidden');
});*/
//变化4
//为了在处理程序中使用事件对象，需要为函数添加一个参数event：
//事件处理程序中的变量event保存着事件对象。
//而event.target属性保存着发生事件的目标元素。
//这个属性是DOM API中规定的，但是没有在某些旧版本的浏览器中实现。
//jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都能够使用这个属性。
//通过.target，可以确定DOM中首先接收到事件的元素（即实际被单击的元素）。
//而this引用的刚好是处理事件的DOM元素
//注意，单击标签 <h3>同样什么也不会发生，因为它也是一个后代元素。
/*$('#switcher').click(function(event) {
if(event.target == this) {
$('#switcher button').toggleClass('hidden');
}
});*/
//变化5
//通过stopPropagation()方法完全阻止事件冒泡
$('#switcher-default').addClass('selected');
/*$('#switcher button').click(function(event) {
var bodyClass = this.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
//避免其他所有DOM元素响应这个事件
event.stopPropagation();
});
$('#switcher').click(function(event) {
$('#switcher button').toggleClass('hidden');
});*/
//默认操作：例如a标签的href页面跳转，表单提交等，都是默认的操作
//即便在事件对象上调用.stopPropagation()方法也不能禁止这种默认操作，
//因为默认操 作不是在正常的事件传播流中发生的。
//在这种情况下，preventDefault()方法则可以在触发默认操作之前终止事件。
$('#aLink').click(function(event){
alert('hello');
//阻止跳转到百度页面
event.preventDefault();
//阻止页面折叠
event.stopPropagation();
//注意：事件传播和默认操作是相互独立的两套机制，
//在二者任何一方发生时，都可以终止另一方。
//如果想要同时停止事件传播和默认操作，
//可以在事件处理程序中返回false，
//这是对在事件对象上同时调用stopPropagation()和preventDefault()的一种简写方式。
});
//变化6
//只有3个button元素注册了单击处理程序。
//假如想为更多元素注册处理程序怎么办？答案是：事件委托
//在DOM中的一个祖先元素上指定一个单击处理程序。
//由于事件会冒泡，未遭拦截的单击事件终会到达这个祖先元素，
//而我们可以在此时再作出相应处理。
/*$('#switcher').click(function(event) {
if ($(event.target).is('button')) {
var bodyClass = event.target.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected');
$(event.target).addClass('selected');
event.stopPropagation();
} else {
$('#switcher button').toggleClass('hidden');
}
});*/
//变化7
//实现点击Narrow Column或Large Print按钮时，
//switcher面板不进行折叠
//以下的写法会导致两个按钮的click处理程序也失效了
/*$('#switcher-narrow, #switcher-large').click(function() {
$('#switcher').off('click');
});*/
//变化7
//连续偶数次单击default按钮后，点击折叠面板无任何响应
//事实上，这是因为切换了hidden类偶数次，结果状态与开始的时候相同。
/*$('#switcher').click(function(event) {
if ($(event.target).is('button')) {
var bodyClass = event.target.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected');
$(event.target).addClass('selected');
event.stopPropagation();
}
});
var toggleSwitcher = function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
};
$('#switcher').on('click.collapse', toggleSwitcher);
$('#switcher-narrow, #switcher-large').click(function() {
$('#switcher').off('click.collapse');
});
$('#switcher-default').click(function() {
$('#switcher').on('click.collapse', toggleSwitcher);
})*/
//变化8
//为了解决变化7中的问题， 可以在用户单击任意按钮时解除绑定，
//并在确定单击按钮的ID是switcher-default的情况下再重新绑定
$('#switcher').click(function(event) {
if ($(event.target).is('button')) {
var bodyClass = event.target.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected');
$(event.target).addClass('selected');
event.stopPropagation();
}
});
var toggleSwitcher = function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
};
$('#switcher').on('click.collapse', toggleSwitcher);
$('#switcher button').click(function() {
$('#switcher').off('click.collapse');
if (this.id == 'switcher-default') {
$('#switcher').on('click.collapse', toggleSwitcher);
}
});
//模拟用户操作
//假设想让样式转换器面板在一开始时处于折叠状态。
//可以模拟单击样式转换器，以触发设定的折叠机制
//$('#switcher').trigger('click');
//trigger()方法提供了一组与on()方法相同的简写方法。
$('#switcher').click();
//给按钮绑定响应键盘事件
//如果想知道用户按了哪个键，应该侦听keyup或keydown事件；
//如果想知道用户输入的是什么字符，应该侦听keypress事件
var triggers = {
D: 'default',
N: 'narrow',
L: 'large'
};
$(document).keyup(function(event) {
//ascii是个数字
var ascii = event.which;
//转换成字符
var key = String.fromCharCode(ascii);
if (key in triggers) {
$('#switcher-' + triggers[key]).click();
}
});
});
</script>
</head>
<body>
<div id="container">
<div id="switcher">
<h3>Style Switcher</h3>
<button id="switcher-default">
Default
</button>
<button id="switcher-narrow">
Narrow Column
</button>
<button id="switcher-large">
Large Print
</button>
<a id="aLink" href="http://www.baidu.com" >点击测试</a>
</div>
<div id="header">
<h2>A Christmas Carol</h2>
<h2>In Prose, Being a Ghost Story of Christmas</h2>
<div>by Charles Dickens</div>
</div>
<div id="chapter-preface">
<h3>Preface</h3>
<p>Their faithful Friend and Servant,</p>
<p>C. D.</p>
<p>December, 1843.</p>
</div>
<div id="chapter-1">
<h3>Stave I: Marley's Ghost</h3>
<p>MARLEY was dead: to begin with. </p>
<p>Mind! </p>
<p>Scrooge knew he was dead? </p>
<p>The mention of Marley's funeral brings me back to the point I started from. </p>
<p>Scrooge never painted out Old Marley's name. </p>
<p>Oh!</p>
<p>External heat and cold had little influence on Scrooge. </p>
<p>Nobody ever stopped him in the street to say, with gladsome looks, "My dear Scrooge, how are you? </p>
<p>But what did Scrooge care! It was the very thing he liked. </p>
</div>
</div>
</body>
</html>
DOM和CSS操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.bg {
background-color: pink;
}
</style>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//将id为inp的元素的type属性修改为button
//document.getElementById('inp').type = 'button';
$('#inp').attr('type','button');
var str = '<img src="img/25.png" />';
//设置id为ctx的div中的html代码
$('#ctx').html(str);
//设置div中的文本
//$('#ctx').text(str);
//获取id为ctx的div中的html代码
var s = $('#ctx').html();
//alert(s);
//将id为inp的输入文本框中的值修改为admin
//document.getElementById('inp').value = 'admin';
$('#inp').val('admin');
//alert($('#inp').val());
//$('#inp')[0].value = 'admin';
//$('#inp').get(0).value='admin';
//$('#inp').attr('value','admin');
//document.getElementById('myImg').src = 'img/25.png';
$('#myImg').attr('src','img/25.png');
//获取id为myImg的元素的src属性值
//alert($('#myImg').attr('src'));
// alert($('#inp').attr('id'));
// alert(document.getElementById('inp').id);
// alert($('#inp')[0].id);
// alert($('#inp').get(0).id);
//将id为rd的元素的type属性设置为radio,value属性设置为男,name属性设置为sex
$('#rd').attr({
type:'radio',
value:'男',
name:'sex'
});
//将id为ig的元素的src属性修改为img/12.png,并且将它的name属性设置为mm
$('#ig').attr({
src:'img/12.png',
name:'mm'
});
// var arr = $('input[name="demo"]');
// for(var i = 0;i < arr.length;i ++) {
// var e = arr[i];
// //$(e).attr('value',i + 1);
// $(e).val(i + 1);
// }
$('input[name="demo"]').attr('value',function(i){
//return的值就是value属性的修改值
return i + 1;
});
//设置title属性第n个输入文本框
$('input[name="demo"]').attr('title',function(i){
return '这是第' + (i + 1) + '个文本框';
});
// var arr1 = $('input[name="demo"]');
// for(var i = 0;i < arr1.length;i ++) {
// var e = arr1[i];
// $(e).attr('title','这是第' + (i + 1) + '个文本框');
// }
//将页面中name属性为tt的所有的img标签设置对应图片
//要求第一个img标签显示1.png,第二个img标签显示2.png,第三个img标签显示3.png
$('img[name="tt"]').attr('src',function(i){
return 'img/' + (i + 1) + '.png';
});
//alert($('#inp').css('width'));
// var ds = $('div.bg');
// for(var i = 0;i < ds.length;i ++) {
// var e = ds[i];
// $(e).css('width',(i + 1) * 50 + 'px');
// }
$('div.bg').css('width',function(i){
return (i + 1) * 50 + 'px';
});
})
</script>
</head>
<body>
<div class="bg">AAA</div>
<div class="bg">BBB</div>
<div class="bg">CCC</div>
<img name="tt" />
<img name="tt" />
<img name="tt" />
<input name="demo" type="text"/>
<input name="demo" type="text"/>
<input name="demo" type="text"/>
<input id="inp" type="text" value="登录"/>
<div id="ctx"></div>
<img id="myImg" />
<input id="rd" />男
<img id="ig" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//$('div').wrapAll('<ul></ul>').wrap('<li></li>');
$('div').wrapAll('<table border="1"></table>').wrap('<tr><td></td></tr>');
});
</script>
</head>
<body>
<div>语文</div>
<div>数学</div>
<div>英语</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//在页面中插入一个下拉框
//var dom = '<select><option>本科</option><option>大专</option><option>高中</option></select>';
//将dom元素转换成jquery对象
//内部的前面：
//正向的插入元素
//$('body').append($(dom));
//反向的插入元素
//$(dom).appendTo($('body'));
//内部的后面：
//var btn = '<input type="button" value="选择" />';
//$('body').prepend($(btn));
//往id为ctx的元素的内部的前面添加一个<label>珠宝</label>标签
//往id为ctx的元素的内部的后面添加一个<a href="#">浏览</a>标签
var sc = '<label>珠宝</label>';
$('#ctx').prepend($(sc));
var cc = '<a href="#">浏览</a>';
$('#ctx').append($(cc));
$('p').append(function(i,html){
return i + 1;
});
// var arr = $('p');
// for(var i = 0;i < arr.length;i ++){
// //获取到选中的每个元素
// var e = arr[i];
// var html = $(e).html();
// $(e).append(i + 1);
// }
//往id为ctx的元素的外部的前面插入一个a链接
$('#ctx').before($('<a href="#">测试</a>'));
//往id为ctx的元素的外部的后面插入一个按钮
$('#ctx').after($('<input type="button" value="点击" />'));
});
</script>
</head>
<!-- 外部的前面 -->
<body>
<!-- 内部的前面 -->
<h1>学历</h1>
<div>Hello world</div>
<div id="ctx"><img src="img/1.png" /></div>
<p><span>A</span></p>
<p><span>B</span></p>
<p><span>C</span></p>
<!-- 内部的后面 -->
</body>
<!-- 外部的后面 -->
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
// document.getElementById('btn').onclick = function(e){
// alert(1);
// }
// document.getElementById('btn').onclick = function(e){
// alert(2);
// }
// document.getElementById('btn').onclick = function(e){
// alert(3);
// }
// document.getElementById('btn').addEventListener('click',function(){
// alert(1);
// })
// document.getElementById('btn').addEventListener('click',function(){
// alert(2);
// })
// document.getElementById('btn').addEventListener('click',function(){
// alert(3);
// })
//多播事件委托
// $('#btn').bind('click',function(e){
// alert(1);
// });
//简化写法
// $('#btn').click(function(e){
// alert(2);
// });
var obj = {cmd:'done'};
$('#btn').bind('click',obj,function(e){
//e.data其实就是obj
//alert(e['data'].cmd);
console.log(e);
})
});
</script>
</head>
<body>
<input type="button" id="btn" value="测试" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.myCss {
width: 64px;
height: 64px;
position: absolute;
left: 350px;
top: 150px;
}
</style>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$('body').keydown(function(e){
//获取到图片的位置
var os = $('#myImg').offset();
var t = os.top;
console.log('图片距离上边的距离是：' + t + '像素');
var l = os.left;
console.log('图片距离左边的距离是：' + l + '像素');
//图片的路径
var path = '';
if(e.keyCode === 38) {//上
t -= 20;
path = 'img/ele1.png';
} else if(e.keyCode === 40) {//下
t += 20;
path = 'img/ele2.png';
} else if(e.keyCode === 37) {//左
l -= 20;
path = 'img/ele3.png';
} else if(e.keyCode === 39) {//右
l += 20;
path = 'img/ele4.png';
}
//将位置的变化显示出来
$('#myImg').offset({
top: t,
left: l
});
//改变图片的src属性
$('#myImg').attr('src',path);
});
});
</script>
</head>
<body>
<img id="myImg" src="img/ele1.png" class="myCss" />
</body>
</html>
作业：
<!--
(1) 在Charles Dickens被单击时，给它应用selected样式。
(2) 在双击<h3 class="chapter-title">时，切换p文本的可见性。
(3) 当用户按下向右方向键时，切换到下一个body类；右方向键的键码是39。
(4) 挑战：使用console.log()函数记录在段落中移动的鼠标的坐标位置。
(5) 挑战：使用mousedown()和mouseup()跟踪页面中的鼠标事件。
如果鼠标按键在按下它的地方被释放，则为所有段落添加hidden类。
如果是在按下它的地方之下被释放的， 删除所有段落的hidden类。
-->
// // (1) 在Charles Dickens被单击时，给它应用 selected 样式。
$(document).ready(function() {
$('#header').on('click',function() {
$('.author').addClass('selected')
});
})
// (2) 在双击章标题（ <h3 class="chapter-title"> ）时，切换章文本的可见性。
$(document).ready(function() {
$('#chapter-preface').on('dblclick',function() {
$('.chapter-title').toggleClass('hidden');
})
})
// (3) 当用户按下向右方向键时，切换到下一个 body 类；右方向键的键码是 39 。
// var setBodyClass=function(className){
// $("body").removeClass().addClass(className);
// $(".switcher button").removeClass("selected");
// $("#switcher-"+className).addClass("selected");
// }
// //页面初始时默认为选中状态
// $("#switcher-default").addClass("selected");
// $(document).keyup(function (event) {
// var num=$(".switcher button").filter(".selected").index()-1;
// alert(num);
// if(event.which==39) num=(num+1)%3;
// else if(event.which==37) num=(num-1)%3;
// else return false;
// var btnClassname=$(".switcher button").eq(num).attr("id").split("-")[1];
// setBodyClass(btnClassname);
// })
// 第二种方法
$(function(){
var setBodyClass=function(className){
$("body").removeClass().addClass(className);
$(".switcher button").removeClass("selected");
$("#switcher-"+className).addClass("selected");
}
$("#switcher-default").addClass("selected");//页面初始时默认为选中状态
var bodyClass=["default","narrow","large"];
var count=0;//设置一个计数器
$(document).keyup(function(event){
if (event.keyCode == 39) {
setBodyClass(bodyClass[(count+1)%3]);//如果设置为count%3则在第一次按下右键时页面不会有反应（因为默认是setBodyClass[0]）
count++;
}
})
})
// (4) 挑战：使用 console.log() 函数记录在段落中移动的鼠标的坐标位置。（注意： console.log()可以在Firefox的firebug扩展、Safari的Web Inspector或Chrome、IE中的Developer Tools中使用。）
//获取鼠标坐标函数
$(document).ready(function(){
//获取鼠标坐标函数
$(document).mouseover(function(e) {
var x = e.pageX;
var y = e.pageY;
console.log('x坐标'+x+','+'y坐标'+y);
})
})
// (5) 挑战：使用 .mousedown() 和 .mouseup() 跟踪页面中的鼠标事件。如果鼠标按键在按下它的地方被释放，则为所有段落添加 hidden类。如果是在按下它的地方之下被释放的，删除所有段落的 hidden 类。
$(document).ready(function(){
varposxr=0,posy=0;
$(document).mousedown(function(event){
posx=event.clientX;
posy=event.clientY;
})
$(document).mouseup(function(event){
posx1=event.clientX;
posy1=event.clientY;
if(posy1==posy&&posx==posx1){
$('p').addClass('hidden')
}
else if(posy1>posy){
$('p').removeClass('hidden')
}
})
})
<!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;
}
.poem {
margin: 0 5em;
}
.chapter {
margin: 1em;
}
.switcher {
float: right;
background-color: #ddd;
border: 1px solid #000;
margin: 10px;
padding: 10px;
font-size: .9em;
}
.switcher h3 {
margin: .5em 0;
}
#header {
clear: both;
}
body.large .chapter {
font-size: 1.5em;
}
body.narrow .chapter {
width: 250px;
}
.selected {
font-weight: bold;
}
.hidden {
display: none;
}
.hover {
cursor: pointer;
background-color: #afa;
}
</style>
<script type="text/javascript" srcc="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#switcher').click(function(event) {
if ($(event.target).is('button')) {
var bodyClass = event.target.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected');
$(event.target).addClass('selected');
event.stopPropagation();
}
});
var toggleSwitcher = function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
};
$('#switcher').on('click.collapse', toggleSwitcher);
$('#switcher button').click(function() {
$('#switcher').off('click.collapse');
if (this.id == 'switcher-default') {
$('#switcher').on('click.collapse', toggleSwitcher);
}
});
$('#switcher').click();
var triggers = {
D: 'default',
N: 'narrow',
L: 'large'
};
$(document).keyup(function(event) {
var ascii = event.which;
var key = String.fromCharCode(ascii);
if (key in triggers) {
$('#switcher-' + triggers[key]).click();
}
});
});
</script>
</head>
<body>
<div id="container">
<div id="switcher">
<h3>Style Switcher</h3>
<button id="switcher-default">
Default
</button>
<button id="switcher-narrow">
Narrow Column
</button>
<button id="switcher-large">
Large Print
</button>
<a id="aLink" href="http://www.baidu.com" >点击测试</a>
</div>
<div id="header">
<h2>A Christmas Carol</h2>
<h2>In Prose, Being a Ghost Story of Christmas</h2>
<div>by Charles Dickens</div>
</div>
<div id="chapter-preface">
<h3>Preface</h3>
<p>Their faithful Friend and Servant,</p>
<p>C. D.</p>
<p>December, 1843.</p>
</div>
<div id="chapter-1">
<h3>Stave I: Marley's Ghost</h3>
<p>Nobody ever stopped him in the street to say, with gladsome looks, "My dear Scrooge, how are you? </p>
<p>But what did Scrooge care! It was the very thing he liked. </p>
</div>
</div>
</body>
</html>
