前端学习——jquery操作例子

一、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操作例子的更多相关文章

前端学习——JQuery Ajax使用经验
0.前言在项目推进过程中常常使用Ajax,通过Jquery提供的函数能够很方便的使用Ajax,可是在实际使用中也遇到一些问题,比如怎样防止浏览器使用缓存,怎样使用同步方式等.通过博文整理总结 ...
前端学习☞jquery
一什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 j ...
前端学习-jQuery
老师博客:https://www.cnblogs.com/yuanchenqi/articles/6070667.html day43,day44 jquery 中文文档:http://jquery. ...
前端学习——使用Ajax方式POST JSON数据包
0.前言本文解释怎样使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择).POST JSON数据包相比标准的POST格式可读性更好 ...
前端学习之jquery/下
前端学习之jquery 一属性操作 html(): console.log($("div").html()); $(".test").html("& ...
前端学习之jquery
前端学习之jquery 1. 什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...
Jquery重新学习之五[操作JSON数据]
Jquery操作Json格式的数据在我们平时的项目中也经常运用:最近看Jquery权威指南中就有一章节是对这方面的整理总结:最后通过一个Asp.net结合一般处理程序ashx的实例,基本上能满足项目中 ...
jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架
jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...
从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式一.摘要本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

随机推荐

LINQ 系列
C#图解教程第十九章 LINQ LINQ 什么是LINQLINQ提供程序匿名类型方法语法和查询语法查询变量查询表达式的结构 from子句join子句什么是联结查询主体中的from…let…w ...
2017-03-03 Oracle在.Net中出现未在本地计算机上注册“OraOLEDB.Oracle”提供程序的错误
在前面的Oracle配置完成后,打开项目运行出错,出现未在本地计算机上注册“OraOLEDB.Oracle”提供程序的错误,看到“注册”两个字,首先想到,难道还要用命令行注册一下?果不其然,需要手动注 ...
雷林鹏分享：C# 事件（Event）
C# 事件(Event) 事件(Event) 基本上说是一个用户操作,如按键.点击.鼠标移动等等,或者是一些出现,如系统生成的通知.应用程序需要在事件发生时响应事件.例如,中断.事件是用于进程间通信. ...
Java基础-String和StringBuilder类型(11)
String类概述字符串是由多个字符组成的一串数据字符串可以看成是字符数组构造方法 public String(String original)public String(char[] value ...
quartz---（1）
Quartz Quartz是什么? 简单的一些例子 Quartz是什么简单的认为Quartz是是一个定时器. 1.1. 下载 http://www.quartz-scheduler.org/down ...
循环大法——一次性理清forEach/for-in/for/$each
国寿的这个项目写得我基础都忘完了近期会把vue和基础都并行复习.学习 forEach 适用于调用数组的每个元素,并将元素传递给回调函数,但是空数组是不会执行回调函数的.forEach适用于集合中的对 ...
Integer封装类的相关知识
java中,在一些情况下会有自动装箱与自动拆箱. 自动拆箱/装箱是在编译期,依据代码的语法,决定是否进行拆箱和装箱动作.装箱过程:把基本类型用它们对应的包装类型进行包装,使基本类型具有对象特征.拆箱过 ...
IIS7.5 与 Tomcat 8整合
IIS需要与Tomcat共用80端口,现在只能通过IIS来转发请求给Tomcat实现,即所谓的整合: 一.下载The Apache Tomcat Connector,下载地址是:http://www. ...
sonarqube 代码检查
再好的程序员也会出bug,所以代码检查很有必要.今天就出一个简单的检查工具代替人工检查. 参考: http://www.cnblogs.com/qiaoyeye/p/5249786.html 环境及版 ...
关于rimworld（边缘之地）
低缓的音乐广阔的原野丰富而不杂乱的地表完美的殖民拓荒世界. 各种随机地形,丰富的资源.林木与矿产.随机生成的大世界给人真实世界的感觉. 动态而和谐的画面,随风摇摆的植被,跳跃的兔子,以及 ...

前端学习——jquery操作例子

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

随机推荐

热门专题