javascript基础之十三（Jquery基础）

最新推荐文章于 2022-06-30 23:37:59 发布

TinyTechFlux

最新推荐文章于 2022-06-30 23:37:59 发布

阅读量334

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u010510134/article/details/49447745

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!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=gb2312" />
<title>14-Jquery基础</title>
<style>
    #divTmp{ font-family:Arial, Helvetica, sans-serif; font-style:italic; border:thick solid;}
    .mtable{ margin:20px;}
    .trOdd{ background-color:#99CCFF;}
    .divClass{ background:#0000FF;}
</style>
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/bootstrap-theme.css" rel="stylesheet"/>

<script src="js/jquery-1.11.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){//这样写，可以在不完全加载说有dom树访问执行所有方法
    var tdiv=$("#divTmp");//获取 jquery 元素
    var odiv=$("#divout");
    var cdiv=tdiv.html();//获取内部html内容
    odiv.html(cdiv);//添加html内容
    tdiv.addClass("trOdd");

    $("#tbStu tr:nth-child(even)").addClass("trOdd");//选择偶数行 添加属性

    //jquery事件操控
    $(".col-md-12").click(function(){
        alert("hello");
    });

    $("input:eq(0)").bind("click",function(){
        $("#divTip").append("<div>click one</div>");
    });

    function oClick(){
        $("#divTip").append("<div>click two</div>");;
    };
    $("input:eq(1)").bind("click",oClick);

    $("input:eq(2)").bind("click",function(){
        //$("input").unbind();//移除全部绑定事件
        $("input").unbind("click",oClick);
        $("#divTip").html("第二个按钮事件移除");
    });

});
</script>
</head>

<body class="container" style="margin-bottom:10px;">
    <div class="row">
        <div  class="col-md-6" id="divTmp"><ul><li>原始div</li></ul></div>
        <div class="col-md-6" id="divout"></div>
    </div>
    <div class="row" style="margin-bottom:10px;">
        <button class="bg-info btn col-md-12">click</button>
    </div>
    <div class="row">
        <input type="button" class="bg-info btn col-sm-4" value="click 1"/>
        <input type="button" class="btn-info btn col-sm-4" value="click 2"/>
        <input type="button" class="bg-info btn col-sm-4" value="removeEvent"/>
    </div>
    <div class="row" id="divTip" style="text-align:center;">

    </div>

    <table id="tbStu"class="tab-pane table mtable">
        <tr>
            <td>学号</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td>1245</td>
            <td>siral</td>
        </tr>
        <tr>
            <td>54545</td>
            <td>log</td>
        </tr>
        <tr>
            <td>11558</td>
            <td>lisgal</td>
        </tr>
    </table>
</body>

</html>