前端学习——jquery操作例子

一、jquery和DOM函数的转换

1、1 jquery转换成dom
    $(‘#i1‘)   -------------->  $(‘#i1‘)[0]
2、1 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:0;
            left:0;
            right:0;
            bottom:0;
            background-color: black;
            opacity: 0.5;
        }
        .modal{
            position: absolute;
            top:20%;
            left:35%;
            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>80</td>
        <td>
            <input type="button" value="编辑" class="edit">

        </td>
    </tr>
    <tr>
        <td>2.2.2.2</td>
        <td>81</td>
        <td><input type="button" value="编辑" class="edit"></td>
    </tr>
    <tr>
        <td>3.3.3.3</td>
        <td>82</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[0].innerText);
        $("#ip").val(tds[1].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"},500);
            },
            function (){
                $(this).animate({"margin-left":"0"},500)
            }
        );

    });

</script>
</body>
</html>

原文地址：https://www.cnblogs.com/di2wu/p/10035777.html

时间： 2024-08-02 04:19:43

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

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

0.前言 在项目推进过程中经常使用Ajax,通过Jquery提供的函数可以非常方便的使用Ajax,但是在实际使用中也遇到一些问题,例如如何防止浏览器使用缓存,如何使用同步方式等.通过博文整理总结希望自身有所提高. 在这里通过一个加法例子说明问题.为了突出ajax,前端网页和后端PHP程序尽可能的简单. [前端]--add.html 图1 add页面 [后端]--add.php <?php // 返回JSON格式 header('Content-Type:application/json;char

前端学习---jquery

本部分主要记录jquery的  '选择器'  'dom操作'  'ajax': 1:'语法': jquery的基本语法:$(selector).action() $符号:定义jquery    selector:选择器,用于查找html元素   action() 方法:对元素的操作 如:$('p').hide():隐藏所有<p>标签 说明:文档加载就绪的函数 实际的项目中所有的jquery函数都位于 document ready 函数中:这是一个文档加载就绪的函数,为了防止文档在加载就绪 之前

前端学习-jQuery源码学习

jQuery 2 的版本与jQuery 1的版本相比,没有再考虑IE6,7,8的兼容问题,因此使用时如果不用考虑IE6,7,8就用jQuery 2的版本,如果需要考虑IE6,7,8就使用jQuery 1的版本. jQuery对象是一个以DOM为对象的特殊数组,并包含大量方法,简单可以理解为: function jQuery(){     var jquery = [dom1, dom2, dom3];     jquery.fn1 = function(){-};     jquery.fn2

前端学习JQuery篇05——基本操作（CSS）

CSS css(name|pro|[,val|fn])1.9*访问或设置匹配元素的样式属性. 一个参数为访问 两个参数为设置 jQuery.cssHooks直接向 jQuery 中添加钩子,用于覆盖设置或获取特定 CSS 属性时的方法,目的是为了标准化 CSS 属性名或创建自定义属性. 它的目的是为了标准化 CSS 属性名或创建自定义属性. 例如,某些版本基于Webkit的浏览器需要-webkit-border-radius属性来设置元素的border-radius, 而早期的Firefox版本

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

0.前言 本文解释如何使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择).POST JSON数据包相比标准的POST格式可读性更好些,层次结构也更清晰. 为了说明问题,前端和后端较为简单,重点突出AJAX的应用. [前端]--add-post-json.html 图1 add页面 [后端]--add-post-json.php <?php // 返回JSON格式 header('Content-Type:application/jso

jQuery学习----------DOM操作

DOM操作之创建元素: DOM: var ele = document.createElement("element") 例子:document.createElement("div") jQuery: var $ele = $("element")    //返回的是一个jQuery对象 例子:$("<div></div>") DOM操作之输入文本: DOM: var txt = document.c

好程序员web前端学习路线分享jQuery学习技巧

好程序员web前端学习路线分享jQuery学习技巧,jQuery在web前端学习中是一个必不可少的内容,很多小伙伴都在学习这阶段的时候遇到问题,今天我们就来聊一下jQuery,让我们一起来看一看吧! 1.关于页面元素的引用 通过jquery的$引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方

web进阶之jQuery操作DOM元素&amp;&amp;MySQL记录操作&amp;&amp;PHP面向对象学习笔记

hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 控制就是获取以及设置 <h3>attr()方法设置元素属性</h3> <a href="http://127.0.0.1" id="a1">点我就变</a> <d

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

原文:从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来!