(三)JS以及JQuery的学习总结

JavaScript是前端开发中必备的一门技术。本文只是引路型的做一个总结。

一、JavaScript

JS概述
前端页面的脚本实现都是基于JS的，包括现在流行的前端框架（如Vue、EasyUI等）。JS是一种直译式的脚本语言，不需要事先编译，可由浏览器直接解释执行。另外JS有ECMAScript、DOM、BOM三个组成部分。
- 什么是脚本语言？
  java源代码——>编译成.class文件——>java虚拟机中才能运行
  脚本语言：源码——>解释执行
  js由浏览器来解释执行
- 作用：
  HTML：决定页面的框架
  CSS：美化页面
  JS：提供用户的交互
- JS的组成：
  ECMAScript：描述了JS语言的语法和基本对象
  DOM:描述了处理网页内容的方法和接口，主要用来管理页面
  BOM:描述了与浏览器进行交互的方法和接口，前进后退、页面刷新、地址栏、历史记录、屏幕宽高
JS的关键知识点
要学习JS，可以分别从以下几个方面入手：
1. JS语法：
  变量是弱类型；
  区分大小写；
  语句结束之后的“;”可以有也可以没有；
  写在script标签内
2. JS数据类型：
  基本数据类型：String, number, boolean, undefine, null
  引用类型：对象, 内置对象
  类型转换：js内部自动转换
3. JS运算符和语句：
  运算符和Java一样
  “===”:值和类型都必须相等
  “==”:值相等就可以了
  语句和Java一样
4. JS的输出：
  alert()弹框
  document.write():向页面输出
  console.log():向控制台输出
  innerHTML:向页面输出
  获取页面元素:document.getElementById(“id的名称”)
5. JS声明变量：
  var 变量名 = 变量值
6. JS声明函数：
  function 函数名(){
  函数体
  }
7. JS开发步骤：
  1)确定事件
  2)通常事件都会触发一个函数
  3)函数里面通常都会去操作页面元素，做一些交互动作
JS DOM操作
这里的DOM与XML中的DOM不同，指页面的DOM元素。常见的操作有查询获取、增加、删除DOM节点等。如下所示，通过点击按钮，在div块中添加文本节点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作</title>
    <script>
        function dianwo() {
            var div = document.getElementById("div1");
            var p = document.createElement("p");
            var textNode = document.createTextNode("文本内容");
            //将p和文本内容关联起来
            p.appendChild(textNode);
            div.appendChild(p);
        }
    </script>
</head>
<body>
    <input type="button" value="点我，添加p" onclick="dianwo()"/>
    <div id="div1">
    </div>
</body>
</html>

JS常用的DOM操作主要有以下几部分：

二、JQuery

概念
JQuery是一个JavaScript的框架，简化JS开发。
- 封装了JS常用概念代码，提供一种简便的JS设计模式，优化HTML文档操作、事件处理、动画交互、Ajax交互。
- JS框架：本质上就是一些js文件，封装了js的原生代码而已

快速入门
步骤：

下载JQuery(目前有三个版本，1.x使用最广泛，2.x很少人使用，3.x只支持最新的浏览器)
导入JQuery的js文件
使用

JQuery对象和JS对象区别与转换
js->jquery ： $(js对象)
jquery->js ：jquery对象[索引] 或者 jquery对象.get(索引)

选择器：筛选具有相似特征的元素(标签)
基本语法学习：

事件绑定
入口函数
样式控制

分类：

基本选择器
层级选择器
属性选择器
过滤选择器
表单过滤选择器

# JS

支付宝

微信

(三)JS以及JQuery的学习总结

一、JavaScript

二、JQuery

喜欢这篇文章？打赏一下作者吧

评论

分类

标签云

最新文章

归档

标签

最新文章

归档

标签

Your browser is out-of-date!