checkbox样式 | 易学教程

day49

阅读更多关于 day49

目录 JQuery介绍 JQuery优势 JQuery版本 JQuery对象声明JQuery对象的语法 JQuery基本的语法 JQuery把文件导入模板中查找标签基本选择器层级选择器筛选器基本筛选器属性筛选器表单筛选器操作标签样式操作文本操作文档处理属性操作克隆位置操作事件事件的绑定 input监听默认的事件阻止事件冒泡 JQuery介绍 JQuery是一个轻量级、兼容多浏览器的js库，相当于python中的模块。 JQuery使用户能够更方便的处理HTML Document、Evnets（事件触发器）、实现动画效果、方便进行Ajax（创建快速动态页面的技术）、交互，能够极大的简化js编程。它的总是就是：写很少的代码，做更多的事情 JQuery优势一款轻量级的js框架。JQuery核心js文件才几十kb，不会影响页面的加载速度。丰富的DOM选择器，JQuery的选择器用来很方便，比如要找到某个DOM对象的相邻的元素，js也是一行代码就能搞定。链式表达式。JQuery的链式操作可以把多个操作写在一行代码里，更加简洁。事件、样式、动画支持。JQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax（创建快速动态页面的技术）操作支持。JQuery简化了AJAX操作

1119课堂小结

阅读更多关于 1119课堂小结

目录筛选器基本筛选器属性筛选器表单筛选器筛选器方法上一个元素下一个元素父元素子代和兄弟元素查找筛选补充操作标签样式操作位置操作尺寸操作文本操作属性操作文档操作事件常用事件事件绑定移除事件阻止后续事件执行阻止事件冒泡页面载入事件委托筛选器基本筛选器 :first // 第一个 :last // 最后一个 :eq(索引值) // 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(索引值) // 匹配所有大于给定索引值的元素 :lt(索引值) // 匹配所有小于给定索引值的元素 :not(元素选择器) // 移除所有满足not条件的标签例：$("li:not(.c1)") // 找到所有不包含c1样式类的li标签 :has(元素选择器) // 保留包含特定后代的元素，去掉那些不含有指定后代的元素例：$("div:has(.c1)") // 找到所有后代中有c1样式类的div标签属性筛选器 [attribute=value]// 属性等于 [attribute!=value]// 属性不等于例： <input type="text"> <input type="password"> <input type=

JQuery练习题

阅读更多关于 JQuery练习题

练习题： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery选择器筛选器练习</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style> .my-padding { padding: 10px 0; } .my-dark { background-color: #f5f5f5; } .footer { background: #111; font-size: 0.9em; position: relative; clear: both; } .my-white { color:

1、checkbox写法

阅读更多关于 1、checkbox写法

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>checkbox样式</title> <style> .el-checkbox{ display: inline-block; position: relative; font-size: 14px; font-weight: 500; color: #606266; cursor: pointer; user-select: none; white-space: nowrap; } .el-checkbox-box{ display: inline-block; width: 14px; height: 14px; border: 1px solid #dcdfe6; vertical-align: middle; border-radius: 2px; } .el-checkbox-box::after{ width: 3px; height: 7px; content: ''; border: 1px solid #fff; display: inline-block; border-top: 0; border-left: 0; position: absolute; top: 6px; left: 6px; transform:

checkbox 样式重写

阅读更多关于 checkbox 样式重写

checkbox 原生样式一般都不会使用，所以一般都要改写样式，今天记录一下改写的注意点 1.appearance appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; 这个是去除原生样式，加了前缀兼容性比较差　　所有主流浏览器都不支持 appearance 属性。　　Firefox 支持替代的 -moz-appearance 属性。　　Safari 和 Chrome 支持替代的 -webkit-appearance 属性。值描述 normal 将元素呈现为常规元素。 icon 将元素呈现为图标（小图片）。 window 将元素呈现为视口。 button 将元素呈现为按钮。 menu 将元素呈现为一套供用户选择的选项。 field 将元素呈现为输入字段。 2.重新渲染样式：可以用背景图片、实体字符、图形变换等方式添加对勾样式，下面具体代码可以直接使用的（移动端代码）移动端代码 @fs2:0.0426rem; @fs1: 0.0213rem; 　　改写样式 input[type=checkbox]{ -webkit-appearance:none; margin-top: 1*@fs1; width: 17*@fs2; height: 17*@fs2;

纯css实现Material Design中的水滴动画按钮

阅读更多关于纯css实现Material Design中的水滴动画按钮

前言大家平时应该经常见到这种特效，很炫酷不是吗这是谷歌 Material Design 中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆 js 和 css ，其实在已有的项目中，可能只是想加一个这样的按钮，来增强用户体验，这些 js 库就显得有些过于庞大了，同时由于是 js 实现，很多时候还要注意加载问题。那么，有没有办法用 css 来实现这一特效呢？思路其实就是一个动画，一个正圆从小变大，用 css3 中的动画很容易实现示例代码 @keyframes ripple{ from { transform: scale(0); opacity: 1; } to { transform: scale(1); opacity: 0; } } 通常用 js 来实现的方式很简单，就是给点击元素添加一个 class ，然后再动画结束后移除该 class 示例代码 var btn = document.getElementById('btn'); btn.addeventlistener('click',function(){ addClass(btn,'animate') },false) btn.addeventlistener('transitionend',function(){//监听css3动画结束 removeClass(btn,

前端之Jquery

阅读更多关于前端之Jquery

前端之Jquery jQuery jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ jQuery的优势一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫

jQuery

阅读更多关于 jQuery

Jquery 高级版javascript 提供了更加便利的js使用方式楔子需求二：将上面的li标签实现隔行换色效果 js代码 <script> var obj = document.getElementsByClassName('city'); for (var j = 0;j < obj.length;j++){ if (j%2==0){ obj[j].style.backgroundColor = 'lightblue' }else{ obj[j].style.backgroundColor = 'lightgreen' } } </script> jquery代码 $('li:odd').css('background-color','lightblue') $('li:even').css('background-color','lightyellow') jquery介绍 js的痛点： window.onload事件只能出现一次如果出现多次，后面的事件会覆盖前面的事件浏览器兼容性问题简单的功能实现的很繁琐，例如：渐变的动画效果代码容错性差，如果此处报错，会影响后续代码执行 jquery的特点链式编程：比如 .show() 和 .html() 可以连写成 .show().html() 。隐式迭代：隐式对应的是显式。隐式迭代的意思是

更改微信小程序的组件默认样式

阅读更多关于更改微信小程序的组件默认样式

checkbox 　　　　　/*checkbox 整体大小 */ 　　.checkbox { 　　width: 12%; 　　/* height: 240rpx; */ 　　} 　　/*checkbox 选项框大小 */ 　　checkbox .wx-checkbox-input { 　　width: 36rpx; 　　height: 36rpx; 　　border-radius: 50%; 　　} 　　/*checkbox选中后样式 */ 　　checkbox .wx-checkbox-input.wx-checkbox-input-checked { 　　border: none; 　　background: #FF8383; 　　} 　　/*checkbox选中后图标样式 */ 　　checkbox .wx-checkbox-input.wx-checkbox-input-checked::before { 　　 width: 30rpx; 　　height: 30rpx; 　　line-height: 30rpx; 　　 text-align: center; 　　font-size: 22rpx; 　　color: #fff; 　　background: transparent; 　　transform: translate(-50%, -50%) scale(1);

Android5.0 CheckBox颜色修改

阅读更多关于 Android5.0 CheckBox颜色修改

Android5.0开始，CheckBox带有material design动画效果，其默认的样式如下图所示：可以看到，在上图中，CheckBox的边框为灰色，当被选中后，填充色为绿色。那么如果我们想要改变边框和填充色，同时也保存material design动画效果，应该怎么做呢。在style.xml文件中新增一条： <style name= "My_CheckBox" parent= "@android:style/Widget.Material.CompoundButton.CheckBox"> < item name= "android:colorControlActivated">@color/colorAccent</ item> < item name= "android:colorControlNormal">@color/colorPrimary</ item> </style> 然后，设置CheckBox: < CheckBox android:id= "@+id/save_pass" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:theme= "@style/My_CheckBox"/> 需要注意的是：

订阅 checkbox样式