基础——web(2)(JS、JQ)

使用方式

1、元素绑定事件

事件 ：指用户的行为（单击，双击等）或元素的状态（输入框的焦点状态等）事件处理：元素监听某种事件并在事件发生后自动执行事件处理函数。常用事件：onclick (单击事件)语法 ：将事件名称以标签属性的方式绑定到元素上，自定义事件处理。 <!--实现点击按钮在控制台输出--> <button onclick="console.log('Hello World');">点击</button>

2、文档内嵌。使用标签书写 JavaScript 代码

语法 ： <script type="text/javascript"> alert("网页警告框"); </script> 注意 :<script></script>标签可以书写在文档的任意位置，书写多次，一旦加载到script标签就会立即执行内部的JavaScript代码，因此不同的位置会影响代码最终的执行效果

3、外部链接

创建外部的JavaScript文件 XX.JavaScript，在HTML文档中使用<script src=""></script>引入 <script src="index.JavaScript"></script>

4、JavaScript 输入语句

- alert(""); 普通的网页弹框 - prompt(""); 接收用户输入的弹框，返回用户输入的内容 - console.log(); 控制台输出，多用于代码调试 - document.write("<h1>Hello</h1>");实现在动态在网页中写入内容。 1. 可以识别HTML标签,脚本代码可以在文档任何地方书写，如果是普通写入（不涉及事件），区分代码的书写位置插入 2. 文档渲染结束后，再次执行此方法，会重写网页内容

事件函数

1、鼠标事件

onclick //单击 ondblclick //双击 onmouseover //鼠标移入 onmouseout //鼠标移出 onmousemove //鼠标移动

2、文档或元素加载完毕

onload //元素或文档加载完毕

3、表单控件状态监听

onfocus //文本框获取焦点 onblur //文本框失去焦点 oninput //实时监听输入 onchange //两次输入内容发生变化时触发,或元素状态改变时触发 onsubmit //form元素监听,点击提交按钮后触发,通过返回值控制数据是否可以发送给服务器

事件绑定方式

内联方式：将事件名称作为标签属性绑定到元素上 <button onclick="alert()">点击</button> 动态绑定：获取元素节点，动态添加事件 btn.onclick = function (){ };

基础语法

JavaScript是由语句组成,语句由关键字，变量，常量，运算符，方法组成。分号可以作为语句结束的标志，也可以省略JavaScript严格区分大小写注释语法 单行注释使用 // 多行注释使用 /* */

JavaScript的变量与常量

变量

作用 : 用于存储程序运行过程中可动态修改的数据

语法 : 使用关键var声明,自定义变量名

var a; //变量声明 a = 100; //变量赋值 var b = 200; //声明并赋值 var m,n,k; //同时声明多个变量 var j = 10,c = 20; //同时声明并赋值多个变量

命名规范 :

变量名，常量名，函数名，方法名自定义，可以由数字，字母，下划线，$组成，禁止以数字开头禁止与关键字冲突(var const function if else for while do break case switch return class)变量名严格区分大小写变量名尽量见名知意,多个单词组成采用小驼峰,例如：“userName”

使用注意 :

变量如果省略var关键字,并且未赋值,直接访问会报错变量使用var关键字声明但未赋值,变量初始值为undefined变量省略var关键字声明,已被赋值,可正常使用.影响变量作用域

常量

作用 : 存储一经定义就无法修改的数据语法 : 必须声明的同时赋值 const PI = 3.14;

操作小数位 toFixed(n); 保留小数点后 n 位 使用 ：

var num = 3.1415926; //保留当前变量小数点后两位 var res = num.toFixed(2);

数据类型转换

转换字符串类型 方法 : toString() 返回转换后的字符串

var a = 100; a = a.toString(); //"100" var b = true; b = b.toString(); //"true"

转换number类型

Number(param) 参数为要进行数据类型转换的变量或值，返回转换后的结果: 如果转换成功,返回number值 如果转换失败,返回NaN,(Not a Number)，只要数据中存在非number字符,一律转换失败，返回 NaNparseInt(param) 参数为要解析的数据 作用 : 从数据中解析整数值 过程 : 1. 如果参数为非字符串类型,会自动转成字符串 2. 从左向右依次对每一位字符转number,转换失败则停止向后解析,返回结果parseFloat(param) 作用 : 提取number值，包含整数和小数部分

逻辑运算符

&& 逻辑与 表达式同时成立，最终结果才为true；1则1|| 逻辑或 表达式中只要有一个成立,最终结果即为true; 有1则1! 逻辑非 对已有表达式的结果取反 注意 : 除零值以外，所有值都为真

三目运算符

表达式1 ? 表达式2 : 表达式3; 过程 : 判断表达式1是否成立,返回布尔值 如果表达式1成立,执行表达式2; 如果表达式1不成立,执行表达式3;

流程控制

if 语句 if(条件表达式){ 表达式成立时执行的代码段 } if - else结构 - if(条件表达式){ //条件成立时执行 }else{ //条件不成立时选择执行 } switch 语句 switch(value){ case 值1 : //value与值1匹配全等时,执行的代码段 break; //结束匹配 case 值2 : //value与值2匹配全等时,执行的代码段 break; case 值3 : //value与值3匹配全等时,执行的代码段 break; default: //所有case匹配失败后默认执行的语句 break; } 循环结构

1、while循环

定义循环变量; while(循环条件){ 条件满足时执行的代码段 更新循环变量; }

2、do-while循环

do{ 循环体; 更新循环变量 }while(循环条件);

与while循环的区别：

while循环先判断循环条件,条件成立才执行循环体

do-while循环不管条件是否成立,先执行一次循环体

for 循环

for(定义循环变量;循环条件;更新循环变量){ 循环体; }

循环控制 : 1. break 强制结束循环 2. continue 结束当次循环,开始下一次循环 循环嵌套 : 在循环中嵌套添加其他循环

函数

//函数声明 function 函数名(参数列表){ 函数体 return 返回值; } //函数调用 函数名(参数列表); 匿名函数 (function (形参){ })(实参); 定义变量接收匿名函数 var fn = function (){}; fn(); //函数调用

BOM

window对象常用方法 网页弹框 alert() //警告框 prompt() //带输入框的弹框 confirm() //确认框

窗口的打开和关闭

window.open("URL") //新建窗口访问指定的URL window.close() //关闭当前窗口

定时器方法 间歇调用(周期性定时器) 作用：每隔一段时间就执行一次代码 开启定时器: var timerID = setInterval(function,interval); /* 参数 :

function : 需要执行的代码,可以传入函数名;或匿名函数 interval : 时间间隔,默认以毫秒为单位 1s = 1000ms 返回值 : 返回定时器的ID,用于关闭定时器 */ 关闭定时器 : clearInterval(timerID); 超时调用(一次性定时器) 作用：等待多久之后执行一次代码 //开启超时调用: var timerId = setTimeout(function,timeout); //关闭超时调用: clearTimeout(timerId);

jQuery

使用 1、 引入：先引入jquery文件，才能使用jquery语法 2、 工厂函数 - $() //$()获取元素节点,需传入字符串的选择器 $("h1") $("#d1") $(".c1") $("body,h1,p")

3、原生js对象与jq对象

原生JS对象与jQuery对象的属性和方法不能混用。可以根据需要，互相转换 :

原生JS转换jQuery对象 $(原生对象)，返回 jQuery 对象jQuery对象转换原生JS对象 方法一 : 根据下标取元素,取出即为原生对象 var div = $(“div”)[0];方法二 : 使用jQuery的get(index)取原生对象 var div2 = $(“div”).get(0);

4、jQuery获取元素

jQuery通过选择器获取元素，$(“选择器”)

1、基础选择器 标签选择器：$("div") ID 选择器：$("#d1") 类选择器：$(".c1") 群组选择器：$("body,p,h1") 2、层级选择器 后代选择器： $("div .c1") 子代选择器： $("div>span") 相邻兄弟选择器： $("h1+p") 匹配选择器1后的第一个兄弟元素,同时要求兄弟元素满足选择器2 通用兄弟选择器： $("h1~h2") 匹配选择器1后所有满足选择器2的兄弟元素 3、过滤选择器 :first 匹配第一个元素 例:$("p:first") :last 匹配最后一个元素 例:$("p:last") :odd 匹配奇数下标对应的元素 :even 匹配偶数下标对应的元素 :eq(index) 匹配指定下标的元素 :lt(index) 匹配下标小于index的元素 :gt(index) 匹配下标大于index的元素 :not(选择器) 否定筛选,除()中选择器外,其他元素 4、属性选择器 1. [attrName] 匹配包含指定属性的元素 2. [attrName=value]/[attrName="value"] 匹配属性名=属性值的元素 3. [attrName^=value] 匹配属性值以指定字符开头的元素 4. [attrName$=value] 匹配属性值以指定字符结尾的元素 5. [attrName*=value] 匹配属性值包含指定字符的元素 5、子元素过滤选择器 :first-child 匹配第一个子元素 :last-child 匹配最后一个子元素 :nth-child(n) 匹配第n个子元素(n从1开始计数)

5、操作元素内容

html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法 text() //设置或读取标签内容,等价于innerText,不能识别标签 val() //设置或读取表单元素的值,等价于原生value属性

6、操作标签属性

1. attr("attrName","value") 设置或读取标签属性 2. prop("attrName","value") 设置或读取标签属性 注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写 3. removeAttr("attrName") 移除指定属性

jQuery事件处理

1、文档加载完毕

//语法一 $(document).ready(function (){ //文档加载完毕后执行 }) //语法二 $().ready(function (){ //文档加载完毕后执行 }) //语法三 $(function(){ //文档加载完毕后执行 })

2、事件绑定方式：

//on("事件名称"，function) $("div").on("click",function(){}); //bind("事件名称",function) $("div").bind("click",function(){}); //事件名作为方法名 $("div").click(function(){});

3、this表示事件的触发对象，在jquery中可以使用，注意转换类型。this为原生对象只能使用原生的属性和方法，可以使用$(this)转换为jquery对象，使用jquery方法。