JavaScript&JQuery

JavaScript

语言类型

  • 脚本语言
  • 解释性语言，边运行边解释
  • 弱类型

标签

  • Script

  • type --- 可写可不写，声明标准和解析模式

注释

  • 单行注释 //
  • 多行注释 /**/

显示

  • document.write(xxx); 显示在页面上
  • alert(xxx); 显示在弹窗(警告框)中
  • prompt("xxx"); 显示在提示框(弹窗)中，并且获得输入值
  • confirm("xxx"); 显示提示框，给予两个选择，获得选择值
  • console.log(xxx); 控制台(F12 console)输出

数据类型

  • var
//用var类型预先不用知道变量的类型；根据你给变量赋值来判定变量属于什么类型
var name = "张三";
var age = 18;
var money = 18.1;
var sex = null;
var choice = false;
var address = undefined;
  • string (小写)
  • number (整型，浮点)
  • boolean
  • object
  • null
  • undefined (未定义类型)
//string
alert(typeof(name));
//number
alert(typeof(age));
//number
alert(typeof(money));
//object
alert(typeof(sex));
//boolean
alert(typeof(choice));
//undefined
alert(typeof(address));

类型转换

  • Number.pareseInt (xxx) 转换整型类型
//显示  123
var num = "123abc";
//显示  1
var num = "1a2b3c";
//显示  NaN(即 not a number)
var num = "abc123";
//总结：Number.pareseInt(xxx) 能将值转换成整型类型，但是只能转换从首位开始到第一个非数字之前的所有数字
document.write(Number.parseInt(num));
  • Number.pareseFloat (xxx) 转换浮点类型
//显示  1.23
var num = "1.23abc";

//显示  1.23
var num = "1.23.4abc";

//显示  1.1
var num = "1.1a2.2b3.3c";

//显示  NaN
var num = "abc1.23";

document.write(Number.pareseFloat(num));

//总结：Number.pareseFloat(xxx) 能将值转换成浮点类型，但是只能转换第一个小数点或不带小数点的开始到第一个非数字(第二个小数点)之前的所有数字
  • Number(xxx) 转换数字类型
//显示  NaN
var num = "1.234abc";

//显示  NaN
var num = "1.23.4abc";

//显示  NaN
var num = "1.1a2.2b3.3c";

//显示  NaN
var num = "abc1.23";

//显示  NaN
var num = "123abc";

//显示  NaN
var num = "1.23abc";

//显示  NaN
var num = "1a2b3c";

//显示  NaN
var num = "1.1a2.2b3.3c";

//显示  NaN
var num = "abc123";

//显示  NaN
var num = "1.1a2.2b3.3c";

//显示  NaN
var num = "true";

//显示  1
var num = true;

//显示  NaN
var num = "false";

//显示  0
var num = false;

//显示  123
var num = "123";

//显示  1.23
var num = "1.23";

//显示  NaN
var num = "1.23.4";

document.write(Number(num));

//总结: Number（)能将值转化成Number类型，但是仅限于正确的数字或者true/false（boolean类型的)
  • Boolean(xxx) 转换布尔类型
//显示  true
var bl = "1.234abc";

//显示  true
var bl = "1234abc";

//显示  true
var bl = "123";

//显示  true
var bl = "abc";

//显示  true
var bl = "0";

//显示  false
var bl = 0;

//显示  true
var bl = "null";

//显示  false
var bl = null;

//显示  true
var bl = "false";

//显示  false
var bl = false;

document.write(Boolean(bl));

//总结:除了0，null，false 其余全为true

本地对象

数组

定义

  • 根据数组的构造方法创建对象
  • 不需要定长
  • 长度可以自动增加
var arr = new Array();
var arr = ["a","b","c"];

添加

  • 直接添加
  • 根据方法添加
var arr = new Array();
//首部添加,只能添加一个
arr.unshift(10);
//首部删除,有返回值(返回被删除的值)
arr.shift();
//尾部添加
arr.push(12,5,6,31,7);
//尾部删除,有返回值(返回被删除的值)
arr.pop();

时间

var date = new Date();
//获取年份
document.write(date.getFullYear());
//获取月份(0~11)
document.write(date.getMonth());
//获得日期(1~31)
document.write(date.getDate());
//获得星期(0~6)
document.write(date.getDay());
//获得小时(0~23)
document.write(date.getHours());
//获得分钟(0~59)
document.write(date.getMinutes());
//获得秒数(0~59)
document.write(date.getSeconds());
//获得从1970年
document.write(date.getTime());

JSON

  • JSON 易于理解
  • JSON 是一种轻量级的数据交换格式
  • JSON ---- JavaScript Object Notation JavaScript对象表示法
  • JSON是独立的语言 ---- JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本文本可以被任何编程语言读取及作为数据格式传递
var json1 = {"name":"张三","sex":"男","age":18};
//添加对应信息
json1.id = 101;
//输出对应信息
alert(json1.name + json1.age);

var json2 = [{"name":"张三","sex":"男","age":18},{"name":"李四","sex":"女","age":20}];
//输出对应信息
alert(json2[0].name + json2[0].age);

分支语句

if - else

  • 与java中一致

switch - case

  • 与java中一致

循环语句

for

  • 与java中一致

while

  • 与java中一致

for - in

  • 类似于foreach循环
  • 将 java foreach 中的 : 换成了 in
for(xx in yy){
  循环体;
}

函数

普通函数

  • function 关键字

函数传参

  • function f(xxx,yyy,zzz,....){ ... }
//数据类型var 可以省略不写 输入的值是什么类型，参数就为什么类型
function f1(id,name){
  alert(id + name);
}

f1(1,"张三");

带返回值

  • function f(...){ ... return xxx; }
function f2(){
  if(age > 12){
    return ">";
  }else{
    return "<";
  }
}

alert( f2(15) );

匿名函数

  • var xxx = function(...){...}
  • 匿名函数可以有效的保证在页面上写入Javascript，而不会造成全局变量的污染。
var f3 = function(){
  alert("123");
}

f3();

var f4 = function f3(){
  alert("123");
}

f4();

事件

  • 通过HTML中按钮、输入框的各种属性进行对应的操作

单击事件

  • onclick

双击事件

  • ondbclick

失焦事件

  • onblur

聚焦事件

  • onfocus

按键抬起事件

  • onkeyup

按键按下事件

  • onkeydown

光标悬停事件

  • onmouseover

光标移开事件

  • onmouseout

数值改变事件

  • onchange

节点

通过id获取节点

  • document.getElementById
姓名：

获取到标签的id后可以进一步获取标签的值、样式、属性等等，进而可以通过赋值等形式改变标签的值、属性、样式等内容

获取div标签文本

  • 获取文本 ---- innerText
  • 获取文本和标签 ---- innerHTML

  
Hello

类似 input 标签的单标签使用 id 获取内容直接使用 .value；类似 div 标签的双标签使用 id 获取内容使用 innerText 只获取标签内的文本内容，使用 innerHTML 获取标签中的所有内容包括其中的 HTML语句。

更改div属性内容

以下为几种常用的使用id获取节点后更改div的属性

更改颜色
  • 通过 style 属性调取 backgroundColor 改变颜色

将上面代码改进一下，随机更换颜色
更改文本
  • innerText 显示文本
  • innerHTML 显示被HTML编译后的文本
更改字体
  • 通过 style 属性调取 fontFamily 改变字体
你好

获取下拉列表值

  • 直接获取
  • 获取 option 中指定的值

option 中未定义value属性时默认为返回其中的文本内容 ，定义了 value属性后返回value值

控制节点全选反选

全选

  • 按钮方式实现
  • 复选框方式实现







全选:

反选

模型

  • BOM ---- 浏览器对象模型(browser object model) ---- window
  • DOM ---- 文档对象模型(document object model) ---- document

浏览器对象模型

  • 常用对象
    • window --- BOM中核心
    • history --- 历史记录
    • location --- 跳转页面
    • screen --- 获取屏幕信息
    • navigator --- 获取浏览器信息
    • document --- 文档对象
  • 常用方法
    • alert --- 警告框
    • confirm --- 确认信息弹框（Y/N）
    • prompt --- 输入信息弹框 (可以输入信息)
    • open --- 打开
    • close --- 关闭
  • 常用事件
    • onclick --- 单击事件
    • onkeydown --- 键盘按下事件
    • ......
//前进
window.history.forward();
window.history.go(1);  //正整数前进，负数后退
//回退
window.history.back();
window.history.go(-1);
//跳转地址	
window.location.href = "xxx.html";

//打开页面,有返回值（boolean）
var opening = window.open("xxx.html");
//关闭页面
opening.close("xxx.html");
//关闭浏览器
window.close();

文档对象模型

  • DOM --- 文档对象模型(document object model)
  • 获取文档中标签及其属性

获取节点

    
  
  • 张三
    • 
  
  • 李四
    • 
  
  • 王五
    • 
  
  • 人六
    •

创建节点

删除节点

    
  
  • 张三
    • 
  
  • 李四
    • 
  
  • 王五
    • 
  
  • 人六
    •

复选框状态

计时器

  • setTimeout --- 执行一次
  • setInterval --- 循环执行

通过计时器制作简单的定时追加列表

    
  
  • a
    •

通过计时器制作简单的变色效果


  
    
    
    
  
  
    
    
      
  • 零
    • 
      
  • 壹
    • 
      
  • 贰
    • 
      
  • 叁
    • 
      
  • 肆
    • 
      
  • 伍
    • 
      
  • 陆
    • 
      
  • 柒
    • 
      
  • 捌
    • 
      
  • 玖
    •

jQuery

简介

  • jQuery 是一个 JavaScript 库
  • jQuery 极大地简化了 JavaScript 编程

选择器

ID选择器

  • $("#xxx")

类名选择器

  • $(".xxx")

标签选择器

  • $("xxx")

https://www.runoob.com/jquery/html-val.html
  • text() https://www.runoob.com/jquery/html-text.html
  • html() https://www.runoob.com/jquery/html-html.html

    • 如果就想用标签选择器选择第二个 input Button 怎么做呢

    通过过滤选择器的辅助可以取到下面的 input Button 框，也可以分开取出两个Button按钮中的值

    赋值

    • 对 单标签 赋值 --- .val("xxx")
    • 对 双标签 赋值 --- .text("xxx")

    注意，如果是打开页面就赋值，不能写在ready函数内

    如果有多个相同标签，单独使用标签选择器赋值则会全部赋值、重写(html()方法)

    如果使用过滤选择器则可以实现赋值不同内容

    删值

    • empty() ---- 保存当前标签，删除该标签下的内容，对属性无效（value）
    • remove() ---- 将标签及其内容全部删除

    全局加载

    • ready() 函数规定当 ready 事件发生时执行的代码
    • ready() 函数仅能用于当前文档，因此无需选择器
    • ready() 函数不应与 body onload="" 一起使用。
    • 当 DOM（文档对象模型) 已经加载，并且页面(包括图像)已经完全呈现时，会发生 ready 事件

    ready是jQuery的文档就绪函数，它用于防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败,使用此加载可以防止一些JQuery代码失效问题

    单机方法

    Hello Word

    属性设置

    attr()

    • 返回属性值使用时 --- 返回第一个匹配元素的值
    • 设置属性值使用时 --- 匹配元素设置一个或多个属性/值对

    prop()

    • 返回属性值使用时 --- 返回第一个匹配元素的值
    • 设置属性值使用时 --- 匹配元素设置一个或多个属性/值对

    比较 attr/prop

    • 复选框差异 attr --- prop : (checked/undefined) --- (true/false)
    • attr可以取得自定义和本身已经定义好的属性
    • prop只能取已经定义好的，自定义属性undefined

    按钮不可用
    JavaWeb

    相关

    Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）

    java web后台开发SSM框架（Spring+SpringMVC+MyBaitis）搭建与优化：->

    java web后台开发SSM框架（Spring+SpringMVC+MyBaitis）搭建与优化：->

    nginx高性能配置的几个重要参数(java web应用)

    java web面试技巧,数据库面试,java web轻量级开发面试教程

    java web方面的面试问题，Spring MVC方面的面试问题，摘自java web轻量级开发面试教程

    Java web轻量级开发面试教程读书笔记：数据库方面，如何准备面试

    Java Web 常用Maven 依赖

    java web tag文件使用

    java webp图片转jpg

    Window server 2016 搭建Java Web环境

    Java Web项目如何做到升级不断掉服务，同时涉及到的相关问题

    标签