bootstrap思想总结_JS & jQuery & Bootstrap.. 总结

1### HTML: 超文本标记语言: 设计网页,决定了网页的结构;

2### CSS: 层叠样式表 ,主要是用来美化页面, 将美化和HTML代码进行分离,提高代码复用性;

3### javascript: 脚本语言,由浏览器解释执行, 弱类型语言(var i), 提供用户交互;

4### jquery: javascript函数库,进一步的封装;

5### JSON: 是一种轻量级的数据交换格式;

6### Bootstrap: Bootstrap是HTML、CSS和JS框架,用于开发响应式布局、移动设备优先的WEB项目。

7

8

9

10

11### JS

12

13JavaScript(简称“JS”) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面

14的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并

15且支持面向对象、命令式和声明式(如函数式编程)风格

16

17

18- 定时器

19 - setInterval: 每隔多少毫秒执行一次函数

20 - setTimeout: 多少毫秒之后执行一次函数

21 - clearInterval: 关闭定时器

22 - clearTimeout: 关闭定时器

23 - 显示广告 img.style.display = "block"

24 - 隐藏广告 img.style.display = "none"

25

26-JS中的常用事件

27 onfocus : 获得焦点事件

28 onblur : 失去焦点事件

29 onkeyup : 按键抬起事件,获取到输入的信息来辨别

30 onsubmit: 验证拦截

31

32 鼠标移入: onmouseenter

33 鼠标移出: onmouseout

34

35

36一些常用的 HTML DOM 方法：

37 getElementById(id) - 获取带有指定 id 的节点(元素)

38 appendChild(node) - 插入新的子节点(元素)

39 removeChild(node) - 删除子节点(元素)

40

41一些常用的 HTML DOM 属性：

42 innerHTML - 节点(元素)的文本值

43 parentNode - 节点(元素)的父节点

44 childNodes - 节点(元素)的子节点

45 attributes - 节点(元素)的属性节点

46

47

48查找节点：

49 getElementById() 返回带有指定 ID 的元素。

50 getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。

51 getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。

52

53增加节点：

54 createAttribute() 创建属性节点。

55 createElement() 创建元素节点。

56 createTextNode() 创建文本节点。

57 insertBefore() 在指定的子节点前面插入新的子节点。

58 appendChild() 把新的子节点添加到指定节点。

59

60删除节点：

61 removeChild() 删除子节点。

62 replaceChild() 替换子节点。

63

64修改节点：

65 setAttribute() 修改属性

66 setAttributeNode() 修改属性节点

67

68

69

70

71

72### jQuery

73

741.什么是jQuery?

75

76 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(*或JavaScript框架*)。

77 jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提

78 供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

79

80 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器

81 进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

82

83

842.jQuery的作用:

85

86 1. 写更少的代码,做更多的事情: write Less ,Do more

87 2. 将我们页面的JS代码和HTML页面代码进行分离

88

89 为什么学习JQuery:

90 提高我们的工作效率

91

92基本选择器:

93 ID选择器: #ID名称

94 类选择器: .类名

95 元素选择器: 元素名称

96 通配符选择器:*找出网页上所有元素

97 选择器分组: [选择器1 , 选择器2]

98

99层级选择器:

100 - 子元素选择器: 选择器1 > 选择器2

101 - 后代选择器: 选择器1 儿孙

102 - 相邻兄弟选择器: 选择器1 + 选择器2 : 找出紧挨着的一个弟弟

103 - 找出所有弟弟: 选择器1 ~ 选择器2 : 找出所有的弟弟

104 - 找出所有兄弟: $("div").siblings()

105

106属性选择器:

107 [属性] 匹配包含给定属性的元素。

108 [属性=value] 匹配给定的属性是某个特定值的元素。

109 [属性!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。

110 [属性^=value] 匹配给定的属性是以某些值开始的元素。

111 [属性$=value] 匹配给定的属性是以某些值结尾的元素。

112 [属性*=value] 匹配给定的属性是以包含某些值的元素。

113 [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。

114

115表单选择器:

116 :input

117 :text

118 :password

119 :radio

120

121表单对象属性的过滤器:

122 :enabled 匹配所有可用元素

123 :disabled 匹配所有不可用元素

124 :checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

125 :selected 匹配所有选中的option元素

126

127基本过滤器:

128 :first 找出的是第一个

129 :last 找出的最后一个

130 :even 找出索引为偶数

131 :odd 找出奇数索引

132 :gt(index) 大于索引

133 :lt(index) 小于

134 :eq(index) 等于

135

136

137常用函数:

138 属性prop() properties

139 如果传入一个参数 就是获取

140 prop("src","../img/1.jpg");

141 设置图片路径

142 attr : 操作一些自定义的属性

143 prop: 通常是用来操作元素固有属性的 ,建议大家使用prop来操作属性

144 css() ; 修改css样式

145 addClass() : 添加一个class样式

146 removeClass() : 移除

147 blur : 绑定失去焦点

148 focus: 绑定获得焦点事件

149 click:

150 dblclick

151 change

152 append : 给自己添加儿子

153 appendTo : 把自己添加到别人家

154 prepend : 在自己子节点最前面添加子节点

155 after : 在自己后面添加一个兄弟

156 before: 在自己前面添加一个兄弟

157 $("数组对象").each(function(index,data))

158 $.each(arr,function(index,data))

159

160

161

162

163

164### JSON

165

166- 什么是JSON?

167

168[JSON] 是一种轻量级的数据交换格式。它基于[ECMAScript]的一个子集。

169JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl等)。

170这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。

171

172- JSON格式

173 JSON对象:

174 ```json

175 { key1:value}

176 {"username":"zhangsan","password":"123"}

177 ```

178

179 JSON数组:

180 ```json

181 [{ key1:value},{ key1:value},{ key1:value}]

182 ```

183

184

185

186

187

188### Bootstrap

189

1901.什么是Bootstrap?

191 Bootstrap是HTML、CSS和JS框架,用于开发响应式布局、移动设备优先的WEB项目。

192

193- BootStrap的中文网

194- http://www.bootcss.com

195

196- BootStrap结构

197- 全局CSS

198 - bootStrap中已经定义好了一套CSS的样式表

199- 组件

200 - BootStrap定义的一套按钮,导航条等组件

201- JS插件

202 - BootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果

203

204- BootStrap的布局容器

205`.container` 类用于固定宽度并支持响应式布局的容器。

206

207

208栅格系统

209 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。

210 一行加起来的数必须保持在十二,若是超出,就会另起一行;

211

212 超小屏幕 手机 (<768px) .col-xs-

213 小屏幕 平板 (≥768px) .col-sm-

214 中等屏幕 桌面显示器 (≥992px) .col-md-

215 大屏幕 大桌面显示器 (≥1200px) .col-lg-

216

217

218BootStrap的入门开发:

219导入这些链接,然后在官网复制相对应代码就可以了.

220

221

222

223

224

225

226

227

228

229

230

231

232

目录大纲 Directory outline