JavaScript 客户端脚本语言 选择器、事件

JavaScript发展史

JavaScript介绍

JavaScript ( 简称 JS): 是一种轻量级客户端脚本语言，通常被直接嵌入 HTML 页面，在浏览器上执

行。

JavaScript 的主要用途 :

• 使网页具有交互性（如果不去使用js，只是使用html css那么只是一些死的页面，那么你去点击一个按钮，你去做一些相关的动作，点击一个按钮，发起一个请求除了form表单提供发起请求的能力，那么别的就没有了，动作这一块全部都是使用js去控制），例如响应用户点击，给用户提供更好的体验
• 处理表单，检验用户输入，并及时反馈提醒
• 浏览器与服务端进行数据通信，主要使用Ajax异步传输
• 在网页中添加标签，添加样式，改变标签属性等

基本使用

内部方式 ( 内嵌样式 ) ，在 body 标签中使用

外部导入方式 ( 推荐 ) ，在 head 标签中使用

代码示例

    
    
    
    



    
在html中如何使用javascript
    

其实js这部分的语言其实和后端是有点类似的，它也可以去做变量的定义，也有固定的方法，也有我们写的方法函数等。

事件

• 事件指的是当HTML中发生某些事件时所调用的方法(处理程序)。 例如点击按钮，点击后做相应操作，例如弹出一句话
• 用法：< some-HTML-element some-event ='JavaScript 代码'>

和css一样，在学css的时候一定要学选择器，在学js的时候，我们一定要学事件。

在前端页面来说，大部分动作都是绑定在事件上面去，事件会绑定在dom节点，或者html标签也好。

• 常用事件

上面这些事件都是绑定到某个元素上面去的。

onchange：比如input输入框里面输入的内容有变化了，那么这就是一个change事件，然后有js方法去监听这个事件。其实也就是输入了某些内容，然后触发了change事件。

每个html元素id的值都是唯一的，

    
    
    
    



  onclick
  onmouseover
  

  输入你的名字:
  
当你离开输入框的时候，小写字母将转化为大写字母

window.onload = f;整个浏览器窗口的一个概念，当你浏览器整个窗口加载完成时。

var x=document.getElementById("fname"); 拿到HTML元素，可以去操作它的值，并且改变它的值。

上面的id选择器是给js去使用的，它是一个唯一的值，如果好几个地方都定义id的值，那么都会发生变化。所以id一般是唯一的，并且给到某个js去使用，在某个特定的场景下去使用。

选择器

JS选择器主要用来获取HTML页面中的元素,将页面中的元素保存到一个对象中,然后就可以对这些对象的属性值进行相应操作,以实现一些动态效果,以达到页面的生动,易用。（不仅仅可以改变HTML中的值，属性也可以去改变，甚至可以去绑定这些东西的css）

需要注意的一点是操作的一定是对象 , 直接将元素当做对象使用是不行的。（得先通过js方法去获取到id对象）

常见选择器 : 标签选择器、类选择器、 ID 选择器

在最初期的时候，使用js html以及css去写前端，你需要自己去维护所有的动态操作，那么这些工作量是巨大的，自从高度封装的框架以及组件库出现了之后，它其实帮助我们代替了很多很多的工作。

后面大部分的动态操作框架都提供给你了，你只需要维护你的数据就行了。

    点我-id
   
    

        
Hello world!1
        
Hello world!2
        
Hello world!3
    

首先是去获取了button的dom对象，获取之后在button上面绑定了事件。

上面是标签选择器和id选择器的一个例子。

JS操作HTML

• 插入内容

document.write(“

这是 JS 写入的段落

”) ;       // 向文档写入 HTML 内容

x = document.getElementById(‘demo’) ;                  // 获取 id 为 demo 的元素

x.innerHTML=“Hello”                                             // 向元素插入 HTML 内容

•  改变标签属性：

document.getElementById(“image”).src=“b.jpg“ // 修改 img 标签 src 属性值

• 改变标签样式  

x = document.getElementById(“p”) // 获取 id 为 p 的元素

x.style.color=“blue” // 字体颜色

• 代码示例