最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.原生JS挺简单,为何需要jq?jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器性能好,跨平台兼容也不影响性能.但jq根本就不是为手机设计的.手机上只有webkit浏览器(忽略wp,反正mui不支持wp),根本就不需要jq这种封装框架来操作dom.选择元素//jq$('.el');//js   document.querySelector("di

其实除了支持placeholder 的浏览器,其他用js 或jq实现的都不叫placeholder 效果,只能算上是获取焦点,或失去焦点时的一个placeholder 没有出生时就已经存在效果 很多人用jq写,笔者,用的js写的 在这我觉得用js也好,jq也好,实现这个不仅仅是一个焦点得失的问题,更应该得到扩展 比如说,有value值时,我们给placeholder 组件传一个默认值叫 ‘请输入 ’  如果value 为空 则显示请输入  如果有value 值 则显示value值, 并不是清空,

<div class="box"> <ul> <li class="one">选项卡1</li> <li>选项卡2</li> <li>选项卡3</li> </ul> <div class="content"> <div class="ct">菜单1</div> <div clas

<script> $(function () { $('#head').click=function () { alert($(this).html()) } }) </script> <script> window.onload=function () { var Ohead=document.getElementById('head'); Ohead.onclick=function () { alert(Ohead.innerHTML) } } </scri

效果如图: JQ代码就那么几句, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> <

这个效果很好看,Jq很容易实现: $(document).ready(function(){ $('.menu li').hover(function(){ $(this).children('ul').show(); $(this).focus().addClass('focusa') },function(){ $(this).children('ul').hide(); $(this).focus().removeClass('focusa') }); }); 当   hover ,执行

今天分享一下我自己早几天写的一个效果:无缝轮播,虽然不难,很简单,也没有封装处理过,但是还是希望能帮到一些前端的小伙伴吧,如果有小伙伴感觉有更简化的写法希望可以一起交流一下,技术在于交流嘛,我的邮箱是 15857240771@163.com ,下面就直接上代码了: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ti

// 购物车数量减少$('.reduce').click(function () { addMinus(this,0)}); // 购物车数量增加$('.increase').click(function () { addMinus(this,1)}); function addMinus(t,state) { var num=$(t).parent('.select_num').find('.num'); var msg=''; if(state==0){ msg = "宝贝不能再减少了哦&q

效果图如下: 实现功能:点击第一个按钮,让选中的对象从左边移动到右边: 点击第二个按钮,让左边的所有对象移动到右边: 点击第三个按钮,让选中的对象从右边边移动到左边:   点击第四个按钮,让右边的所有对象移动到左边. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html&g

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航图标的改变</title> <style> * { margin: 0; padding: 0; } div { width: 100px; height: 100px; margin: 100px auto; transform-origi

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src=

XML/HTML Code <form id="myForm" action="upload.php" method="post" enctype="multipart/form-data">  <input type="file" size="60" name="myfile">  <input type="submit&qu

$('.index-news-sub-box ul li').click(function(){ var i=$(this).index(); var img=$('.index-news-img-box a img'); img.removeClass('z-index-2'); img.eq(i).addClass('z-index-2').siblings().removeClass('z-index-2'); }); 原理:给某个按钮绑定点击事件:被点击的当前元素显示(可以设置displ

使用jq写选项卡,告别了繁琐的循环以及命名规范 基本原理: 1.当某一个btn被选中时,将这个btn的背景颜色设为橘色,其余兄弟btn背景颜色设为空(none) 2.如果子div与btn的索引相同,就将这个div显示而其他兄弟div隐藏 1).css函数参数2的回调函数方法: 2).原生get方法再转jq对象 再进行设置的方法 3).当前div使用show()方法,其余兄弟div使用hide()方法 关键字:get()  sibings()  show()  hide()  css() html

  前  言 MUI有三大特点: 轻量 追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征: MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 原生UI 鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI感觉也是我们的重要目标 MUI以iOS平台UI为基础,补充部分Android平台特有的UI控件 流畅体验 下拉刷新,侧滑导航,滑动触发操作菜单   1.新手指南 1.1  快速体验 1. 下载H

经过一段时间的学习,做公司项目,对mui框架有了更加深入完整的了解,其实刚开始接触HBuilder中的mui框架只是简单的了解,并没有深入的研究,后来由于工作的需求,不得不深入研究,并运用的项目中去. mui框架采用html5来开发手机app,包括Android跟ISO,真正做到一套代码能在Android跟ISO上很好的运行,一般用html5开发网页,页面跳转采用a连接,这样会导致页面切换时出现白屏,并且页面跳转时会出现动画效果,如果作为pc端还可以,但用来开发手机app的话,效果肯定惨不忍睹,

前端开发APP,从HBuilder开始~ 序 通过 HTML5 开发移动App 时,会发现HTML5 很多能力不具备.为弥补HTML5 能力的不足,在W3C 中国的指导下成立了www.HTML5Plus.org组织,推出HTML5+规范. HTML5+扩展了JavaScript 对象plus,使得js 可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系统等,业务能力如上传下载.二维码.地图.支付.语音输入.消息推送等. HBuilder 的手机原生能力调用分2 个层

最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. 但是,好景不长... 研发加了ajax事件后,我的交互效果有部分受了影响! 一个小姑娘,在一群大老爷们研发堆里,对着昏暗的电脑和看不太懂的后台代码,改了半天.最后没解决.我就回来了. 后来就找共同点,发现有个类名控制的交互都不能实现,最后去问研发,你是不是没加上我的类名? 回:加着呢啊!我一看模拟

前端开发APP,从HBuilder开始~ 序 通过 HTML5 开发移动App 时,会发现HTML5 很多能力不具备.为弥补HTML5 能力的不足,在W3C 中国的指导下成立了www.HTML5Plus.org组织,推出HTML5+规范. HTML5+扩展了JavaScript 对象plus,使得js 可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系统等,业务能力如上传下载.二维码.地图.支付.语音输入.消息推送等. HBuilder 的手机原生能力调用分2 个层

最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. 但是,好景不长... 研发加了ajax事件后,我的交互效果有部分受了影响! 一个小姑娘,在一群大老爷们研发堆里,对着昏暗的电脑和看不太懂的后台代码,改了半天.最后没解决.我就回来了. 后来就找共同点,发现有个类名控制的交互都不能实现,最后去问研发,你是不是没加上我的类名? 回:加着呢啊!我一看模拟

运行效果: 引入插件: <link rel="stylesheet" href="ez-guide.css"> <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> <script src="ez-guide.js"></script> 由于是基于jq写的,所以要引入