15、JS

最新推荐文章于 2024-05-17 13:52:13 发布

小僵123456

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量159

点赞数

分类专栏： Java 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45476535/article/details/128440847

版权

Java 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1、弹窗与控制台输出

alert("123456");//弹窗显示123456
console.log("123456");//控制台输出123456

2、变量声明

var a=1;
var b="qwer";
const var PI=3.14;//常量定义
'use strict':严格检查模式，放在script标签中的最前面，严格模式下你不能使用未声明的变量。
局部变量建议使用let替代var
所有全局变量都绑定在window下，包括alert也属于window下

3、值比较

== 类型不同，值相同为true

=== 类型不同，值也相同为false

NaN not a number

4、新建对象

var person = {name：‘小江’，
            age：18，
            //数组
            aihao：[‘抽烟’，‘喝酒’，‘烫头’]，
            //方法，调用方法时必须带()
            age：function(){
                console.log("18");
            }
}

//定义一个student类
class student{
    //构造函数
    constructor(name){
        this.name=name;
    }
    hellp(){
        alert("hello");
    }
}
//对象创建
var st=new student("小江");

class newstudent extends student{
    constructor(name，age){
        supper(name);
        this.age=age;
    }
    say(){
        alert("我是小学生");
    }
}
//对象创建
var st2=new student("小明",3);

var now = new Date();//now为当前时间，可以通过now获取当前时间的具体项

5、数组

1.数组长度可变

2.数组截取slice()，相当于string的substring()

3.数组排序sort()

4.数组反转reverse()

5.打印拼接数组，使用特定的字符串连接join(‘-’)

6.数组便利

var map=new Map([["tom",100],["jack",90]])
var set=new Set([1,2,3,4,1,2,3])//set会去重，实际只存入1234
//便利map
for(let x of map){
console.log(x);
}

6、函数

//函数定义方法1
function abs(x，y，...rest){
    if(typeof x!=='number'){
        throw 'not a number';//手动抛出异常，当传的参数不是数子时，返回'not a number'
    }
    
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);//arguments是包含方法传进来的所有参数的数组
    }
    
    console.log(rest);//rest获取除了已定义的参数以外的所有参数
    
    if(x>0)
        return x;
    else{
        return -x;
    }
}
//函数定义方法2
var abs=function (x){
    if(x>0)
        return x;
    else{
        return -x;
    }
}

//调用,js可以传任意个参数，也可以不传参数
abs(-10);//10

7、Json格式转换

<!--新建一个test.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //编写一个javascript对象
        var User={
            name:"小江",
            age:4,
            sex:"男"
        };
        console.log(User);//F12-控制台查看打印信息
        console.log("==========================================");
        //将js对象 转换成 json对象，str={"name":"小江","age":4,"sex":"男"}
        var str=JSON.stringify(User);
        console.log(str);
        console.log("==========================================");
        //将json对象 转换成 js对象，json={name:"小江",age:4,sex:"男"}
        var json=JSON.parse(str);
        console.log(json);
    </script>
</head>
<body>

</body>
</html>

8、操作POM对象

1.window：浏览器的窗口

2.navigator：封装了浏览器的信息

3.screen：封装了屏幕属性

4.location：代表当前页面的URL信息

//设置新的地址

location.assign(‘https://www.baidu.com/’)

5.document：当前页面，能获取网页的文档树节点、cookie

6.history：历史记录，上一个页面、下一个页面

9、操作DOM对象

1.获得Dom节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2 id="h44">qwer</h2>
<div id="d1">
<h1>asdad</h1>
<h2 class="h2">awqd</h2>
<h2 id="h33">poiu</h2>
</div>
<script>
  var h11=document.getElementsByTagName("h1");//通过标签获取节点
  var h22=document.getElementsByClassName("h22");//通过class获取节点
  var h33=document.getElementById("h33");//通过id获取节点
  var d11=document.getElementById("d1");//通过id获取节点
</script>
</body>
</html>

2.更新节点

h33.innerHTML='<strong>1231<strong>'//修改html文本
h33.innerText='234234'//修改文本
h33.style.color='red'//修改样式颜色

3.删除节点

var chs=d11.children;//获取子节点。获取具体的子节点则增加索引就行
d11.removeChild(h33)//通过父节点删除子节点

4、插入节点

d11.appendChild(h44);//将h44追加到d11的后面
var newP=document.createElement('p');//创建新的标签，可以再进行追加操作
newP.id='newP';
newP.innerText='我是新P';

10、jQuery

1.选择器

$('P').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//class选择器

2.AJAX

1、概念

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

2、简单使用

1.写jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
      <%--使用在线的CDN--%>
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
      function fun1(){
        $.post({
          url:"${pageContext.request.contextPath}/test",
          data:{'name':$("#username").val()},
          success:function (data,status){
            console.log("date="+data);
            console.log("status="+status);
          },
          error:function (data,status){
            console.log("data="+data);
            console.log("status="+status);
          }
        })
      }
      function a1(){
          $.post({
              url:"${pageContext.request.contextPath}/test3",
              data:{'username':$("#username2").val()},
              success:function (data){
                  $("#userInfo").html(data);
                  if (data.toString()==='OK'){
                      $("#userInfo").css("color","green");
                  }else {
                      $("#userInfo").css("color","red");
                  }
              }
          })
      }
      function a2(){
          $.post({
              url:"${pageContext.request.contextPath}/test3",
              data:{'password':$("#passowrd2").val()},
              success:function (data){
                  $("#pwdInfo").html(data);
                  if (data.toString()==='OK'){
                      $("#pwdInfo").css("color","green");
                  }else {
                      $("#pwdInfo").css("color","red");
                  }
              }
          })
      }

      $(function () {
          $("#btn").click(function () {
              $.post("${pageContext.request.contextPath}/test2",function (data) {
                  console.log(data)
                  var html="";
                  /*拼接jsp代码*/
                  for (var i = 0; i <data.length ; i++) {
                      html+= "<tr>" +
                          "<td>" + data[i].id + "</td>" +
                          "<td>" + data[i].name + "</td>" +
                          "<td>" + data[i].age + "</td>" +
                          "<td>" + data[i].sex + "</td>" +
                          "</tr>"
                  }
                  $("#content").html(html);
              });
          })
      })

    </script>
  </head>
  <body>

      用户名：<input type="text" id="username"/><br/>
      <input type="submit" value="提交" οnclick="fun1()"/><br/>
      <%--onblur：失去焦点事件--%>
      <br/>
      <br/>
      <br/>
      <input type="button" id="btn" value="获取数据"/>
      <br/>
      <br/>
      <table width="40%" align="left">
          <tr>
              <td>id</td>
              <td>姓名</td>
              <td>年龄</td>
              <td>性别</td>
          </tr>
          <tbody id="content">
          </tbody>
      </table>
      <br/>
      <br/>
      <br/>
  <p>
      用户名：<input type="text" id="username2" οnblur="a1()"/>
      <span id="userInfo"></span>
  </p>
  <p>
      <br/>
      密码：<input type="password" id="passowrd2" οnblur="a2()"/>
      <span id="pwdInfo"></span>
      <br/>
  </p>

  </body>
</html>

2.写pojo

package com.jiang.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
@Data()
@AllArgsConstructor
public class User {
    private int id;
    private String name;
    private int age;
    private String sex;
}

3.写TestController

package com.jiang.controller;
import com.jiang.pojo.User;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
@RestController
@RequestMapping(produces = "application/json;charset=utf-8")
public class TestController {
    @RequestMapping("test")
    public String test(String name){
        System.out.println(name);
        if(name.equals("adc")){
            return "9876";
        }
        else {
            return "1234";
        }
    }

    @RequestMapping("test2")
    public ArrayList<User> test2() {
        ArrayList<User> users = new ArrayList<>();
        User user = new User(1, "小江", 3, "男");
        User user2 = new User(2, "小江2", 3, "男");
        User user3 = new User(3, "小江3", 3, "男");
        users.add(user);
        users.add(user2);
        users.add(user3);
        return users;
    }
    @RequestMapping("test3")
    public String test3(String username,String password){
        System.out.println("username="+username+"  password="+password);
        String msg="";
        if(username!=null){
            if(username.equals("adc")){
                msg= "OK";
            }
            else {
                msg=  "用户有问题";
            }
        }
        if(password!=null){
            if(password.equals("adc")){
                msg= "OK";
            }
            else {
                msg=  "密码错误";
            }
        }
        System.out.println(msg);
        return msg;
    }
}

3、js字符串去重

 function quchongstr(str){

    var a = str.match(/\S+/g);//等价于str.split(/\s+/g)// \s空白符，\S非空白符

    a.sort();

    for(var i=a.length-1;i>0;i--){

      if(a[i]==a[i-1]){

        a.splice(i,1);

      }

    }

    return a.join(" ");

  }

  var str = quchongstr("a a b a b e");
  console.log(str);