web基础（HTML、JavaScript、JQuery、Bootstrap）(有些图片有空再引入）

基本概念

1）HTML 指的是超文本标记语言 (Hyper Text Markup Language)
2）CSS 指层叠样式表 (Cascading Style Sheets)
3）JavaScript 浏览器脚本语言(和java没有关系，只是想借助java名气)
4）JQuery是轻量级JavaScript库（重点选择器）
5) BootStrap前段框架，基于HTML、CSS、JavaScript的，Twitter工程师开发（重点栅格系统）

知识点：
1、增强 for循环实现的原理是实现了 Iterable

2、form 表单的提交按钮要根据返回值判断是否提交，true 提交 false 不提交

3、选择器：标签选择器、类选择器、ID选择器（优先级就近原则）

类选择器：.class{}
ID选择器：#ID{}

扩展：

组合选择器(同时对两个起作用)：例如：.class,span{}
关联选择器（用于嵌套类型）：例如：div span{}
伪类选择器（用于超链接）：例如：超链接a标签 a:link{}、a:visited{}、a:hover{}、a:active{} 4、div 和span是什么？
div:定义文档中的节或区域（块级）。

span:定义文档中的行内的小块或区域。 5、div和span的style样式标签可以用link标签代替（link标签可以找到具体的css样式代码）

6、css中定位的标签position

position:absolute; left:100px; top:150px 7、浮动

float属性：left、right、none（默认属性不浮动）、inherit

clear属性：left、right、none（默认属性浮动）、inherit、both（左右不允许浮动） 8、盒子模型 img

9、点击事件

onclick用于input标签button等类型的点击事件
onclick"方法名()"
onchange事件一般用于 select 标签中
10、document.write();在javascrpt用于输出文本

11、document.getElementById();获得id

12、window.onload窗口加载完毕; $(function(){})

13、连续执行setInterval("方法()",毫秒值); 只执行一次setTimeout("方法()",毫秒值);

14、placeholder属性(给用户一个提示)

姓名：
15、h5实现音乐播放器(最新的谷歌浏览器支持下载)


16、h5实现视频播放器(流媒体,视频转码,涉及底层(C,C++; JNI))(最新的谷歌浏览器支持下载)


17、上下脚标：

  
18、特殊字符 img 19、display属性的值

none此元素不会被显示
block此元素将显示为块级元素，此元素前后会带有换行符。
20、JS：innerHTML插入事件

JQ中的写入：$spanObj.html("helloworld");
21、判断复选框是否被选中：

1、用checked属性 属性值：true和 false 
2、有multiple属性的时候用 selected
22、getElementsByClassName获取同一类的Obj getElementById获取 idObj

23、制作电子时钟：（var myDate = new Date();）





    
    
    



    



24、str字符串的加粗 str.bold(); anchor锚点

25、createElement创建标签对象、createTextNode创建文本对象 、setAttribute添加属性

26、组合选择器（基本选择器的一种）中间用逗号隔开比如：

$("#one,.mini") id为one和类名为mini的
27、层级选择器：

$("body div") body下的所有div
$("body>div") body下的子div
$("#one+div") id为one的下一个div并且是同辈的
$("#one~div") id为one的后面所有的div并且是同辈的
28、筛选选择器：（不需要考虑层级问题）

$("div:first") 第一个div
$("div:last")  最后一个div
$("div:even")     脚标为偶数的div
$("div:odd")      脚标为奇数的div
29、属性选择器：

$("div[title]")  选择有title属性的
$("div[title='one']")  选择有title属性且值为one的
30、表单选择器：$(":password") 选择密码域

31、JQ和JS之间的转换问题：

1）、JS转JQ：
    //js对象转jq对象
    var $spanObj =  $(spanObj);
2）、JQ转JS：
    //jq对象转js对象
    var spanObj =  $spanObj[0];
    或者
    var spanObj =  $spanObj.get(0);
32、JQ中用show（）、hide（）、slideDown()、slideUp()、fadeIn()、fadeOut()方法操作图片

33、此行代码：

$("tr:even").css("background-color","yellow");
等效以下：$("tr:even").addClass("even");
    
34、添加属性：$fObj.attr("color","gray");
移除属性：$("img").removeAttr("src");

35、遍历数组：

$.each([1,2,3,4,5],function(i,n){
            alert("attr["+i+"]="+n);
});
36、添加删除节点：

$("#pId").append("你好");    向p标签添加节点
$("#fId").remove();把font标签删除
37、城市的二级联动列表（重点是JS和JQ的结合部分）




    
    
    
    



    

        


            

                
                

                    

                        
用户名:
                        

                    

                    

                        
密码:
                        

                    

                    

                        
确认密码:
                        

                    

                    

                        
Email:
                        

                    

                    

                        
籍贯:
                        

                            
                                -请选择-
                                广东
                                湖北
                                山东
                            

                            
                                -请选择-

                            
                        
                    

                    

                        
性别:
                        
男
                            女
                        
                    

                    

                        
爱好:
                        

                            篮球
                            足球
                            敲代码
                            看电影

                        
                    

                    

                        
出生日期:
                        

                            
                        
                    

                    

                        

                            

                        
                    
                

            

        

    



38、把左边的option被选中的元素添加到右边

$("#left option:selected").appendTo("#right");
39、移除所有find 标签：

$("body").find("font").remove();
40、trigger既调用事件所对应的逻辑，又触发浏览器对应的行为

41、bootStrap

container 布局容器,不会把页面充满，支持响应式布局
container-fluid 布局容器,不会把页面充满，不支持响应式布局
42、Bootstrap使用前要先引入核心库文件（有前后顺序）