jquery学习笔记：trigger(‘click’)模拟鼠标点击事件

发表于 由
回复

今天做一个弹窗效果利用lightbox,但是我希望它是自动加载，而不是通过onclick 点击激活facebox标签，所哟知道发帖求助，http://zhidao.baidu.com/question/423455559.html帖子内容，提供一个trigger函数模拟鼠标点击事件，但是不足的html中的a标签不能让它不显示，只能通过透明尺寸缩小淡化它，暂时可以解决，虽然不是很完美。

不要过度使用jQuery,有时候原生js会更快

发表于 由
1


jQuery速度再快，也无法与原生的javascript方法相比。所以有原生方法可以使用的场合，尽量避免使用jQuery。

请看下面的例子，为a元素绑定一个处理点击事件的函数：

　　$(‘a’).click(function(){

alert($(this).attr(‘id’));

});

这段代码的意思是，点击a元素后，弹出该元素的id属性。为了获取这个属性，必须连续两次调用jQuery，第一次是$(this)，第二次是attr(‘id’)。

事实上，这种处理完全不必要。更正确的写法是，直接采用javascript原生方法，调用this.id：

　　$(‘a’).click(function(){

alert(this.id);

});

根据测试  ，this.id的速度比$(this).attr(‘id’)快了20多倍。

ie6下不支持position:fixed的解决办法

发表于 由
回复
解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image（如果你的body定义了背景图片，就可以把把这句CSS Hack加到html里面，反之亦然）。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS，它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素！为了不增加额外的HTTP Request，我们可以使用about:blank作为这个背景图片。
01 /*让position:fixed在IE6下可用! */
02
03 .fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;}
04 .fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;}
05 .fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;}
06 .fixed-right /* 右侧固定 */{position:fixed;right:0px;left:auto;}
07
08 /* 上面的是除了IE6的主流浏览器通用的方法 */
09
10 /* 修正IE6振动bug */
11 * html,* html body {background-image:url(about:blank);background-attachment:fixed;}
12
13 /* IE6 头部固定 */
14 * html .fixed-top {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
15
16 /* IE6 右侧固定 */
17 * html .fixed-right { position:absolute; right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0)); }
18
19 /* IE6 底部固定 */
20 * html .fixed-bottom { position:absolute; bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
21
22 /* IE6 左侧固定 */
23 * html .fixed-left { position:absolute; right:auto; left:expression(eval(document.documentElement.scrollLeft)); }

对比两个纯粹的CSS hack发现，两个原理似乎相同，在于html元素和body元素的应用和对CSS的{position:fixed}的支持程度上，但是这实际上是一种Hack，基本上不具备通用性，知道这个方法就可以了。需要提醒的是IE6 standards-compliant模式下HTML元素不管给它设置什么样的高度和宽度，它的大小都始终充满整个浏览器的可视区域，而IE5 以及 Quirks 模式下html元素和body元素所有宽高设置都会被忽略而保持充满浏览器的可视区域

2种js方法隐藏超链接在状态栏的信息

发表于 由
回复

当鼠标在链接上有事件触发时，将状态栏的文本设置为空白或者其它文本就行了。

甲、通过捕获链接上的事件，设置状态栏信息：

Js代码
function hideinfo(){
if(event.srcElement.tagName==”A”){//如果触发函数的对象是链接
//设置状态栏的显示为链接的文本
window.status=event.srcElement.innerText
}
}
document.onmouseover=hideinfo; //鼠标移上时调用 hideinfo 函数
document.onmousemove=hideinfo; //鼠标移动时调用 hideinfo 函数
document.onmousedown=hideinfo; //鼠标按下时调用 hideinfo 函数

function hideinfo(){
if(event.srcElement.tagName==”A”){//如果触发函数的对象是链接
//设置状态栏的显示为链接的文本
window.status=event.srcElement.innerText
}
}
document.onmouseover=hideinfo; //鼠标移上时调用 hideinfo 函数
document.onmousemove=hideinfo; //鼠标移动时调用 hideinfo 函数
document.onmousedown=hideinfo; //鼠标按下时调用 hideinfo 函数

乙、通过改变链接真实地址来隐藏提示信息：

Js代码
var temp_url
function hideinfo(){
var obj=event.srcElement; //捕获触发事件的对象
if(obj.tagName==”A”){ //如果对象是链接
/*如果触发函数的事件是 onmouseover ，将链接地址赋予全局变量temp_url 后设置链接的地址为链接的文字，这样在鼠标移上时状态栏的提示信息将是 “当前页地址(不包含文件名)+触发事件的链接对象的文本”，达到了隐藏真实地址的目的*/
if(event.type==”mouseover”){
temp_url=obj.href;
obj.href=obj.innerText
}
//在单击链接时用window.open 方法打开窗口，窗口目标根据链接的 target 属性值而定
if(event.type==”click”){
window.open(temp_url,obj.target==”"?”_self”:obj.target);
return false
}
//鼠标移开后复原链接
if(event.type==”mouseout”){
obj.href=temp_url;
temp_url=null;
}
}
}
document.onmouseover=hideinfo; //鼠标移上时调用 hideinfo 函数
document.onmouseout=hideinfo; //鼠标移开时调用 hideinfo 函数
document.onclick=hideinfo; //鼠标单击时调用 hideinfo 函数

针对谷歌浏览器默认字体最小只有12px的解决方案

发表于 由
回复 
当字体小于12px的时候发现在谷歌里面还是以12px显示，然后造成谷歌浏览器布局有点小问题，在网上找了找答案，现在记录下来：
　html{-webkit-text-size-adjust:none;}

只需把这个写在样式里就行，再打开时，谷歌就能正常显示设定的大小文字了。

另外还有一个针对谷歌专用的hack:

@mediascreenand(-webkit-min-device-pixel-ratio:0){
/* chrom、safari 样式 */
}
这是针对其他一些兼容问题的，像IE、FF都有自己的hack，这个也是chrom的hack，它针对Safari也有效。

					

		
		
	


				
					
	

		

						
Jquery学习笔记（2）——操作css样式和绑定事件

			
						

				发表于   由  			

			
						

				回复			

					


				

			
对css样式的操作是javascript最重要的作用之一，用jq来改变元素的css样式十分方便，从实质上看，其实这部分就2个关键点，一个是改变css样式的方法，第二个是交互事件的定义。


改变css样式的方法


以这样的代码为例子

html部分：<div class=”blue”>这里是内容部分</div>

css部分： .blue {background-color:#00F;color:#FFF;height:200px;width:200px;} .red {background-color:#F00;}


方法1，改变class属性。


运用之前学到选择元素的方法，用$(“div.blue”)取得该div元素。用attr方法改变该元素的class属性(HTML属性，与CSS属性区别)


完整代码为：$(“div.blue”).attr(“class”,”red”);

这时实际的html代码变为<div class=”red”>这里是内容部分</div>;

也可以用addclass方法追加样式：$(“div.blue”).addclass(“red”);

这时实际的html代码变为<div class=”blue   red”>这里是内容部分</div>;red在后面，重复的样式由red决定。


方法2，直接改变元素的css。


只改变一个css样式可以这样写$(“div”).css(“opacity”,”0.5″); 这是一段非常神奇的代码，jq做了封装，使opacity:0.5对ie6也可以适用，把div的透明度变成50%。

如果改变的css属性超过2个时，可以用平时定义css的写法。


<
$("div").css({
backgroundColor:"#0F0",
color:"#000"
})


注意一些小细节，不同属性之间用‘，’号隔开，赋值是要用双引号，有一些名字不同background-color变成backgroundColor，C要大些，即是一些原有横杆链接前后的元素要把横杆去掉，同时后面一个单词要大写第一个字母。


交互事件的定义


事实上常用的交互事件就几个而已，鼠标移入移出，单击和双击，获得焦点与否。只需要弄懂这些，再结合上面改变css属性的方法，很多页面效果都可以自己写出来。


一般用绑定的方式赋予元素某种行为，而不是像上一篇那样，直接在元素中写。在上一篇的源代码后面加上一个ul的菜单。

<span style=”visibility: hidden;”>这是需要显示的文本</span><a  href=#>这是点击文字</a>

<ul id=”tab”>

<li>菜单1</li>

<li>菜单2</li>

</ul>

css样式为：#tab {width:100px;height:200px;margin-left:150px;display:none;}

#tab li {width:100px; float:left; border-bottom:1px #000 solid;}

先设置为不可见，通过绑定a的点击事件，令菜单的display属性改变。


$("a").click(function(){
$("#tab").css("display","block");


也可以使用jq的bind方法绑定元素的事件。


$("a").bind("click",function(){
$("#tab").css("display","block");
})


还有一些合成事件如hover，可以很容易得实现2个动作触发的事件。


$("a").hover(function(){
$("#tab").css("display","block");
},function(){
$("#tab").css("display","none");}
)


等价于


$("a").mouseover(function(){
$("#tab").css("display","block");})
.mouseout(function(){
$("#tab").css("display","none");})


除此之外还有toggle(fn1,fn2…….fnN)，多次点击事件。

实质上作用都是一样的，根据实际情况选择。

					

		
		
	


				
					
	

		

						
Jquery学习笔记（1）——选择器

			
						

				发表于   由  			

			
						

				回复			

					


				

			
做为一套javascript的框架，jquery越来越受到大家的青睐，很大程度是来源于其简洁而强大的选择器。


jquery选择器在我习惯将其分为2种，一种是基本选择器，另一种是条件选择器，根据是否有限制条件来区分，当然大多数人习惯用正规的分发，分成：


1， 基本选择器（跟写css代码时用的没什么区别），如$(“#id”),   $(“.class”),  $(“div span”)等


2， 层次选择器（要对dom结构非常熟悉，要注意空格的影响，空格是分开父子级元素的关键，比如.one:eq(1)选择到的是class为one的元素中的第二个，而.one    :eq(1)选择到的是class为one的元素的全部子元素中，的第二个元素，学过后台语言的人可以看做是把.one的全部子元素作为一个数组再进行选择）


3，过滤选择器 需要特别提一下的是：header和：animated，第一个是选中全部标题元素，其实可以等价于$（”h1,h2…..”);但显然$(‘:header”)简洁很多。第二个为选择正在执行动画的元素，再以后会经常用到。顺便提一下:has和:parent，使用时需要记得空格会造成的影响，$(“.one:has(h3)”)是选择含有h3，同时class为one的元素，而$(“.one    :has(h3)”)是选择class为one的元素中，含有h3的子元素。同理$(“.one:parent”)选择含有子元素（包括文本元素），同时该元素class为one，颠倒过来读也可以，分段可以避免不必要的错误，而$(“.one     :parent”)选择class为one元素的子元素中，含有其他元素的元素。有点晦涩，习惯了就好。


过滤选择器细分为基本过滤选择器，内容过滤选择器，可见性选择器，属性过滤选择器，子元素过滤选择器，表单对象属性过滤选择器。详细可以上网搜下手册，记得空格的影响，很多选择器之间都是通用的。


jq作为javascript的一个框架，可以简单的实现很多需要复杂javascript代码才能实现的效果，但并不意味着可以完全脱离javascript，将jq和javascript结合起来使用，才能达到最大功效和提高编码能力。


jq和javascript结合使用只要记住几个要点就可以了，$的影响，在没有其他js库的前提下$代表的是jquery,$(“#id”)是jquery的元素，可以使用jq的方法，window元素不能使用jq定义的方法。


看一下jq自定义函数的方法（另一种方法是用插件的方式，以后会再提到）：


$.fn.show=function(){
var   content=$(this).prev().html();
alert(content);
}


show是函数名，自定义的函数为show()，这个使用如果想为一个html标签绑定这个方法<span>这是需要显示的文本</span><a onclick=show()    href=#>这是点击文字</a>，这样是无效的onclick=function()只能识别javascript的方法，而无法识别jq方法。

但我们可以这样修改一下，把这个元素转为jq可以识别，再来调用show方法——<a onclick=”$(this).show()” href=#>


也可以用传统定义javascript的方法，但方法的实质内容是用jq写的，如


function bshow(e){
var  content=$(e).prev().html();
alert(content);
}
<a onclick="bshow(this)" href=#>


这里必须把this作为参数传进去，而不能像上一个例子一样直接调用。

content前使用var的作用是让content成为局部变量，避免出现不必要的错误。

					

		
		
	


				
					
	

		

						
关于css的:after诠释

			
						

				发表于   由  			

			
						

				回复			

					


				

			
CSS中存在一些比较特殊的属性，称之为伪类，它们之中最常用的就是定义链接的伪:link，:visited，:hover，:active等。

    除了它们，还有一些不被常使用的伪类，有:focus，:first-child，:lang等。

    而且CSS里不光有伪类，还有伪元素，比如：:first-letter，:first-line，:before和:after。

    本文中其它伪元素暂且不表，单说:after伪元素。

after顾名思义是在元素后面的意思，实质是在元素之后添加内容。

    这个伪元素允许制作人员在元素内容的最后面插入生成内容，需要和content属性一起使用，设置在对象后发生的内容。默认地，这个伪元素是inline行内元素，不过可以使用属性 display 改变这一点。  

    所有主流浏览器都支持 :after 伪元素，但对于IE来说，只有IE8以上版本支持。
-----------------------------------



下面举个例子，在CSS代码中插入：


 <style type="text/css">
  h1:after {content:url(logo.gif)}
</style>


Html：


 <h1>标题内容</h1>


在显示时，标题内容后会插入一张图片。这就是伪元素:after的作用。

    伪元素:after另外一个常用的作用在原来的文章中曾经提到过，有些同学可能还记得，那就是清除浮动。

    在CSS中加入带有CSS伪类:after的内容：


 .clear:after {
  height:0;
  content:".";
  clear:both;
  display:block;
  visibility:hidden;
}


然后在外面的Div容器box中引用这个class，比如：


 <div id="box" class="clear">
  ……
  ……
  </div>




我们再来看以下代码： .clearfix:after {       <—-在类名为“clearfix”的元素内最后面加入内容； 	content: “.”;     <—-内容为“.”就是一个英文的句号而已。也可以不写。 	display: block;   <—-加入的这个元素转换为块级元素。 	clear: both;     <—-清除左右两边浮动。 	visibility: hidden;      <—-可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已； 	line-height: 0;    <—-行高为0； 	height: 0;     <—-高度为0； 	font-size:0;    <—-字体大小为0； } 这里补充一个属性是{ *zoom:1;}   <—-这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的话，不用深究，听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。  整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。 之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。

					

		
		
	


				
					
	

		

						
HTML 5 & CSS 3的新交互特性

			
						

				发表于   由  			

			
						

				回复			

					


				

			


本文标题的这副图片，是用Phosotshop制作的。但是，在搜索引擎中你却无法搜索到它，搜索引擎还没有强大到能够识别图片里面的文字。并且由于图片的体积不算太小，可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新。那么，有没有一种新的方法可以避免这些缺点呢?


有的，HTML5和CSS3就可以满足你的需求。甚至，它可以做的更多，更好。作为一名设计师，我们应当了解它们是什么东西，有什么特性，从而进一步思考通过HTML5和CSS3我们能做些什么。


 什么是HTML5和CSS3


HTML和CSS并不难理解。HTML为构成网页的主要语言。通过这种语言，我们可以向计算机说明网页格式、内容、显示效果等等。而CSS则是专门用来控制网页显示效果的语言。这时候问题出来了，为什么我们要单独使用CSS呢，HTML不是一样可以控制Web页面的显示效果么?为了回答这个问题，我举个简单的例子：




有没有发现如果一旦形容的事情过多，想要把事情描述清楚的时候，我们不得不重复大量的信息?页面语言也是一样，在这种情况下显得杂乱无章，非常难以理出头绪。通过将控制显示效果的语言集成到CSS里，我们不但可以保证页面语言主体部分的简洁，而且可以非常方便的复用各种语言集合。


HTML5和CSS3是HTML和CSS的最新版本，它们目前均未确定标准，但是已经公布的新特征已经让我们心动不已。


 HTML 5的新特新


1. 新的内容标签




HTML4中的内容标签级别相同，无法区分各部分内容。而HTML5中的内容标签互相独立，级别不同，搜索引擎以及统计软件等均可快速识别各部分内容。


2. 更好的表格体系




现在，你可以抛弃JavaScript或者是PHP，只通过HTML5来定义表格。你可以定义每个表格单元的输入格式，也可以定义这个单元是否是必填的等等。


3. 音频、视频API






HTML5不但允许你在网页中直接整合视频、音频，同时更提供了一套功能丰富的API用来控制媒体播放，而这些用来控制媒体播放的元素也都是可以被编辑的。因此，HTML5在视频以及音频层面上实际已经可以替代常用的flash插件了。


4. 画布(Canvas) API




在网页中绘制图形一直是个大难题，我们不得不借助flash、silverlight等插件。然而HTML5允许你直接在网页上进行绘图，甚至允许你与网页生成更多的交互，例如绘制图形、放大缩小，等等。图例是一个用HTML5制作的小游戏。


5. 地理(Geolocation) API




HTML5提供了地理信息的应用接口Geolocation API。通过这个API，网页可以通过IP，GPS等方式来获得用户的地理信息;同时用户也可以选择是否关闭这个功能。


6. 网页存储(Web storage) API




HTML5提供了网页存储的API，方便Web应用的离线使用。除此之外，新的API相对于cookie也有着高安全性，高效率，更大空间等优点。


7. 拖拽释放(Drag and drop) API




我们可以通过HTML5的Drag and drop API来完成网页中的拖拽释放效果，避免了以往的网页在拖拽释放过程中需要不停修改元素的位置，代码繁多的弊端。


 CSS3 新特性


1. RGBa




CSS3的RGBa新特性允许你对每个元素进行色彩以及透明度的设置。而原来常用的opacity命令只能对元素及其子元素进行设置。


2. Multi-column layout




CSS3新提供的多栏布局选择器无需HTML布局标签即可生成多栏布局，同时‘栏数’、‘栏宽’以及‘栏间距’都是可以定义的。


3. Round corners




圆角功能可能是CSS3提供的最实用的功能了。通过Border-radius，你可以没有任何难度的给指定的HTML元素添加圆角。并且你还可以定义圆角的大小，以及哪个角是圆角，哪个角不是圆角。


4. @font-face




当网页显示某种用户没有安装的字体时，CSS3提供的@font-face功能会自动的、默默地帮用户从网络上下载相应字体。从而让设计师更加自由的发挥，而不用考虑用户的机器是否安装了相应字体。


5. 其他特性


此外，CSS3还给我们带来了渐变、防止字符串过长溢出、多重背景以及用图片来作为元素边框等功能。


利用好CSS3，你可以更快捷的得到以往用很多插件才能得到的效果。同过使用元素本身来取代大部分图片，网页的加载速度会得到提升，这些原本是图片的内容，也可以被搜索引擎检索到。


HTML5和CSS3的兼容性


HTML5和CSS3的标准并未正式完成，各家浏览器对其支持程度也不尽相同。了解HTML5和CSS3的兼容性是十分必要的。下面的连接是一个专门跟踪HTML5和CSS3兼容性的网站，有兴趣的朋友可以点击查看：


http://www.findmebyip.com/litmus


一些你可能感兴趣的资源


http://www.apple.com/HTML5/showcase/


http://html5watch.tumblr.com/


http://w3school.com.cn/index.html


http://www.mhtml5.com/


http://html5demos.com/


http://www.sencha.com/


http://www.findmebyip.com/litmus/


http://www.thetimes.co.uk/tto/news/


http://maps.google.com/