Skip to content

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

Description

@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">​]

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

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

Alt text

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;
}

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions