黑马程序员技术交流社区

标题: [石家庄校区]JQuer&&BootStrap [打印本页]

作者: 后街姚姑娘 时间: 2018-5-3 16:33
标题: [石家庄校区]JQuer&&BootStrap
语法
变量类型
数据类型
===全等
Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
<script type="text/javascript">//告诉浏览器这部分是javascript 代码， text/javascript是html标准类型，表示这是个文本类型数据并且是javascript代码。你可以直接写<script>浏览器也都认识的
document.write("<p>123</p>")//write读取
<button type button>一个按钮</button>;
JQ入门:
$代表符
格式:
$(function(){
alert("......")//显示省略号;
});
将JS对象转成JQ的对象.:
$(d);

JQuery的方式：相当于页面加载的事件,可以执行多次.效率比window.onload要高.
window.onload 等页面加载完成后执行该方法.
$(function(){}):等页面的DOM树绘制完成后进行执行.
$相当于JQuery
JQ的效果操作:
* show();//显示
* hide();//隐藏
* slideDown(); --向下滑动
* slideUp(); --向上滑动
fadeIn(); --淡入
fadeOut(); --淡出
JQuery选择器:
Ø id选择器
* 用法:$(“#id”)
Ø 类选择器
* 用法:$(“.类名”)
Ø 元素选择器
* 用法:$(“元素名称”)
Ø 通配符选择器
* 用法:$(“*”)
Ø 并列选择器
* 用法:$(“选择器,选择器,选择器”)
Ø 后代选择器：使用空格所有后代包含孙子及以下的元素
Ø 子元素选择器：使用> 第一层的元素（儿子）
Ø 下一个元素:使用+ 下一个同辈元素
Ø 兄弟元素:使用~ 后面所有的同辈元素
总结:
JQuery：
* JQuery的概述：是一个轻量级的JavaScript的类库.对JS进行封装.
* 常见的JS的框架：
* JQuery，ExtJS，DWR，Prototype...
* JQuery的使用:
* 引入JQuery的JS.
* window.onload和$(document).ready(function(){});区别?
      * onload页面加载完成后才会执行.执行一次
      * ready在页面的DOM树绘制完成就会执行.执行多次.
* JS对象与JQuery对象的转换.
      * JS-->JQuery: $(JS的对象)
      * JQuery-->JS: JQ对象.get(0), JQ对象[0]

BootStrap:
BootStrap的框架提供了一系列的CSS的样式.这些样式可以直接使用.
Ø 栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
使用.row样式定义栅格的行.
定义列：.col-lg-n .col-md-n  .col-sm-n .col-xs-n
超大大小移动端
栅格不能超过十二
可以嵌套;

<meta name="viewport" content="width=device-width, initial-scale=1">

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2