前端学习——jquery操作例子

一、jquery和DOM函数的转换

1、1 jquery转换成dom
    $('#i1')   -------------->  $('#i1')[0]
2、1 dom转换成jquery
    var i1=documen.getElementById('#i1')---------> $(i1)

二、写左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .header{
            cursor: pointer;
            background-color: #2459a2;
            width:300px;
            color: white;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div>
    <div class="header">菜单一</div>
    <div class="content">
        <div>内容一</div>
        <div>内容一</div>
    </div>

    <div class="header">菜单二</div>
    <div class="content hide">
        <div>内容二</div>
        <div>内容二</div>
    </div>

    <div class="header">菜单三</div>
    <div class="content hide">
        <div>内容三</div>
        <div>内容三</div>
    </div>
</div>

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

    $('.header').click(function(){
        // jQuery链式编程
        $(this).siblings('.content').toggleClass('hide');
//        $(this).next().removeClass('hide');
    });

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

　　addClass(“className”)方法是用来给指定元素增加类名，也就是说给指定的元素追加样式；
　　.removeClass(“className”)方法是用来给指定的元素移除类名，也就是说给指定元素移除样式；
　　.toggleClass(“className”)方法是用来给脂定的元素增加或移除类名（如果元素的类名存在就移除，如果不存在就增加），也就是说用来给指定的元素进行样式切换（如果元素存在样式则去掉，如果不存在则加上样式）

三、jquery实现模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .fluid{
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color: black;
            opacity: 0.5;
        }
        .modal{
            position: absolute;
            top:20%;
            left:35%;
            background-color: white;
            width:300px;
            height:200px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

<input type="button" value="添加" />

<table border="1px">
    <tr>
        <th>IP</th>
        <th>端口</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1.1.1.1</td>
        <td>80</td>
        <td>
            <input type="button" value="编辑" class="edit">

        </td>
    </tr>
    <tr>
        <td>2.2.2.2</td>
        <td>81</td>
        <td><input type="button" value="编辑" class="edit"></td>
    </tr>
    <tr>
        <td>3.3.3.3</td>
        <td>82</td>
        <td><input type="button" value="编辑" class="edit"></td>
    </tr>
</table>


<!--遮罩层-->
<div class="fluid hide">

</div>

<div class="modal hide">
    <p>
        IP: <input type="text" name="ip" id="ip">
    </p>
    <p>
        端口: <input type="text" name="port" id="port">
    </p>
    <p><input type="button" value="ok"><input type="button" value="cancel" id="cancel"></p>
</div>


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

<script>
    $('.edit').click(function(){
        $(".fluid").removeClass('hide');
        $(".modal").removeClass('hide');

        var tds = $(this).parent().prevAll();
//        console.log(tds[0].innerText);
        $("#port").val(tds[0].innerText);
        $("#ip").val(tds[1].innerText);

    });

    $("#cancel").click(function(){
        $(".fluid").addClass('hide');
        $(".modal").addClass('hide');
    });



</script>

</body>
</html>

四、互相选择框，单选及多选到目的框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        div{
            float: left;
            margin-left: 20px;
        }
        select{
            width:200px;
        }
    </style>
</head>
<body>

<div>
    <select name="fruit" id="fruit" multiple>
        <option value="">香蕉</option>
        <option value="">苹果</option>
        <option value="">橘子</option>
        <option value="">菠萝</option>
    </select>
</div>

<div>
    <input type="button" value="=>" id="toRight"><br>
    <input type="button" value="==>" id="toAllRight">
</div>

<div>
    <select name="shuiguo" id="shuiguo" multiple>

    </select>
</div>


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

<script>
    $("#toRight").click(function () {
        $("#fruit option:checked").clone().appendTo("#shuiguo");
//        $("#shuiguo").append($("#fruit option:checked"));
    });

    $("#toAllRight").click(function () {
       $("#fruit option").clone().appendTo("#shuiguo");
    })
</script>

</body>
</html>

五、酒仙网动画实例-采用animate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .wine{
            width:180px;
            overflow: hidden;
        }

    </style>
    <script src="jquery.js"></script>

</head>
<body>

<div class="wine">
    <img src="wine.jpg" alt="">
</div>

<div class="wine">
    <img src="wine.jpg" alt="">
</div>
<div class="wine">
    <img src="wine.jpg" alt="">
</div><div class="wine">
    <img src="wine.jpg" alt="">
</div><div class="wine">
    <img src="wine.jpg" alt="">
</div>

<script>
    $(function(){

        $("img").hover(
            function () {
                $(this).animate({"margin-left":"-100px"},500);
            },
            function (){
                $(this).animate({"margin-left":"0"},500)
            }
        );

    });

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

前端学习——jquery操作例子

猜你喜欢