前端学习——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属性和元素属性的区分值得 ...

随机推荐

box-shadow四周都有阴影
<style> .shadow{ -webkit-box-shadow: #666 0px 0px 10px; -moz-box-shadow: #666 0px 0px 10px; bo ...
Unity生成屏幕快照
public static Texture2D CaptureCamera(Camera camera, Rect rect) { RenderTexture rt = ); RenderTextur ...
Java 常用对象-String类
2017-11-02 20:02:06 String:代表字符串.Java 程序中的所有字符串字面值(如 "abc" )都作为此类的实例实现. 字符串是常量:它们的值在创建之后不能 ...
Shiny+SQLite打造轻量级网页应用
参考: R语言核心技能:交互式展示Shiny 中文 R语言用Shiny包快速搭建交互网页应用 R七种武器之交互化展示包shiny 用R的shiny包写一个基因的ID转换小程序 https://gi ...
Android Studio apk打包，keystore.jks文件生成，根据keystore密钥获取SHA1安全码
keystore.jks文件生成,打包APK 选择Build > Generate Signed APK 出现如下弹框: 然后点击Create new...(创建的意思)出现另一个弹框,在做如下 ...
54 Django 模型层（1）单表查询
单表操作: 一项目的操作顺序: 1 在model.py文件中创建表结构 class Book(models.Model): id=models.AutoField(primary_key=True) ...
加密算法(DES,AES,RSA,MD5,SHA1,Base64)比较和项目应用
加密技术通常分为两大类:"对称式"和"非对称式". 对称性加密算法:对称式加密就是加密和解密使用同一个密钥.信息接收双方都需事先知道密匙和加解密算法且其密匙是相 ...
Unity3D中的函数方法和解释
一.刷新函数 Update 当MonoBehaviour启用时,其Update在每一帧被调用. LateUpdate 当Behaviour启用时,其LateUpdate在每一帧被调用. FixedUp ...
dp练习（11）——石子并归
1048 石子归并时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解题目描述 Description 有n堆石子排成一列,每堆石子有一个重量w ...
通过SVN获取变更列表，得到对应的最新class
通过本地SVN获得未提交的文件列表获取工程中最新的class的方式参考: 增量部署代码利用批处理命令按原始结构复制指定的文件新写了一个增强版,根据已提交至SVN的代码loglist,获取最新的cla ...

前端学习——jquery操作例子

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

随机推荐

热门专题