码迷,mamicode.com
首页 > Web开发 > 详细

前端学习——jquery操作例子

时间:2018-11-29 01:19:05      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:modal   tle   添加   poi   dcl   pre   ima   set   pen   

一、jquery和DOM函数的转换

11 jquery转换成dom
    $(#i1)   -------------->  $(#i1)[0]
21 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操作例子

标签:modal   tle   添加   poi   dcl   pre   ima   set   pen   

原文地址:https://www.cnblogs.com/di2wu/p/10035777.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!