一切福田,不離方寸,從心而覓,感無不通。

Category Archives: Frontend

jQuery:checked Selector

Description: Matches all elements that are checked or selected. version added: 1.0jQuery( ":checked" ) The :checked selector works for checkboxes, radio buttons, and options of select elements. To retrieve only the selected options of select elements, use the :selected selector. Examples: Determine how many input elements are checked. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>checked demo</title> <style> div […]

龙生   16 Nov 2017
View Details

jquery操作复选框(checkbox)的12个小技巧总结

1、获取单个checkbox选中项(三种写法) $("input:checkbox:checked").val() 或者 $("input:[type=’checkbox']:checked").val(); 或者 $("input:[name=’ck']:checked").val(); 2、 获取多个checkbox选中项 $('input:checkbox').each(function() { if ($(this).attr('checked') ==true) { alert($(this).val()); } }); 3、设置第一个checkbox 为选中值 $('input:checkbox:first').attr("checked",’checked'); 或者 $('input:checkbox').eq(0).attr("checked",’true'); 4、设置最后一个checkbox为选中值 $('input:radio:last').attr('checked', 'checked'); 或者 $('input:radio:last').attr('checked', 'true'); 5、根据索引值设置任意一个checkbox为选中值 $('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2…. 或者 $('input:radio').slice(1,2).attr('checked', 'true'); 6、选中多个checkbox同时选中第1个和第2个的checkbox $('input:radio').slice(0,2).attr('checked',’true'); 7、根据Value值设置checkbox为选中值 $("input:checkbox[value=’1′]").attr('checked',’true'); 8、删除Value=1的checkbox $("input:checkbox[value=’1′]").remove(); 9、删除第几个checkbox $("input:checkbox").eq(索引值).remove();索引值=0,1,2…. 如删除第3个checkbox: $("input:checkbox").eq(2).remove(); 10、遍历checkbox $('input:checkbox').each(function (index, domEle) { //写入代码 }); 11、全部选中 $('input:checkbox').each(function() { $(this).attr('checked', true); }); 12、全部取消选择 $('input:checkbox').each(function () { $(this).attr('checked',false); }); from:http://www.jb51.net/article/46469.htm

龙生   16 Nov 2017
View Details

jQuery判断checkbox是否选中的3种方法

from:https://www.cnblogs.com/youmingkuang/p/5864190.html

龙生   16 Nov 2017
View Details

jQuery 判断页面元素是否存在的代码

例如: 代码如下: document.getElementById("someID").innerText("hi"); 如果ID为"someID"的元素不存在,我们将得到Javascript运行错误:document.getElementById("someID") is null 正确的写法应该是: 代码如下: obj = document.getElementById("someID"); if (obj){ obj.innerText("hi"); } 那么在jQuery,我们如何判断页面元素存在与否呢?如果参照上面的传统Javascript的写法,我们第一个想到的办法一定是: 代码如下: if ($("#someID")){ $("#someID").text("hi"); } 可是这么写是不对的!因为jQuery对象永远都有返回值,所以$("someID") 总是TRUE ,IF语句没有起到任何判断作用。正确的写法应该是: 代码如下: if ( $("#someID").length > 0 ) { $("#someID").text("hi"); } 注意 :判断某个页面元素存在与否在jQuery实际上是没有必要的,jQuery本身会忽略 对一个不存在的元素进行操作,并且不会报错。 代码如下: $(document).ready(function(){ var value=$('#btn_delXml').length; if(value>0) { alert('Extsts'); } else { alert('not Extsts'); } }) 下面是其它说明虽然类似,但有些文字说明 有的时候,要根据页面加载的内容不同而作不同的操作,这个时候,判断页面上是否存在这个元素(或对象)变得尤为重要。如果写JavaScript来实现,较为麻烦,而jQuery却能很容易的实现这个功能。 我们知道,jQuery选择器获取页面的element时,无论element是否存在,都会返回一个对象。例如: var my_element = $("#element_Id" ) 此时的变量my_element就是一个对象,既然是一个对象,这个对象就具有length的属性,因此,用以下代码可以判断元素(对象)是否存在: 代码如下: if(my_element.length>0){ alert("element is exist."); }else{ alert("element not be found"); } from:http://www.jb51.net/article/19646.htm

龙生   16 Nov 2017
View Details

Modernizr

Modernizr 是一个利用 JS 和 CSS 来检测浏览器所支持功能的小工具。

龙生   12 Oct 2017
View Details

Respond.js

Respond.js 是一个小脚本,支持在浏览器中使用CSS3媒体查询功能。

龙生   12 Oct 2017
View Details

less

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中。HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义。 作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。 LESS 原理及使用方式 本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。 客户端 我们可以直接在客户端使用 .less(LESS 源文件),只需要从http://lesscss.org下载 less.js 文件,然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码: <link rel="stylesheet/less" type="text/css" href="styles.less"> LESS 源文件的引入方式与标准 CSS 文件引入方式一样: <link rel="stylesheet/less" type="text/css" href="styles.less"> 需要注意的是:在引入 .less 文件时,rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是:LESS 源文件一定要在 less.js 引入之前引入,这样才能保证 LESS 源文件正确编译解析。 服务器端 LESS 在服务器端的使用主要是借助于 LESS 的编译器,将 […]

龙生   12 Oct 2017
View Details

常见JS动画效果

在这里,我为大家提供几种常用的动画效果,虽然没有什么特别,不是很炫酷,但很常见也很便捷。 一、轮播图: 轮播图在网页中运用较广,经常使用于头部banner,使用于电商网站中,例如;淘宝、京东、天猫等购物平台都少不了。而轮播图有多种类型,这次就和大家说说其中的两款。轮播图的原理:点击上一张或下一张时,图片移动的距离为图片本身的宽度;点击图片下的原点导航时跳转到相应的图片位置。 1、一般的轮播图。这一类型的轮播图,在切换图片的过程中,图片会缓慢的滑动到达相应的位置,即可以看到图片到达相应位置的全过程。

  2、无缝轮播图。此类轮播图不会显示图片移动的全过程。

  二、旋转木马。顾名思义,旋转木马的动画效果和游乐园中旋转木马类似,因此而得名。旋转木马的原理和轮播图其实差不多,只是旋转木马需要设置每一张图片的z-index属性,且每一张的z-index的设置精准、满意需要一定的经验。

  三、楼层跳跃。该动画效果也大多使用在电商网站,当点击到相应的标签时就会跳到该位置的内容。例如:当点击淘宝旁的楼层跳跃中的美妆/女装时就会跳到美妆/女装模块。

  四、返回顶部。返回顶部严格来说并不算真正意义上的动画效果,通过锚点就可以实现返回顶部的效果,但此返回顶部效果是滚动条缓慢的回到顶部,这个动画效果几乎在每个网页都可以看到。

  常见的JS动画效果还有许多更炫酷的,以上皆是一些比较普通的,但无论多炫酷的动画效果都是以以上的动画效果的原理为基础,以上动画虽然普通但性能方面没有太大问题。   from:https://my.oschina.net/sichunchen/blog/1544549

龙生   01 Oct 2017
View Details

bootstrap中的焦点图实例

使用html属性标记,代码如下: <div id="myCarousel" class="carousel">   <!-- 要切换的内容-->   <div class="carousel-inner">     <div class="active item">…</div>     <div class="item">…</div>     <div class="item">…</div>   </div>   <!-- 切换导航 -->   <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>   <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> </div> 也可以在使用了.carousel类的元素内部添加切换内容指示工具   <!-- 焦点图指示器--> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> 方法 .carousel(options) 初始化轮播组件,接受一个对象做为可选参数并开始循环播放. 例如: $(".carousel").carousel({    interval:2000 }) .carousel('cycle') 从左向右循环播放 .carousel('pause')中止播放 .carousel(number)播放到某个特定的帧(与数组类似,从0开始计数). .carousel('prev') 回到上一帧 .carousel('next') 回到下一帧 轮播类提供了两个事件 slide 该事件在调用slide实例方法时立刻触发 slid 该事件在轮播项切换效果完成之后触发 本实例代码如下: <style>/*metro风格样式*/         div, input, select, textarea, span, img, table, td, th, p, a, button, ul, li         {             border–radius: 0 0 0 0 !important;         }                                                               [class^="m-icon-"]         {             display: inline–block;             width: 14px;             height: 14px;             margin–top: 4px;             line–height: 14px;             vertical–align: top;   background–image: url(http://www.kuiyu.net/content/bootstrap/img/syncfusion-icons.png);             background–position: 0 0;             background–repeat: no–repeat;         }                                                               [class^="m-icon-big-"]         {             display: inline–block;             width: 30px;             height: 30px;             margin: 6px;             vertical–align: top;   background–image: url(http://www.kuiyu.net/content/bootstrap/img/syncfusion-icons.png);             background–position: 0 0px;             background–repeat: no–repeat;         }                                                               .m–icon–white         {             background–image: url(http://www.kuiyu.net/content/bootstrap/img/syncfusion-icons-twhite.png);         }                                                               /*  Misc */         .btn.icn–only         {             min–width: 14px;         }         .btn.bigicn–only         {             min–width: 34px;         }         .m–icon–swapright         {             background–position: –27px –10px; […]

龙生   20 Sep 2017
View Details

给 Web 开发人员推荐的开源图形库 —— 2D/3D

现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高,数据可视化、动画交互、2D/3D 等元素已然成为标配。   2D 一、绘图渲染 1、图形 PixiJS 一个 HTML5 构建引擎,用最快、最灵活的 2D WebGL 渲染器创建漂亮的数字化内容。旨在提供一个可以在所有设备上运行的快速轻量级 2D 库,帮助你创建丰富的交互式图形、跨平台应用和游戏,而无需深入到 WebGL API 或处理浏览器和设备的兼容性。 效果预览:点此查看 Fabric.js 一个可以轻松使用 HTML5 canvas 元素的库,在 Canvas 元素之上提供交互对象模型,同时还包含 SVG-to-canvas 解析器。它可以帮助你在画布上创建和填充对象,从简单的几何图形到成百上千路径组成的复杂图形。你可以通过鼠标轻松的移动、缩放和旋转这些对象,修改它们的属性(颜色、透明度,层叠顺序)等等。 效果预览:点此查看 2、立体像素 Obelisk.js 这是一个构建等距立体像素对象的 JavaScript 库,通过提供简单灵活的 API ,可以轻松地在 HTML5 画布中添加像砖、立方体、金字塔和斜率等等距像素元素。它严格遵循像素整齐的模式,在像素级别中处理所有渲染以获得精确的像素排列。 3、字体 opentype.js 这是一款是用于 TrueType 和 OpenType 字体的 JavaScript 解析器和写入程序。它非常高效,可在浏览器和 node.js 中运行。 4、创意 p5.js P5.js 有完整的一套画图功能,既可当作画图软件使用,也包括支持与各类页面元素交互的库。但是,开发者没有被限制自己的画布上,他们可以把整个浏览器页面作为自己的素描区域。正因为如此,P5.js 有一个 addon 库能够使开发者非常容易地与其它 HTML5 对象(包括文本、输入、视频、网络摄像头和声音)进行交互。 效果预览:点此查看 二、矢量图形 Snap.svg 一个显示为现代 Web 准备的 Javascript SVG 库,专为现代浏览器而设计,支持最新的 SVG 功能,如屏蔽、剪切、模式、完整梯度、组等。旨在让你使用 SVG 资源就像在 jQuery 中使用 DOM 一样简单。 效果预览:点此查看 Raphaël 一个小型的 JavaScript 库,用来简化在页面上显示矢量图的工作。例如,如果要创建自定义的图表或图像裁剪和旋转小部件,可以使用该库简单而轻松地实现。Raphaël 使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,这意味着创建的每一个图形对象也是一个 DOM 对象,可以附加 JavaScript 事件处理程序或稍后修改它们。它旨在提供一个适配器,能跨浏览器和更简单地绘图矢量作品。 三、物理引擎 […]

龙生   06 Aug 2017
View Details
1 27 28 29 58