学习笔记(box-sizing,js调试,键盘事件,伪元素和伪类的区别)

[weishuping]

学习记录（1）

1 CSS3属性

1.box-sizing
IE Opera以及Chrome支持box-sizing属性。FF支持-moz-box-sizng属性。
该属性允许以特定的方式定义匹配某个区域的特定元素。
分为三个值：content-box 是默认值，由CSS2.1规定的宽度高度行为，宽和高应用到元素的内容框，在宽和高之外设置边距和边框； border-box为元素指定的任何内边距和边框都包含在已设定的宽度和高度，也就是说，内容的宽和高是从已设定的中减去内边距和边框得到；inherit 规定从父元素继承该属性。

2 js调试技巧

• Alert
• console
• JS断点调试 F12进入，F10单步跳过 ， F11单步进入， F8结束
• Debugger
• DOM断点调试
• XHR Breakpoints
• Event Listner Breakpoints

3 jQuery 中keydown keyup keypress的事件

keyPress主要是用来接收字母 数字等ANSI字符，keyDown和keyUp事件过程可以处理任何不被keypress识别的，比如功能键、编辑键、定位键以及这些键和键盘换挡键的组合灯。
keyPress不显示键盘的物理状态（shift键），而只是传递一个字符。而keyDown和keyUp用两种参数解释每个字符的大小写形式：keycode 显示物理的键。

keyDown和keyUp是当按下keyDown和松开keyUp一个键时发生的。
keyDown从表现上看是按下任意键，按的字符，如果是文本框的话还没有显示到文本框之前就产生的事件。

keyUp就是松开按键时发生，此时按键已经输入到文本框。
如果只想读取字符, 用KeyPress, 如果想读各键的状态, 用KeyDown. 说KeyDown是按下, KeyPress是按下并松开, 是不对的. 如果你一直按着键呢? 这时不断地产生KeyDown和KeyPress.当你按下一个键时（还没松开），就会触发keydown事件；当你松开后，又触发了keypress事件。即是说keydown只要按下一个键就会触发，而keypress要按下并松开后才会触发KeyDown、KeyUp 事件 这些事件是当一个对象具有焦点时按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的。（要解释 ANSI 字符，应使用 KeyPress 事件。） KeyPress 事件 此事件当用户按下和松开一个 ANSI 键时发生。 具有焦点的对象接收该事件。一个窗体仅在它没有可视和有效的控件或 KeyPreview 属性被设置为 True 时才能接收该事件。一个 KeyPress 事件可以引用任何可打印的键盘字符，一个来自标准字母表的字符或少数几个特殊字符之一的字符与 CTRL 键的组合，以及 ENTER 或 BACKSPACE 键。KeyPress 事件过程在截取 TextBox 或 ComboBox 控件所输入的击键时是非常有用的。它可立即测试击键的有效性或在字符输入时对其进行格式处理。改变 keyascii 参数的值会改变所显示的字符。

4 js element

当通过class或者id获取元素时，获取到的是对象，再通过.[0]取到相应的元素标签 经高人指点这段是我写错了并且描述不清楚，下面重新补上
如果是通过class获取到的是数组，如下图：

document.getElementsByClassName("tags");
[<input id=​"tags_2" type=​"text" class=​"tags" style=​"display:​ none;​">​, <input type=​"text" class=​"tags">​]

此时，如果要获取某个标签元素，则可以通过和数组一样的方式-->取下标。
如果是通过id获取到一个对象，如下图：

   document.getElementById("tags");
    <input type=​"text" id=​"tags">​

5 伪元素和伪类的区别

伪元素用于将特殊的效果添加到某些选择器
伪类用于向选择器添加特殊的效果
伪元素有：
:first-line ; :first-letter ; :before ; :after ;
伪类有:
:active ; :focus ; :hover ; :link ; :visited ; :first-child ; :lang;
在CSS3中，通过伪元素是:: 伪类是:来区分两者。IE支持程度？？
举个伪元素栗子：

<p>I Like apple</p>
//样式定义：
p:first-letter {color: red}
//如果通过添加元素的方法来实现是这样的
<p><span>I</span> like apple</p>
//样式定义
p>span {color: red;}

举个伪类栗子：

<p>
    <i>apple<i/>
    <i>banana</i>
</p>
//样式定义
p:first {
    color: red;
}
//如果通过添加类的方法来实现就是这样的
<p>
    <i clas="red"></i>
    <i></i>
</p>
//样式定义
.red {
    color: red;
}

区别; 伪元素的效果是通过添加一个元素来实现的；； 伪类是直接在元素上添加类实现的效果

[superNever]

：valid
：invalid
：in-range
：out-of-range
：required
：optional

css3 新增的伪类