JavaScript----JS(简化的Java语言,含Dom，JSON)

最新推荐文章于 2021-07-22 16:34:33 发布

.墨迹.

最新推荐文章于 2021-07-22 16:34:33 发布

阅读量638

点赞数 1

分类专栏： JavaSE Java 文章标签： javascript js dom jquery css

本文链接：https://blog.csdn.net/y18791050779/article/details/104811667

版权

Java 同时被 2 个专栏收录

82 篇文章 0 订阅

订阅专栏

JavaSE

32 篇文章 0 订阅

订阅专栏

JS相关内容

1.初识JS

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。
JavaScript的标准是ECMAScript 。

1.1第一个JS代码

<script src="js/y.js"></script>
<script type="text/javascript">
</script>
<!--放在头部或身体都可以，注意type语句不要使用自闭和标签-->
<--y.js里面只写了一句  alert("hello")-->

在这里插入图片描述

1.2 JS基本语法

<!--JavaScript严格区分大小写！-->
<script>
    // 1. 定义变量    变量类型  变量名  = 变量值;
    var num = 1;
    alert(num);
</script>

在这里插入图片描述

1.3 JS定义对象

var person = {
    name: "yang",
    age: 3,
    tags: ['js','java','web','...']
}

在这里插入图片描述

1.4 JS严格检查模式

<!--
前提：IEDA 需要设置支持ES6语法
'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行！
局部变量建议都使用 let 去定义~
-->
<script>
    'use strict';
    // 全局变量
    let i = 1;
    // ES6   let
</script>

2.再续前缘

2.1 JS定义函数

var abs = function(x){
    console.log("x=>"+x);
    for (var i = 0; i<arguments.length;i++){
        console.log(arguments[i]);
    }
    if (arguments.length==2){
    } else if(arguments.length==3){
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

在这里插入图片描述

2.2 JS变量

const PI = '3.14'; //只读变量
console.log(PI);   //大写代表的是常量

2.3 JS方法

<script>

    function getAge() {
        var now = new Date().getFullYear();
        return now-this.birth;//必须有this指向，否则会报错
    }
    var yang = {
        name: '杨凯波',
        birth: 1999,
        age: getAge
    }
    getAge().apply(yang,[]);
</script>

在这里插入图片描述

2.4 JSON

<script>
    var Student = {
        name: "yangkaibo",
        age: 3,
        run: function () {
            console.log(this.name + " run....");
        }
    };
    var xiaoming = {
        name: "xiaoming"
    };
    //原型对象
    xiaoming.__proto__ = Student;
    var Bird = {
        fly: function () {
            console.log(this.name + " fly....");
        }
    };
    // 小明的原型 是 Student
    xiaoming.__proto__ = Bird;
</script>
<!--可以指定要指定的原型-->

 xiaoming.__proto__ = Student;

2.5 JS 文件

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
    var dl = document.getElementById('app');
</script>

在这里插入图片描述

3 深入探究

3.1获得DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
</body>
<script>
    //对应 css 选择器
    function fun(){
        var h1 = document.getElementsByTagName('h1');
        var p1 = document.getElementById('p1');
        var p2 = document.getElementsByClassName('p2');
        var father = document.getElementById('father');

        var childrens = father.children; //获取父节点下的所有子节点
        // father.firstChild
        // father.lastChild
    }
    fun()
</script>
</html>

在这里插入图片描述

3.2 更改DOM节点

<div id="id1"></div>

<script>
    var id1 = document.getElementById('id1');
    id1.innerText = 'abc'
</script>

在这里插入图片描述

3.3 添加DOM节点


<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>

    var ee = document.getElementById('ee');
    var js = document.getElementById('js');
    var list = document.getElementById('list');

</script>

在这里插入图片描述

3.4 操作表单

<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username" required>
    </p>
     <p>
         <span>性别：</span>
         <input type="radio" name="sex" value="man" id="boy">男
         <input type="radio" name="sex" value="women" id="girl">女
     </p>

    <input type="submit" value="查询">
</form>
<script>
    var input_text = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');

    // 得到输入框的值
    input_text.value
    // 修改输入框的值
    input_text.value = '123'


    // 对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked; true;//查看返回的结果，是否为true，如果为true，则被选中~
    girl_radio.checked = true; //赋值

</script>

在这里插入图片描述

3.5 提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<!--
表单绑定提交事件
onsubmit= 绑定一个提交检测的函数， true， false
将这个结果返回给表单，使用 onsubmit 接收！
onsubmit="return aaa()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>

    <p>
        <button type="submit">提交</button>
        <span>密码：</span> <input type="password" id="input-password">
    </p>

    <input type="hidden" id="md5-password" name="password">
    <!--绑定事件 onclick 被点击-->
</form>


<script>
    function aaa() {
        alert(1);
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');
        // pwd.value = md5(pwd.value);
        md5pwd.value = md5(pwd.value);
        // 可以校验判断表单内容，true就是通过提交，false，阻止提交
        return true;
    }
</script>
</body>
</html>

3.6 操作Dom元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    //document.getElementById('')

    $('#test-ul li[name=python]').css("color","red")


</script>

</body>
</html>

3.7 jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>

<script>

    //选择器就是css的选则器
    $('#test-jquery').click(function () {
        alert('hello,jQuery');
    })

</script>

</body>
</html>

3.8 事件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.4.1.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<!--要求：获取鼠标当前的一个坐标-->
mouse ：<span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>

<script>
    //当网页元素加载完毕之后，响应事件
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
        })
    });
</script>


</body>
</html>

3.9选择器

//jQuery  css 中的选择器它全部都能用！
$('p').click(); //标签选择器
$('#id1').click(); //id选择器
$('.class1').click() //class选择器

.墨迹.

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript----JS(简化的Java语言,含Dom，JSON)

JS相关内容1.初识JSJavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。JavaScript的标...
复制链接

扫一扫