day 15
1.input标签默认内容
Title
默认内容
111
222
333
男:
女:
广州:
北京:
上海:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input value="默认内容"/>
<hr />
<textarea>默认内容</textarea>
<hr />
<select>
<option>111</option>
<option>222</option>
<option selected="selected">333</option>
</select>
<hr />
男: <input type="radio" name="r1" checked="checked"/>
女: <input type="radio" name="r1"/>
<hr />
广州: <input type="checkbox" checked="checked" name="e1">
北京: <input type="checkbox" name="e1">
上海: <input type="checkbox" checked="checked" name="e1">
<body>
CSS自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1[name='a'] {
color: red;
}
</style>
</head>
<body>
<div class="c1" name="a">css自定义属性</div>
</body>
</html>
CSS漂浮(之前的形式比较low)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.left {
float: left;
}
.clean {
background-color: red;
}
/*在类clean后边的样式*/
.clean:after {
/*在clean类后边加上内容"lll"*/
content: 'lll';
/*这个必不可少*/
clear: both;
/*显示为块级标签*/
display: block;
/*去掉lll占的红色背景*/
height: 0;
/*隐藏内容"lll"*/
visibility: hidden;
}
</style>
</head>
<body>
<div class="clean">
<div class="left" style="height: 60px;background-color: greenyellow">123</div>
<div class="left">456</div>
</div>
<!--<div class="sanjiao"></div>-->
</body>
</html>
每个标签都有字标签，其中两个是before、after，分别是在其前、后的样式。上篇博客是在两个div下边直接写一个clear:both，这个示例和那个差不多，先加一点字段占用样式(这里是背景色)，然后改为块级、在把占用的样式删除。
CSS之三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.icon {
display: inline-block;
border-bottom: 20px solid red;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
</style>
</head>
<body>
<div class="icon"></div>
</body>
</html>
Title
.icon {
display: inline-block;
border-bottom: 20px solid ;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
JS之全选，反选，取消demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="jquery-3.1.0.js"></script>
<body>
<input type="button" onclick="CheckAll();" value="全选"/>
<input type="button" onclick="CheckReverse();" value="反选"/>
<input type="button" onclick="CheckCancel();" value="取消"/>
<table border="1">
<thead></thead>
<tbody id="tb1">
<tr>
<td>11</td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td>22</td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td>33</td>
<td><input type="checkbox"/></td>
</tr>
</tbody>
</table>
<script>
function CheckAll(){
// $('#tb1').find(':checkbox').attr('checked','checked')
$('#tb1').find(':checkbox').prop('checked',true);
}
function CheckReverse(){
//先找到标签,如果选中,取消,未选中,选中
$('#tb1').find(':checkbox').each(function(){
// $(this) = 每一个复选框
if($(this).prop('checked')){
$(this).prop('checked',false)
}else {
$(this).prop('checked',true)
}
});
}
function CheckCancel(){
// $('#tb1').find(':checkbox').removeAttr('checked');
$('#tb1').find(':checkbox').prop('checked',false);
}
</script>
</body>
</html>
day 15的更多相关文章
- .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验
不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...
- 15个关于Chrome的开发必备小技巧[译]
谷歌Chrome,是当前最流行且被众多web开发人员使用的浏览器.最快六周就更新发布一次以及伴随着它不断强大的开发组件,使得Chrome成为你必备的开发工具.例如,在线编辑CSS,console以及d ...
- 15个C++项目列表
实验楼上有很多C++的实战项目,从简单到进阶,学习每个项目都可以掌握相应的知识点. 如果你还是C++新手的话,那么这个C++的项目列表你可以拿去练手实战开发,毕竟学编程动手实践是少不了的! 如果你不知 ...
- Hacker Rank: Two Strings - thinking in C# 15+ ways
March 18, 2016 Problem statement: https://www.hackerrank.com/challenges/two-strings/submissions/code ...
- 在 Ubuntu 15.04 中使用 ubuntu-make、Eclipse 4.4、Java 8 以及 WTP
Ubuntu 今天发布新版本了 其实昨天(2015-04-23)我就看到了 Ubuntu 发布新版本的新闻,下班后回家的第一件事就是访问 Ubuntu 的官网,很可惜,没有提供下载.今天(2015-0 ...
- 企业IT管理员IE11升级指南【15】—— 代理自动配置脚本
企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...
- (转)C++语言的15个晦涩特性
原文链接: Evan Wallace 翻译: 伯乐在线- 敏敏 译文链接: http://blog.jobbole.com/54140/ 这个列表收集了 C++ 语言的一些晦涩(Obscure)特 ...
- CSharpGL(15)用GLSL渲染2种类型的文字
CSharpGL(15)用GLSL渲染2种类型的文字 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立的Demo,更适合 ...
- ABP(现代ASP.NET样板开发框架)系列之15、ABP应用层——应用服务（Application services）
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之15.ABP应用层——应用服务(Application services) ABP是“ASP.NET Boiler ...
- C#开发微信门户及应用(15)-微信菜单增加扫一扫、发图片、发地理位置功能
前面介绍了很多篇关于使用C#开发微信门户及应用的文章,基本上把当时微信能做的接口都封装差不多了,微信框架也积累了不少模块和用户,最近发现微信公众平台增加了不少内容,特别是在自定义菜单里面增加了扫一扫. ...
随机推荐
- Ubuntu系统下移动宽带自动启用设置
对于需要自动移动联网的Ubuntu系统(安装了4G移动手机卡的),步骤如下: . 在终端编辑自启动文件:sudo gedit /etc/rc.local 2. 在最后一句exit 0的上⾯面加上如下指 ...
- JavaScript 面向对象的程序设计（一）之理解对象属性
首先,JavaScript 面向对象的程序设计,主要分三部分. 理解对象属性: 理解并创建对象: 理解继承. 本文主要从第一方面来阐述: 理解对象属性 首先我们来理解Javascript对象是什么?在 ...
- python学习15-序列化（转载）
序列化是指把内存里的数据类型转换成字符串,以使其能存储到硬盘或通过网络传输到远程,因为硬盘和网络传输时只能接受bytes 一.pickle 把python对象写入到文件中的一种解决方案,但是写入到文件 ...
- vue 深度响应初步了解（检测data对象数据变化）
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为 getter/se ...
- 2016424王启元 Exp2 后门原理与实践
一.实验准备 1.在实验前关闭或退出了防火墙.360杀毒软件.电脑卫士等所有的电脑保护软件,避免在实验过程中攻击时被拒绝. 2.使用Windows获linux shell (1)在Wind ...
- javascript DOM相关语法
childNodes: 获取元素内的所有节点 包括文本节点:nodeType=3 , 元素节点:nodeType = 1 nodeType:它可以判断所有节点的类型 元素节点类型:1 文本节点:3 注 ...
- 剑指offer等算法总结归类
从数据结构分 一.链表: 3.题目描述:输入一个链表,从尾到头打印链表每个节点的值(递归) 思路:递归调用,调一次,加一次到list中 14.题目描述:输入一个链表,输出该链表中倒数第k个结点 两个指 ...
- Oracle rownum
本问参考自Oracle中ROWNUM的使用技巧.纯属读书笔记,用于加深记忆 rownum是oracle中的一种伪列,它会根据返回的记录生成一个序列化的数字,利用rownum,我们可以得到一些原先难以得 ...
- Win7与Ubuntu双系统安装过程
Win7安装1.宏基安装Win7插入Win7系统光盘-> 重新启动-> 按F12-> 选择CD安装-> 按任意键-> 选择自定义(高级),接下去根据提示安装. 2.华硕安 ...
- Learning Linux Commands: awk--reference
http://how-to.linuxcareer.com/learning-linux-commands-awk 1. Introduction In this case, the title mi ...