<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="my.js"></script>
<script>
$(function(){
$('#id_btn').bind('click',function(){
alert('启用ajax');
var $rtn = $.ajax('https://www.hao123.com/?tn=95784386_hao_pg',{dataType:'json'});
//alert('接收到的消息json；'+JSON.stringify($rtn)); var $rtn2 = $.ajax('http://www.zhihu.com/',
{dataType:'text'}
).done(function(){
alert('成功了：');
}).fail(function(xhr,status){
alert('失败了：'+xhr.status+',原因：'+status);
}).always(function(){
alert('请求完成，无论失败或者成功都会返回');
}); // .getResponseHeader(function(key){
// alert('key:'+key);
// });
alert('接收到的消息html；'+JSON.stringify($rtn2));
});
}) /**
flag: fasle ,那么就阻止冒泡
*/
function myalert(msg,flag){
alert('提示消息：'+msg+' ,flag:'+flag);
return flag;
}
</script>
</head> <body>
<a href="www.baidu.com" >lianjie</a> <div class="img-container">
<img alt="体坛风云" src="http://i0.pdim.gs/t01e55d0f747dc41727.jpg">
<img alt="如果src属性值没有对应找到相应的图片，那么就显示我，我是img标签的alt属性" src="http://weibo.com/daxixis/home?wvr=5&sudaref=www.bing.com">
</div>
<ul> <li>
<a href="http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html">参照这个</a>
</li>
<li>
<a href="http://http://www.cnblogs.com/Wayou/">我的博客</a>
</li>
<li>
<a href="http://wayouliu.duapp.com/">我的小站</a>
</li>
<li>
<a href="http://wayouliu.duapp.com/" onclick="return myalert(this.href,false)" >我的小站</a>
</li> </ul>
<p>这是p标签不是a标签，我不会受影响</p>
<input type="button" value="点击" id="id_btn"/>
<div style="width:200px; height:200px; background:red"></div>
</body>
</html>
a标签阻止跳转的关键代码：
<a href="http://wayouliu.duapp.com/" onclick="return myalert(this.href,false)" >我的小站</a>
这里的onclick属性加了 return 这个关键字，因为myalert(msg,flag)这个方法会有一个返回值，如果返回值为false那么 onclick事件发生的时候就会return false，也就阻止了冒泡事件。
需要引入的my.js代码如下：
my.js:
(function(j){
j.extend({
// extend用法1：扩展jQuery静态方法.
readName:function(name){
// alert(typeof this); //chrome和IE：function
var type = typeof this.name;//chrome: string ; IE:undefined
// alert(typeof this.name);
alert(typeof this);
if(name==null||name==undefined||name==''){
alert('没有入参name！');
}else{
alert('入参name：'+name);
}
}
});
j.fn.WsetColor=function(options){
alert('ddd');
var defaults = {
'yanse':'green',
'zitiSize':'12px'
};
var settings = j.extend(defaults,options);
alert('yanse:'+settings.yanse);
// return this.css({color:settings.yanse,fontSize:settings.zitiSize});
// this.css({color:settings.yanse,fontSize:settings.zitiSize});
//$("p").css("color","red");
this.css("color","black");
};
j.fn.myPlugin = function(options) {
alert('22222222');
// var defaults = {
// 'color': 'red',
// 'fontSize': '12px'
// };
// var settings = $.extend(defaults, options);
// return this.css({
// 'color': settings.color,
// 'fontSize': settings.fontSize
// });
this.css('color','red');
}
})(jQuery)