一、jquery和DOM函数的转换

、 jquery转换成dom

    $('#i1')   -------------->  $('#i1')[]

、 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:;

            left:;

            right:;

            bottom:;

            background-color: black;

            opacity: 0.5;

        }

        .modal{

            position: absolute;

            top:%;

            left:%;

            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></td>

        <td>

            <input type="button" value="编辑" class="edit">

        </td>

    </tr>

    <tr>

        <td>2.2.2.2</td>

        <td></td>

        <td><input type="button" value="编辑" class="edit"></td>

    </tr>

    <tr>

        <td>3.3.3.3</td>

        <td></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[].innerText);

        $("#ip").val(tds[].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"},);

            },

            function (){

                $(this).animate({"margin-left":""},)

            }

        );

    });

</script>

</body>

</html>

前端学习——jquery操作例子的更多相关文章

  1. 前端学习——JQuery Ajax使用经验

    0.前言     在项目推进过程中常常使用Ajax,通过Jquery提供的函数能够很方便的使用Ajax,可是在实际使用中也遇到一些问题,比如怎样防止浏览器使用缓存,怎样使用同步方式等.通过博文整理总结 ...

  2. 前端学习☞jquery

    一 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 j ...

  3. 前端学习-jQuery

    老师博客:https://www.cnblogs.com/yuanchenqi/articles/6070667.html day43,day44 jquery 中文文档:http://jquery. ...

  4. 前端学习——使用Ajax方式POST JSON数据包

    0.前言     本文解释怎样使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择).POST JSON数据包相比标准的POST格式可读性更好 ...

  5. 前端学习之jquery/下

    前端学习之jquery 一 属性操作 html(): console.log($("div").html()); $(".test").html("& ...

  6. 前端学习之jquery

    前端学习之jquery 1.   什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...

  7. Jquery重新学习之五[操作JSON数据]

    Jquery操作Json格式的数据在我们平时的项目中也经常运用:最近看Jquery权威指南中就有一章节是对这方面的整理总结:最后通过一个Asp.net结合一般处理程序ashx的实例,基本上能满足项目中 ...

  8. jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架

    jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...

  9. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

随机推荐

  1. mac 下安装mongodb

    转载自https://segmentfault.com/a/1190000002547229 概念 MongoDB 是一个跨平台的,面向文档的数据库,提供高性能,高可用性和可扩展性方便. MongoD ...

  2. English trip V1 - 辅导课 VOCABULARY BRUSH UP（1-6） 词汇刷新 SA:Winona

    1.How Do you Feel Now?            形容词  adj.  = adjective                     Describe people and thi ...

  3. 记一次无法正常本地登陆Linux服务器（确定密码正确）

    首先,ssh可以正常登陆使用.但是,本地可以确定密码是正确的情况还是不能登陆. 然后查看/var/log/secure文件如下提示: 然后,尝试去看了下/etc/pam.d/login 下面(有问题的 ...

  4. python-day10--字符编码

    1.回顾: 软件→操作系统→硬件 2.文本编辑器: 启动:硬盘→内存→运行(cpu) 读文件:硬盘→内存→CPU读 存文件:保存到硬盘中 3.python解释器 启动:硬盘→内存→运行(cpu) 读文 ...

  5. XML Publisher Using API’s(转)

    原文地址:XML Publisher Using API’s Applications Layer APIsThe applications layer of XML Publisher allows ...

  6. JSP EL简介

    JSP EL简介:1.语法:    ${expression} 2.[ ]与.运算符    EL 提供“.“和“[ ]“两种运算符来存取数据.     当要存取的属性名称中包含一些特殊字符,如.或?等 ...

  7. HTML5绘制几何图形

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

  8. BZOJ2590 [Usaco2012 Feb]Cow Coupons

    好吧...想了半天想错了...虽然知道是贪心... 我们每次找没有被买的两种价格最小的牛,比较a = 当前差价最大的 + 当前优惠券价格最小的牛与b = 当前非优惠券价格最小的牛 所以...我们要 先 ...

  9. PHP:第三章——PHP中的递归函数

    <?php header("Content-Type:text/html;charset=utf-8"); function A(){ static $i = 0; ++$i ...

  10. Alpha阶段敏捷冲刺---Day3

    一.Daily Scrum Meeting照片 二.今天冲刺情况反馈 今天我们上完课后在禹洲楼教室外进行我们的每日立会.开会的内容主要是总结了一下这几天各自的任务及任务进度,交流了一下各自遇到的困难. ...