Web-05JS

JavaScript对象分类

1. 内置对象: number/string/boolean等
2. 浏览器相关对象BOM: Browser Object Model 浏览器对象模型
3. 页面相关对象DOM: Document Object MOdel 文档对象模型

BOM浏览器相关内容

• window: 该对象里面的属性和方法称为全局属性和全局方法,访问时可以省略掉window.

  window.alert() window.parseInt() window.isNaN()

1. window对象中场景的方法

   1. window.isNaN() 判断变量是否是NaN
   2. window.parseInt()和window.parseFloat() 将字符串转成整数和转成浮点数
   3. window.alert() 弹出提示框
   4. window.confirm() 弹出确认框
   5. window.prompt() 弹出文本框
   6. window.setInterval(方法,时间间隔) 开启定时器
   7. window.clearInterval(timer) 停止定时器
   8. window.setTimeout(方法,时间间隔) 开启只执行一次的定时器

2. window中常见的属性

   1. location:位置
      • location.href 获取和修改当前浏览器的地址
      • location.reload(); 刷新页面
   2. history: 历史
   • history.length; 获取当前窗口的历史页面数量
   • history.back(); 返回上一页面 等效左箭头
   • history.forward(); 前往下一页面 等效右箭头
   • history.go(n); n正值代表前进 n负值代表后退 0代表刷新
   3. screen 屏幕
      • screnn.width/height 获取屏幕的分辨率
   4. navigator 导航帮助
      • navigator.userAgent; 获取浏览器的版本信息

事件

• 什么是事件: 系统给提供的一些特定的时间点, 事件包括:鼠标事件/键盘事件/状态改变事件
• 鼠标事件:
  • onclick 点击事件
  • onmouseover 鼠标移入事件
  • onmouseout 鼠标移出事件
  • onmousedown 鼠标按下事件
  • onmouseup 鼠标抬起事件
  • onmousemove 鼠标移动事件
• 键盘事件:
  • onkeydown 键盘按下事件
  • onkeyup 键盘抬起事件
• 状态改变事件
  • onload 页面加载完成事件
  • onchange 值改变事件

事件绑定

• 如何给元素添加事件?

  1. 事件属性绑定

     		<input type="button" value="事件属性绑定"	
     		onclick="alert('触发!')">
     

  2. 动态绑定

     btn.onclick = function(){
     			alert("动态绑定事件触发!");
     		}
     

  3. 事件取消

     1. 在事件中执行retrun false; 则可以取消当前事件
     
     ​      <!-- 在事件中执行return false可以终止事件 -->
     ​	<a href="http://www.baidu.com" 
     ​	onclick="return confirm('您确认离开此页面吗?')">百度</a>
     

  4. 事件传递(事件冒泡)

     当某一个位置有多个元素的事件需要触发,则事件响应的顺序是从最底层往上层传递,类似气泡从下往上所以称为事件冒泡.

DOM文档对象模型

• 和页面相关的内容

1. 通过id获取元素 document.getElementById(“id”)
2. 获取和修改元素的文本内容 innerText
3. 获取和修改元素的html内容 innerHTML
4. 获取和修改文本框的值 i.value

jQuery框架

• 作用: 和JavaScript一样给页面添加动态效果,其实就是对部分原生JavaScript语言的封装,可以让程序员写的更少但实现的更多.

  js: var d = document.getElementById(“id”);

  jQuery: $("#id")

• 引入方式: 由于jQuery就是通过JavaScript语言所写,框架本身就是一个js文件,所以和引入普通的js文件一样通过script标签的src属性引入到HTML页面即可.

• 通过id获取元素对象,此时获取到的是jQuery对象 和js对象不一样 $("#id")

js对象和jq对象互相转换

• js对象和jq对象不是一种对象,各自的方法不能混着调用

1. js转jq : var jq = $(js);
2. jq转js: var js = jq[0]; jq对象实际上就是一个数组,里面装着js对象

修改元素相关内容

1. 创建和添加元素对象

   1. 如何创建新元素

      var d = $("<div id='abc'>xxx</div>");
      

   2. 如何把创建的元素添加到页面中

      元素.append(新元素); 把某个新元素添加到元素的最后面

      元素.prepend(新元素); 把某个新元素添加到元素的最前面

      兄弟元素.before(新元素); 把某个元素添加到该元素的前面

      兄弟元素.after(新元素); 把某个元素添加到该元素的后面

   3. 删除元素

      元素.remove();

2. 获取或修改元素的文本内容

   1. 元素.text(“xxx”) ; 修改文本内容 等效 innerText=“xxx”;
   2. 元素.text(); 获取文本内容 等效innerText

3. 获取或修改元素的html内容

   1. 元素.html(“

      xxx

      ”);修改元素的html内容，等效 innerHTML="…";
   2. 元素.html() 获取 等效innerHTML

4. 获取或修改元素的css样式

   1. 元素.css(“样式名”,“值”); 修改元素的样式
   2. 元素.css(“样式名”); 获取样式
   3. 元素.css({“样式1名”:“值”,“样式2名”:“值”}); 样式批量赋值

5. 获取或修改元素的属性

   1. 元素.attr(“属性名”,“值”); 修改
   2. 元素.attr(“属性名”); 获取

变量作用域相关

• var 关键字声明变量时 作用域的范围是和java中变量的作用域不一样, 如果声明在方法外面等效java中的全局变量,如果声明在事件方法中作用域为方法的整个执行过程中.
• let关键字是在ES6标准中新增的声明变量的关键字, 如果需要声明局部变量使用let关键字
• 全局变量用var 局部变量用let

鼠标移入移出事件合并 hover

//给所有div添加移入移出事件
	$("div").hover(function(){
		$(this).css("color","red");
	},function(){
		$(this).css("color","green");
	});