音频(audio)自定义样式以及控制操作面板
简介audio为html5中的新属性。定义声音,比如音乐或者其他的音频流。在ie8(包括)以及更早的版本并不支持。我的自以为一直以为自定义样式,就要添加相应的控制js代码,所以是望而却步。此次项目中正好出现了这一题目,而jacques同学则完美的呈现了这个音频效果。so决定学习一下,并且记录一下,有理解错误或者不能理解的地方还希望jacques给指教一下。样式audio默认提供一个控制面板,这个控制面板则可以由我们自己来定义其显示状态html代码
Attribute 与 Property
写作日期2014-09-02DOM元素中的attribute与property并不相同。attribute通常翻译为“特性”,property通常翻译为“属性”。其实它们是近义词,并不能根据特性、属性这两个词汇来区分attribute与property。特性:某事物所特有的性质;特殊的品性、品质。属性:事物所具有的不可缺少的性质。所以,attribute与property都可以叫“特性”,也都可以叫“属性”。区别从HTML到DOM元素,一种是声明式的语言,一种是命令式语言。attribute是直接收集HTML中的属性转为js对象,对象的value最接近原生态,也就是HTML标记里面的样子;property也是转为js对象,但是转化的过程中会对value做一些处理,将value转为对js来说更有意义的值。比如:
jquery访问浏览器本地存储cookie,localStorage和sessionStorage
//访问cookie,mycolor代表键var$cook=$.cookie("mycolor");//设置cookie$.cookie("mycolor","red"});$.cookie("mycolor","red",{expires:7,path:'/'});//增加了有效时间和访问路径//删除cookie,传递null值$.cookie("mycolor",null});说明:'mycolor'参数相当于cookie存储数据的键,即数据的名字,通过名字访问;cookie的设置有三个参数,第一为设置数据的键,第二个为设置数据的值,expires表示有效时间,单位为天,path为访问路径,"/"表示当前文件路径,在网站中表示根目录。注意:如果不设置路径,默认情况下只有设置cookie的网页才可以访问此cookie;如果想网站的网页可以共享cookie,将路径设为根目录。注意:cookie就相当于一个能存储数据的微型本地数据库,"mycolor"相当于每条数据的key。二、localStorage定义:一个本地的小
jQuery对象与DOM对象之间的转换方法
什么是jQuery对象?---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。比如:$("#test").html()意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法这段代码等同于用DOM实现代码:document.getElementById("id").innerHTML;虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如:$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。还有一个要注意的是:用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象,这两者并不等价。请参看如下说的两者间的转换。既然jQuery有区别但也有联系,
[js插件开发教程]原生js仿jquery架构扩展开发选项卡插件
jquery插件一般是这么干的:$.fn.插件名称=function(){},把插件的名称加在.fn上,在源码里面实际上是扩展到构造函数的原型对象上,如果你没看过jquery的源代码,或者你曾经看过,但是不知道为什么把插件扩展到fn上,那么本篇文章就能解答你的疑惑。关于jquery插件开发方式,可以参考我的这篇文章:[js高手之路]jquery插件开发实战-选项卡详解关于选项卡这个功能具体怎么做,不在这里详解,这个是入门级的功能,本文重在讨论插件开发的架构,扩展,以及参数设置。如果你使用过jquery的选项卡插件,或者其他类型的插件,他们一般都是这么调用的:$(".tab").tabs({})$(".tab").tabs(function(){});一种是传递参数定制插件行为一种是传递函数定制插件行为$(".tab")选择到元素,然后返回的是jquery对象tabs方法扩展在fn上就是扩展都jquery构造函数的原型对象上,那么对象($(".tab"))调用原型对象上的方法(tabs
关于JavaScript/jQuery
问题一:javaScript中window.onload和jquery中document.ready()的区别:两者的区别主要有以下两点:在页面中onload()只能使用一次,而jquery中的document.read()可以多次使用.document.ready()函数在页面Dom元素加载完成以后就会别调用,eronload()函数是在所有资源(包括图像.音频加载完毕之后才会调用).问题二:jquery中哪几类型的选择器.基本选择器:直接根据idcss类名元素名返回匹配的dom元素层次选择器:也加做路径选择器,可以根据路径层次来选择相应的Dom元素.过滤选择器:在前面的基础上过滤相关条件,得到匹配的dom对象问题三:画出dom对象结构图这个问题首先要知道什么是dom:DocumentobjectModel,文档对象模型.表示文档(如HTML标记)的应用程序接口(API).它提供了文档中独立元素的结构化,对象化的表示方法,并允许通过对象的属性和方法访问这些对象.HTMLDOM节点:在DOM模型中,每个部分都是节点.1
自学jQueryMobile之简单创建页面
首先简答介绍一下JQueryMobile吧,我觉得用一句话来讲就是可以"写更少的代码,做更多的事情":它可以通过一个灵活及简单的方式来布局网页,且兼容所有移动设备。这也是我自学jQueryMobile的原因之一吧。废话不多说,下面一起来看看如何使用它吧!首先你可以从jQuerymobile.com下载jQueryMobile库1、安装,把下载的这三个文件导入进来jquery.mobile-1.4.5.cssjquery-1.10.2.jsjquery.mobile-1.4.5.js
在婚礼上搞点事情如何
前几天被新浪的一位程序员刷屏了,婚礼现场还要跑去修bug,这事得赖鹿晗。看到之后想起我的婚礼,那是一年前也是在国庆。距婚礼还有一个月的时候,心想这可是一辈子的大事,在众多亲朋好友面前搞点比较cool的事情,这样会不会让大家印象深刻点。怎样会比较cool希望你看到这个标题不要以为是让基友拉着我私奔:scream:。让现场所有宾客都能参与进来,对,这应该比较cool。根据以往参加别人婚礼的经验,流程大概是:主持人引导新郎新娘进场,新郎新娘立下海誓山盟,新郎新娘双方父母登台,然后全场一起举杯祝福新人,最后一直吃到婚礼结束。宾客除了那一次举杯,全程都是路人,参与感非常低。有的婚礼会有些互动,这完全看主持人的个人风格了。要调动现场,站在台上撒红包这种土豪的做法显然不适合木讷的我。眼下几乎人人都有智能机,人人都有微信,于是就想能不能借助微信让大家参与进来。大家可以发祝福上墙,然后现场大屏以弹幕形式将大家祝福展示出来。大家发完祝福可以在大屏上看到自己的头像以及祝福的话,内心是不是有一丝丝的满足。一开始是想搞一个公众号,大家可以直接在输入框
60、jQuery其余操作
jQuery语法梳理1
初学jquery需要注意的几点:1.通过JQ获取到的元素是JQ对象,通过元素的document.getXXX获取到的元素是原生对象2.原生对象不能调用JQ的方法和属性3.JQ对象不能调用原生对象的方法和属性JQ对象和原生对象可以相互转换:1.原生对象如何转JQ对象varcontent=document.getElementsByClassName("content")[0];$(content).css("color","red");2.JQ对象如何转原生对象//JQ对象[0]//JQ对象.get(0)$(".content")[0].innerHTML="显示";$(".content").get(0).innerHTML="显示2";常用的语法1.获取元素($("")里面放字符串-选择器)类名:$(".item"),标签名:$("div"),输入框的类型:$("input[type=radio]"),筛选类名不是item的div:$("div:not(.item)")。。。2.创建
daterangepicker 使用方法以及各种小bug修复
双日历时间段选择插件—daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间,时间段的最大跨度可以在程序里设定。一、引用daterangepicker依托monent.js和jquery使用。所以在使用中在引入daterangepicker之前必须引入monent.js和jquery以及bootstrap。1
如何解决jQuery Validation针对动态添加的表单无法工作的问题?
为了充分利用ASP.NETMVC在服务端呈现HTML的能力,在《利用动态注入HTML的方式来设计复杂页面》一文中介绍了,通过Ajax调用获取HTML来呈现复杂页面中某一部分界面的解决方案。我们知道ASP.NETMVC默认集成了jQueryValidation,但是对于通过JavaScript动态添加的表单,客户端验证默认情况下是失效的。还是以前文涉及的“联系人管理”为例,在一个ASP.NETMVC应用中定义了如下两个类型,Contact封装联系人信息,HomeController包含三个Action,除了默认Index外,两个Update方法用于修改指定的联系人信息。1:publicclassContact2:{3:[Required]4:publicstringId{get;set;}5:[Required]6:publicstringFirstName{get;set;}7:[Required]8:publicstringLas
超级详细 一听就会:利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)
前言作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播。做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单。但轮播插件这种东西总归是不灵活的,一些简单的场景还可以应付,比较复杂一点的场景处理起来就比较麻烦了。今天我会全程带大家来写一个循环轮播,用到的技术有:html、css、JavaScript、jQuery,都是前端最基础的技术,有基础又爱学肯学的你一定一听就会,如果不会咋整?那多看几遍。:laughing:1.效果展示以小米官网的图片轮播为例,实际上千篇一律,好啦,看下图:好啦,看效果,不要看妹子,虽然妹子长得是很好看啦!2.原理分析无限循环轮播的原理是在展示内容的前后各放一组图片,以无限循环展示3张照片为例,三张图片我给它取名为1.jpg,2.jpg,3.jpg,图片展示分别如下:原理示意图展示:原理其实就是复制两组同样的照片分别放在前面和后面(实际上不用完全复制两组,只需要前面可以到1.jpg,后面也可以到1.jpg
Require.js使用方法总结
一、为什么要使用require.js首先一个页面如果在加载多个js文件的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。require.js,就是为了解决这两个问题:实现js文件的异步加载,避免网页失去响应;管理模块之间的依赖性,便于代码的编写和维护。二、require.js的加载第一步,去官网下载最新版本,直接放到页面进行加载
移动端H5图片压缩上传插件:localResizeIMG和Imageupload
最近很多小伙伴们在H5交流群里,让学堂君推荐几个好用的移动端H5图片压缩上传插件或者说是H5图片压缩上传的组件等等。闲话少说,25学堂的就来跟大家推荐2款,学堂君亲自用过的两款不错的移动端H5图片压缩上传插件,兼容IOS和android两大主流平台。第一款移动端H5图片压缩上传插件:localResizeIMG也是学堂君用H5开发项目当中图片上传的必需工具。功能很强大。也是目前最好用的HTML5图片本地压缩上传插件「localResizeIMG」,而且该插件目前使用人也很多了。localResizeIMG插件的优势:1、经过大量测试,特别适合在移动设备上使用2、会根据对应设备自动载入JS文件,节省宽带3、基于原生JavaScript编写,支持AMD规范同时也是基于jquery的插件。下面就是详细使用localResizeIMG的前端代码:扩展阅读:http://www.cnblogs.com/woider/p/6254859.htmlgithub下载地址:https://github
前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”
前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化。如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都有成熟的方案,比如:vue+vue-i18nangular+angular-translatereact+react-intl但现在的情况是老的项目并没有使用这类架构。说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言。最初接到这个任务,并没有太多顾虑,毕竟这种东西有很成熟的解决方案,实现起来难点不会很大。可当真正动起来手来去实现的时候发现一些问题,这里先介绍下我们老平台的架构:MVC+WebApi,MVC项目负责页面渲染,webapi负责数据接口,是一种很传统的架构方式。国际化主要在MVC端去做就好了,可是由于MVC项目里面使用了大量第三方bootstrap组件,几乎95%的组件都是通过js去实现的,比如bootstrapTable,比如bootstrap-select,比
10月27日 - 每日安全知识热点
作者:Easytraveller热点概要:微软公布其开源扫描工具Sonar、jQuery官网被黑,官方回应莫慌,库很安全、卡巴斯基:黑客通过有后门的Office偷取NSA工具、Brida高级移动渗透测试、BlueBorne演示中的POC、魔术帽中的兔子:火眼实验室坏兔报告。资讯类:微软公布其开源扫描工具Sonarhttp://securityaffairs.co/wordpress/64796/hacking/micorsoft-sonar-tool.htmlhttps://github.com/sonarwhal/sonarjQuery官网被黑,官方回应莫慌,库很安全https://thehackernews.com/2017/10/jquery-hacked.html卡巴斯基:黑客通过有后门的Office偷取NSA工具http://securityaffairs.co/wordpress/64758/intelligence/kasper
快讯 | 继CoinHive后,JQuery官方博客也被黑了
FreeBuf先前报道过,分发挖矿javascript的网站CoinHive被黑了,而且影响范围很广,今天,又有新闻爆出,前端领域经久不衰的老牌第三方库jQuery的官方博客也被黑了。jQuery今天早些时候,网名为“n3tr1x”and“str0ng”的黑客篡改了jQuery官方博客(blog.jquery.com)的主页。而jQuery的官方博客使用的是WordPress后台内容管理系统。我们在截图中可以看到,黑客使用了LeahSilber(jQuery核心开发人员)的账号发了一篇文章。TheHackerNews表示,现在还没有证据表示,存放jQuery代码的服务器(code.jquery.com)也被黑客入侵了。但是,这也不是没有可能的,毕竟用户量达百万的WordPress以前曝出过严重的0day漏洞。因此,黑客这次有可能不仅仅只是黑了Silber的账号,也许还利用了一些开发者不熟知的WordPress漏洞。撰写这篇文章的时候,这个页面已经被jQu
JQuerymobile实例源代码
首页我们先来解释一下下JQuerymobile是什么,jQueryMobile是JQuery框架的一个组件(而非jquery的移动版本)。jQueryMobile是一款基于HTML5的用户界面系统是用于创建移动Web应用的前端开发框架,可以应用于智能手机与平板电脑,而且使用HTML5和CSS3最小的脚本来布局网页。我们先一部分一部分讲解,最后在为大家附上完整代码。1滑出面板我们再来解释一下其中一些属性的作用吧。data-role="panel"属性用来创建面板。data-display属性来控制面板的展示方式:①overlay在内容上显示面板②push是同时"推动"面板和页面。③reveal默认值,将页面像幻灯片一样从屏幕划出,将面板显示出来。1 已打卡127天