吴鹏
总结:
关于更多的一些jQuery事件和方法的补充,以及对前面案例的完善:
------------------------------------------------------------
jq中的常用的事件:
focus :当调用方法的对象取得焦点时,执行内部定义的函数;
blur :当调用方法的对象失去焦点时,执行内部定义的函数;
change :此方法与<select></select>配合使用,当select里的option发生改变时,执行方法内部定义的函数;
click :点击事件,用了很多次了,无需再说;
dblclick :双击事件,用了很多次了,无需再说;
keydown :键盘按键按下时触发;
keyup :键盘按键弹起时触发;
keypress :键盘按键按下并弹起时触发;
mousedown :鼠标按下时触发;
mouseup :鼠标按下后弹起时触发;
mousemove :鼠标移进调用对象时触发;
mouseout :鼠标移出调用对象时触发;
mouseover :鼠标停发放在调用对象上时触发;
这里特别的提两个切换事件,目前用来了解,因为用的机会不多,
一个是toggle(),一个是hover();
jq对象.toggle(fn1,fn2,...),比较容易理解的格式如下:
jq对象.toggle(function() {
函数体1;
},function() {
函数体2;
},...)
当jq对象第一次触发toggle时,执行函数体1,第二次触发执行函数体2,...直至循环,
要注意的是,toggle()在1.9版本以后不支持;
jq对象.hover(fn1,fn2),这个相当于mouseover()和mouseout的结合;
jq对hover(function() {
函数体1;
},function() {
函数体2;
},...)
当鼠标悬停在jq对象时执行函数体1,移开jq对象时执行函数体2;
jq对象.find("选择器") :查找jq对象后代中与"选择器"匹配的元素,
这个方法是用来遍历元素,
jq对象.children(),选择出jq对象的所有的子代元素,不包含jq对象子代以后的次次级元素;
jq对象.parnet(),筛选出jq对象的父类元素,
jq对象的处理:
jq对象.trigger(type,[data]):
type:一个事件对象或者要触发的事件类型;data:传递给事件处理函数的附加参数;
在每一个匹配的元素上触发某类事件;
jq对象.triggerHander(type,[data]):
1 不会触发浏览器默认事件,默认事件比如点击,右键弹出菜单等,因此即使括号里面放入的是("click"),
它执行的只是click事件里定义的函数体内容;
2 只触发jQuery对象集合中第一个元素的事件处理函数,
3 这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。
举个例子:
<body>
<input type="button" id="tr" value="这个是trigger()方法">
<input type="button" id="trh" value="这个是triggerHander()方法">
<br/>
<input type="text">
<input type="text">
<script>
$("#tr").click(function() {
$("input [type='button']").trigger("focus");
});
$("#trh").click(function() {
$("input [type='button']").triggerhandler("focus");
});
$("input [type='text']").focus(function() {
$("body").append("<p>这个是focus事件触发后要执行的函数体</p>");
});
</script>
</body>
上面的代码,定义了两个按钮,分别会执行trigger方法和triggerhandler方法,
当点击trigger按钮时,因trigger事件的对象"input"有两个,会执行两此focus事件,焦点会在第二个文本框中;
当点击triggerhandler后,虽然事件对象有两个,但是只会对第一个对象执行,并且只执行事件的函数体,并不会
触发focus事件,所以文本框不会取得焦点;
-------------------------------------------------------
bootstrap的初步介绍:
用来开发响应式页面;
响应式页面意思是说根据设备的不同,网页页面内容可以"有选择"的展示原本的内容,此框架主要是针对移动端;
和自适应页面不同,响应式网页是根据像素值来"活动"展示页面,自适应内容是不会更改的;
响应式页面可以节约开发成本,开发一套后,不论是pc端还是移动端都能很好的支持;
创建响应式页面时,要线引入css样式和bootstrap的js库;
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
在head的meta标签里声明:
<meta name="viewport" content="width=device-width, initial-scale=1">
栅格系统:
将页面的每一行都分成十二个列,
行的定义:通过class = "row"来设置一行,如果在父级标签中定义class=container-fluid则是占据页面宽度的100%;
列的设置:每个行都可以视为一个视口,通过class属性值来设置,总列数必须为12行;
通过class属性来设置在不同屏幕是所占的列,n表示每格占的份数
•col-lg-n 大屏 分辨率>=1200
•col-md-n 中屏 992<=分辨率<1200
•col-sm-n 小屏 768<=分辨率<992px
•col-xs-n 超小屏 分辨率<768px
----------------------------------------------------------
案例:下拉列表的左右选择:
分析,首先要有两个下拉的菜单,两个菜单分别都有一些内容;在下拉菜单的厦门有两个按钮,当选中某个具体的内容
时,点击按钮就可以实现该内容的转移;左边的下拉列表id值为selectLeft,右边下拉列表的id值为selectRight,分别在
两者的下面创建两个按钮,两个按钮分别为移动选定的目标到另外一列和移动全部的目标到另外一列,左边按钮可用
id名为selectLTR和selectAllLTR,右边的按钮可用id名为selectRTL和selectAllRTL;然后定义按钮触发点击事件时要
执行的函数内容;下列代码即为实现的代码内容:
左边列表的id值:selectLeft;右边列表的id值:selectRight;左边单个转移按钮的id值:selectLTR,全部转移id值selectAllLTR;
右边单个转移按钮的id值:selectRTL,全部转移id值selectAllRTL;
<script>
$(function() {
$("#selectLTR").click(function(){
//左边单个转移按钮点击后;
$("#selectLeft option:selected").appendTo("#selectRight");
//获得左边列表中被选中的内容,添加到右边列表中;
});
$("#addAllLTR").click(function(){
$("#selectLeft option").appendTo("#selectRight");
});
$("#addRTL").click(function(){
$("#selectRight option:selected").appendTo("#selectLeft");
});
$("#addAllRTL").click(function(){
$("#selectRight option").appendTo("#selectLeft");
});
$("#selectLeft option").dblclick(function(){
$("option:selected").appendTo("#selectRight");
});
$("#selectRight option").dblclick(function(){
$("option:selected").appendTo("#selectLeft");
});
});
</script>
--------------------------------------------------------------------------------
使用BootStrap制作一个响应式页面
代码如下:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
//假设css文件和js文件都在如上路径下;
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<h1>111</h1>
<p>111-1</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h1>222</h1>
<p>222-2</p>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<h1>333</h1>
<p>333-3</p>
</div>
</div>
<div>
</body>
在上面代码中,<div class="container-fluid">为当前视口占据屏幕像素的100%;
<div class="row">为创建一行,
<div class="col-md-4 col-sm-6 col-xs-12">,
<div class="col-md-4 col-sm-6 col-xs-12">,
<div class="col-md-4 col-sm-12 col-xs-12">,
以上三个语句联系起来看,即为:中等像素下三个<div>在一行显示;小像素下前两个
<div>同一行显示,第三个<div>一行显示;极小像素下,三个分别在一行显示;
|
