JS学习笔记
JavaScript
作用
用于给页面添加动态效果
语言特点
如何在HTML页面中添加JS代码
JavaScript语法
变量
*JS属于弱类型语言
*声明变量时使用var和let的区别
数据类型
let s = "abc"; string
运算符
各种语句
方法声明
格式:
声明常见的四种方法:
三种声明方法的格式:
<script> //第一种声明方法的方式 //声明无参无返回值 function fn1(){ alert("fn1"); } //调用方法 //fn1(); //声明有参无返回值 function fn2(name,age){ alert(name+":"+age); } //fn2("刘德华",17); //无参有返回值 function fn3(){ return "我是返回值"; } //let info=fn3(); //alert(info) //有参有返回值 function fn4(x,y){ return x*y; } //let info=fn4(5,9); //alert(info); //第二种声明方法的方式 let fn5=function (name, age) { alert(name+":"+age); } //fn5("张飞",18); //第三种声明方法的方式 let fn6=new Function("name","age","alert(name+':'+age)"); fn6("刘备",50); </script>
注意：
在调用方法的时候注意加上后面的括号
（错误写法）
<input type="button" value="按钮" onclick="fn1">
此时单击事件无效
<input type="button" value="按钮" onclick="fn1()">
此时才能达到预期结果
js调用函数时加括号与不加括号的区别（百度知道）
函数只要是要调用它进行执行的，都必须加括号。此时，函数()实际上等于函数的返回值。当然，有些没有返回值，但已经执行了函数体内的行为，这个是根本，就是说，只要加括号的，就代表将会执行函数体代码。不加括号的，都是把函数名称作为函数的指针，用于传参，此时不是得到函数的结果，因为不会运行函数体代码。它只是传递了函数体所在的地址位置，在需要的时候好找到函数体去执行。
和页面相关的方法
1. 通过元素的id获取元素对象
let d = document.getElementById("id");
2. 获取和修改元素的文本内容
d.innerText 获取元素的文本
d.innerText = "xxx"; 修改元素的文本内容
3. 获取和修改控件的值
i.value 获取控件的值
i.value="xxx" 修改控件的值
4. 获取和修改元素的html标签内容
* 若要插入HTML标签，则要将innerText改为innerHTML即可
//字符串进行减乘除运算时会自动转换成数值
//如果获取到的字符串内容不是一个数，会显示NaN : Not a Number 不是一个数
//加法和其他的不一样，加法会进行字符串拼接
* NaN:
Not a Number 不是一个数
isNaN(变量) true代表是NaN false代表是数
* 往HTML页面中连续添加多个标签时可用
d1.innerHTML; 获取
d1.innerHTML=“<img src='../8.jpg'>”; 替换修改
d1.innerHTML=“<img src='../8.jpg'>”; 追加
5.将字符串转换成数值两种方法：
* 给字符串乘以1
* 用方法parseInt(字符串)
JavaScript对象分类
分为三大类
* 内置对象: string,number,boolean等
* BOM: Browser Object Model 浏览器对象模型, 包含和浏览器相关的内容
* DOM: Document Object Model 文档对象模型,包含页面相关的内容
BOM浏览器对象模型
window对象: 该对象里面的属性和方法称为全局属性和全局方法, 访问时可以省略window.
window.alert() window.isNaN() window.parseInt()
* window里面常见的方法
* alert() 弹出提示框(弹出后只可点击确认)
* confifirm() 弹出确认框（弹出后可点击确认页可点击取消，分别返回true和false）
* prompt() 弹出文本框（弹出文本框，返回输入内容）
* isNaN() 判断变量是否是NaN
* parseInt() 将字符串或小数转成整数
* parseFloat() 将字符串转成小数
* let timer = setInterval(方法,时间间隔) 开启定时器 每隔时间间隔后方法就执行一次（例如轮播图）
<script> //第一种写法 //开启定时器 setInterval（myfn,2000）； let timer = function myfn(){ console.log("执行了！"); } clearInterval(timer);//停止定时器 //第二种写法（通过匿名方法） setInterval（function（）{ console.log("执行了！"); }，1000）； </script>
console.log("执行了！");//类似于System.out.println("执行了！");
* clearInterval(timer) 停止定时器
* setTimeout（方法名，时间间隔）; 只执行一次的定时器
* window里面常见的属性
* location：位置
* location.href；获取浏览器的请求地址
* location.href=“http://www.baidu.com”;修改浏览器的请求地址
* location.reload(); 让页面刷新
* location.search 获取浏览器后面的请求参数 （有参数的话获取到的是 ？以及后面的内容 若无参数则获取到的是“”）
* history：历史（浏览器当前窗口的历史并非是浏览器里面的历史记录）
* history.length 获取历史页面的数量
* history.back() 返回上一个页面（相当于浏览器里面的前进键）
* history.forward() 前往下一个页面（相当于浏览器里面的后退键）
* screen：屏幕
* screen.width 获取电脑屏幕宽分辨率
* screen.height 获取电脑屏幕高分辨率
* navigator：导航/帮助
* navigator.userAgent 获取浏览器的版本信息
事件相关
* 什么是事件？
事件就是系统给提供的一些时间点，包括鼠标事件/键盘事件/状态改变事件
* 鼠标事件：
onclick:鼠标点击事件
onmouseover：鼠标移入事件
onmouseout：鼠标移出事件
onmousedown：鼠标按下事件
onmousemove：鼠标移动事件
* 键盘事件
onkeydown: 键盘按下
onkeyup：键盘抬起
event.keyCode：获取按键编码
String.fromCharcode(按键编码)：将字符编码转成字符
<script> //event事件对象，里面装着和事件相关的内容 //keyCode 获取按键编码 function downfnkey(){ console.log("键盘按下"+event.keyCode); //根据案件编码判断按下的是否是回车键 if (event.keyCode==13){ alert("用户按下了回车键") } } function upfnkey(){ //将按键编码转成字符 let char =String .fromCharCode(event.keyCode) console.log("键盘抬起"+char); } </script>
* 状态改变事件
onload：页面加载完成事件
onchange：值改变事件
onblur：失去焦点事件
onresize：窗口尺寸改变事件
* 事件的绑定
* 事件属性绑定：在元素里面添加事件属性
* 动态绑定：通过js代码给元素添加事件，用的更多，可以将js代码和HTML代码分离开
<body> <input type="button" value="按钮1" onclick="fn1()"> <input type="button" value="按钮2" id="b1"> <script> //事件属性绑定 function fn1(){ alert("按钮1被点击了"); } //动态绑定，通过js代码添加事件 b1.onclick=function(){ alert("按钮2被点击了"); } </script> </body>
*事件传递（事件冒泡）
在某个范围内如果有多个元素的事件需要触发，事件是从最里层往最外层传递
DOM文档对象模型，包含页面相关内容
* 通过id获取元素对象 document.getElementbyid("id");
* innerText/innerHTML
jQuery框架
* 由于JavaScript语言中的和页面相关的内容比较繁琐，jQuery的出现就是解决此问题，可以让程序员更高效的开发页面动态效果。
* 如何使用jQuery框架？
此框架就是一个外部的js文件，通过script标签的src属性引入到HTML页面即可使用
<!--引入入jQuery框架--> <script src="../js/jquery-1.4.2.js"></script> <script> //给按钮添加点击事件 /* //js动态绑定事件 let b1=document.getElementById("b1");//现在的谷歌浏览器等会自动添加这行代码，但是有的浏览器不会，所以为了兼容性还得写 b1.onclick=function () { alert("按钮被点击了"); }*/ //jQuery写法 //jquery中的事件的名称和js中的事件的名称比较，去掉了on $("#b1").click(function () { //alert("按钮被点击了！"); /*let a=document.getElementById("d1"); let b=document.getElementById("i1"); a.innerText=b.value;*/ //等效上面三行代码 $("#d1").text($("#i1").val()) //document.getElementById("i1"); 获取到的是js对象，表示文本框 //$("#i1")获取到的是jQuery对象，也表示文本框 }); </script>
* js对象和jQuery对象不是同一种对象，彼此的方法也不能互相调用
* js对象和jQuery对象的互相转换
* js转jQuery
let jq=$(js);
* jQuery转js
let js=jq[0];
<body>
<input type="text" id="i1">
<input type="button" value="js转jq" id="b1">
<input type="button" value="jq转js" id="b2">
<!--引入jQuery框架-->
<script src="../js/jquery-1.4.2.js"></script>
<script>
//先给按钮绑定单击事件
$("#b1").click(function () {
//获取js对象
let js=document.getElementById("i1");
//js对象转为jQuery对象
let jq=$(js);
//调用jq的方法val()验证是否转换成功
alert(jq.val())
});
$("#b2").click(function(){
//得到jq对象
let jq=$("#i1");
//把jq对象转成js对象，jq对象本质上是一个数组，里面装的是js
//此时通过id选择器获取到的jq数组里面只有一个元素，就是jq[0]
let js=jq[0];
alert(js.value);
});
</script>
</body>
$("选择器")，jQuery的这个通过选择器选择元素的写法可以理解成是一个方法，它返回的jQuery对象是一个数组，而这个jQuery对象里面装的就是js对象
jquery中的选择器
* 基础选择器 用法和css一样
* 层级选择器
* 层级相关方法:
* 过滤选择器
* 内容选择器
* 可见选择器
* 显示隐藏相关方法:
* 属性选择器
* 子元素选择器
* 表单选择器
* 遍历其相应选择器返回的数组
//弹出所有 :checked 元素的value值" id="b4" $("#b4").click(function(){ //只能取到数组的第一个元素的value值 //alert($(":checked").val()); //遍历数组的每一个元素 $(":checked").each(function(){ //遍历的过程中this代表遍历的每一个“js对象” alert(this.value); }); });
浙公网安备 33010602011771号