一、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. Linux服务器上监控网络带宽的18个常用命令和工具

    一.如何查看CentOS的网络带宽出口 检查维护系统的时候,经常会要查看服务器的网络端口是多大的,所以需要用到Linux的一个命令. 如何查看CentOS的网络带宽出口多大?可以用下面的命令来查看. ...

  2. hihoCoder 1513 小Hi的烦恼

    hihoCoder 1513 小Hi的烦恼 思路: 用bitset判断交集个数 代码: #include<bits/stdc++.h> using namespace std; #defi ...

  3. 554C - Kyoya and Colored Balls

    554C - Kyoya and Colored Balls 思路:组合数,用乘法逆元求. 代码: #include<bits/stdc++.h> using namespace std; ...

  4. 笔试题-sql语句

    今天遇到了不熟练(不会)的查询题目 回来自己又做了一下,如下 建表语句 -- Table structure for score -- ---------------------------- DRO ...

  5. hdu-4289 最大流Dinic模板题

    拆点,套模板. 详情见代码. // // main.cpp // hdu_4289 // // Created by Luke on 16/8/29. // Copyright © 2016年 Luk ...

  6. windows下apache利用SSL来配置https

    第一步打开httpd.conf文件找到以下两个变量把注释去掉. #LoadModule ssl_module modules/mod_ssl.so (去掉前面的#号) #Include conf/ex ...

  7. UVA-701 The Archeologists' Dilemma （数论）

    题目大意:给了一个2^E的前缀n,已知前缀n的位数不到2^E的位数的一半,找出满足条件的最小E. 题目解析:设2^E为i位数,则有n*10^i<2^E<(n+1)*10^i.解不等式得到i ...

  8. 贪心（一）NYOJ题目12

    #include <iostream> #include<cmath> #include "algorithm" using namespace std; ...

  9. LSTM CNN GRU DGA比较

    测试环境:linux,8cpu核,8G内存 优化后的模型比较 模型                         速度/eps          准确率 NN                    ...

  10. JavaScript学习总结(十四)——JavaScript编写类的扩展方法

    在​J​a​v​a​S​c​r​i​p​t​中​可以使​用​类的p​r​o​t​o​t​y​p​e属性来​扩​展​类的属​性​和​方​法,在实际开发当中,当JavaScript内置的那些类所提供的动态 ...