JavaScript

JavaScript介绍 入门 引入变量 值类型 运算符

  • 页面内嵌 <script></script>
  • <script src="hollworld"></script>
  • 为符合 web标准(w3c标准中的一项)结构,样式,行为相分离,通常会采用外部引入
  • 比较运算符>大于 , < 小于, == 比较值是否相等 ,===全等, >= 大于等于, <=小于等于 ,!=不等于
    2.逻辑运算符 && , || ,!
 var a = 1 && 2;//1
    var b = 8 && NaN;//NaN
    var c = 1 && "";//""
    var e = 2 * 2 / 3 && null;//null
    var f = 0+0/0 && undefined;//undefined
    var j = false && 6;// false
    var g = "" && 8;// ""
    var t = false && 0;//两个假的进行比较返回第一个假的
    var u = 4*5/2 && 4*7 && 5%1 && 0-0;//0
    var i = 99*6.7/'' && 0+10 && 5*9 && 7-1/4%2//67.5
    var x = 2-1*10%1 && 452/5*66 && 220-89+66 && 5*9;//45 如果公式全部为真他会一个一个往后看并且返回最后一个
    console.log(a,b,c,e,f,j,g,t)
    console.log(u)
    console.log(i)
    console.log(x)
  • undefined null NaN “” 0 false 转化成布尔值=false;

  • 逻辑&&一假为假它返回的结果就是假

var num = 1 || 2;//1两个真则返回第一个
    console.log(num)//1
    var sum = 2 || 0;//一个真一个假则返回真
    console.log(sum)
    var err = 0 || 1 || false;//1 如果多个假一个真则返回真它只会寻找并返回真
    console.log(err)
    var you = "" || NaN || undefined;//如果所有的都是假则返回最后一个
    console.log(you)
  • || 它只会寻找并返回真的值
let wre = !"";//空字符串 = false !取反转化成 true
    console.log(wre)
    let uio = !!0;//0是false !转化成true !抓化成false
    console.log(uio)
    let ert = !undefined;
    console.log(ert)
  • !非就是取反的意思
  • 9*9乘法表
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       body{
           /*float: right;*/
           /*tex-align: center;*/
       }
       border {
           color: #ffff;
       }
   </style>
</head>
<body>
<script> document.write(`<table width="800px" height="500px"`)
//同时设置好table的宽高
for(var i = 1;i <= 9;i++){  //定义i = 1,总共9行

   document.write('<tr></tr>')

   //第二层for循环
   for (var j = 1; j <= i; j++) {
       //j根据i的值逐行增多,i多一行,每行的j就会多一个

       var r = Math.random() * 255;
       var g = Math.random() * 255;
       var b = Math.random() * 255;
       //因为我们设置的是随机的单元格的背景颜色,所以变量写在第二层循环中

       document.write(`<td style="background-color: rgb(${r} ,${g} , ${b})">${j}*${i}=${i*j}</td>`)
       //i代表的是每行,第一行就是1,第二行就是2
       //j代表的是每列,第一列就是1,第二列就是2,以此类推
       //为了符合九九乘法表的书写规律,第一列开头为1,第二列开头为2,所以把j的值放在前面

   }

   document.write('<br>')    //设置换行    不设置也可以,主要为了好看

}
document.write(`</table>`)
</script>

<script>
   document.write('<table style="border: 1px solid; "  >')
for (var a = 1; a <= 9; a++){
    document.write('<tr>')

    for(var b = 1; b<=a; b ++){
        var r = Math.random() * 255;
        var g = Math.random() * 255;
        var t = Math.random() * 255;
        document.write(`<td style=" background-color: rgb(${r} ,${g},${t}); width: 90px;height: 55px;">`)
        document.write(`${a} * ${b} = ${a*b}`)
        document.write('</td>')
    }
    document.write('</tr>')
   // document.write('<br>')

}
   document.write('</table>')
</script>
</body>
</html>

在这里插入图片描述

  • 输出三个自然数比大小
  var a = parseInt(window.prompt('input'))
    var b = parseInt(window.prompt('input'))
    var c = parseInt(window.prompt('input'))
    if(a > b) {
        if(a>c){
            document.write(a)
        }else{
            document.write(c)
        }
    }else{
        if(b>c){
            document.write(b)
        }else {
            document.write(c)
        }
    }
    var n = parseInt(window.prompt('input'))
    var mul = 1;
    for(var i = 1; i < n; i++){
        mul *= 2;
        document.write(i)
        document.write(n)
        document.write('<br/>')
    }
    document.write(mul)
  • 三运算符(也可以用三元运算代码更简)
var a = parseInt(window.prompt('input'))
        var b = parseInt(window.prompt('input'))
        var c = parseInt(window.prompt('input'))
       var n = a > b ? a : b;
       var n = b > c ? b : c
       var n = a > c ? a : c
       document.write(n)
  • 斐波那契额数列 1 1 2 3 5 8输出第n项
 var n = parseInt(window.prompt('input'))
        if(n>2){
        var first = 1;
        var second = 1;
        var third;
        for(var i = 0; i < n - 2; i++){
            third = first + second;
            first = second;
            second = third;
        }
        document.write(third)
        } else {
            document.write(1)
        }
  • typeof 判断数据类型
var sum = 1;
        console.log(typeof(sum))
        var sum = true;
        console.log(typeof(sum))
        var sum = 'true'
        console.log(typeof(sum))
        var sum = null;
        console.log(typeof(sum))
        var sum = undefined;
        console.log(typeof(sum))
        var sum = toString(8);
        console.log(typeof(sum))
        var sum = ' '
        console.log(typeof(sum))
        var sum = Number;
        console.log(typeof(sum))
        var sum = object = {name : "后裔", age: 25};
        console.log(typeof(sum))
        var sum = function(){}
        console.log(typeof(sum))
        var sum = []//{}
        console.log(typeof(sum))
        var num =  "1" - "1";//0
        console.log(typeof(num)+':'+num)
        var num = Number('abc')//NAN
        console.log(typeof(num)+':'+num)
        var num = Number(true)//1
        console.log(typeof(num)+':'+num)
        var num = Number(false)//0
        console.log(typeof(num)+':'+num)
        var num = Number('-123')//-123
        console.log(typeof(num)+':'+num)
        var num = Number(object)//NAN
        console.log(typeof(num)+':'+num)
        var num = NaN//unmber NAN
        console.log(typeof(num)+':'+num)
        //Number把数值转化成数值类型 undefind NaN 
        // parseFloat parseInt 它转化侧重点在于只转化数字数值 对于其他类型如NAN null undefind Bloean转不了的!它直转number类型
        // 123456789a 10进制 把这个 10当成16进制的 以目标进制为基底转化成10进制
        var yuo = "10"
        var demo = parseInt(yuo,16)//进制满10进制转成16
        console.log(typeof(demo)+':'+ demo)
        var demo = parseInt(20,16)//20 转 32
        console.log(typeof(demo)+':'+ demo)
        var yuo = '10101010'//170
        var demo = parseInt(yuo,2)
        console.log(typeof(demo)+':'+ demo)
        var demi = 10
        var num = demi.toString(8);//string 12
        console.log(typeof(num)+':'+num)
        var d = new Date()//
        console.log(d.toString())
        var d = new Date()//当前时间
        var m = Object.prototype.toString;
        console.log(m.apply(d))
        var a = 123;
            a += ""
            console.log(typeof(a)+':'+a)
        var num = 10000;
        var demo = parseInt(num,2)
        console.log(demo.toString(16))
        var a = -10 + "+206"
        console.log(a)//-10+206、
        console.log(typeof(a))//string
        console.log(typeof(undefined))//undefind
        console.log(typeof(null))//object
        console.log(typeof(NaN))//number
        console.log(typeof(+a))//number
        console.log(typeof(!!a))//boolean
        console.log(typeof(a+""))//string
        console.log(typeof(1=='1'))//boolean
        console.log(typeof(NaN == NaN))//boolean
        var num = 123.456789//保留几位有效数组子三位
        console.log(num.toFixed(3))
  • 函数
//命名函数表达式
         var test = function abc(){//这个函数我们调用的就是 test test=name函数名就是abc
             document.write('A')
         }
         //匿名函数表达式 什么叫匿名函数没有名
        var demo = function(){
             document.write('b')
         }
        function test(a,b){//函数传参 形参
             var c = a + b;
             document.write(c)
            if(a<b){
                document.write(a+b)
            }else if(a>b){
                document.write(a-b)
            }else {
                document.write(-1)
            }
        }
        test(3,3)//实参
        function sum(a,b){//虽然形参传入了一个形参但是形参是以占位符的形式出现的
            // console.log(arguments)// arguments [1,2,3]被称实参列表 
            // for(var a = 0; a < arguments.length; a++){
            //     console.log(arguments[a])
            // }
            // if(sum.length > arguments.length){
            //     console.log(sum.length)
            // }else{
            //     console.log(arguments[a])
            // }else{
                // console.log('相等')
            // }
            // sum.length > arguments.length ? console.log("形参比实参多") : console.log("实参比形参多")
        }
        sum(1,2,3)//实参传入值 由 形参 接收

        function rem() {
            var v = 0;
            for(var i = 0; i < arguments.length; i++){
                 v += arguments[i]
            }
            console.log(v)
        }
        rem(1,2,3,4,5,6,7,8,9,10)//求我们传入所有实参的和

        function rum(a,b){
            a = 2;
            arguments[0] = 3;
            console.log(a)
        }
        rum(1,2)
        
        function suk(a,b) {//两个形参
            a = 2;
            console.log(arguments[1])//undefinde
        }
        suk(1)//只给一个形参传值了
       function apl(a,b){
        console.log('a')
        return;//终止函数  返回值
       }
       apl(1)
       function myNumber(target) {
        console.log(typeof(target)+':'+target)
        return + target
       }
       var num = myNumber('123')
  • 函数 定义一个函数输入数字输出汉字并倒叙
 function reverse() {
        var num = window.prompt('input')
        var str = " "
        for(var a = num.length -1; a >= 0 ; a--){
            str += tranfer(num[a])
        }
        document.write(str)
    }
    reverse()
    function tranfer(target) {
        switch(target) {
            case "1":
                return '一'
            case '2':
                return '二'
            case '3':
                return '三'
        }
    }

DOM树

在这里插入图片描述

  • 文档 一个页面就是一个文档,DOM使用document表示
  • 元素 页面中所有的标签元素 DOM使用 element表示
  • 节点 页面所有的内容都是节点 (标签 属性 文本 注释),DOM中使用node表示

获取元素

在这里插入图片描述
getElementById

<div id="time">2021-12-21</div>
<script>
    let time = document.getElementById('time')
    console.log(time,(typeof time))
    console.dir(time)//dir更好的查看打印元素属性方法
    //因为我么文档页面上往下加载所以先得有标签我们script标签里
    //get获取 element 元素 by通过驼峰命名
    //参数 id写大小敏感字符
    //返回一个对象
</script>

getElementsByTagName

<ul>
    <li>111111</li>
    <li>222222</li>
    <li>33333</li>
</ul>
<ol id="ol">
    <li>444</li>
    <li>555</li>
</ol>
<script>
    //返回获取过来元素数组过来集伪类数组展示
    let li = document.getElementsByTagName('li')
    console.log(li)
    //我们一次要打印里面的值可以循
    for(var a = 0; a < li.length; a++){
        console.log(li[a])
    }
    // 如果页面 只有一个li返回值是伪类数组形式
    // 如果野蛮没有是伪类空数组展示
    // 如果页面有相同的元素我们可以获取他的父元素id再获取他的子元素
    var ol = document.getElementById('ol')
    console.log(ol.getElementsByTagName('li'))

querySelectorAll,querSelector

<div id="nav">
    <ul>
        <li>使用</li>
        <li>文件</li>
    </ul>
</div>
<script>
    //getElementsByCalssName 相应的类名获取某些元素的集合
    var box = document.getElementsByClassName('box')
    console.log(box)
    //querSelector 返回选择器的第一个对象
    var firstBox = document.querySelector('.box')
    console.log(firstBox)
    var nav = document.querySelector('#nav');
    console.log(nav)
    var li = document.querySelector('li');
    console.log(li)
    //querySelectorAll()根据指定选择器返回所有元素对象集合
    var allBox = document.querySelectorAll('.box')
    console.log(allBox)
</script>

获取body元素 documnet.body返回body元素对象
获取html元素 document.documentElement html元素对象

事件

鼠标事件

<div id="btn">淘宝</div>
<script>
    //事件 事件源 事件类型 事件处理程序
    var btn = document.getElementById('btn')
    console.log(btn)
    btn.onclick = function (){//触发类型 点击 按键 经过
        alert('双十一')
    }
</script>

element.innerText
起始位置到终止的内容去除html标签空格换行也会去掉
element.innerHTML
其实位置到终止位置全部内容包括html标签同事保留空格换行

<div>显示当前某个时间</div>
<button>当前系统某个时间</button>
<p>时间</p>
<script>
    let div = document.querySelector('div')
    let btn = document.querySelector('button')
    btn.onclick = function (){
        div.innerText = getDate()
    }
    function getDate(){
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth();
        var dates = date.getDate();
        var arr = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
        var day = date.getDay();
        return '今天'+year+'年'+month+'月'+dates+'日'+arr[day]
    }
    let p = document.querySelector('p')
       p.innerText = getDate()
</script>
<div></div>
<p>66 <span>77</span></p>
<script>
    // innerText innerHTML 区别
    var div = document.querySelector('div')
    // div.innerText = '今天是2021'
    div.innerHTML = '<strong>今天是</strong> 2021'
    var p = document.querySelector('p')
    console.log(p.innerText)//解析文本里面的内容
    console.log(p.innerHTML)//带标签不解析文本
</script>

修改操作元素

<div>
    <button id="kt">凯特布兰切特</button>
    <button id="an">安妮海瑟薇</button>
    <button id="yw">伊娃格林</button>
</div>
<img src="https://img2.baidu.com/it/u=1811949860,3641665211&fm=26&fmt=auto" alt="">
<script>
    //修改元素属性 src 获取元素
    let kt = document.getElementById('kt')
    let an = document.getElementById('an')
    let yw = document.getElementById('yw')
    let img = document.querySelector('img')
    //注册事件
    kt.onclick = function (){
        img.src = "https://img2.baidu.com/it/u=1619969351,3511718928&fm=26&fmt=auto"
    }
    an.onclick = function (){
        img.src = "https://img1.baidu.com/it/u=4042709117,3754705943&fm=26&fmt=auto"
    }
    yw.onclick = function () {
        img.src = "https://img1.baidu.com/it/u=3360264188,4292189945&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=414"
    }
</script>

数组常用方法


<body>
<ul>
    <li>111111</li>
    <li>222222</li>
    <li>33333</li>
</ul>
<ol id="ol">
    <li>444</li>
    <li>555</li>
</ol>
<script>
    //返回获取过来元素数组过来集伪类数组展示
    let li = document.getElementsByTagName('li')
    console.log(li)
    //我们一次要打印里面的值可以循
    for(var a = 0; a < li.length; a++){
        console.log(li[a])
    }
    // 如果页面 只有一个li返回值是伪类数组形式
    // 如果野蛮没有是伪类空数组展示
    // 如果页面有相同的元素我们可以获取他的父元素id再获取他的子元素
    var ol = document.getElementById('ol')
    console.log(ol.getElementsByTagName('li'))
</script>
</body>
<body>
<div class="box">9595</div>
<div class="box">9595</div>
<div id="nav">
    <ul>
        <li>使用</li>
        <li>文件</li>
    </ul>
</div>
<script>
    //getElementsByCalssName 相应的类名获取某些元素的集合
    var box = document.getElementsByClassName('box')
    console.log(box)
    //querSelector 返回选择器的第一个对象
    var firstBox = document.querySelector('.box')
    console.log(firstBox)
    var nav = document.querySelector('#nav');
    console.log(nav)
    var li = document.querySelector('li');
    console.log(li)
    //querySelectorAll()根据指定选择器返回所有元素对象集合
    var allBox = document.querySelectorAll('.box')
    console.log(allBox)
</script>

操作DOM修改元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            width: 600px;
            margin-top: 25px;
            border-radius: 20px;
        }
    </style>
</head>
<body>
<div>
    <button id="kt">凯特布兰切特</button>
    <button id="an">安妮海瑟薇</button>
    <button id="yw">伊娃格林</button>
</div>
<img src="https://img2.baidu.com/it/u=1811949860,3641665211&fm=26&fmt=auto" alt="">
<script>
    //修改元素属性 src 获取元素
    let kt = document.getElementById('kt')
    let an = document.getElementById('an')
    let yw = document.getElementById('yw')
    let img = document.querySelector('img')
    //注册事件
    kt.onclick = function (){
        img.src = "https://img2.baidu.com/it/u=1619969351,3511718928&fm=26&fmt=auto"
    }
    an.onclick = function (){
        img.src = "https://img2.baidu.com/it/u=2429383491,4136383524&fm=26&fmt=autohttps://img2.baidu.com/it/u=2429383491,4136383524&fm=26&fmt=auto"
    }
    yw.onclick = function () {
        img.src = "https://img1.baidu.com/it/u=3360264188,4292189945&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=414"
    }
</script>
</body>
</html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 150px;
            height: 150px;
            background: darkgreen;
        }
    </style>
</head>
<body>
<div></div>
<script>
    let div = document.querySelector('div');
    div.onclick = function (){
        div.style.borderRadius = '50%'
        div.style.background = 'pink'
        div.style.width = '200px'
        div.style.height = '200px'
    }
</script>

时间问候

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="https://img0.baidu.com/it/u=2955350178,4202428116&fm=26&fmt=auto" alt="">
<div>上午好</div>
<script>
    //根据不同时间判断需要日期内置对象
    //利用多分枝语句设置不同图片
    //需要一个图片根据事件修改图片就需要操作src属性
    //需要div元素显示不同问候语修改内容
    //获取元素
    var img = document.querySelector('img')
    var div = document.querySelector('div')
    console.log(div)
    //得到当前小时
    var date = new Date();
    var h = date.getHours(); //判断小时改变图片文字信息
    if(h < 12){
        img.src = 'https://img2.baidu.com/it/u=1283716067,1916870584&fm=26&fmt=auto',
            div.innerHTML = '上午好'
    }else if (h < 18) {
        img.src = 'https://img0.baidu.com/it/u=1907628143,2813441581&fm=26&fmt=auto',
            div.innerHTML = '下午好'
    }else{
        img.src = 'https://img2.baidu.com/it/u=3396897001,3671101336&fm=26&fmt=auto',
            div.innerHTML = '晚上好'
    }
</script>
</body>
</html>

密码,passwrod/text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .box {
          width: 400px;
          border-bottom: 1px solid #ccc;
          margin: 100px auto;
          position: relative;
      }
      .box input{
          width: 100%;
          height: 100%;
          border: 0;
          outline: none;
      }
      .box img {
          position: absolute;
          right: 10px;
          width: 20px;
      }
    </style>
</head>
<body>
<div class="box">
    <label for=""><img id="img" src="https://img0.baidu.com/it/u=4097897365,1318361188&fm=26&fmt=auto" alt=""></label><input id="ipt" type="text" />
</div>
<script>
    //用id获取元素
    let img = document.getElementById('img')
    let ipt = document.getElementById('ipt')
    let flag = 0;
    img.onclick = function (){
        if(flag == 0){
            img.src = 'https://img0.baidu.com/it/u=4097897365,1318361188&fm=26&fmt=auto',
                ipt.type = 'text',
             flag = 1
        }else{
                img.src = 'https://img2.baidu.com/it/u=510130347,1871419243&fm=26&fmt=auto',
                ipt.type = 'password',
             flag = 0
        }
    }
</script>
</body>
</html>
<div id="btn">淘宝</div>
<script>
    //事件 事件源 事件类型 事件处理程序
    let btn = document.getElementById('btn')
    btn.onclick = function (){
        alert('11:11')
    }
</script>

循环精灵图

//获取所有元素的li
var lis = document.querSelecotrAll('li');
for(let i = 0; i < i.length; i++){
	let index = i*44;//让索引号 * 44 l每个li背景y坐标 index我们y轴 x轴横y轴竖它的y轴每个距离间距乘以下标距离就行了
	lis[i].style.backgroundPosition = '0 -' + index + 'px'
}

获取焦点onfocus,失去焦点onblur

<body>
<input type="text" placeholder="获取焦点,失去焦点">
<script>
    //获取元素
    let text = document.querySelector('input');
    //注册事件
    text.onfocus = function () {//onfocus 点击获取事件
        console.log('获取焦点')
        if(this.value ==='事件'){//this指向当前函数本身value='值'我们输入 ‘事件’
            this.value = ' '//就让他等于空
            this.style.color = '#eee'
        }
    }
    text.onblur = function () {//onblur 鼠标点击事件移除失去焦点
        console.log('失去焦点')
        if(this.value === ' '){//如果我们什么都没哟输入就让他等于还是事件二字
            this.value = '事件'//让他的value='事件'二字
            this.style.color = '#eee'
        }
    }
</script>

className修改样式

 <style>
        div {
            width: 100px;
            height: 100px;
            background: aliceblue;
            color: darkgreen;
        }
            .change {
                width: 200px;
                height: 200px;
                background: darkcyan;
                color: red;
                margin-top: 40px;
            }
    </style>
</head>
<body>
<div class="first">儒圣</div>
<script>
    let xyjc = document.querySelector('div');
    xyjc.onclick = function () {
        this.className = 'change'//可以通过classNamr进行类名覆盖 调用style样式dom元素发生变化
        this.className = 'change first'//可以保留兼容两个类名
    }
</script>

密码框验证信息

//获取元素
var ipt document.querSelecotr('.ipt')//input框
var message document.querSelecotr('.message')//改变输入框的值
//注册事件
ipt.onblur = function(){//当我们鼠标事件移除会触发
	if(this.value.length > 6 || this.ipt.length < 16){//我们判断一下如果这个输入框的input的值输入少于6个字符 或者 超出6个字符
		message.className = 'meesage wrong'//还是原来标签换了一个新样式
		message.innerHTML = '请输入6~16位以内的字符'//不能超出或少
	} else {
		message.className = 'meesage right'//还是原来标签换了一个新样式
		message.innerHTML = '符合输入正确'//输入正确
}
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值