UECSS.COM

专注前端开发,关注用户体验,记录成长历程

jquery案例分析——事件绑定

最近换到了新公司,压力忒大啊,加速了对新知识的学习与运用!感谢这段时间挺我的朋友们!

先上案例:

Demo:http://uecss.com/demo/cherry/jquery-dom-bind.html

代码:

<div>
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。</div>
 </div>

Continue reading →

阻止jQuery事件冒泡

事件冒泡有利有弊,在不需要触发的时候我们果断阻止掉,在jQuery中组织事件冒泡可以使用event.stopPropagation(); 或 return false; 方法来处理,如下:

1.使用event.stopPropagation(); 来阻止:

<script type="text/javascript">
    $(function(){
        $(".clickme").bind("click", function(event){
            alert("clicked");
            event.stopPropagation();
        });
    });
</script>

2.使用return false; 来阻止:

<script type="text/javascript">
    $(function(){
        $(".clickme").bind("click", function(event){
            alert("clicked");
            return false;
        });
    });
</script>

要坚持下去呀~

jQstudy-超链接提示效果

HTML部分

<p><a href="#" class="tooltip" title="这是我的超链接提示1.">我的文字提示1.</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2.">我的文字提示2.</a></p>
<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
<p><a href="#" title="这是自带提示2.">自带提示2.</a></p>

Continue reading →

14个有用的jQuery技巧

1.通过方法返回Jquery对象实例

//使用
var someDiv = $('#someDiv').hide();
//代替
var someDiv = $('#someDiv');  someDiv.hide();

2.使用find来查找

//使用
$('#someDiv').find('p.someClass').hide();
//代替
$('#someDiv p.someClass').hide();

因为可以不必触发Jquery的Sizzle引擎,同时在写选择符的时候尽量让您的选择符简单同时优化最右边的选择符

Continue reading →

jQuery简单的Tab选项卡切换

好没有更新博客了,JS是为弱项,尝试用JQ写选项卡,单页面可重复使用,如下:

JS部分

<script type="text/javascript">
$(function(){
	$("div.help-box .help-tt ul li:first-child").addClass("select");
	$("div.help-box .help-cont-wrap").find("div.help-cont:not(:first-child)").hide();
	$("div.help-box .help-tt ul").find("li").each(function(i){
		$("div.help-box .help-tt ul").find("li").eq(i).mouseover(function(){
			$(this).addClass("select").siblings("li").removeClass("select");
			$("div.help-box").find("div.help-cont").eq(i).show().siblings("div.help-cont").hide();
		});
	});
});
</script>

Continue reading →