前端开发学习笔记（三）

朴灿烈づ我的快乐病毒、 2022-08-07 01:36 142阅读 0赞

## css部分    ##

margin和padding的区别之一是margin有auto的取值，但padding则没有的。

在 CSS3 中为了区别伪元素和伪类,为伪元素使用了双冒号

**-webkit-transform-origin 属性:**

设置或检索对象以某个原点进行转换。该属性提供3个参数值，默认值为50% 50% 0；提供2个参数值，默认为50% 50%。如果提供2个，第一个用于横坐标，第二个用于纵坐标，第三个用于z轴。如果提供3个，第一个用于横坐标，第二个用于纵坐标，z轴默认为0。如果只提供一个，该值将用于横坐标；纵坐标默认为50%，z轴默认为0。

**transform-origin(改变元素基点，默认点是元素的中心点):**  
主要作用是让我们在进行transform动作之前可以改变元素的基点位置，因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。但有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。  
  
transform的多种属性操作，例如rotate、scale、translate三种，但这里需要提醒大家的，以往我们叠加效果都是用逗号（“，”）隔开，但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。  
  
**\-webkit-tap-highlight-color 属性:**  
改写iOS Safari中可点击元素的高亮颜色。该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。除了iOS Safari，大部分android手机也是支持的，只是显示效果有所不同。

**nth-of-type与nth-child的区别：**

其实区别很简单：

:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素，而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。  
appframe移动端框架：  
  
  
        css插件相关文件说明：

<table> 
 <tbody> 
  <tr> 
   <td>af.actionsheet.js</td> 
   <td>actionsheet插件</td> 
  </tr> 
  <tr> 
   <td>af.css3animate.js</td> 
   <td>css3动画插件</td> 
  </tr> 
  <tr> 
   <td>af.passwordBox.js</td> 
   <td>密码框插件</td> 
  </tr> 
  <tr> 
   <td>af.scroller.js</td> 
   <td>滚动插件</td> 
  </tr> 
  <tr> 
   <td>af.selectBox.js</td> 
   <td>选择框插件</td> 
  </tr> 
  <tr> 
   <td>af.touchEvents.js</td> 
   <td>触摸插件</td> 
  </tr> 
  <tr> 
   <td>af.touchLayer.js</td> 
   <td>触摸层插件</td> 
  </tr> 
  <tr> 
   <td>af.popup.js</td> 
   <td>popup弹框插件</td> 
  </tr> 
 </tbody> 
</table>

每一个手机应用，如果需要在众多的移动终端上保持一致的效果，UI适配是工作的重中之重。设计原理是为不同分辨率的系统，选取最贴近于人直观感受舒适度的一 个字体大小作为参考量。例如在320x480分辨率的手机上，采用16px大小字体作为参考量。在480x800分辨率的终端上，采用24px大小字体作 为参考量。一切元素的大小都是以参考量的相对比值来定义。在CSS里面对应的是em。那么在320x480分辨率下 1em=16px，在480x800分辨率下1em=24px。

## SEO 优化部分 ##

准确的页面标题：<title>标签(head 头部必须)  
  
        <title>your title</title>

添加相应的页面关键词： keywords

## JS部分    ##

常看到一些大牛的JS源码 在function 前面加; ;function($,undefined) 是什么用处 ？比如;(function($)\{$.extend($.fn...  
  
在前面加分号可以有多种用途:

1.  防止多文件集成成一个文件后，**高压缩出现语法错误**。
2.  这是一个匿名函数，一般js库都采用这种自执行的匿名函数来保护内部变量 (function()\{\})()
3.  因为undefined是window的属性，声明为局部变量之后，在函数中如果再有变量与undefined作比较的话，程序就可以不用搜索undefined到window，可以提高程序性能

Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。

普通的dom对象一般可以通过$()转换成jquery对象。  
  
下面是 XMLHttpRequest 对象的两个重要的属性：

<table> 
 <tbody> 
  <tr> 
   <td>属性</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>onreadystatechange</td> 
   <td>&nbsp;存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。</td> 
  </tr> 
  <tr> 
   <td>readyState</td> 
   <td>存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。<br> <br> &nbsp;&nbsp;&nbsp; 0: 请求未初始化<br> &nbsp;&nbsp;&nbsp; 1: 服务器连接已建立<br> &nbsp;&nbsp;&nbsp; 2: 请求已接收<br> &nbsp;&nbsp;&nbsp; 3: 请求处理中<br> &nbsp;&nbsp;&nbsp; 4: 请求已完成，且响应已就绪</td> 
  </tr> 
 </tbody> 
</table>