1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <script type="text/javascript" src="jquery-1.7.1.js"></script>
7 <script type="text/javascript" src="my.js"></script>
8 <script>
9 $(function(){
10 $(‘#id_btn‘).bind(‘click‘,function(){
11 alert(‘启用ajax‘);
12 var $rtn = $.ajax(‘https://www.hao123.com/?tn=95784386_hao_pg‘,{dataType:‘json‘});
13 //alert(‘接收到的消息json；‘+JSON.stringify($rtn));
14
15 var $rtn2 = $.ajax(‘http://www.zhihu.com/‘,
16 {dataType:‘text‘}
17 ).done(function(){
18 alert(‘成功了：‘);
19 }).fail(function(xhr,status){
20 alert(‘失败了：‘+xhr.status+‘,原因：‘+status);
21 }).always(function(){
22 alert(‘请求完成，无论失败或者成功都会返回‘);
23 });
24
25 // .getResponseHeader(function(key){
26 // alert(‘key:‘+key);
27 // });
28 alert(‘接收到的消息html；‘+JSON.stringify($rtn2));
29 });
30 })
31
32 /**
33 flag: fasle ,那么就阻止冒泡
34 */
35 function myalert(msg,flag){
36 alert(‘提示消息：‘+msg+‘ ,flag:‘+flag);
37 return flag;
38 }
39 </script>
40 </head>
41
42 <body>
43 <a href="www.baidu.com" >lianjie</a>
44
45 <div class="img-container">
46 <img alt="体坛风云" src="http://i0.pdim.gs/t01e55d0f747dc41727.jpg">
47 <img alt="如果src属性值没有对应找到相应的图片，那么就显示我，我是img标签的alt属性" src="http://weibo.com/daxixis/home?wvr=5&sudaref=www.bing.com">
48 </div>
49 <ul>
50
51 <li>
52 <a href="http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html">参照这个</a>
53 </li>
54 <li>
55 <a href="http://http://www.cnblogs.com/Wayou/">我的博客</a>
56 </li>
57 <li>
58 <a href="http://wayouliu.duapp.com/">我的小站</a>
59 </li>
60 <li>
61 <a href="http://wayouliu.duapp.com/" onclick="return myalert(this.href,false)" >我的小站</a>
62 </li>
63
64
65
66 </ul>
67 <p>这是p标签不是a标签，我不会受影响</p>
68 <input type="button" value="点击" id="id_btn"/>
69 <div style="width:200px; height:200px; background:red"></div>
70 </body>
71 </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:
1 (function(j){
2 j.extend({
3 // extend用法1：扩展jQuery静态方法.
4 readName:function(name){
5 // alert(typeof this); //chrome和IE：function
6 var type = typeof this.name;//chrome: string ; IE:undefined
7 // alert(typeof this.name);
8 alert(typeof this);
9 if(name==null||name==undefined||name==‘‘){
10 alert(‘没有入参name！‘);
11
12 }else{
13 alert(‘入参name：‘+name);
14 }
15 }
16 });
17 j.fn.WsetColor=function(options){
18 alert(‘ddd‘);
19 var defaults = {
20 ‘yanse‘:‘green‘,
21 ‘zitiSize‘:‘12px‘
22 };
23 var settings = j.extend(defaults,options);
24 alert(‘yanse:‘+settings.yanse);
25 // return this.css({color:settings.yanse,fontSize:settings.zitiSize});
26 // this.css({color:settings.yanse,fontSize:settings.zitiSize});
27 //$("p").css("color","red");
28 this.css("color","black");
29 };
30
31
32 j.fn.myPlugin = function(options) {
33 alert(‘22222222‘);
34 // var defaults = {
35 // ‘color‘: ‘red‘,
36 // ‘fontSize‘: ‘12px‘
37 // };
38 // var settings = $.extend(defaults, options);
39 // return this.css({
40 // ‘color‘: settings.color,
41 // ‘fontSize‘: settings.fontSize
42 // });
43 this.css(‘color‘,‘red‘);
44
45 }
46 })(jQuery)
时间： 2024-10-07 01:08:51