杂乱的笔记

http://www.jqhtml.com/6408.html

（1）.food>li 第一代子元素
（2）.food li 后代选择器
（3）p、span 分组选择器
（4）p{color:red!important;} 最高权值
（5）letter-spacing 字符间隔
（6）word-spacing 单词（字）间隔
（7）长度值px(像素) em( font-size 为 18px，那么 1em = 18px)
（8）水平居中 text-align:center;
（9）vertical-align: 元素的垂直对齐方式。主要是图片和文字同行显示的时候 文字的对其方式
　　  baseline(默认。元素放置在父元素的基线上。)
         sub(垂直对齐文本的下标。)
　　  super(垂直对齐文本的上标)
  　　top(把元素的顶端与行中最高元素的顶端对齐)
　　  text-top(把元素的顶端与父元素字体的顶端对齐)
　　  middle(把此元素放置在父元素的中部。)
　　  bottom(把元素的顶端与行中最低的元素的顶端对齐)
         text-bottom(把元素的底端与父元素字体的底端对齐。)
         bottom(把元素的顶端与行中最低的元素的顶端对齐)

（10）align 控制文本的水平对齐方式。
(11) value instanseof Array 判断类型 返回true或 false
（12）typeof(1) 返回是什么类型 int
(13) 获取id attr("id");
(14) 类型转化 parseInt（） parseFloat() 类推
（15）<br> <hr/>
(16) 判断字符串中是否有这个值 int result = tempStr.indexOf("good"); （tempStr 为字符串）
(17) jquery 常用
　　$(this).children('.li_text').attr('id')//当前元素下.li_text类名的id
　　$(this).data("num") //获取data 属性
　　$("#position ul li").each(function(){ //里面进行操作 }) //遍历标签
　　$(this).parent().parent().parent().siblings('p').text();//当前元素的的关系内容;
　　$(this).siblings('label').eq(0).text();当前元素的相邻的第一个label元素的内容
　　$("#A-2").css("display", "none");//当前元素设置样式
　　$("#" + idFirst + "_" + idTwo).addClass("pullShow");//当前元素添加样式
（18）outline: none;//去除轮廓可以解决很多的麻烦
（19）背景图片设置
　　background: url(../assets/images/survey/gay_ring.png) no-repeat 0 21%;
　　background-size: 15px 15px;//这个是设置背景图片大小
（20）清除浮动
　　content: ".";
　　display: block;
　　height: 0;
　　visibility: hidden;
　　clear: both;
（21）display:flex 和 浮动不能同时使用 会出现一些问题
（22）window.location.href 原生跳转链接
(23) 返回上一界面 history.go(-3); 栈
（24）<pre> 这是将里面内容完全显示，包括空格
（25）解决ios点击出现灰色背景
　　-webkit-text-size-adjust: none;
　　-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
(26) z-index 无效 父标签添加position 父级标签要有z-index
(27) 字间距 letter-spacing:2px;
(28) text() - 设置或返回所选元素的文本内容
　　html() - 设置或返回所选元素的内容（包括 HTML 标记）
　　val() - 设置或返回表单字段的值
(29)typeof()方法来判断变量是否未定义 查看数据是什么类型
　　if (typeof (b) == "undefined") {
　　　　alert("变量b未定义");
　　}
（30）try、catch 系统默认异常信息
　　try {
　　　　if (typeof (errb) == "undefined"){
　　　　　　throw "errb未定义";
　　　　}
　　} catch (ex) {
　　　　alert(ex); //输出异常信息：(Chrome)errb is not defined ，(IE)'errb'未定义
　　}

（31） 函数名称采用骆驼命名法：第一个单词小写，第二个单词首个字母为大写。如系统自带的函数：parseInt、isNaN
对象名称第一个字母大写。如：Math、Number、Array
事件多为on开头,并且小写。如：onclick、onload
（32） 解决ios点击的时候有背景 css:
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
（33）类的添加可以连续
$("#sign_show").removeClass('not_sign').addClass('sign_over');
//添加在ul后面
$("#list_1 ul").append(" <li>"+"<p>"+"新增"+"</p>"+"<p>"+"2017.05.03 12:23:52"+"</p>"+"<p>"+"+99"+"</p>"+"</li>");
//添加在第一条li前面
$("#list_1 ul li").eq(0).before(" <li>"+"<p>"+"新增"+"</p>"+"<p>"+"2017.05.03 12:23:52"+"</p>"+"<p>"+"+99"+"</p>"+"</li>");
$("#list_2 ul li").eq(0).before(" <li>"+"<p>"+"阿克苏的"+"</p>"+"<p>"+"2017.05.03 12:23:52"+"</p>"+"<p>"+"+599"+"</p>"+"</li>");
（34）返回：window.history.back() window.history(-1); 不产生历史记录的返回
（35）标签拖动属性:draggable="true"
（36）内核识别码：
//-ms代表【ie】内核识别码
//-moz代表火狐【firefox】内核识别码
//-webkit代表谷歌【chrome】/苹果【safari】内核识别码
//-o代表欧朋【opera】内核识别码
//还有和通用
（37) box-sizing: content-box|border-box|inherit;
contetnt-box: margin和padding算在元素以外
border-box： margin和padding算在元素以内
（38）文本的操作:
添加一条线 text-decoration: overline(顶部) / underline(底部) / line-through（中间穿过）/ blink(空白); decoration:装饰
缩进 text-index:2em(两个相对位置)
字间距 word-spacing:-0.5em
字母间距 letter-spacing：20px
字符转换 text-transform :uppercase(大写)、 lowercase（小写）、capitalize（每个单词的首字母大写）
规定段落中的文本不进行换行： white-space: nowrap（遇到<br>换行）、pre（类似<pre>标签）等
（39）字体操作
font-size:字体大小
font-style: italic(斜体)、oblique（倾斜）
font-variant:small-caps（小号的大写字母）;This is a paragraph（全部大写，但是为小号） variant：变种
font-family：字体名称

（40）光标的设置 很多个变量
cursor:help
（41） transition 动画
transition-property:width（指定某个属性拥有过渡效果）
transition-duration：2s (过渡时间)
transition-timing-function:linear(速度不变)、ease（开始和结束是慢速）、ease-in（开始慢速，结束快速）、ease-out（开始快速，结束慢速）、ease-in-out（开始和结束都是慢速）（过渡曲线）
（42）链接的样式请严格按照如下顺序添加：
a:link（未被访问）-> a:visited（已经被访问） -> a:hover（鼠标指针浮动在上面的元素） -> a:active（LoVeHAte 被激活的瞬间出现的样式）
（43）浮动闭合方法
一 .clearfix{overflow:auto;_height:1%}
二 .clearfix{overflow:hidden;_zoom:1;}
三 .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}

（44）CSS样式权值
p{color:red;} /*标签，权值为1*/
p span{color:green;} /*两个标签，权值为1+1=2*/
p>span{color:purple;}/*权值与上面的相同，因此采取就近原则*/
.warning{color:white;} /*类选择符，权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
（45）表单提交
<input> <textarea> <label> <fieldset> <leqend> <select> <optqroup> <option> <button>
（46）隐藏域 <input type="hidden"> 表单提交时 存放必要的值
（47） $(document).ready(function (){}）这个是页面document这些加载完成后调用这个方法
（48）（function(){})()这个是调用html后 就调用这个方法 页面还为渲染
（49） overflow:hidden 如果子元素是 positon:absolute；父标签就必须为 position:relative
（50）/*background-image: linear-gradient(0deg, rgba(166, 166, 166, 10) 0%, rgba(0, 0, 0, 0.1) 25%,transparent 50%, transparent 50%, rgba(0, 0, 0, 0.1) 75%,rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.6) 100%)*/
(51) background: linear-gradient(-180deg, rgba(0, 64, 163, 0.8) 0%, rgba(6, 11, 32, 0.60) 100%), url("../image/right_bottom.png") repeat;
（52）over-flow: auto; /* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */
auto： 普通滚动，当手指从触摸屏上移开，滚动立即停止
touch：滚动回弹效果，当手指从触摸屏上移开，内容会保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

元素类型：
（1）常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
（2）常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
（3）常用的内联块状元素有：
<img>、<input>
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置
内联元素不可以设置宽高
padding:内填充margin:外填充

body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}

border:2px solid red;
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。

 

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

字体
body{
font-style:italic; //定义字体的风格。normal(标准) italic（斜体）oblique（倾斜）inherit（默认 继承父元素的样式）
font-variant:small-caps; //设置小型大写字母字体
font-weight:bold; // 字体粗细
font-size:12px; // 字体大小
line-height:1.5em; //行高（一般是1.2） 要懂得 120% 和1.2的区别
font-family:"宋体",sans-serif; //文本的字体系列
font-family:"微软雅黑"; //微软雅黑
}

 

超出行数省略
.p1{
padding: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

width: 125px; //宽度必须
text-overflow: ellipsis/clip; //省略号或裁剪；
white-space: nowrap;//强制内容在一行显示;
overflow: hidden; // 超出隐藏

多行
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;//必须
-webkit-box-orient: vertical;//必须

清除浮动
.clearFix:after {
height: 0;
content: '.';
display: block;
visibility: hidden;
clear: both;
}

方法排空 去除输入内容的前后的空格
function trim(s) {
return s.replace(/(^\s*)|(\s*$)/g, "");

}

获取cookie
getCookie: function (cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) != -1) {
return c.substring(name.length, c.length);
}
}
return "";
}

设置cookie
setCookie(name,value) {
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

悬浮点 回到顶部
// 回到顶部 jquery
$('a.top').click(function (e) {
e.preventDefault();
$(document.body).animate({scrollTop: 0}, 800);
});

动画效果
.pullUp {
opacity: 1; //不透明
z-index: 10;
position: relative;
animation: up 1s; 动画1s
animation-fill-mode: forwards; //保持的最后的状态
-webkit-animation: up 1s; /* Safari and Chrome */
/*-webkit-animation-iteration-count: 2;*/ //执行次数
-webkit-animation-fill-mode: forwards;//保持的最后的状态
}
.pullShow {
opacity: 0;
z-index: 5;
background: #b0ff06;
position: relative;
animation: show 1s;
animation-fill-mode: forwards;
-webkit-animation: show 1s; /* Safari and Chrome */
/*-webkit-animation-iteration-count:2;*/
-webkit-animation-fill-mode:forwards;
}

@keyframes up {
0% {

opacity: 1;
margin-top: 0;
}
100% {

opacity: 0;
margin-top: -65%;
display: none;
}
}

@keyframes show {
0% {
opacity: 0;
display: block;
margin-top: 0px;
}
100% {

opacity: 1;
display: block;
}
}

浮层的方法

css:

.sign_show,.check_in{
position: absolute;
bottom: 0;
left: 0;
display: none;
right: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .6);
z-index: 9999;
}
js:
function noScroll() {
$('html').css({
height: "100%",
overflow: "hidden"
});
$('body').css({
height: "100%",
overflow: "hidden"
});
}
function scrollimg() {
$('html').css({
height: "auto",
overflow: "visible"
});
$('body').css({
height: "auto",
overflow: "visible"
});
}
/*问卷调查中的动画*/
let this_id= $(this).attr("id");
var hiddenId = $(this).parent().attr("id");
var idFirst = hiddenId.split("_")[0];
var idTwo = parseInt(hiddenId.split("_")[1]) + 1;
console.log("position=="+$("#position").offset().top);
console.log("1=="+$(this).parent().offset().top);

if(this_id=="exchanging"){
self.hintShow=true;
}else{
console.log("position=="+$("#position").offset().top);
$(this).scrollTop(0);
$(this).parent().addClass("pullUp");
$("#position").scrollTop(0);
// $(this).parent().css("display", "none");
$(this).parent().removeClass("pullUp");
$("#" + idFirst + "_" + idTwo).css("display", "block");
$("#" + idFirst + "_" + idTwo).addClass("pullShow");
}

/* 常用的方法 */
http://www.cnblogs.com/polk6/p/3284839.html

+、普通函数 function ShowName(name) {}

+、匿名函数:(function() {})()

+、!function(win){} 多个感叹号，将执行后面的代码，也就合法实现调用

+、闭包函数

/*手机输入输入框里面 enter 键*/

$("#search").keydown(function (e) {
if (e && e.keyCode == 13) { // enter 键
var v=$(this).val();
if(v!='')//判断时候为空,当然如果可以进行其他更多判断
{
//如果想将光标移到下一个id为password的文本框上
$("#password").focus();
}
else
{
return false;//这个主要防止按下enter时候，触发了提交按钮
}
}

})

免费的FQ软件，直接下载安装

https://github.com/yinghuocho/firefly-proxy

 

HACK

<![end if]–>
_marging \IE 6

+margin \IE 7

Marging:0 auto \9 所有Ie

Margin \0 \IE 8

background-color:blue; 各个浏览器都认识，这里给firefox用；b

ackground-color:red\9;\9所有的ie浏览器可识别；

background-color:yellow\0; \0 是留给ie8的

+background-color:pink; + ie7定了；

background-color:orange; 专门留给神奇的ie6；

:root #test { background-color:purple\9; } :root是给ie9的，

@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

/*判断是不是微信内核*/
function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}

/* JSON.stringify */

// 此处为了示例, 采用字面量的形式构造了一个对象
// 实际使用中, 一般是某个POJO,或者VO之类的值对象
var myObject = {
"myProp": "myValue",
"subObj": {
"prop": "value"
}
};
// 格式化
var formattedStr = JSON.stringify(myObject, null, 2);

回到顶部
不需要其他插件,简单通过使用jquery 中的 animate and scrollTop 方法,就能实现

// 回到顶部
$('a.top').click(function (e) {
e.preventDefault();
$(document.body).animate({scrollTop: 0}, 800);
});
<!--创建一个回到顶部的按钮 -->
<a class="top" href="#">Back to top</a>
通过 改变scrollTop的值控制滚动条到达哪个位置

预加载图片
如果你的页面有很多图片,并且默认情况下是看不到的,当你鼠标移动过的时候才出现,这时候就需要 预加载功能

$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$('img').attr('src', arguments[i]);
}
};

$.preloadImages('img/hover-on.png', 'img/hover-off.png');

检测图片是否加载完成
有时候你需要去知道图片是否真正加载完成.

$('img').load(function () {
console.log('image load successful');
});

优雅处理加载不成功的图片
使用一张默认的图片来代替加载不成功的 图片

$('img').on('error', function () {
$(this).prop('src', 'img/broken.png');
});

Hover事件切换类

$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});

混合写法,

$('.btn').hover(function () {
$(this).toggleClass('hover');
});

禁用一个表单元素
比如有时候 ,只想提交一次表单,就可以设置禁用

$('input[type="submit"]').prop('disabled', true);
如果想解禁 ,
$('input[type="submit"]').prop('disabled', false);

阻止超链接的默认行为
有时候我们常常用超链接作为按钮,但是超链接本身是有链接 会跳转的,假如我们不想要跳转的时候 就需要阻止默认行为

$('a.no-link').click(function (e) {
e.preventDefault();
});

fade(渐入渐出)效果和slide(下拉收起)效果的切换
// 渐入渐出
$('.btn').click(function () {
$('.element').fadeToggle('slow');
});
// 下拉收起
$('.btn').click(function () {
$('.element').slideToggle('slow');
});

动态设置两个div的高度一样
不管他们的内容怎样 他们的高度都会保持一致
通过css设置 最低高度值,

$('.div').css('min-height', $(.main-div).height());
无论内容是什么 都保持高度一致
var $columns = $('.column');
var height = 0;
$columns.each(function () {
if ($(this).height() > height) {
height = $(this).height();
}
});
$columns.height(height);
遍历设置一序列的元素的高度统一

var $rows = $('.same-height-columns');
$rows.each(function () {
$(this).find('.column').height($(this).height());
});

新的标签或者窗口打开外部链接
$('a[href^="http"]').attr('target','_blank');
$('a[href^="//"]').attr('target','_blank');
$('a[href^="'+window.location.origin+'"]').attr('target','_self');
注意: window.location.origin 不兼容IE10 解决方案

根据内容来寻找元素
通过 jquery的contains() 方法
var search = $('#search').val();
$('div:not(:contains("'+search+'"))').hide();//表示如果没有包含search内容的都隐藏