黑马程序员05-Web前端学习笔记

部分资源地址 绿叶学习网

前端开发系统化学习，包括html、css、PC端及移动端布局技巧、javascript、jquery、js特效制作、ajax前后台交互等。

HTML

一个HTML文档由4个基本部分组成：

• ① 一个文档声明：
• ② 一个html标签对：
• ③ 一个head标签对：
• ④ 一个body标签对：

html5是向下兼容的文档，用sublime text创建方法： html:5 + tab 或者 ! + tab

一般来说，只有6个标签能放在标签内：

①

JavaScript的事件很多，包括5大部分：

• （1）鼠标事件；
• （2）键盘事件；
• （3）表单事件；
• （4）编辑事件；
•    

  编辑事件有3种：

  • （1）复制事件oncopy；
  • （2）剪切事件oncut；
  • （3）粘贴事件onpaste；
• （5）页面相关事件；

jQuery

jQuery，顾名思义，也就是JavaScript和Query（查询），即辅助JavaScript开发的库

JQuery加载页面的三种方法：

1.$(document).ready(function(){});

2.$(function(){});

3.jQuery(function($){});

页面载入事件

在jQuery中，对于页面载入事件，我们使用$(document).ready()方法来替代JavaScript中的window.onload方法。

$( function (){

    //代码部分

})

在jQuery中，基本选择器共有：

• （1）元素选择器；
• （2）id选择器；
• （3）class选择器；
• （4）群组选择器；
• （5）*选择器

在jQuery中常见的伪类选择器分为以下6种：

• （1）简单伪类选择器；
• （2）子元素伪类选择器；
• （3）可见性伪类选择器；
• （4）内容伪类选择器；
• （5）表单伪类选择器；
• （6）表单属性伪类选择器；

属性操作

$().attr( "属性名" )            //获取属性

$().attr( "属性" , "属性值" )   //设置属性

$().removeAttr( "属性" );       //删除属性

// 获取div的样式
$("div").css("width");
$("div").css("color");


//设置div的样式
$("div").css("width","30px");

内容操作

在jQuery中，关于元素内容操作共有2组方法：

• （1）html()和text();
• （2）val();

其中html()和text()用于操作普通标签，而val()用于操作表单标签。

$().width()      //获取元素的宽度

$().width(n)     //设置元素的宽度，n是一个整数，表示npx

$().height()      //获取元素的高度

$().height(n)     //设置元素的高度，n是一个整数，表示npx

插入节点

在jQuery中，常见插入节点的方法共有4组：

• （1）append()和appendTo()；
• （2）prepend()和prependTo()；
• （3）before()和insertBefore()；
• （4）after()和insertAfter()；

动画

一、显示和隐藏

在jQuery中，如果我们想要实现元素的显示和隐藏，可以使用2组方法：

• （1）show()和hide()；
• （2）toggle()；

二、淡入和淡出

在jQuery中，如果我们想要实现元素的淡入淡出这种渐变效果，有3组方法：

• （1）fadeIn()和fadeOut()；
• （2）fadeToggle()；
• （3）fadeTo()；

三、滑上和滑下

在jQuery中，如果我们想要实现元素的滑动效果，也有2组方法：

• （1）slideUp()和slideDown()；
• （2）slideToggle()；

四、自定义动画

在jQuery中，对于自定义动画，我们可以使用animate()方法来实现。对于自定义动画，我们分为2种形式：（1）简单动画；（2）累积动画。

实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用

// event.stopPropagation();
// event.preventDefault();
// 合并写法：
 return false;

JSON

http://www.lvyestudy.com/json/json.aspx

JSON，全称“JavaScript Object Notation（JavaScript对象表示法）”，起源于JavaScript的对象和数组JSON，说白了就是JavaScript用来处理数据的一种格式，这种格式非常简单易用。

JSON，大部分都是用来处理JavaScript和web服务器端之间的数据交换，把后台web服务器的数据传递到前台，然后使用JavaScript进行处理，例如ajax等。

JSON结构共有2种：

• （1）对象结构；
• （2）数组结构；

• 一、JSON对象结构

  对象结构是使用大括号“{}”括起来的，大括号内是由0个或多个用英文逗号分隔的“关键字:值”对（key:value）构成的。

var jsonObj =
{
    "键名1" :值1,
    "键名2" :值2
}

这里的键名是字符串，但是值可以是数值、字符串、对象、数组或逻辑true和false。

从JSON中读数据

jsonObj.key
jsonObj[ "key" ]

向JSON写数据

jsonObj.key = 值;
jsonObj[ "key" ] = 值;

delete   jsonObj.key;




使用for…in…循环来遍历JSON对象中的数据











二、JSON数组结构

JSON数组结构是用中括号“[]”括起来，中括号内部由0个或多个以英文逗号“,”分隔的值列表组成。

语法：

var arr =
[
    {
        "键名1" :值1,
        "键名2" :值2
    },
    {
        "键名3" :值3,
        "键名4" :值4
    },
    ……
]

对于获取、写入、修改、删除、遍历JSON数组结构中的数据，跟JSON对象结构的数据操作类似

CSS3

css3性能 从原理上来说的话

CSS == iOS
JS == Android

CSS3浏览器私有前缀

私有前缀	对应的浏览器
-webkit-	chrome和safari
-moz-	Firefox
-ms-	IE
-o-	opera

border-radius: 10px ;
-webkit-border-radius: 10px ;  /*兼容chrome和Safari*/
-moz-border-radius: 10px ;     /*兼容Firefox*/
-ms-border-radius: 10px ;      /*兼容IE*/
-o-border-radius: 10px ;       /*兼容opera*/

有插件

本地存储分为cookie，以及新增的localStorage和sessionStorage