一、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. cygwin install git

    Installation with Cygwin If you're comfortable with Cygwin, then use it to install git, ssh, wget an ...

  2. JS中Ajax的同步和异步

    ajax同步 : 意味着此时请求Server后,JS代码不再继续执行,等待Server返回后才继续往下执行. ajax异步 : 意味着此时请求Server后,JS代码继续执行,不管Server什么时候 ...

  3. URAL 1635 Mnemonics and Palindromes

    URAL 1635 思路:区间dp+贪心,先n^2处理出每段区间是否是回文串,然后贪心地找每一段1到i的最少分割. 代码: #include<bits/stdc++.h> using na ...

  4. Vue组件(知识)

    form最后一节. 组件基础 组件的复用:  data必须是函数 组织 通过Prop向子组件传递data 单个根元素 通过event向父组件发送消息: 使用事件抛出一个value, 在组件上用v-mo ...

  5. android--------动画之进度条

    Android开发中在处理耗时工作的时候,例如:列表加载,大多数会有一个精度条加载的框,里面有一个像gif的图片在旋转一样. 效果图:   <!--     根标签为animation-list ...

  6. java.lang.UnsupportedClassVersionError: com/my/test/TestUser : Unsupported major.minor version 52.0

    问题原因: 1.执行代码的jdk版本 低于 编译的jdk版本 2.项目用JDK1.8运行过,现在又在本地的eclipse等开发工具或者本地环境变量为低版本的jdk1.7或者jdk1.6下运行,ecli ...

  7. Lunar New Year and Red Envelopes CodeForces - 1106E (dp)

    大意: 总共$n$的时间, $k$个红包, 红包$i$只能在时间$[s_i,t_i]$范围内拿, 并且拿完后时间跳到$d_i+1$,Bob采用贪心策略,每个时间点若有红包能取则取钱数$w_i$最大的, ...

  8. HDU1789时间贪心

    Doing Homework again Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  9. OC Copy基本使用（深拷贝和浅拷贝）

     首先,什么是copy? Copy的字面意思是“复制”.“拷贝”,是一个产生副本的过程. 常见的复制有:文件复制,作用是利用一个源文件产生一个副本文件. 特点:1.修改源文件的内容,不会影响副本文件: ...

  10. Deep Belief Network简介——本质上是在做逐层无监督学习，每次学习一层网络结构再逐步加深网络

    from:http://www.cnblogs.com/kemaswill/p/3266026.html 1. 多层神经网络存在的问题 常用的神经网络模型, 一般只包含输入层, 输出层和一个隐藏层: ...