JS操作属性

obj.value = "";

obj.style.样式名 = "";

obj.src = "";

obj.属性名 = "值"

debug：

1.打开控制台，查看console是否有错误信息

2.如果有错误信息，可以直接定位哪里有问题

3.如果没有错误信息，我们需要打开source，查看源代码，加断点

4.找事件，根据事件名字找到对应的方法 比如 onload = "show()" 那我们就可以找到方法是show方法

5.在show方法的第一行加断点

6.仔细观察代码是走到哪一行报错的，并记录下来

7.通过watch查看出问题的那一行的变量

1.两个等于号和三个等于号的区别:

两个==号只要值相等就为true 三个等于号 === 全等于,全等于是类型和值都一样才为true

2.引入JS的两种方式

一种：页面内直接编写JS代码,JS代码需要使用<script></script>.

二种：将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.

3.onsubmit注意事项

必须加return

4.获取DOM元素对象的方式

document.getElementById().xx

5.1.如何修改<img>标签的src的值？

document.getElementById().src=""

6.!!的使用

使用!!就是将数据变成boolean类型

JS的事件的总结：

· 窗口事件

o onload : 当文档被载入时执行脚本

· 表单元素事件

o onsubmit : 当表单被提交时执行脚本

o onfocus : 当元素获得焦点时执行脚本

o onblur : 当元素失去焦点时执行脚本

o onchange : 当元素改变时执行脚本(下拉列表改变事件)

· 键盘操作事件:

o onkeydown : 当键盘被按下时执行脚本

o onkeyup : 当键盘被松开时执行脚本

o onkeypress: 当键盘被按下后又松开时执行脚本(有点像鼠标事件中的click)

· 鼠标操作事件：

o onclick : 当鼠标被单击时执行脚本

o ondblclick : 当鼠标被双击时执行脚本

o onmousemove : 当鼠标指针移动时执行脚本

o onmouseout : 当鼠标指针移出某元素时执行脚本

o onmouseover : 当鼠标指针悬停于某元素之上时执行脚本

o onmousedown : 当鼠标按钮被按下时执行脚本

o onmouseup : 当鼠标按钮被松开时执行脚本

1.6.4.1JS中的DOM对象：

【DOM的概述】

什么是DOM

DOM：Document Object Model：文档对象模型.

将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.

DOM的使用：

知道document，element，attribute中的属性和方法

【DOM的常用的操作】

获得元素：

* document.getElementById(); -- 通过ID获得元素.

* document.getElementsByName(); -- 通过name属性获得元素.

* document.getElementsByTagName(); -- 通过标签名获得元素.

创建元素：

* document.createElement(); -- 创建元素

* document.createTextNode(); -- 创建文本

添加节点：

* element.appendChild(); -- 在最后添加一个节点.

* element.insertBefore(); -- 在某个元素之前插入.

删除节点：

* element.removeChild(); -- 删除元素

【使用DOM完成对ul中添加一个li元素】

function addElement(){

var city = document.getElementById("city");

// 创建一个元素:

var liEl = document.createElement("li");

// 创建一个文本节点:

var text = document.createTextNode("深圳");

// 添加子节点:

liEl.appendChild(text);

city.appendChild(liEl);

}

【JS中创建数组】

· var arr=[];

· var arr=new Array();

【JS的事件】

下拉的列表的改变的事件.onchange.

JS的全局函数：

* parseInt();

* parseInt(“11”);

* parseFloat();

* parseFloat(“32.09”);

eval函数：

* 将一段内容当成是JS的代码执行.

//var sss = “alert(‘aaaa’)”;

//eval(sss);

JQuery

JQuery介绍

· 说是框架,其实不算是框架,它仅仅是个工具类(JS的类库),对传统的JS进行了封装

JS的常用的框架:

· AngularJS

· Angular

· VUE

JQuery的入门

· 引入Jquery的js文件

· JQuery的入口函数: $(function(){});

JS对象和JQ对象的转换

· JS转JQ 加$();

· JQ转JS

一种方式:  $d1[0].innerHTML = "将JQ的对象转成JS对象"; $d1为JQ对象

二种方式: $d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";

JQ显示和隐藏

JQ的效果操作:

· 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...

JS操作属性

obj.value = "";

obj.style.样式名 = "";

obj.src = "";

obj.属性名 = "值"

debug：

1.打开控制台，查看console是否有错误信息

2.如果有错误信息，可以直接定位哪里有问题

3.如果没有错误信息，我们需要打开source，查看源代码，加断点

4.找事件，根据事件名字找到对应的方法 比如 onload = "show()" 那我们就可以找到方法是show方法

5.在show方法的第一行加断点

6.仔细观察代码是走到哪一行报错的，并记录下来

7.通过watch查看出问题的那一行的变量

1.两个等于号和三个等于号的区别:

两个==号只要值相等就为true 三个等于号 === 全等于,全等于是类型和值都一样才为true

2.引入JS的两种方式

一种：页面内直接编写JS代码,JS代码需要使用<script></script>.

二种：将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.

3.onsubmit注意事项

必须加return

4.获取DOM元素对象的方式

document.getElementById().xx

5.1.如何修改<img>标签的src的值？

document.getElementById().src=""

6.!!的使用

使用!!就是将数据变成boolean类型

JS的事件的总结：

· 窗口事件

o onload : 当文档被载入时执行脚本

· 表单元素事件

o onsubmit : 当表单被提交时执行脚本

o onfocus : 当元素获得焦点时执行脚本

o onblur : 当元素失去焦点时执行脚本

o onchange : 当元素改变时执行脚本(下拉列表改变事件)

· 键盘操作事件:

o onkeydown : 当键盘被按下时执行脚本

o onkeyup : 当键盘被松开时执行脚本

o onkeypress: 当键盘被按下后又松开时执行脚本(有点像鼠标事件中的click)

· 鼠标操作事件：

o onclick : 当鼠标被单击时执行脚本

o ondblclick : 当鼠标被双击时执行脚本

o onmousemove : 当鼠标指针移动时执行脚本

o onmouseout : 当鼠标指针移出某元素时执行脚本

o onmouseover : 当鼠标指针悬停于某元素之上时执行脚本

o onmousedown : 当鼠标按钮被按下时执行脚本

o onmouseup : 当鼠标按钮被松开时执行脚本

1.6.4.1JS中的DOM对象：

【DOM的概述】

什么是DOM

DOM：Document Object Model：文档对象模型.

将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.

DOM的使用：

知道document，element，attribute中的属性和方法

【DOM的常用的操作】

获得元素：

* document.getElementById(); -- 通过ID获得元素.

* document.getElementsByName(); -- 通过name属性获得元素.

* document.getElementsByTagName(); -- 通过标签名获得元素.

创建元素：

* document.createElement(); -- 创建元素

* document.createTextNode(); -- 创建文本

添加节点：

* element.appendChild(); -- 在最后添加一个节点.

* element.insertBefore(); -- 在某个元素之前插入.

删除节点：

* element.removeChild(); -- 删除元素

【使用DOM完成对ul中添加一个li元素】

function addElement(){

var city = document.getElementById("city");

// 创建一个元素:

var liEl = document.createElement("li");

// 创建一个文本节点:

var text = document.createTextNode("深圳");

// 添加子节点:

liEl.appendChild(text);

city.appendChild(liEl);

}

【JS中创建数组】

· var arr=[];

· var arr=new Array();

【JS的事件】

下拉的列表的改变的事件.onchange.

JS的全局函数：

* parseInt();

* parseInt(“11”);

* parseFloat();

* parseFloat(“32.09”);

eval函数：

* 将一段内容当成是JS的代码执行.

//var sss = “alert(‘aaaa’)”;

//eval(sss);

JQuery

JQuery介绍

· 说是框架,其实不算是框架,它仅仅是个工具类(JS的类库),对传统的JS进行了封装

JS的常用的框架:

· AngularJS

· Angular

· VUE

JQuery的入门

· 引入Jquery的js文件

· JQuery的入口函数: $(function(){});

JS对象和JQ对象的转换

· JS转JQ 加$();

· JQ转JS

一种方式:  $d1[0].innerHTML = "将JQ的对象转成JS对象"; $d1为JQ对象

二种方式: $d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";

JQ显示和隐藏

JQ的效果操作:

· 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...