jQuery学习

jquery简介

jquery 相当于一个模块
查找标签
操作标签

jquery的版本 那个系列都可以用  推进使用1系列的最新版本 兼容性更好
1.x  兼容性更好
2.x  忽略IE的低版本
3.x

现在用的是 jquery-1.12.4.js 测试就用这个 可以看到源码
如果是时候生产环境用的话 就用带min字样的压缩版

引入jquery模块/文件

<script src="jquery-1.12.4.js"></script>

调用jquery方法
方法1 jQuery.方法
方法2 $. 用$代替jQuery

基本选择器

找标签 直接寻找
    //对比js的使用方法
    根据id            $('#id')
    根据classname     $('.classname')
    根据标签名字       $('a')
    组合寻找          $('a','.c1','#id')

    1.通过id $('#id')
    <div id=i1">火柴互娱</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#i1').方法
    </script>

    jquery和js的转换
    jquery=>dom
    $()[0]
    dom=>jquery
    $(dom)
    举例如下：
    <div class="i1">火柴互娱</div>
    $('#i1')
    [div#i1, context: document, selector: "#i1"]
    document.getElementById('i1')
    <div id=​"i1">​火柴互娱​</div>​
    $('#i1')[0] //jquery===>dom jquery取值索引为0 就是js的方法
    <div id=​"i1">​火柴互娱​</div>​
    $(document.getElementById('i1')) //dom====>jquery $(dom)
    [div#i1, context: div#i1]

层级选择器

找标签 以某个标签为参照物寻找其他的标签 找子子孙孙
空格   后代查找 子子孙孙都查找 凡是在其下的都查找
>      子代查询 只找儿子 重要记住 
+      下一个 
~      兄弟标签  


空格 寻找子子孙孙
    寻找i10下的所有a标签
    $('#i10 a') 重要记住

    <div id="i10" class="c1">
            <a href="">f</a>
            <a href="">f</a>
            <div class="i9">
                <a href="">h</a>
                <a href="">h</a>
            </div>

        $(this).next() //（）里可以继续添加筛选条件  获取标签的下一个标签 筛选器 nextall 是找到下边所有的 next是仅仅找到下边一个 nextUntil('截止找到哪里')
        $(this).prev() 上一个 prevall preUntil 同理
        $(this).parent() 父亲 parents 找出所有的关系 parentUntil 找到那个位置截止
        $(this).children() 儿子
        $(this).siblings()兄弟们
　　　　　$(this).find()//查找所有 后代查询

基本筛选器

 什么什么里边的第几个标签  都可以组合来用 灵活应用

　　$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

1.寻找i10里的第一个a标签 $('#i10 a:first')  last是最后一个标签
        <div id="i10" class="c1">
        <a href="">f1</a>
        <a href="">f2</a>

    </div>
    2. $('#i10 a:eq(3)') 根据索引取标签
        $('#i10 a:gt(3)') 大于某个索引的标签
        $('#i10 a:lt(3)') 小于

属性筛选器

$('[id="div1"]')   $('["alex="sb"][id]')

<a alex="123">f2</a> 属性是alex='123'
    $('[alex]') //筛选出有alex属性的标签
    $('[alex="123"]') //这个是更加细致了，包括属性的值了

    举例：筛选出type='text'的input标签
     <input type="text">
     <input type="text">
     <input type="password">
     <input type="file">

    $('input[type="text"]')
    //简写为：
    $(':text')

表单对象属性

$("[type='text']")----->$(":text")  注意只适用于input标签  : $("input:checked")

<from>
        <input type="text">
        <input type="text" disabled>
         <input type="text" enabled>

    </from>

    $(':enabled');
    $(':disabled');
    其他属性还有：checked selected

三元运算

 var v=条件？ 真值:假值
        如果条件是真的  就把真值赋值给v，否则把假值赋值给v
        $('#tb :checkbox').prop('checked',true); //这里的true 如果指定了
        //就是指定值，如果为空，就是获取值
        //prop 属性是专门针对checked selected 做的
        //$().each(function){} each就是jquery里的for循环 每一次循环执行function里的内容
        ////$('#tb :checkbox').each(function (k) { 如果加个k 就是指当前的索引位置

jQuery的内容操作

 文本操作
            先回顾一下js的操作
            document.getElementById('i1')
            var tag=document.getElementById('i1')
            tag.innerText //获取内容所有内容  均是当做文本处理
            tag.innerHTML  //获取内容 识别标签
            tag.innerText='abcdef' //重新赋值
            tag.innerHTML='<a>jdhfkjdhfkjdf</a>'  //识别标签 重新赋值

            jQuery的内容操作
            $('#i1').text() //获取内容所有内容  均是当做文本处理
            $('#i1').html()  //获取内容 识别标签
            $('#i1').text('123456') //重新赋值
            $('#i1').html('<a>djfhdjkfh</a>') //识别标签 重新赋值
            $(this).html('hello').next().css('color','red') //jquery支持链式操作

            回顾js对input的操作
            <input type="text" id="i2" value="qiqi">
            var tag=document.getElementById('i2')
            tag.value
            "qiqi"
            tag.value='geget'
            "geget"
            tag.value
            "geget"

            jquery对input的操作
            <input type="text" id="i2" value="qiqi">
            $('#i2').val() //获取value的值
            "qiqi"
            $('#i2').val('gege') //给value重新赋值
            [input#i2, context: document, selector: "#i2"]
            $('#i2').val()
            "gege"


        样式操作
            $('.c1').hasClass('hide') //是否有
            $('.c1').removeClass('hide'); //删除
            $('.c1').addClass('hide'); //添加
            $('.c1').toggleClass('hide'); //有就删除 无就添加

            实例如下：
            <style>
                    .hide{
                        display: none;
                    }

                </style>
            </head>
            <body>
            <input id="i1" type="button" value="开关">
            <div class="c1 hide">djfhksdhf</div>

            <script src="jquery-1.12.4.js"></script>
            <script>
                $('#i1').click(function () {
                    //想要的效果是 点击开关 然后内容显示 再点击 内容消失
            //        //逻辑就是 如果class存在hide就移除  不存在就加上
            //        if ($('.c1').hasClass('hide')){
            //            $('.c1').removeClass('hide');
            //        }else{
            //            $('.c1').addClass('hide');
            //        }
                    //厉害了 以上的if逻辑 jQuery一句话就实现了
                    $('.c1').toggleClass('hide'); //逻辑就是 如果class存在hide就移除  不存在就加上

                })
        属性操作 重要
                $().attr()  //专门用于做自定义属性的
                $().prop() //专门用于checkbox，radio做操作的
                $().removeAttr() //删除标签的属性
                  $().index  //获取索引

                $().attr()  //专门用于做自定义属性的 一个值是取值，两个是设置值
                举例如下：
                <input id="i1" type="button" value="开关">
                $('#i1').attr('type') //获取input标签的type属性的值
                $('#i1').attr('type','submit') //给属性赋值
                $('#i1').attr('name','alex')//添加新的属性

                $().prop()
                <input type="checkbox" id="i3">
                 $('#i3').prop('checked',true)
                $('#i3').prop('checked',false)

        文档处理
                添加
                    $('#ul').append(temp);// 以儿子的身份添加到末尾 也就是添加到ul里边
                    $('#ul').prepend(temp);// 以儿子的身份添加到开头 也就是添加到ul里边
                    $('#ul').after(temp);//添加到ul的后边，和ul是平级
                    $('#ul').before(temp);//添加到ul的前边，和ul是平级
                删除
                    $().remove();//删除标签
                    $().empty();//仅仅删除标签里的内容
                克隆
                 var tag=$().clone();//复制
　　标签操作　　
　　　　　　　　创建标签
　　　　　　　　　　var $li=$('<li>') 创建一个li标签 前边加$是为了提醒自己这是个jquery对象 注意<>
　　　　　　　　删除标签
　　　　　　　　 $(this).parent().parent().remove(); 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .tanchu {
            position: fixed;
            top:30%;
            left:30%;
            300px;
            height:250px;
            margin-left:20px;
            margin-top:20px;
            /*border: 1px solid red;*/
            z-index: 10;
            background: white;

        }
        .shadow {
            position: fixed; /*固定在页面的某个位置*/
            top:0; /*上下左右都是是0的话  就会覆盖整个页面*/
            left:0;
            right:0;
            bottom:0;
            z-index:9; /*和弹出框有个封层  设置z-index*/
            background-color: #ededed;
            opacity: 0.8;

        ;
        }
        .hide {
            display: none;
        }

    </style>
</head>
<body>
<!--<div class="zhezhao hide></div>-->
<button id='add' onclick="addElement();">添加</button>

<table border="1" id="tb">
    <thead>
        <tr>
            <th>IP</th>
            <th>端口号</th>
            <th>操作</th>
        </tr>

    </thead>
    <tbody>
        <tr>
            <td target="ip">1.1.1.1</td>
            <td target="port">80</td>
            <td><button class="edit">编辑</button><button class="del">删除</button></td>
        </tr>
         <tr>
            <td target="ip">2.2.2.2</td>
            <td target="port">81</td>
            <td><button class="edit">编辑</button><button class="del">删除</button></td>
        </tr>
         <tr>
            <td target="ip">3.3.3.3</td>
            <td target="port">82</td>
            <td><button class="edit">编辑</button><button class="del">删除</button></td>
        </tr>
         <tr>
            <td target="ip">4.4.4.4</td>
            <td target="port">83</td>
            <td><button class="edit">编辑</button><button class="del">删除</button></td>
        </tr>

    </tbody>
</table>

<div class="tanchu hide">
    <p>IP:<input type="text" class="ip" name="ip"></p>
    <p>端口号:<input type="text" class="port" name="port"></p>
    <input type="button" value="取消"  onclick="cancel();">
    <input type="button" value="确定" onclick="confirm();">
</div>

<div class="shadow hide" onclick="cancel2();"></div>

<script src="jquery-1.12.4.js"></script>
<script>
    //点击添加 弹出弹出框
    function addElement() {
        $('.tanchu,.shadow').removeClass('hide');

    }
    //设置弹出框里的取消 点击就返回页面
    function cancel() {
        $('.tanchu,.shadow').addClass('hide');

    }
    // 点击灰色遮罩层 也是返回页面
    function cancel2() {
        $('.tanchu,.shadow').addClass('hide');

    }

    cook();

    function cook() {
        $('.del').click(function () {
            $(this).parent().parent().remove(); //哇塞 学会了就是开心 一下子这里就写出来了
        })
        $('.edit').click(function () { //这样不利于 后续添加的编辑按钮
                $('.tanchu,.shadow').removeClass('hide');
               // 知识点 prevAll 上边的所有标签
                var tds=$(this).parent().prevAll(); //拿到了ip和端口号的标签  就该循环获取里边的值 赋值给对应的input中的value
                tds.each(function () {
                    //this 指的是当前每个td
                    //获取td的target的属性值
                    var n=$(this).attr('target');
                    //获取td的文本内容
                    var text=$(this).text();
        //            var a1='.tanchu input[name="';
        //            var a2='"]';
        //            var temp=a1+n+a2;
                    //$(temp).val(text);
                    $('.tanchu input[name="'+n +'"]').val((text)); //字符串拼接 这行是以上四行的拼接

                });

            })
    }

    //点击弹出框里的确定按钮 就添加标签 觉得这个很难的
    function confirm() {
        //1.获取弹出框里需要输入的ip和端口号 把获取到的值搞成数组 然后组成td 每个td有target属性
        var trs=[];
        $('.tanchu input[type="text"]').each(function () { //循环输入的input


        //以下是写死的添加   本来应该用循环的  先写死吧 循环明天自己思考
        var tr=document.createElement('tr');
        var td1=document.createElement('td');
        td1.innerHTML=$(".ip").val();
        var td2=document.createElement('td');
        td2.innerHTML=$(".port").val();
        var tded=document.createElement('td');
        var buttone=document.createElement('button');
        var buttond=document.createElement('button');
        buttone.innerHTML='编辑';
        buttond.innerHTML='删除';
        $(buttond).addClass("del");
        $(buttone).addClass("edit");
        $(tr).append(td1);
        $(tr).append(td2);
        $(tded).append(buttone);
        $(tded).append(buttond);
        $(tr).append(tded);
        $('#tb').append(tr);
        //以上是写死的添加

        cook();





        })
    }
//点击删除按钮就删除对应的tr

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header {
            background-color:yellow;

        }
        .content {
            min-height:50px;

        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>

<div style="height: 400px; 200px; border: 1px solid red;">
    <div class="item">
        <div class="header">标题1</div>
        <div class="content">内容1</div>

    </div>

    <div class="item">
        <div class="header">标题2</div>
        <div class="content hide">内容2</div>
    </div>

    <div class="item">
        <div class="header">标题3</div>
        <div class="content hide">内容3</div>
    </div>

    <div class="item">
        <div class="header">标题4</div>
        <div class="content hide">内容4</div>
    </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>

    //$('.header').click() //所有class是header的标签 绑定click事件
    $('.header').click(function () {
//        console.log(this)
        //以下是函数里需要做的事情
        //$(this) 当前点击的标签
        //当点击header标题标签的时候，需要获取到header的下一个标签也就是content去掉hide
        //然后继续找当前点击标签（header）的父亲的兄弟们的带有content属性的儿子们 加上hide
        //筛选器
        /*
        $(this).next() //获取标签的下一个标签 筛选器 nextall 是找到下边所有的 next是仅仅找到下边一个 nextUntil('截止找到哪里')
        $(this).prev() 上一个 prevall preUntil 同理
        $(this).parent() 父亲 parents 找出所有的关系 parentUntil 找到那个位置截止
        $(this).children() 孩子们
        $(this).siblings()兄弟们

        */
        $(this).next().removeClass('hide'); //jquery移除class
//        $(this).parent().siblings().children('.content').addClass('hide');
        //或者
        $(this).parent().siblings().find('.content').addClass('hide');
    })


</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="checkall();" >
<input type="button" value="反选" onclick="reverse();">
<input type="button" value="取消" onclick="cancel();">

<table border="1">
    <thead>
        <tr>
            <th>选项</th>
            <th>ip</th>
            <th>端口</th>
        </tr>
    </thead>
    <tbody id="tb">

        <tr>
            <td><input type="checkbox"/></td>
            <td>1.1.1.1</td>
            <td>80</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>2.1.1.1</td>
            <td>81</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>3.1.1.1</td>
            <td>82</td>
        </tr>

    </tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
    function checkall() {
        //console.log($(':checkbox'))
        $('#tb :checkbox').prop('checked',true);
        //这行就相当于在js中 for循环所有的带有checkbox属性的标签
        //并一个一个选中
//
    }
    function cancel() {
        $('#tb :checkbox').prop('checked',false);
    }
    function reverse() {
        //.each循环每一个  干函数里的事情
        $('#tb :checkbox').each(function () {
            //this 指得是当前循环的每一个元素
//            console.log(this); 这里拿到的this直接是dom对象 显示的直接是标签
            //没有用[]起来
//            console.log($(this)) 转换为jquery对象

            /* 这种方法是通过dom方法实现的
            if(this.checked) { //如果this的checked的属性等于true的话
                this.checked = false;
            }else{
                this.checked=true;
            }
            */
            //以下通过三元运算实现
            /*
            
        三元运算
            var v=条件？ 真值:假值
            如果条件是真的  就把真值赋值给v，否则把假值赋值给v
                
            */
            var v=$(this).prop('checked')?false:true;//做判断 如果条件成立，也就是checked true那么v就是false,反之
            $(this).prop('checked',v);
        })
    }
</script>
</body>
</html>

事件绑定的方法

.有两种 常用的就是直接$().click

还有一种就是

绑定：

$('长辈标签').on('click'，‘委派标签’，function(){

})

解绑：

$('长辈标签').off ('click'，‘委派标签’，function(){

})

举例见table的编辑删除添加

动画效果

1.显示 隐藏 切换

<p>yuan</p>
<button class="xianshi">显示</button>
<button class="yincang">隐藏</button>
<button class="qiehuan">切换</button>


<script src="jquery-1.12.4.js"></script>
<script>


    $('.xianshi').click(function () {
        $('p').show(1000);
    })
    $('.yincang').click(function () {
        $('p').hide();
    })
    $('.qiehuan').click(function () {
        $('p').toggle();
    })
</script>

2.滑动效果

    <style>
        .c1 {
            background-color: #8aab30;
            height:50px;
            50px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<button id="in">fadein淡入</button>
<button id="out">fadeout淡出</button> 
<button id="toggle">fadetoggle切换</button>
<button id="fadeto">fadeto</button>
<script src="jquery-1.12.4.js"></script>
<script>
    $('#in').click(function () {
        $('.c1').
    })
     $('.down').click(function () {
        $('.c1').slideDown(2000) //数越大 滑的越慢
    })
     $('.huan').click(function () {
        $('.c1').slideToggle(2000) //数越大 滑的越慢
    })

    
</script>

3.淡入淡出

    <style>
        .c1 {
            background-color: #8aab30;
            height:50px;
            50px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<button id="in">fadein淡入</button>
<button id="out">fadeout淡出</button>
<button id="toggle">fadetoggle切换</button>
<button id="fadeto">fadeto模糊</button>
<script src="jquery-1.12.4.js"></script>
<script>
    $('#in').click(function () {
        $('.c1').fadeIn(1000); //数越大越慢
    })
    $('#out').click(function () {
        $('.c1').fadeOut(1000);
    })
    $('#toggle').click(function () {
        $('.c1').fadeToggle(1000);
    })
    $('#fadeto').click(function () {
        $('.c1').fadeTo(1000,0.4); // 变得模糊了
    })

</script>

css的操作

       $("").offset([coordinates])
        $("").position()
        $("").scrollTop([val])
        $("").scrollLeft([val])
        $("").height([val|fn])
        $("").width([val|fn])
        $("").innerHeight()
        $("").innerWidth()
        $("").outerHeight([soptions])
        $("").outerWidth([options])

偏移量

    <style>
        .c1 {
            background-color: #8aab30;
            height:50px;
            50px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<script src="jquery-1.12.4.js"></script>
<script>
    //offset的方法是参照物是可视窗口
    console.log($('.c1').offset()); //查看div c1的偏移量 只有 top和left
    console.log($('.c1').offset().top);
    console.log($('.c1').offset().left);
    console.log($('.c1').offset({top:100,left:100})); //设置偏移量 是一个字典的形式
</script>

就写例子  记得快

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .menu {
        height: 500px;
         20%;
        background-color: gainsboro;
        text-align: center;
        float: left;
    }

    .content {
        height: 500px;
         80%;
        background-color: darkgray;
        float: left;
    }

    .title {
        line-height: 50px;
        background-color: wheat;
        color: rebeccapurple;
    }

    .hide {
        display: none;
    }


</style>
<body>
<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title">菜单一</div>
            <div class="con">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单二</div>
            <div class="con hide">
                <div>222</div>
                <div>222</div>
                <div>222</div>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单三</div>
            <div class="con hide">
                <div>333</div>
                <div>333</div>
                <div>333</div>
            </div>
        </div>

    </div>
    <div class="content"></div>

</div>

<script src="jquery-1.12.4.js"></script>
<script>
    $('.title').click(function () {
        //方法1：
        //$(this).next().removeClass('hide');
//        $(this).parent().siblings().children('.con').addClass('hide'); // yayaya 这里我想用last 不行呀 我写了两行
        //方法2
//        $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide"); //一行也可以搞定呢
        //方法3
//        if($(this).next().css("display")=="none"){
//            $(this).next().show();
//        }else{
////            $(this).next().hide();
//        $(this).next().show();
//        $(this).parent().siblings().children('.con').hide();
        //方法4
       $(this).next().toggle(); //这里用toggle 不用直接用show
        $(this).parent().siblings().children('.con').hide();
    })
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<button class="quan">全选</button>
<button class="cancal">取消</button>
<button class="reverse">反选</button>

<table border="1">
    <tr>
        <td><input type="checkbox"></td>
        <td>篮球</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>足球</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>橄榄球</td>
    </tr>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
    $('.quan').click(function () {
        $(':checkbox').prop('checked',true);
    });
    $('.cancal').click(function () {
        $(':checkbox').prop('checked',false);
    });
    $('.reverse').click(function () {
        $(':checkbox').each(function () {
            if ($(this).prop('checked')){
                $(this).prop('checked',false);
            }else{
                $(this).prop('checked',true);
            }
        })


    });
</script>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding:50px;
            border:1px solid #dddddd;
        }
        .item {
            position: relative;
            30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
       <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
       <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
       <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>

<script src="jquery-1.12.4.js"></script>
<script>
    $('.item').click(function () {
        addfaver(this);

    })
    function addfaver(self) {
        var fontsize=15;
        var top=0;
        var right=0;
        var opacity=1;

        var $tag=$('<span>');
        $tag.text('+1');
        $tag.css('color','green');
        $tag.css('fontSize', fontsize + 'px');
        $tag.css('top',top + 'px');
        $tag.css('right',right + 'px');
        $tag.css('opacity',opacity);
        $tag.css('position','absolute');
        $(self).append($tag);

    var obj=setInterval(function () {
        fontsize=fontsize -5;
        top=top -5;
        right=right -5;
        opacity=opacity -0.1;

        $tag.css('fontSize', fontsize + 'px');
        $tag.css('top',top + 'px');
        $tag.css('right',right + 'px');
        $tag.css('opacity',opacity);

        if (opacity < 0){
            clearInterval(obj);
            $(tag).remove();

        }
        },100);


    }

</script>
</body>
</html>

 css操作

css的操作
    $().css('样式'，‘值’);
    $(this).css('color','red');
    点赞操作：
    见点赞操作实例



捕捉滚动条的高度
    $('div').scrollTop() //捕捉指定标签的滚动条的高度
    $(window).scrollTop() //捕捉浏览器自带的滚动条的高度
    //也可以设定具体的数值
    $(window).scrollTop(0) //返回顶部
    $().scrollLeft()


position
    <div style="position: relative">
        <div style="position:absolute;"> //absolute相对于relative的位置
        </div>
    </div>


一堆高度 什么鬼呀
    $().height()
    $().innerHeight()
    $().outerHeight()
    $().outerHeight(true)
    纯高度 边框 外边框 内边距

事件


阻止默认事件的执行
例如 a标签 点击就会跳转 默认有个click事件
<a href="http://www.baidu.com" class="i1">走你</a>
<script src="jquery-1.12.4.js"></script>
<script>
$('.i1').click(function () {
    alert(123);
    return false; #false阻止默认事件的执行

})