JavaScript资料,JavaScript文章,JavaScript文档-易库教程_www.escdns.com

易网时代-编程资源站

首页 / 脚本样式 / JavaScript

用自定义图片代替原生checkbox实现全选,删除以及提交的方法

用自定义图片代替原生checkbox实现全选,删除以及提交的方法

2016年10月20日 11 阅读

UI妹子觉得原生的checkbox复选框太丑，非要用图片来代替，那就依她。做出来的效果类似这样：要代替原生的checkbox。那么要实现原生checkbox能干的事。我们主要实现这几点就可以了。1.点击列表中的勾选图片。图片会变换成相反的。2.如果当前是全选状态，不勾选列表中的某一项，全选处的图片变成未勾选的状态。如果点击了某一项使列表成了全选的状态，全选处的图片变成勾选状态。3.全选功能4.点击删除，能删除全部的勾选的图片。1.准备工作：因为要大量用...

简易的JS计算器实现代码

简易的JS计算器实现代码

2016年10月20日 11 阅读

看看手机中的计算器，分为普通计算器和科学计算器自认脑袋不够大，就实现一个普通版本的吧（支持正负数加减乘除等基本连续的运算，未提供括号功能）看看图示效果：一、知识准备1+1 = ?正常来说，我们看到这个表达式都知道怎么运算，知道运算结果但计算机不一样，计算机无法识别出这串表达式，它只能识别特定的规则：前缀表达式+ 1 1 或后缀表达式1 1 +举个栗子（3 + 4） × 5 - 6 就是中缀表达式- × + 3 4 5 6 前缀表达式3 4 + 5 ...

JSON对象详解及实例代码

JSON对象详解及实例代码

2016年10月20日 9 阅读

前面的话 json（javascript object notation）全称是javascript对象表示法，它是一种数据交换的文本格式，而不是一种编程语言，用于读取结构化数据。2001年由Douglas Crockford提出，目的是取代繁琐笨重的XML格式。本文将详细介绍关于json的内容语法规则 JSON的语法可以表示以下三种类型的值【1】简单值简单值使用与JavaScript相同的语法，可以在JSON中表示字符串、数值、布尔值和null ...

浅谈bootstrap使用中的一些问题以及解决过程

浅谈bootstrap使用中的一些问题以及解决过程

2016年10月20日 9 阅读

bootstrap是一个不错的前端框架。这里写一下使用中遇到过的几点问题。1.bootstrap的模态框modal的问题。有时候会出现弹出模态框的时候遮罩把模态框遮住的情况。出现这个问题的原因，多半是模态框的html代码放置位置不对。看官方文档。说明如下：模态框的 HTML 代码放置的位置务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。如果因为某种原因我们没办...

原生js实现网易轮播图效果

原生js实现网易轮播图效果

2016年10月20日 13 阅读

一、实现效果图二、分析布局主盒子里分上下两个小盒子（1和2）。包含图片的盒子占两张图片的宽（3），处于上盒子中，当前图片在上盒子（1）中，其它图片在盒子（3）的右侧等待播放。下边的盒子（2）包括了六个小方块及定位在主盒子上的两个箭头。三、html部分<！DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>wa...

jquery对象和DOM对象的相互转换详解

jquery对象和DOM对象的相互转换详解

2016年10月20日 10 阅读

jquery对象和DOM对象的相互转换在讨论jquery对象和DOM对象的相互转换之前，先约定好定义变量的风格如果获取的是jquery对象，那么在变量前面加上$,例如var $varible = jquery对象；如果获取的是DOM对象，则定义如下：var varible = DOM对象；1.jquery对象转成DOM对象：jquery对象不能使用DOM中的方法，但如果对jquery对象所提供的方法不熟悉，或者没有jquery想封装的方法，不得不使用DOM...

原生JS实现匀速图片轮播动画

原生JS实现匀速图片轮播动画

2016年10月20日 10 阅读

JS实现轮播图实现结果图：需求：1 根据图片动态添加小圆点 2 目标移动到小圆点轮播图片 3 鼠标离开图片，定时轮播图片；鼠标在图片上时暂停 4 左右两侧可点击轮播图片一、布局部分 html部分<div class="w main clearfix"><！--主内容部分开始--><div class="slider"><！--轮播图部分开始--><ul class="imgs" id="slider_...

微信小程序教程之WXML

微信小程序教程之WXML

2016年10月20日 10 阅读

系列文章：微信小程序教程之WXSS微信小程序教程之引用微信小程序教程之事件微信小程序教程之模板微信小程序教程之列表渲染微信小程序教程之条件渲染微信小程序教程之数据绑定微信小程序教程之WXMLWXMLWXML（WeiXin Markup Language）是MINA设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。用以下一些简单的例子来看看WXML具有什么能力：数据绑定<！--wxml--><text>...

vue.js通过自定义指令实现数据拉取更新的实现方法

vue.js通过自定义指令实现数据拉取更新的实现方法

2016年10月20日 10 阅读

前言这篇文章的代码片段位于 vue 的单文件组件中，即以 .vue 结尾的文件中，本文说明的只是一种实现方法，既不是唯一的方法也不是最好的方法，如果大家有更好的方法可以留言，大家进行讨论。第一步首先，一定要先定义变量：// app.vue <script>data （） {return { // 定义 getData getData:{}, // 定义自定义指令的绑定值 ifUpdate:true}}第二步然后要使用 ajax 的话，要在 in...

微信小程序教程之数据绑定

微信小程序教程之数据绑定

2016年10月20日 10 阅读

系列文章：微信小程序教程之WXSS微信小程序教程之引用微信小程序教程之事件微信小程序教程之模板微信小程序教程之列表渲染微信小程序教程之条件渲染微信小程序教程之数据绑定微信小程序教程之WXML数据绑定WXML中的动态数据均来自对应Page的data。简单绑定数据绑定使用"Mustache"语法（双大括号）将变量包起来，可以作用于：内容<view> {{ message }} </view>Page（{ data: { ...

微信小程序教程之条件渲染

微信小程序教程之条件渲染

2016年10月20日 10 阅读

系列文章：微信小程序教程之WXSS微信小程序教程之引用微信小程序教程之事件微信小程序教程之模板微信小程序教程之列表渲染微信小程序教程之条件渲染微信小程序教程之数据绑定微信小程序教程之WXMLwx:if在MINA中，我们用wx:if="{{condition}}"来判断是否需要渲染该代码块：<view wx:if="{{condition}}"> True </view>也可以用wx:elif和wx:else来添加一个...

微信小程序教程之列表渲染

微信小程序教程之列表渲染

2016年10月20日 11 阅读

系列文章：微信小程序教程之WXSS微信小程序教程之引用微信小程序教程之事件微信小程序教程之模板微信小程序教程之列表渲染微信小程序教程之条件渲染微信小程序教程之数据绑定微信小程序教程之WXMLwx:for在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item<view wx:for="{{items}}"> {{index...

微信小程序教程之模板

微信小程序教程之模板

2016年10月20日 11 阅读

系列文章：微信小程序教程之WXSS微信小程序教程之引用微信小程序教程之事件微信小程序教程之模板微信小程序教程之列表渲染微信小程序教程之条件渲染微信小程序教程之数据绑定微信小程序教程之WXML模板WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。定义模板使用name属性，作为模板的名字。然后在<template/>内定义代码片段，如：<！-- index: int msg: string ...

微信小程序教程之事件

微信小程序教程之事件

2016年10月20日 12 阅读

系列文章：微信小程序教程之WXSS微信小程序教程之引用微信小程序教程之事件微信小程序教程之模板微信小程序教程之列表渲染微信小程序教程之条件渲染微信小程序教程之数据绑定微信小程序教程之WXML什么是事件事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如id, dataset, touches。事件的使用方式在组件中绑定...

Angular2中Bootstrap界面库ng-bootstrap详解

Angular2中Bootstrap界面库ng-bootstrap详解

2016年10月20日 11 阅读

准备 Angular 2 环境ng-bootstrap 是基于 Angular 2 的，因此需要先准备 Angular 2 的环境。使用 ng-bootstrap下载 ng-bootstrapng-bootstrap 使用 bootstrap 4.0 alpha2 ，因此需要先下载 bootstrap ，推荐使用 npm 包的形式：npm install bootstrap@4.0.0-alpha.2 --save接着下载 ng-bootstrap ...

微信小程序教程之引用

微信小程序教程之引用

2016年10月20日 12 阅读

系列文章：微信小程序教程之WXSS微信小程序教程之引用微信小程序教程之事件微信小程序教程之模板微信小程序教程之列表渲染微信小程序教程之条件渲染微信小程序教程之数据绑定微信小程序教程之WXML引用WXML提供两种文件引用方式import和include。importimport可以在该文件中使用目标文件定义的template，如：在item.wxml中定义了一个叫item的template：<！-- item.wxml -->&l...

微信小程序教程之WXSS

微信小程序教程之WXSS

2016年10月20日 11 阅读

系列文章：微信小程序教程之WXSS微信小程序教程之引用微信小程序教程之事件微信小程序教程之模板微信小程序教程之列表渲染微信小程序教程之条件渲染微信小程序教程之数据绑定微信小程序教程之WXMLWXSSWXSS（WeiXin Style Sheets）是MINA设计的一套样式语言，用于描述WXML的组件样式。WXSS用来决定WXML的组件应该怎么显示。为了适应广大的前端开发者，我们的WXSS具有CSS大部分特性。同时为了更适合开发微信小程序，...

Bootstrap框架的学习教程详解（二）

Bootstrap框架的学习教程详解（二）

2016年10月20日 9 阅读

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。一、下载BootstrapBootstrap （当前版本 v3.3.0）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。下载地址：http://v3.bootcss.com/getting-started/#downloadPS：其实我们不用...

Angular.js中用ng-repeat-start实现自定义显示

Angular.js中用ng-repeat-start实现自定义显示

2016年10月20日 11 阅读

前言众所周知AngularJS 中可以使用 ng-repeat 显示列表数据，这对大家来说应该都不陌生了，用起来很简单，也很方便，比如要显示一个产品表格， Controller 的 Javascript 代码如下：angular.module（"app", []）.controller（"MyController", MyController）;MyController.$inject = ["$scope"];function MyControll...

vue.js表格分页示例

vue.js表格分页示例

2016年10月20日 10 阅读

分页一般和表格一起用，分页链接作为表格的一部分，将分页链接封装成一个独立的组件，然后作为子组件嵌入到表格组件中，这样比较合理。效果：代码：1.注册一个组件jsVue.component（"pagination",{template:"#paginationTpl",replace:true,props:["cur","all","pageNum"],methods:{//页码点击事件btnClick: function（index）{if（index ！=...

<< 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 >>

版权所有©石家庄振强科技有限公司2024 冀ICP备08103738号-5 网站地图