JS基础和js高级

最新推荐文章于 2024-07-04 00:59:27 发布

qq_43499489

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量215

点赞数

分类专栏：笔记文章标签： javascript html html5

本文链接：https://blog.csdn.net/qq_43499489/article/details/120117120

版权

笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

html引入js的两种方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--方式一外部引入-->
    <script src="js/bootstrap.js"></script>
</head>
<body>
<!--方式二 内部引入,当前页面有效-->
<script>
    js代码
</script>
</body>
</html>

js的三种输出方式:

<script>
    alert("方式一弹窗");
    document.write("方式二:输出到页面");
    console.log("方式三:输出到控制台");
</script>

js的变量定义

  	//let 修饰变量 可以定义任意类型
    //const 修饰常量
  let i=1;
  const pi=3.14;

js常用数据类型:
String:字符串和字符型,单引号或者双引号括起来,
number:整型和浮点型;
boolean:布尔型
undefined:未定义
null:空
object:对象 new关键字来创建
js运算符

  let i=3;
  let s='3';
  if (i==s){ //会做隐式转换
      alert("true"); //结果为true
  }
  if(i===s){ //先判断类型如果类型不同直接返回false
      alert("true");
  }

js条件判断:
if(布尔值){
}
if语句除了支持布尔值还可以:
String:非空都是true;
number:非0都是true;
null:false
undefined:未定义为假
for循环:

<script>
    //增强for循环 快捷键iter
    let list=['德玛西亚之力','德玛西亚皇子','德邦总管','暗夜猎手'];
    for (let s of list) {
        console.log(s);
    }
    //普通for循环 快捷键 list.fori
    for (let i = 0; i < list.length; i++) {
        console.log(list[i]);
    }
    //索引for循环 快捷键forin
    for (let index in list) {
        console.log(index);
        console.log(list[index]);
    }
</script>

js函数:

    语法：
            function 函数名(参数列表){
                return 函数体;
            }
       特点：
            1）不需要指定返回值类型
            2）形参不需要指定修饰符
            3）如果有返回值直接加return
            4）没有方法重载，后加载会覆盖重名的函数
            5）函数语法不严谨，弱类型语言
            6）支持可变参数
            <script>
  function sum(a,b){
      return a+b;
  }
  function sum(a,b,c){
      return a+b+c;
  }
  function sum(...args){
      let sum=0;
      for (let i of args) {
          sum+=i;
      }
      return sum;
  }
  console.log(sum(1, 2,3,4));
</script>
  // 匿名函数
  function (){
      //方法体
  }

js常用事件:

onclick:单击事件
ondbclick:双击事件(触发之前会触发单击事件)
onblur:失去焦点
onload:页面加载时间
onchange: 表单控件的值改变触发的时间(:下拉框)
onsubmit:提交事件 提交表单时触发,会根据方法体内的布尔值决定提不提交数据,通常和正则表达式一起使用

js内置函数:
date: toLocaleString() 将date转成本地时间格式字符串
math: floor 向下取整
ceil:向上取整
全局函数:
字符串转数值，从第一个字符开始到非数值类型字符串结束
parseInt()
parseFloat()
对字符串编码和解码，现在几乎所有浏览器都具有自动编码和解码的能力
encodeURI() 编码
decodeURI() 解码

BOM对象: 把浏览器窗口封装成了一个bom对象
页面弹框:

	**windows对象**
   //警告框
  alert("第一种弹框");
  //确认框
  confirm('第二种弹框'); // 会返回一个布尔值
  //输入框
  prompt("请输入您的账号") //会返回用户输入在弹框中的值
  <button onclick="cleanint()" >关闭打印自然数</button>
<button onclick="cleanset()" >关闭打印时间</button>
<script>
    //两种定时器
    //1. 周期性定时器
    let sum=1
    let interval=setInterval(function (){ //每两秒输出一次sum
        console.log(sum);
        sum+=1;
    },1000);
    // 2.一次性定时器
    let settimeout=setTimeout(function (){
        console.log(new Date().toLocaleString());
    },4000)
    function cleanint(){
        clearInterval(interval);
    }
    function cleanset(){
        clearTimeout(settimeout);
    }
</script>
**location对象**
<button onclick="jump()">跳转地址</button>
<button onclick="jump1()">在新窗口跳转地址</button>
<script>
    console.log(location.href); //获取当前页面地址栏地址
    function jump(){
        location.href="https://www.baidu.com" //跳转到这个地址
    }
    function jump1(){
        window.open("https://www.baidu.com") //打开新窗口跳转页面
    }
</script>

DOM: 把页面所有的标签抽闲成了一个document对象(内存中是一颗dom树)

<form action="#" method="get">
    姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/>
    密码 <input type="password" name="password"> <br/>
    生日 <input type="date" name="birthday"><br/>
    性别
    <input type="radio" name="gender" value="male" class="radio">男&emsp;
    <input type="radio" name="gender" value="female" class="radio"/>女<br/>
    爱好
    <input type="checkbox" name="hobby" value="smoke">抽烟
    <input type="checkbox" name="hobby" value="drink">喝酒
    <input type="checkbox" name="hobby" value="perm">烫头<br/>
    头像 <input type="file" name="pic"><br/>
    学历
    <select name="edu">
        <option value="0">请选择</option>
        <option value="1">入门</option>
        <option value="2">精通</option>
        <option value="3">放弃</option>

    </select><br/>
    简介
    <textarea name="userIntro" cols="30" rows="10">默认值</textarea><br/>
    <input type="reset" value="清空按钮"/>
    <input type="submit" value="提交按钮"/><br/>

</form>

// 1.获取id="username"的标签对象
    // es5语法
    console.log(document.getElementById("username").value);
    // es6语法
    console.log(document.querySelector("#username").value);


    // 2.获取class="radio"的标签对象数组
    // es5语法
    console.log(document.getElementsByClassName("radio"));
    // es6语法
    console.log(document.querySelectorAll(".radio"));
    // 3.获取所有的option标签对象数组
    // es5语法
    console.log(document.getElementsByTagName("option"));
    // es6语法
    console.log(document.querySelectorAll("option"));

    // 4.获取name="hobby"的input标签对象数组
    // es5语法
    console.log(document.getElementsByName("hobby"));
    // es6语法
    console.log(document.querySelectorAll("input[name='hobby']"));
    // 5.获取文件上传选择框
    console.log(document.getElementsByName("pic"));
    console.log(document.querySelector("input[name='pic']"));

DOM操作内容
js对象.innertext; 支持普通文本
js对象.innerhtml; 支持超文本
js对象.outhtml; 可以改变标签
DOM操作属性:
js对象.setattribute(“属性名”,“属性值”); 设置属性名为属性值
js对象.removeattributr(“属性名”); 移除属性
js对象.getattribute(“属性名”); 获得属性名的属性值
DOM操作样式:
js对象.style.cssText=“css”;
js对象.className=“classs选择器名”
JSON对象:
简单语法
{name:value,name:value}
数组类型
let users=[
{name:value},
{name:value}
]
复杂类型
let person={
name:value,
array:[{name:value},{name:value}],
user:{name:value}
}
JSON格式转换
//1.JSON.stringify(object) 把json对象转为字符串
//2.JSON.parse(string) 把字符串转为json对象

qq_43499489

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础和js高级

html引入js的两种方式:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <script src="js/bootstrap.js"></script></head><body><!
复制链接

扫一扫