A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 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样式定义栅格的行.

2 个回复

倒序浏览
htb52110 来自手机 中级黑马 2017-11-21 12:49:37
沙发
写得好!
回复 使用道具 举报
htb52110 来自手机 中级黑马 2017-11-21 12:50:27
藤椅
写得好,清楚明了!继续保持!
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马