用JQuery和angularjs分别实现两个盒子间按钮的跳转（第一版）

最新推荐文章于 2022-01-09 14:07:27 发布
最新推荐文章于 2022-01-09 14:07:27 发布
阅读量441 收藏
点赞数
分类专栏： 工作任务
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dengboz0910/article/details/52882247
版权

来这家公司实习快一个月了。

这次给我们分配的任务是看angularjs,说实话我对什么js是一脸蒙蔽。

这次给的任务是用JQuery和angularjs分别实现两个盒子间按钮的跳转，还有一个清空（此处清空为按钮全部跳转）和排序功能


上代码：

JQuery:
html:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery</title>
    <style>
        .table{
            width: 600px;
            height: 200px;
            margin:auto;
            padding: 10px;
            border-radius:6px;
            border:1px solid #ccc;
            margin-top: 100px;
        }




    </style>
</head>
<body>
<table border="1" name="table1" class="table">
    <th> BOX 1 </th>
    <tr>
        <td name="box1" id="box1">
            <input type="button" value="b" id="b" οnclick="btnClick1('b')"/>
            <input type="button" value="c" id="c" οnclick="btnClick1('c')"/>
            <input type="button" value="a" id="a" οnclick="btnClick1('a')"/>
        </td>
    </tr>
    <tr>
        <td class="button">
            <button οnclick="moveAlltoBox2()">清空</button>
            <button οnclick="orderByBox1()">排序</button>
        </td>
    </tr>


</table>
<table border="1" name="table2" class="table">
    <th> BOX 2 </th>
    <tr>
        <td name="box2" id="box2">
            <input type="button" value="g" id="g" οnclick="btnClick2('g')"/>
            <input type="button" value="d" id="d" οnclick="btnClick2('d')"/>
            <input type="button" value="e" id="e" οnclick="btnClick2('e')"/>
            <input type="button" value="f" id="f" οnclick="btnClick2('f')"/>
        </td>
    </tr>
    <tr>
        <td>
            <button οnclick="moveAlltoBox1()">清空</button>
            <button οnclick="orderByBox2()">排序</button>
        </td>
    </tr>
</table>
<script language="JavaScript" src="js/jquery-1.8.2.min.js"></script>
<script language="JavaScript" src="js/index.js"></script>
</body>
</html>

js:/**
 * Created by Dn on 2016/10/19.
 */
$(document).ready(function(){});//ready起点


function moveAlltoBox2(){
    var num = $("#box1").children();
    $("#box1").empty;
    $("#box2").append(num);
}
function moveAlltoBox1(){
    var num = $("#box2").children();
    $("#box2").empty;
    $("#box1").append(num);
}


function orderByBox1(){
    var words = $("#box1").children();
    var nwords = [];
    for(var i = 0;i<words.length;i++){
        nwords[i] = words[i].value;
    }
    nwords.sort();
    $("#box1").empty();
    for(var i = 0;i< nwords.length;i++){
        $("#box1").append("<input  type='button'  value='"+nwords[i]+"' id='"+nwords[i]+"'οnclick=btnClick2(\'"+nwords[i]+"') />" );
    }
    nwords=[];
}
function orderByBox2(){
    var words = $("#box2").children();
    var nwords = [];
    for(var i = 0;i<words.length;i++){
        nwords[i] = words[i].value;
    }
    nwords.sort();//排序之后失去了原本的属性，只剩下值
    $("#box2").empty();
    for(var i = 0;i< nwords.length;i++){
        $("#box2").append("<input  type='button'  value='"+nwords[i]+"' id='"+nwords[i]+"' οnclick=btnClick2(\'"+nwords[i]+"') />" );
    }
    nwords=[];
}


function btnClick1(id){
    var idObject = document.getElementById(id);//通过id删除
    $('#box2').append("<input  type='button'  value='"+id+"' id='"+id+"' οnclick=btnClick2(\'"+id+"') />");
//    idObject.parentNode.removeChild(idObject);
    idObject.remove();
}
function btnClick2(id){
    var idObject = document.getElementById(id);//通过id删除
    $('#box1').append("<input  type='button'  value='"+id+"' id='"+id+"' οnclick=btnClick1(\'"+id+"') />");
    idObject.remove();
}

angular-js:
html:
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/angular-csp.css"/>
    <title>angular-js</title>
    <style>
        .con{
            width: 600px;
            height: 200px;
            margin:auto;
            padding: 10px;
            border-radius:6px;
            border:1px solid #ccc;
            margin-top: 100px;
        }
        .item{
            border-radius:2px;
            float: left;
            width: 50px;
            height: 50px;
            color:#000;
            display:flex;
            justify-content: center;
            align-items: center;
            border:1px solid #ccc;
            background-color: #f8f8f8;
            margin-right: 10px;
        }
        .bottom{
            width: 100%;
            background-color: #f7f7f7;
            height: 30px;
            text-align: center;
        }
        button{
            margin-right: 10px;
            line-height: 30px;
            width: 100px;
        }
        .conItem{
            height: 150px;
        }
    </style>
</head>
<body ng-controller="myController">
<div class="con">
    <div class="conItem">
        <div class="item" ng-repeat="item in box3" ng-click="remove1($index)">{{item}}</div>
    </div>
    <div class="bottom">
        <button class="clear" ng-click="clear1()">清除</button>
        <button class="order" ng-click="order1()">排序</button>
    </div>
</div>
<div class="con">
<div class="conItem">
    <div class="item" ng-repeat="item in box4" ng-click="remove2($index)">{{item}}</div>
</div>
<div class="bottom">
    <button class="clear" ng-click="clear2()">清除</button>
    <button class="order" ng-click="order2()">排序</button>
</div>
</div>


<!--<table border="1">-->
    <!--<th>BOX 1</th>-->
    <!--<tr id="box1" ng-repeat="item in box|orderBy:orderField">-->
        <!--<td>-->
            <!--<input type="button" ng-click="" id="{{item.box1}}" value="{{item.box1}} " />-->
        <!--</td>-->
    <!--</tr>-->
    <!--<tr>-->
        <!--<td>-->
            <!--<button id="clear1" ng-click="moveAll()">清空</button>-->
            <!--<button id="order1" ng-click="orderField='box1'">排序</button>-->
        <!--</td>-->
    <!--</tr>-->
<!--</table>-->


<!--<table  border="1">-->
    <!--<th>BOX 2</th>-->
    <!--<tr id="box2" ng-repeat="item in box|orderBy:orderField1">-->
        <!--<td>-->
            <!--<input type="button" ng-click="" id="{{item.box2}}" value="{{item.box2}}"/>-->
        <!--</td>-->
    <!--</tr>-->
    <!--<tr>-->
        <!--<td>-->
            <!--<button id="clear2" ng-click="">清空</button>-->
            <!--<button id="order2" ng-click="orderField1='box2'">排序</button>-->
        <!--</td>-->
    <!--</tr>-->
<!--</table>-->
<script src="js/angular.js"></script>
<script src="js/index.js"></script>
</body>
</html>

js:/**
 * Created by Dn on 2016/10/18.
 */
var app = angular.module('myApp',[]);


app.controller('myController',function($scope){
//json数据源的初始化
    $scope.box1=[];
    $scope.box2=[];
    $scope.i = 0;
    $scope.orderField = null;
    $scope.orderField1 = null;
//    $scope.box=[{'box1':'c','box2':'g'},{'box1':'b','box2':'d'},{'box1':'a','box2':'f'},{'box1':'i','box2':'h'}];
    $scope.box3=['b','c','a','d'];


    $scope.box4=['g','h','f','i'];
    $scope.remove1=function($index){//通过$index，得到当前按键的索引，通过splice删除;
        $scope.box4.push($scope.box3[$index]);
        $scope.box3.splice($index,1);
    }
    $scope.clear1=function(){
        $scope.box4=$scope.box4.concat($scope.box3);
        console.log($scope.box4);
        $scope.box3=[];
    }
    $scope.remove2=function($index){
        $scope.box3.push($scope.box4[$index]);
        $scope.box4.splice($index,1);
    }
    $scope.clear2=function(){
        $scope.box3=$scope.box3.concat($scope.box4);
        console.log($scope.box3);
        $scope.box4=[];
    }
    $scope.order1 = function(){
        $scope.box3.sort();
        for(var i = 0;i<$scope.box3.length;i++){
                $scope.box1.push($scope.box3[i]);
        }
        $scope.box3=[];
        $scope.box3=$scope.box1;
        $scope.box1=[];
    }
    $scope.order2 = function(){
        $scope.box4.sort();
        for(var i = 0;i<$scope.box4.length;i++){
            $scope.box2.push($scope.box4[i]);
        }
        $scope.box4=[];
        $scope.box4=$scope.box2;
        $scope.box2=[];
    }
});




五年丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用jQuery实现两个div中按钮互换位置的实例代码
12-10
在本文中，我们将深入探讨如何使用jQuery来实现两个`div`元素之间按钮的互换位置功能。这个实例代码主要用于提供一种交互式的用户界面，让用户能够方便地在不同的`div`中移动按钮，从而实现特定的功能或者调整布局。...
GregsSite:一个用 Bootstrap、JQuery 和 AngularJS 制作的小网站
07-06
**标题：“GregsSite:一个用 Bootstrap、JQuery 和 AngularJS 制作的小网站”** 这个标题揭示了一个基于Web开发的项目，名为"GregsSite"，它采用了三种核心技术：Bootstrap、jQuery和AngularJS。让我们深入了解一下...
用JQuery和angularjs分别实现两个盒子间按钮的跳转（第二版）
五年 的博客
10-25 448
精简了jQuery代码 不足之处做了改进； html:<!DOCTYPE html> <html> <head lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery</title> <style> .table{
用JQuery和angularjs分别实现两个盒子间按钮的跳转(第三版 demo实现)
五年 的博客
10-25 370
董哥给的demo 其他自己的实现；<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .box{ background:#ccc; width:200px; height:200px;
angular4路由跳转-代码跳转
一只奋发向上的小程序员
10-29 9542
学习angular也有一小段的时间了， 虽然没成为一个大能，但是也不能说是一个小白，学到了一点点东西，就赶紧和大家分享。路由跳转分为两种：代码跳转和指令跳转，个人感觉代码跳转比较简单一些，也相对的容易操作一些。首先呢，需要写一个事件~我就把他写在了一个button里边的单击事件中：当然了button按钮也就是写在HTML中了，然后在这个HTML对应的ts文件中编写goback()方法。这样，当你点...
angular中的路由跳转
m0_58047238的博客
08-28 6236
一、概述 定义：根据不同的URL地址，动态的让根组件挂载其它组件来实现一个单页面应用。 二、安装与配置 安装项目时ng new 项目名，在询问是否要安装带路由的项目包时，选择Y。其它条件依据情况选择即可。 带路由项目与不带路由项目的区别： 多了一个路由配置文件app-routing.module.ts 在app.module.ts文件中引入了路由配置文件，并在imports中注入了。 import { AppRoutingModule } from './app-routing.modu
jQuery如何跳转到另一个网页 就这么简单
10-20
主要介绍了如何在jQuery中跳转到另外一个网页HTML，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery 如何实现一个滑动按钮开关
10-21
本文给大家分享一段jquery代码实现滑动按钮开关的效果，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的的朋友参考下
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
10-22
AngualrJS是一个很贴心的web应用框架，本篇通过jQuery和Angular两种方式来实现同一个实例，从而体验两者的不同点以及AngularJS的迷人之处
【Angular】路由跳转
凤凰涅槃
06-15 2038
前言 小编最近做的项目前端使用Angular,要实现一个界面跳转功能，从一个界面调转到另一个界面。 1.在button中写一个click事件 （1）在html中 &lt;button (click)="addteachclass()"&gt;加入班课&lt;/button&gt; //看清楚了哪里该加括号，少一个都不可以滴 （2）在ts中 1&gt;引用Route impor...
angular中的路由跳转及路由传参方法整理
m0_54944506的博客
01-09 4183
路由跳转方式 总的大概分为两种 通过模板链接进行跳转 两种写法 <a routerLink="./component-a">跳转a组件</a> <a [routerLink]="['./component-a']" >跳转a组件</a> 定义路由 {path: 'component-a', component: ComponentAComponent} 定义路由出口 <router-outlet></router-ou
【Angular】路由跳转(代码跳转)
热门推荐
王如霜
11-27 3万+
【WHAT】      在Angular中，路由的作用就是建立URL路径和组件（页面，因为页面就是由组件构成）之间的对应关系，根据不同的URL路径匹配出相应的组件并渲染。 【HOW】 1. 定义路由配置 2. 创建根路由模块 3. 添加路由插座 (以上是基本且必须的三个步骤) 【示例：(文件如下)】                 1.在app.routes定义
Angular通过点击绑定方法实现路由跳转
qq_43579525的博客
11-19 3247
1.在ts文件引入Router(不是Routers) import {Router} from '@angular/router'; 2.在构造器里声明(ts文件里)： constructor(private router:Router){}/*声明路由*/ 3.自定义定义一个方法: goDetail () { // 这里的router是构造器里声明的router，跳转通过navigate(...
angularjs 页面跳转
信念堤岸
03-31 5768
angularjs 页面跳转，对于click事件触发页面跳转，这样比用ui-uref好控制里面写业务操作。 之前一直用a标签的跳转，但是，现在遇到需要点击按钮然后提示信息后，在触发跳转页面，只能用这种方式。 1.angularjs部分 //定义一个模块 'use strict'; var app = angular.module('app', [     ]);
angular 跳转
一直很安静
10-11 2880
路由定义$stateProvider .state('page1', { url: '/page1', templateUrl: 'views/page1.htm', controller: 'page1Ctrl' }) .state('page2', { url: '/page2/:type', templateUrl: 'v
使用jQuery实现点击按钮弹出一个有确定和取消按钮的对话框
最新发布
04-19
您可以使用jQuery UI对话框组件来实现这个功能。具体步骤如下： 1. 首先，在html文件中引入jQuery和jQuery UI库，例如： ```html <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值