本帖最后由 htb52110 于 2017-11-20 23:12 编辑
第四天
2.[JS的事件]
【JS的输出】
* document.getElementById(“”).innerHTML=”HTML的代码”;
* document.write(“”);
【JS的事件】
* onfocus :获得焦点.
* onblur :失去焦点.
* onsubmit :提交的时候.
3.[JS的事件的总结]
* onload :
* onclick :
* onsubmit :
* onfocus :
* onblur :
* onchange :下拉列表改变事件.
* ondblclick:双击某个元素的事件.
键盘操作事件:
* onkeydown :
* onkeyup :
* onkeypress:
鼠标操作事件:
* onmousemove:
* onmouseout:
* onmouseover:
* onmousedown
* onmouseup
4.[JS中的DOM对象]
(1).DOM的概述
什么是DOM
DOM:Document Object Model:文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
DOM的使用:
知道document,element,attribute中的属性和方法
(2).Document的常用的操作
a、 获得元素:
* document.getElementById(); -- 通过ID获得元素.
* document.getElementsByName(); -- 通过name属性获得元素.
* document.getElementsByTagName(); -- 通过标签名获得元素.
b、 创建元素:
* document.createElement(); -- 创建元素
* document.createTextNode(); -- 创建文本
c、 添加节点:
* element.appendChild(); -- 在最后添加一个节点.
* element.insertBefore(); -- 在某个元素之前插入.
d、 删除节点:
* element.removeChild(); -- 删除元素
5.[JS 中的全局函数]
* parseInt();
* parseInt(“11”);
* parseFloat();
* parseFloat(“32.09”);
* 编码和解码的方法:
// 解码
* decodeURI();
* decodeURIComponent();
// 编码
* encodeURI();
* encodeURIComponent();
eval函数:
* 将一段内容当成是JS的代码执行.
//var sss = “alert(‘aaaa’)”;
//eval(sss);
第五天 jquery
1.[JQuery的概述]
什么是JQuery:
JQuery是一个JS的框架(JS的类库).对传统的JS进行了封装.
现在企业的开发中往往不会使用传统的JS进行开发,通常都会使用JS框架进行开发.
JS的常用的框架:
JQuery,ExtJS,DWR,Prototype...
JQ的使用:
学习JQuery的语法.
版本
1.X 兼容IE6.7.8
2.X 不兼容IE6.7.8,对最新JS特性不支持
2.[JQuery的入门]
2.1
3.[JS和JQ的相互转换]
JQuery对象,实际上就是DOM数组,我们操作JQuery对象,实际上就是操作里面的每一个元素,只有被$()包裹起来的才是Jq对象
4.[JQ的显示和隐藏]
4.1JQ的效果操作
* show();
* 使用一:Jq对象.show();
* 使用二:Jq对象.show(“slow”); // slow,normal,fast
* 使用三:Jq对象.show(毫秒值); // 1000
* 使用四:Jq对象.show(毫秒值,function(){});
* hide();
* 使用一:Jq对象.hide();
* 使用二:Jq对象.hide(“slow”); // slow,normal,fast
* 使用三:Jq对象.hide(毫秒值); // 1000
* 使用四:Jq对象.hide(毫秒值,function(){});
* slideDown(); --向下滑动
* 使用一:Jq对象.slideDown();
* 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast
* 使用三:Jq对象.slideDown(毫秒值); // 1000
* 使用四:Jq对象.slideDown(毫秒值,function(){});
* slideUp(); --向上滑动
* 使用一:Jq对象.slideUp();
* 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast
* 使用三:Jq对象.slideUp(毫秒值); // 1000
* 使用四:Jq对象.slideUp(毫秒值,function(){});
* fadeIn(); --淡入
* 使用一:Jq对象.fadeIn();
* 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast
* 使用三:Jq对象.fadeIn(毫秒值); // 1000
* 使用四:Jq对象.fadeIn(毫秒值,function(){});
* fadeOut(); --淡出
* 使用一:Jq对象.fadeOut();
* 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast
* 使用三:Jq对象.fadeOut(毫秒值); // 1000
* 使用四:Jq对象.fadeOut(毫秒值,function(){});
* animate(); --自定义动画
* toggle(); --单击切换函数
* Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...
sildeDown 向下滑动
slideUp 向上滑动
fadeIn 淡入
fadeOut 淡出
animate 自定义动画
toggle() 单击切换函数
JQ对象.toggle()
5.[JQuery的选择器]
5.1 Id选择器
用法: $("#id")
5.2 类选择器
用法: $(".类名")
5.3 元素选择器
用法: $("div")
5.4 通配符选择器
用法:$("*")
5.5 并列选择器
用法:("#id,.class, div")
5.6 后代选择器:使用空格
5.7子元素选择器:使用>
5.8下一个元素选择器:使用+
5.9兄弟元素:使用~
[基本过滤选择器]
6.[JQuery对属性的操作方法]
区别:
prop :操作的是非定义属性
attr :操作的是自定义属性
7.[JQuery的DOM操作]
8.[JQuery的遍历]
第六天
1.[JQuery的常用事件]
2.事件切换
3.JQuery的事件查找
4.JQuery的事件处理
Bootstrap响应式框架
1.[响应式的概念]
设计一套页面能够通用在不同的设备上,在手机,pad上,电脑上都可以浏览这个网页,而不影响正常的浏览的方式.
2.什么是bootStrap
使用Bootstrap是注意:
依赖于JQuery,必须先引入JQuery,在引入Bootstrap
3.[Bootstrap的全局CSS]
3.1 布局容器
3.2 栅格系统
3.3使用.row样式定义栅格的行.
|
|