JavaScript基础

最新推荐文章于 2023-11-14 21:44:44 发布
最新推荐文章于 2023-11-14 21:44:44 发布
阅读量200 收藏
点赞数
分类专栏： 前端 HTML JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cherishisan/article/details/114669159
版权
前端 同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
JavaScript
2 篇文章 0 订阅
订阅专栏
HTML
1 篇文章 0 订阅
订阅专栏

Javascript

变量：

什么是变量，变量是可以存储某些值的内存的命名。

JavaScript的变量类型：

数值类型number
字符船类型 String
对象类型 object
布尔类型Boolean
函数类型function

 

 

 

 

 

 

Javascript里特殊的值：

undefined 未定义，所有js变量未赋于初始值的时候就是undefined
null   空值
NAN全称是：Not a Number 非数字 非数值

 

 

 

 

Js中定义变量格式：

var 变量名；

var 变量名 =  值 ；

typeof() 函数查看当前变量是什么类型：

<script type:"text/javascript">
    var i ="12";
    alert(typeof(i))
</script>

关系运算符：

等于： == 等于是简单的做字面值比较

全等于： === 除了做变量的字面值比较之外，还会比较两个变量的数据类型

逻辑运算符：

&& 且运算

  1. 当表达式全为真true的时候返回最后一个表达式的值
  2. 当表达式中又一个为假false的时候返回第一个为假的值

|| 或运算

  1. 当表达式全为假false的时候返回最后一个表达式的值
  2. 当表达式中又一个为真true的时候返回第一个为假的值

数组：

var arr = [true,"javascript,3,null,undefined"]

arr[2] = "abc;

var arr[9];

arr.length 获取数组长度

JS中的数组只要我们通过数组索引下标赋值，那么做大的索引值，就会自动的给数组扩容操作。

for循环： 

for (var j = 0; j < 100; j++) {
    }

JavaScript函数**：

函数的两种定义方式

注意：JavaScript中函数不允许重载，一个html文件里面两个同名的function，最后写的会覆盖上一个写的。

第一种：可以用function关键字来定义函数

使用的格式如下：

function 函数名(形参列表) {
        函数体
    }

第二种：

var 函数名= function (形参列表) {
        函数体
    }

无参函数：

<script>
//第一种
    function fun1() {
        alert("无参函数JavaScript")
    }
//第二种
    var fun2 = function () {
        alert("无参函数JavaScript")
    }
    //输出
    fun1();
    fun2();
</script>

带参函数：

<script>
//第一种方式
    function fun(a,c) {
        alert("带参函数a="+a+"带参函数c="+c)
    }
    fun(12,"代餐函数")

//第二种方式
    var fun2 = function(a,b){
        alert("带参函数a="+a+"带参函数c="+c)
    }
    fun2(12,"代餐函数")
</script>

在JavaScript语言中如何定义带有返回值的函数？

只需要在函数体中直接return语句返回值即可。

带有返回值的参数：

<script>
//第一种方式
    function fun1(a,c) {
        var number = a+c;
        return number;
    }
//第二种方式
    var fun2 = function(a,c){
        var number = a+c;
        return number;
    }
    alert(fun2(100,200))
    alert(fun1(100,200))
    //打印输出300
</script>

获取参数，查看参数的个数：

<script>
    function sum(a,b) {
        alert("函数1"+arguments[0])
        alert("函数2"+arguments[1])
        alert(arguments.length)
    }
    sum(1,"abc");

</script>

JS中的自定义对象：

Object形式自定义对象：

对象的定义：

var 变量名 = new Object();    //对象实例

变量名.属性名 = 值；    //定义一个属性

变量名.函数名 = function(){ //定义一个函数

    函数体

}

案例：

<script type="text/javascript">
    var obj = new Object();
    obj.name = "华仔";
    obj.age = 18;
    obj.hua = function () {
        alert("姓名："+this.name+",年龄："+this.age);
    }
    alert("姓名："+obj.name); //姓名：华仔
    obj.hua(); //姓名：华仔,年龄：18
</script>

花括号{}定义对象：

对象的定义：

var 变量名 = {  //空对象

    属性名：值，  //定义一个属性

    属性名：值     //定义一个属性

    函数名：function（）{ //定义一个函数

        函数体

    }

}

对象访问：

变量名.属性 /  属性名()

案例：

<script type="text/javascript">
    var cai = {
        age: 18,
        name: "菜",
        fun: function () {
            alert("姓名：" + this.name + "，年龄：" + this.age)
        }

    }
    alert(cai.age);//弹出 年龄：18
    cai.fun();//弹出：姓名：菜，年龄：18
</script>

JS中的事件

什么是事件？

事件是电脑输入设备与页面进行的交互。

常用的事件：

onload 加载完成事件页面加载完成后，常用于做页面js代码初始化操作。
onclike单机事件常用于按钮的点击响应事件。
onblur失去焦点的事件 常用于输入框鼠标离开焦点，用于验证输入内容是否合法
onchange 内容发生改变事件常用于下拉列表和输入框内容发生改变后操作
onsubmit   表单提交事件常用于表单提交前，验证所有表单项是否合法

   

                 

     

 

 

 

事件注册又分为静态注册和动态注册：

什么是事件的注册（绑定）？

其实就是告诉浏览器，当前事件响应后要执行哪些操作代码，叫事件注册或事件绑定。

静态注册：

通过html标签的事件属性直接赋予事件响应后的代码，这种事情我们叫做静态注册。

onload事件

<script type="text/javascript">
        window.onload = function (){
            alert("动态事件")
        }
</script>


<!--<body onload="onlodfun()">-->

<body onload="alert('ollode静态事件')">
</body>

动态注册：

先通过js代码得到标签的dom对象，然后再通过dom对象.事件名= function(){}这种形式赋予事件响应后的代码，叫做动态注册。

动态注册基本步骤：

  1. 获取标签对象
  2. 标签对象.事件名 = function(){}
window.onload = function(){
    var name = document.getElementById("");
        name.事件名 = function(){

    }
}

onload事件：加载完成事件

<script type="text/javascript">

        window.onload = function (){
            alert("动态事件")
        }
</script>
</head>
    <body>

    </body>

onclick单机事件

<script type="text/javascript">
        // 静态事件
        function onclik() {
            alert("静态事件2")
        }

        //动态事件
        window.onload = function () {
            var element = document.getElementById("btn01");
            element.onclick = function () {
                alert("动态事件")
            }
        }
</script>

</head>
<body>
<button onclick="alert('静态事件1')">静态事件1</button>
<button onclick=onclik()>静态事件2</button>
<button id="btn01">动态事件</button>
</body>

onblur失去焦点事件：

    <script type="text/javascript">
        function onblurfun() {
            console.log("静态失去焦点")
        }

        window.onload = function () {
            var password = document.getElementById("password");
            password.onblur = function () {
                alert("动态失去焦点")
            }
        }
    </script>
</head>
<body>
账号：<input type="text" onblur="onblurfun()"/><br>
密码：<input type="text" id="password"><br>
</body>

onchange内容发生改变事件：

    <script type="text/javascript">
        function onchangefun(){
            alert("静态事件内容发生改变2")
        }

        window.onload = function () {
            var name = document.getElementById("name");
            name.onchange = function (name) {
             alert("动态事件内容发生改变"+name)
            }
        }
    </script>
</head>
<body>

<select onchange="alert('静态事件内容发生改变1')">
    <option>---请选择---</option>
</select>

<select onchange=onchangefun()>
    <option>---请选择---</option>
    <option>小明</option>
    <option>小红</option>
    <option>小白</option>
</select>

<select id="name">
    <option>---请选择---</option>
    <option>热巴</option>
    <option>娜扎</option>
    <option>丫丫</option>
</select>

onsubmit提交事件：

    <script type="text/javascript">
        function fun() {
            alert("静态表单提交")
            return false;//阻止表单提交
        }

        window.onload = function () {
            var form = document.getElementById("form01");
            form.onsubmit = function () {
                alert("动态标签提交")
                return false;//阻止表单提交
            }

        }
    </script>
</head>
<body>
<form onsubmit="return fun()" action="../../servlet/web/a/b/c.html">
    <input type="submit" name="静态表单提交">
</form>

<form onsubmit="return fun()" action="../../servlet/web/a/b/c.html" id="form01">
    <input type="submit" name="动态表单提交">
</form>
</body>

DOM对象

1.document.getElementById ( Id );

     根据标签的id属性查找标签的dom对象，参数id是标签的id属性值。

     innerHtml方法：表示起始标签和结束标签中的内容

2.document.getElementByName ( name ) ;

     根据标签的name属性查找标签的dom对象，参数name是标签的name属性值。

     checked方法：表示复选框中的值，true为选中，false为不选

3.document.getElementByTagName(tagname);

   根据标签名查找标签的dom对象，参数tagname是标签名称。

4.document.createElement(tagtext);

通过给定的标签名创建一个标签对象。tagtext是标签名

注意：document对象的三个查询方法，如果标签有id属性的话优先使用getElementById方法查询，如果没有id属性，则使用getElementByName方法查询，如果没有name属性，则使用标签名getElementByTagName方法查询。代码一定要在页面加载完成后才能查询到对象

document.getElementById()；根据id获取标签（id相同只获取第一个）

document.getElementById().innerHtml; 表示起始标签和结束标签中的内容

    <script type="text/javascript">
        function fun() {
            //1.当我们要操作一个标签的时候，一定要先取这个标签对象
            var usernameobj = document.getElementById("username");
            //2.获取标签输入框的值
            var value = usernameobj.value;
            var z = /^\w{5,12}$/;

            var error = document.getElementById("error");
            var success = document.getElementById("success");

            /**
             * test方法用于测试某个字符串是不是匹配我的规则
             * 匹配就返回true
             */
            if (z.test(value)) {
                //innerHTML表示起始标签和结束标签中的内容
                success.innerHTML = "输入名称合法：" + value
                error.innerHTML = ""
            } else {
                success.innerHTML = ""
                error.innerHTML = "输入名称不合法：" + value
            }
        }
    </script>
</head>
<body>
用户名：<input type="text" id="username">
<span id="error" style="color: red"></span>
<span id="success" style="color: chartreuse"></span>
<button onclick="fun()">校验</button>
</body>

document.getElementByName获取标签的name属性

document.getElementByName.checked复选框的状态 true是选中，false是不选，可读可写

<script type="text/javascript">
        function yes() {
            var byName = document.getElementsByName("happy");
            for (let i = 0; i < byName.length; i++) {
                byName[i].checked = true;
            }
        }
        function no() {
            var byName = document.getElementsByName("happy");
            for (let i = 0; i < byName.length; i++) {
                //checked复选框的状态，可读可写
                byName[i].checked = false;
            }
        }
        function noandyes(){
            var byName = document.getElementsByName("happy");
            for (let i = 0; i < byName.length; i++) {
                byName[i].checked = !byName[i].checked;
            }
        }

    </script>
</head>
<body>
<input type="checkbox" name="happy" value="java">java
<input type="checkbox" name="happy" value="php">php
<input type="checkbox" name="happy" value="JavaScript">JavaScript
<br>
<br>
<button onclick="yes()">全选</button>
<button onclick="no()">全不选</button>
<button onclick="noandyes()">反选</button>
</body>

document.getElementByTagName：通过标签名查找标签dom对象

    <script type="text/javascript">
        function yes() {
            var byName = document.getElementsByTagName("input");
            for (let i = 0; i < byName.length; i++) {
                byName[i].checked = true;
            }
        }
    </script>
</head>
<body>
<input type="checkbox" value="java">java
<input type="checkbox" value="php">php
<input type="checkbox" value="JavaScript">JavaScript
<br>
<br>
<button onclick="yes()">全选</button>
</body>

document.createElement(tagtext);

appendChild可以添加一个子节点

  <script type="text/javascript">
        window.onload = function () {
            var htmlDivElement = document.createElement("div");
            htmlDivElement.innerHTML = '我是createElement创建的标签内容'
            document.body.appendChild(htmlDivElement)
        }
    </script>
</head>
<body>
</body>

节点的常用属性和方法

节点就是html标签对象

方法

通过具体的元素节点调用

getElementByTagName();

方法，

appendChild（ochildNode）

方法，可以添加一个子节点，ochildNode是要添加的孩子节点

属性：

chidNodes

属性，获取当前节点的所有子节点

firstChild

属性，获取当前节点的第一个子节点

listchild

属性，获取当前节点的最后一个子节点

parendNode

属性，获取当前节点的父节点

nextSibling

属性，获取当前节点的下一个节点

previouSibling

属性，获取当前节点的上一个节点

className

用于获取或设置标签的Class对象

innerHTML

属性，获取标签起始到结束的内容

innerText

属性，获取标签其实到结束的文本

 

 

 

 

 

 

从一后
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsp servlet mysql实现的在线商城项目
myqq_79278590的博客
02-12 2448
运行环境 jdk：1.7 1.8 eclipse java ee mysql 代码已经上传github，下载地址：https://github.com/21503882/net-cosmetic <%@ page language="java" import="java.util.*" pageEncoding="UT...
第八次网页前端培训笔记（JS表单和Jquery Ajax）
weixin_64416967的博客
02-11 561
一.JS表单 表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该先在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。 1.获取表单 （1）document.getElementById（"ID属性值"）； 通过from标签的ID属性值获取表单对象 （2）document.表单的name属性值； 通过表单的name属性值获取表单对象 （3）document.forms[下标]； 通过指定下标获取表单元素 ...
JS修改对象属性名
weixin_45224906的博客
01-06 6932
JS修改对象属性名
通过document.getElementsByName来实现 复选框的全选，全部选，反选
进击30K的专栏
07-31 2193
Document   : test     Created on : Jul 30, 2015, 11:13:08 AM     Author     : root --%>                     Test                     .body{                 background-color: gr
js如何修改对象中的属性名
子玉的博客
11-14 2521
以上这些方法都可以用来修改对象中的属性名，开发者可以根据实际需求选择适合的方式进行操作。注意，修改属性名时需要先创建新属性或赋值给新的属性，然后再删除旧属性。
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
JavaScript 基础
02-16
主要为个人学习笔记 超详细
Document:getElementsByName()使用方法及示例
12-11
定义和用法 getElementsByName() 方法可返回带有指定名称的对象的集合。 语法document.getElementsByName(name) 该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。 另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。 实例 代码如下: <html> <head> [removed] function
js更改对象中属性名的方法
热门推荐
weixin_42333548的博客
05-27 1万+
数据格式如下： let arr = [ { "id": 275, "name": "测试公司", "userList": [ { "id": 697, "userName": "11111" } ] }, { "id": 327, "name": "有限公司"
js修改对象属性名
hongsir的博客
12-24 7245
代码 // 更改对象属性名 // 第一个参数为要更改的对象，第二个参数为属性名映射数组 // 如将属性名为 “日期” 更改为 "date" : [{ key: '日期', value: 'date' }] export function copyTransFunc (obj, typeArr) { let result; let toString = Object.prototype.toString; if (toString.call (obj) === '[object Arr
js——修改对象里面的属性名
努力、拼搏、奋进
08-16 693
js——修改对象里面的属性名
JavaScript对象属性名修改的方法
cunlv的博客
06-27 3018
JavaScript对象属性名修改的方法
js修改对象数组中的对象属性名
weixin_43290151的博客
05-24 3656
js修改对象数组中的对象属性名 将数组中所有id变为code，所有title变为name <script> const list = [{ id: 'a', title: 'A' }, { id: 'b', title: 'B', children: [{ id: 'c', title: 'C' }, { id: 'd', title: 'D' }] }] </scr
04、javascript 修改对象中原有的属性值、修改对象中原有属性的名字(两种方式)、添加对象中新属性等的操作
狮子座的男孩
09-08 4122
/ 想将obj中的flag值，根据不同的值来变化(即：修改对象中原有的属性值)；
js 从原来的对象取出需要的key组成一个新对象，并且更换变量名
momo_mom177的博客
05-10 899
使用到ES6的解构赋值，这个名字很形象，从对象中分解出来并赋值 const obj = { name: 'momo', age: 18 } const {name: name2, age} = obj // 相当于声明name2, 并且值为obj.name / 即为 const name2 = obj.name const obj2 = {name2, age} // 相当于const obj2 = {name2: name2, age:age}/ 因为ES6的key/value一样可以简写 其实
js获取下拉列表(select)选中项的值和文本
weixin_33725807的博客
06-03 852
//获取下拉列表选中项的文本 functiongetSelectedText(name){ varobj=document.getElementById(name); for(i=0;i<obj.length;i++){ if(obj[i].selected==true){ returnobj[i].innerText;//关...
javaScript基础
最新发布
07-04
以下是一些JavaScript的基础概念： 1. **变量**：在JavaScript中，不需要预先声明就可以使用变量。可以直接赋值给变量名。例如： ```javascript let name = "John Doe"; ``` 2. **数据类型**：主要有字符串...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值