JavaScript

JS入门到精通完整版 JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。它是作为开发Web页面的脚本语言而出名,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。..................... 阅读详情

1、JavaScript介绍

1.1 介绍:

JavaScript语言诞生主要是完成页面的数据验证。因此它的运行在客户端,需要运行浏览器来解析执行JavaScript代码。

JS是弱类型,Java是强类型。

弱类型就是类型可变;强类型就是定义变量的时候,类型已确定,不可变。

1.2 特点:

① 交互性(它可以做的就是信息的动态交互)
② 安全性(不允许直接访问本地硬盘)
③ 跨平台性(只要是可以解释JS的浏览器都可以执行,和平台无关)



2、JavaScript和HTML代码的结合方式

2.1 第一种方式(只能在当前页面使用)

只需要再head标签中,或者再body标签中,使用script标签来书写JavaScript代码。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // alert是JavaScript语言提供的一个警告函数
        //  它可以接受任意类型的参数,这个参数就是警告框的提示信息
        alert("hello JavaScript!")

    </script>
</head>

2.2 第二种方式(可以被标签引入,类似调用)

使用script标签引入单独的JavaScript代码文件。

js文件代码如下:

alert("1125 hello");

html代码如下:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入js文件来执行,scr属性专门引入js文件路径-->
    <script type="text/javascript" src="02-hello2.js"></script>
</head>

注:script标签可以用来定义js代码,也可以用来引入js文件,单两个功能二选一使用。


补充注意(href和src的区别):

1.请求资源类型不同

① href是Hypertext Reference的缩写,表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a。
② 在请求 src 资源时会将其指向的资源下载并应用到文档中,常用的有script、img 、iframe;

2.作用结果不同
(1)href 用于在当前文档和引用资源之间确立联系;
(2)src 用于替换当前内容;

3.浏览器解析方式不同

(1)若在文档中添加href ,浏览器会识别该文档为 CSS 文件,就会并行下载资源并且不会停止对当前文档的处理。
(2)当浏览器解析到src ,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等也如此,类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。



3、JavaScript语言中的变量

3.1 JavaScript的变量类型

数值类型:		number		int、long...
字符串类型:	string
对象类型:		object
布尔类型:		boolean
函数类型:		function

3.2 JavaScript里特殊的值

undefined		未定义,所有js变量为赋于初始值的时候,默认都是undefined
null			空值
NAN				全称是:Not a Number。非数字、非数值。

3.3 JavaScript中定义变量格式(弱类型,可变)

var 变量名;
var 变量名 = 值;

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

        var a=12;
        var b="adc";
        
        alert(a*b);

    </script>

3.3 关系(比较)运算 - - - 返回boolean类型数据

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

全等于:   ===              除了做字面值的比较外,还比较两个变量的数据类型。

	<script type="text/javascript">
        var c=21;
        var d="21";
        alert(c==d);    //true
        alert(c===d);   //false
    </script>	

3.4 逻辑运算 - - - 返回boolean类型数据

且运算: &&

两种情况:
① 当表达式全为真的时候,返回最后一个表达式的值
② 当表达式中,有一个为假的时候,返回第一个为假的表达式的值

或运算: ||

两种情况:
① 当表达式全为假的时候,返回最后一个表达式的值
② 只要有一个表达式为真,就返回第一个为真的表达式的值。

取反运算:!


注意:

① &&与运算、||或运算有短路,就是当有结果之后,后面的表达式不再执行。

② 在JavaScript语言中,所有的变量,都可以作为一个boolean类型的变量去使用。

0、null、undefined、“”(空串)、NAN都认为是false。

	<script type="text/javascript">
      
        var a="abc"; //true
        var b=true; //true
        var c="";//false
        var d=null;//false

        /*alert(a&&b);
        alert(b&&a)
        alert(c&&d);
        alert(d&&c);*/

        alert(a||b);
        alert(c||d);
        alert(c||a);

    </script>


4、数组(重点)

JS中数组的定义:

格式:
var 数组名=[];				//空数组
var 数组名=[1,'abc',true];	//定义数组同时赋值元素

=注意==:javaScript语言中的数组,只要通过数组下标赋值,最大的下标值,就会自动给数组做扩容。 - - -读操作不会自动扩容。

	<script type="text/javascript">
        var arr=[];
        //alert(arr.length);

        //javaScript语言中的数组,只要通过数组下标赋值,最大的下标值,就会自动给数组做扩容
        arr[2]=12;
        alert(arr.length);

        alert(arr[16]);
        alert(arr.length)

        for (var i=0;i<arr.length;i++){
            alert(arr[i]);
        }
    </script>

5、函数(重点)

5.1 函数的两种定义方式

1) 可以使用function关键字来定义函数。

function 函数名(形参列表){
	函数体
}
    <script type="text/javascript">
        //定义一个无参函数
        function fun(){
            alert("gg");
        }
        //函数调用,才执行
        fun();

        function fun2(a,b){
            alert(a);
            alert(b);
            return fun();
        }
        fun2("abc",12);
    </script>

2)方式二:

var 函数名 =function(形参列表) {函数体}
    <script type="text/javascript">
        var fun=function (a,b){
            return alert(a+b)
        }
        fun(12,11);
    </script>

注意:

① 形参不用写类型,只需要提供形参名。

② 带有返回值的函数,只需要在函数体内直接使用return语句返回值即可。

③ JS中函数不允许重载,如果定义一个和之前一样函数名的函数,那么之前的函数就会被覆盖。


5.2 函数的arguments隐形参数(只在function函数内)

在function函数中不需要定义,但却可以直接用来获取所有参数的变量,叫做隐形参数。 - - -类似java中的可变长参数。

    <script type="text/javascript">
        function fun(){
            alert(arguments.length); //查看参数个数
            alert(arguments[0]);
            alert(arguments[1]);
            alert(arguments[2]);

            for(var i=0;i<arguments.length;i++){
                alert(arguments[i]);
            }
            alert("无参数函数fun()");
        }

        fun(1,"das")
    </script>

注意:在JS中数字和字符串相加用Java一样也是字符串。

 	<script type="text/javascript">
        // 需求:要求编写一个函数,用于计算所有参数相加的和并返回
        function sum(num1,num2){
            var result=0;
            for(var i=0;i<arguments.length;i++){
                result += arguments[i];
            }
            return result;
        }
        alert(sum(1,2,3,4,5,6,7,8,9)); //45
        alert(sum(1,2,3,4,5,"abc",7,8,9));//15abc789
       
    </script>


6、JS中的自定义对象(扩展内容)

6.1 Object形式的自定义对象

对象的定义:
	var 对象名 = new Object();					//对象实例(空对象)

	对象名.属性名 = 值;							//定义一个属性

	对象名.函数名 = function() {函数体}; 		//定义一个函数

对象的访问:
	对象名.属性/函数名();
    <script type="text/javascript">
        var obj=new Object();
        obj.arr=[0,1,2];
        obj.name="李四";
        obj.fun=function (){
            alert(obj.arr[0]);
            alert(obj.name);
        }
        obj.fun();
    </script>

6.2 {}花括号形式的自定义对象

定义对象:
	var 对象名 ={};		//空对象

定义属性和函数:
	① 方式一:定义变量和函数同Object一样
	对象名.属性名 = 值;							//定义一个属性
	对象名.函数名 = function() {函数体}; 		//定义一个函数
	
	② 方式二:不同的定义方式
	var 对象名 ={
		属性名:值,							//定义一个属性之间逗号分隔
		属性名:值,								//定义一个属性
		函数名:function(){函数体}				//定义一个函数与属性也是逗号分隔
	};

对象的访问:
	对象名.属性/函数名();
    <script type="text/javascript">
        //方式一:定义变量和函数同Object一样
        var obj={};
        alert(typeof (obj));
        obj.name="啊这";
        obj.fun=function (){
            alert(obj.name);
        }
        obj.fun();

        //方式二:
        var obj2={
            name:"gg",
            age:18,
            fun2:function (){
                alert("good")
                alert(this.age);
            }
        };
        alert(obj2.name);
        obj2.fun2();
    </script>


7、JS中的事件

7.1 事件的介绍以及常用的事件

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

2)常用的事件:

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

7.2 事件的注册(静态注册和动态注册)

1)什么是事件的注册(绑定):

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

2)事件的注册方式:

① 静态注册事件:

通过html标签的事件属性直接赋予事件响应后的代码,这种方式叫静态注册。

② 动态注册事件:

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

动态注册基本步骤:
	① 获取标签对象
	② 标签对象.事件名=function(){}

3)常用事件的演示:

① onload 加载完成事件

注意:
window.οnlοad=function (),当window加载完成时会触发onload事件,也就触发了“匿名函数”,执行函数体内的语句。

静态注册事件代码如下:

可以直接再body中写,<body οnlοad=“alert(‘静态注册onload事件,所有代码’)”>,但是要写很多就会很长,故可以封装进函数中,再调用。

<head>
	<script type="text/javascript">
        //onload事件的函数
        function onloadFun(){
            alert('静态注册onload事件,所有代码');
        }
     </script>
</head>     

<body onload="onloadFun()">	//静态注册事件
</body>

动态注册事件代码如下:

onload事件动态注册,是固定写法,window.οnlοad=function (){}

    <script type="text/javascript">
        //onload事件动态注册,是固定写法
        window.onload=function (){
            alert('动态注册onload事件,所有代码');
        }
    </script>
</head>

<body>			//动态注册事件

</body>

② onclick 点击事件 - - -常用于按钮

静态注册事件代码如下:

同onload一样

<head>
	<script type="text/javascript">
        //onclick事件的函数
        function onclickFun(){
            alert("静态注册onclick事件");
        }
     </script>
</head>     

<body>	
	<!--静态注册onclick事件-->
    <button onclick="onclickFun()">按钮1</button>
</body>

动态注册事件代码如下:

先获取标签对象(id/name…),再通过标签对象.事件名=function(){} 完成动态注册。

	 /*动态注册onclick事件*/
    window.onload=function (){
        //1、获取标签对象
        /*
        * document是JavaScript语言提供的一个对象(当前整个页面)
        * get       获取
        * Element   元素(就是标签)
        * By        通过...
        * Id        id属性
        *
        * getElementById通过id属性获取标签对象
        * */
        var btnobj = document.getElementById("btn01");
        //alert(btnobj);
        //2、通过标签对象.事件名=function(){}
        btnobj.onclick=function (){
            alert("动态注册onclick事件");
        }
    }
	<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*动态注册onclick事件*/
        window.onload=function (){
            //1、获取标签对象
            /*
            * document是JavaScript语言提供的一个对象(当前整个页面)
            * get       获取
            * Element   元素(就是标签)
            * By        通过...
            * Id        id属性
            *
            * getElementById通过id属性获取标签对象
            * */
            var btnobj = document.getElementById("btn01");
            //alert(btnobj);
            //2、通过标签对象.事件名=function(){}
            btnobj.onclick=function (){
                alert("动态注册onclick事件");
            }
        }
    </script>
</head>
<body>
    <button id="btn01">按钮2</button>
</body>
</html>

③ onblur 失去焦点事件 - - -常用于输入框失去焦点

静态注册事件代码如下:

同onload、onlick一样

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册失去焦点事件
        function onblurFun(){
            // console是控制台对象,由JavaScript语言提供,专门
            //  用来向浏览器的控制器打印输出,用于测试使用,log()打印的方法
            console.log("静态注册失去焦点事件");
        }
    </script>
</head>
<body>
    用户名:<input type="text" onblur="onblurFun()"><br/>
</body>
</html>

动态注册事件代码如下:

同onclick一样

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
       //动态注册onblur事件
        window.onload=function (){
            //1、获取标签对象
            var passwordobj=document.getElementById("password");
            //2、通过标签对象.事件名=function(){}
            passwordobj.onblur=function (){
                console.log("动态注册失去焦点事件");
            }
        }
    </script>
</head>
<body>
    密码:<input type="text" id="password"><br/>
</body>
</html>

④ onchange 失去焦点事件 - - -常用于下拉列表或输入框

静态注册事件代码如下:

同onload、onlick、onblur一样

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun(){
            alert("女神已经改变了");
        }
    </script>
</head>
<body>
        请选择你心中的女神:
        <!--静态注册onchange事件-->
        <select onchange="onchangeFun()">
            <option>---女神---</option>
            <option>芳芳</option>
            <option>佳佳</option>
            <option>呲呲</option>
        </select>
</body>

动态注册事件代码如下:

同onclick、onblur一样

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
	 	//动态
        window.onload=function (){
            //1、获取标签对象
            var selobj=document.getElementById("sel01");
            //2、通过标签对象.事件名=function(){}
            selobj.onchange=function (){
                alert("男神已经改变了")
            }
        }
    </script>
</head>
<body>
        请选择你心中的男神:
        <!--动态注册onchange事件-->
        <select id="sel01">
            <option>---男神---</option>
            <option>你肖哥</option>
            <option>啊哈</option>
            <option>呲呲</option>
        </select>
</body>

⑤ onsubmit 表单提交事件 - - -常用于表单

当有不合法时,return false可以阻止表单提交

静态注册事件代码如下:

同onload、onlick、onblur、onchange一样

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态
        function onsubmitFun(){
            //要验证所有表单项是否合法,如果有一个不合法,就进行阻止
            alert("静态提交事件,发现不合法");

            return false;
        }
    </script>
</head>
<body>
        <!--return false 可以阻止表单提交-->
        <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
            <input type="submit" value="静态注册"/>

        </form>
</body>

动态注册事件代码如下:

同onclick、onblur、onchange一样

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //动态
        window.onload=function (){
            //1、获取标签对象
            var formobj=document.getElementById("form01");
            //2、通过标签对象.事件名=function(){}
            formobj.onsubmit=function (){
                alert("动态提交事件,发现不合法")

                return false;
            }
        }
    </script>


</head>
<body>
        <form action="http://localhost:8080" id="form01">
            <input type="submit" value="动态注册"/>
        </form>
</body>


8、DOM模型 - - -重点

8.1 DOM介绍

DOM全称是Document Object Model文档对象模型。

即:把文档(htnl页面)中的标签、属性、文本,转换成对象来管理。

8.2 Document对象(重点)

在这里插入图片描述
对Document对象的理解:

1)Document它管理了所有的HTML文档内容。

2)Document它是一种树结构的文档,有层级关系。

3)使得所有标签都对象化。

4)可以通过document访问所有的标签对象。

HTML标签如何对象化:(类似树的结点)

例如:要如何对象化
	<body>
		<div id="div01">div01</div>
	</body>

class Dom{
	private String id;			//id属性
	private String tagName;		//表示标签名
	private Dom parentNode;		//父亲
	private List<Dom> children;	//孩子结点
	private String innerHTML;	//起始标签和结束标签中间的内容
}

注意:Document对象的方法:
在这里插入图片描述

1) getElementById方法的应用

需求:当用户点击了校验按钮,要获取输入框中的内容。然后验证其是否合法,验证的规则是,必须由字母、数字、下划线组成,并且长度是5-12位。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    
        function onclickFun(){  //静态绑定button
            //1、当操作标签的时候,要先获取这个标签的对象
            var userNameobj=document.getElementById("userName");

            //[object HTMLInputElement]为dom对象
            alert(userNameobj.value); //获取的是可变的值(输入后的值)
            var usernameText=userNameobj.value;
            //如何验证字符串,符合某个规则,需要使用正则表达式
            var patt=/^\w{5,12}$/;  //是个对象

            /*
            * test()方法用于测试某个字符串,是不是匹配规则
            *   匹配返回true
            * */
            if (patt.test(usernameText)){
                alert("用户名合法!");
            }else {
                alert("用户名不合法!");
            }
        }

    </script>
</head>
<body>
        用户名:<input type="text" id="userName" value=""/>
        <button onclick="onclickFun()">校验</button>
</body>

补充知识:(正则表达式对象)

两种创建方式:

例如:表示要求字符串中,是否包含字母e

①:
RegExp的对象就是正则表达式,

var patt=new RegExp("e");

②

var patt =/e/;  也是正则表达式对象

改进后代码如下:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        /*需求:当用户点击了校验按钮,要获取输入框中的内容。
        *   然后验证其是否合法,验证的规则是,必须由字母、数字
        *   下划线组成,并且长度是5-12位
        * */
        function onclickFun(){  //静态绑定button
            //1、当操作标签的时候,要先获取这个标签的对象
            var userNameobj=document.getElementById("userName");

            //[object HTMLInputElement]为dom对象
            //alert(userNameobj.value); //获取的是可变的值(输入后的值)
            var usernameText=userNameobj.value;
            //如何验证字符串,符合某个规则,需要使用正则表达式
            var patt=/^\w{5,12}$/;  //是个对象

            /*
            * test()方法用于测试某个字符串,是不是匹配规则
            *   匹配返回true
            * */

            var usernameSpanobj = document.getElementById('usernameSpan');

            if (patt.test(usernameText)){
                //innerHTML表示起始标签和结束之间内容,可读、可写
                //  可写则是赋值就修改其值
                //usernameSpanobj.innerHTML="用户名合法!";
                usernameSpanobj.innerHTML="<img src=\"right.png\" width=\"16\" height=\"16\">";
            }else {
                usernameSpanobj.innerHTML="<img src=\"wrong.png\" width=\"16\" height=\"16\">";
            }
        }

    </script>
</head>
<body>
        用户名:<input type="text" id="userName" value=""/>
        <span id="usernameSpan" style="color: red;">

        </span>
        <button onclick="onclickFun()">校验</button>
</body>

2) getElementsByName方法的应用

需求:实现一个全选、全不选、反选三种功能的选择框。

① document.getElementsByName(),根据指定name属性返回多个标签对象集合,这个集合操作和数组一样,集合中每个元素都是dom对象。

② input标签在类型为type="checkbox"条件下,**checked=“checked”**表示默认选中。- - -获取到此属性checked表示复选框的选中状态,选中是true,可读、可写。

代码如下:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        function checkAll() {
            //让所有复选框都选中
            // document.getElementsByName()
            // 根据指定name属性返回多个标签对象集合,这个集合操作和数组一样
            // 集合中每个元素都是dom对象
            var hobbies=document.getElementsByName("hobby");
            // checked表示复选框的选中状态,选中是true,可读、可写
            for (var i=0;i<hobbies.length;i++){
                hobbies[i].checked=true;
            }

        }

        function checkNo(){
            var hobbies=document.getElementsByName("hobby");
            // checked表示复选框的选中状态,选中是true,可读、可写
            for (var i=0;i<hobbies.length;i++){
                hobbies[i].checked=false;
            }
        }

        function checkReverse() {
            var hobbies=document.getElementsByName("hobby");
            // checked表示复选框的选中状态,选中是true,可读、可写
            for (var i=0;i<hobbies.length;i++){
                hobbies[i].checked ^=true;
            }
        }
    </script>
</head>
<body>
        兴趣爱好:
        <input type="checkbox" name="hobby" value="cpp" >C++
        <input type="checkbox" name="hobby" value="Java" >Java
        <input type="checkbox" name="hobby" value="js" >JavaScript
        <br/>
        <button onclick="checkAll()">全选</button>
        <button onclick="checkNo()">全不选</button>
        <button onclick="checkReverse()">反选</button>
</body>

3) getElementsTagName方法的应用

需求:实现一个全选功能

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        function checkAll() {
            //让所有复选框都选中
            // document.getElementsByTagName()
            // 根据指定标签名返回多个标签对象集合,这个集合操作和数组一样
            // 集合中每个元素都是dom对象
            var inputs=document.getElementsByTagName("input");
            // checked表示复选框的选中状态,选中是true,可读、可写
            for (var i=0;i<inputs.length;i++){
                inputs[i].checked=true;
            }

        }
    </script>
</head>
<body>
        兴趣爱好:
        <input type="checkbox" value="cpp" >C++
        <input type="checkbox" value="Java" >Java
        <input type="checkbox" value="js" >JavaScript
        <br/>
        <button onclick="checkAll()">全选</button>
</body>

注意:(document三个查询方法的使用顺序)

① 如果由id属性,优先使用getElementById方法来进行查询;如果没有id属性,则优先使用getElementByName方法。

② 以上三个方法,一定要在页面加载完成之后执行,才能查询到标签对象。- - - 这也是onload事件动态绑定是固定写法的原因。


8.3 结点的常用属性和方法

结点就是标签对象

1)方法:

通过具体的元素结点调用getElementsByTagName()方法,获取当前结点的指定标签名孩子结点。

appendChild(oChildNode)方法,可以添加一个子结点,oChildNode是要添加的孩子结点。

演示代码如下:

方式一:使用到创建文本结点
方式二:直接添加内容元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        window.onload=function (){//执行后,表示页面加载完成

            //现在需要我们使用js代码来创建html标签,并显示在页面上
            // 标签的内容就是:<div>Good</div>
            var divobj=document.createElement("div");//在内存中<div></div>

            //方式一: 解释了文本也是个结点
            //创建文本结点对象,因为在div中,故要赋成div子结点
            var textNodeobj=document.createTextNode("Good");
            divobj.appendChild(textNodeobj); //<div>Good</div>

            //方式二:直接加入内容
            //divobj.innerHTML="Good"; //<div>Good</div>,但只是在内存中

            document.body.appendChild(divobj);
        };
    </script>
</head>
<body>

</body>

2)属性:

在这里插入图片描述

<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
	window.onload = function(){
		//1.查找#bj节点  按钮的1动态绑定
		document.getElementById("btn01").onclick=function (){
			var bjobj =document.getElementById("bj");
			alert(bjobj.innerHTML);
		}
		//2.查找所有li节点
		var btn02Ele = document.getElementById("btn02");
		btn02Ele.onclick = function(){
			var lis =document.getElementsByTagName("li");
			alert(lis.length);
		};
		//3.查找name=gender的所有节点
		var btn03Ele = document.getElementById("btn03");
		btn03Ele.onclick = function(){
			var genders =document.getElementsByName("gender");
			alert(genders.length)
		};
		//4.查找#city下所有li节点
		var btn04Ele = document.getElementById("btn04");
		btn04Ele.onclick = function(){
			//1、获取id为city的结点
			//2、通过city结点.getElementByTagName按标签名查子结点
			var lis=document.getElementById("city").getElementsByTagName("li")
			alert(lis.length);
		};
		//5.返回#city的所有子节点
		var btn05Ele = document.getElementById("btn05");
		btn05Ele.onclick = function(){
			//1、获取id为city的结点
			//2、通过city结点获取所有子结点
			alert(document.getElementById("city").childNodes.length);
		};
		//6.返回#phone的第一个子节点
		var btn06Ele = document.getElementById("btn06");
		btn06Ele.onclick = function(){
			alert(document.getElementById("phone").firstChild.innerHTML);
		};
		//7.返回#bj的父节点
		var btn07Ele = document.getElementById("btn07");
		btn07Ele.onclick = function(){
			alert(document.getElementById("bj").parentNode.innerHTML);
		};
		//8.返回#android的前一个兄弟节点
		var btn08Ele = document.getElementById("btn08");
		btn08Ele.onclick = function(){
			alert(document.getElementById("android").previousSibling.innerHTML);
		};
		//9.读取#username的value属性值
		var btn09Ele = document.getElementById("btn09");
		btn09Ele.onclick = function(){
			alert(document.getElementById("username").value);
		};
		//10.设置#username的value属性值
		var btn10Ele = document.getElementById("btn10");
		btn10Ele.onclick = function(){
			document.getElementById("username").value="aaaaaa"
		};
		//11.返回#bj的文本值
		var btn11Ele = document.getElementById("btn11");
		btn11Ele.onclick = function(){
			//alert(document.getElementById("bj").innerHTML);
			alert(document.getElementById("bj").innerText);

		};
	};
</script>
</head>
<body>
<div id="total">
	<div class="inner">
		<p>
			你喜欢哪个城市?
		</p>

		<ul id="city">
			<li id="bj">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>

		<br>
		<br>

		<p>
			你喜欢哪款单机游戏?
		</p>

		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>

		<br />
		<br />

		<p>
			你手机的操作系统是?
		</p>

		<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
	</div>

	<div class="inner">
		gender:
		<input type="radio" name="gender" value="male"/>
		Male
		<input type="radio" name="gender" value="female"/>
		Female
		<br>
		<br>
		name:
		<input type="text" name="name" id="username" value="abcde"/>
	</div>
</div>
<div id="btnList">
	<div><button id="btn01">查找#bj节点</button></div>
	<div><button id="btn02">查找所有li节点</button></div>
	<div><button id="btn03">查找name=gender的所有节点</button></div>
	<div><button id="btn04">查找#city下所有li节点</button></div>
	<div><button id="btn05">返回#city的所有子节点</button></div>
	<div><button id="btn06">返回#phone的第一个子节点</button></div>
	<div><button id="btn07">返回#bj的父节点</button></div>
	<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
	<div><button id="btn09">返回#username的value属性值</button></div>
	<div><button id="btn10">设置#username的value属性值</button></div>
	<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
最新Javascript 基础知识全总结(持续更新) 本人目前在黑马程序员培训,现将所学的知识整理出来,希望能帮到零基础的初学者,后续会持续更新~~~ 一,JavaScript 是什么 1, JavaScript 是什么 JavaScript 是一种运行在客户端(浏览器)的编程语言,实现人机交互效果 2, 作用 网页特效 (监听用户的一些行为让网页作出对应的反馈) 表单验证 (针对表单数据的合法性进行判断) 数据交互 (获取后台的数据, 渲染到前端) 服务端编程 (node.js) 3, JavaScript的组成 E... 阅读详情

相关推荐

JavaScript的起源?不同的JavaScript和引擎?JS版本发展史?

1995年,JavaScript诞生了。不得不提到它的标准ECMAScript, 它是一个语言标准,而非具体的语言。JavaScript除了名字有”Java”, 其它和Java没任何关系。Netscape为推广自家的LiveScript,命名中包含当时最流行的编程语言Java来蹭蹭热度。Netscape公司有些人可能不熟悉, 它就是早期被IE做浏览器对抗后来逐渐消亡一家公司。

编程语言开发、框架原理、编程思想、最佳实践技巧经验分享。致力于各种编程技术的技巧经验干货分享,讲解开发避坑技巧,追踪开发前沿技术,实战展开解决难题。 程序员小迷助您在编程路上越走越好! 2155

JavaScript基本知识总结(全)

什么是JS JS是JavaScript的简称,这是一门最流行的运行在浏览器的脚本语言。 JavaScript 与 Java 是两种完全不同的语言,无论在概念还是设计上。 JS是一种轻量级的编程语言,可由所有的现代浏览器执行 JS的作用 DOM操作: 增删改查HTML元素 可以直接操作HMTL 动效: 可以通过JS完成各种动效 让网页动起来 交互: 让用户和网页形成交互 (点击、滑动、拖拽等...

IT_Mr_guo的博客 1万+

JavaScript_JS的历史与发展

JS的诞生:程序员的弃子 以下引用部分来源于: Javascript诞生记 - 阮一峰的网络日志 (ruanyifeng.com) JS的发明者是布兰登·艾奇(Brendan Eich)。他出生于1961年,本科一开始是念物理学的,后来转去了数学和计算机系。有趣的是,作为JS之父,他却并不喜欢自己的这个孩子。 90年代初的早期浏览器功能非常弱小,而且受众范围也不广。那时,浏览器最大的功能是展示一些图片和文字: 彼时,浏览器的王者是一个叫网景(Netscape)的公司开发的网景浏览器(Netscape N

Happievening的博客 2471

JavaScript入门到精通(完整版! ! !)

JSON 是从 JavaScript 脚本中演变而来的,并且使用 JavaScript 中的语法来描述数据。与 XML 一样,JSON 也是一种基于文本的格式,文件扩展名为 .json。目前大多数编程语言(例如 PHP、Java、.Net)都支持 JSON,JSON 中有两种基本的结构:对象:由若干键/值对(即 key:value)组成的无序集合,每个对象以左花括号 { 开始,以右花括号 } 结尾,多个键/值对之间使用逗号 , 分隔;

yang20000222的博客 2704

深入掌握JavaScript Node.js开发

本文还有配套的精品资源,点击获取 简介:JavaScript是前端开发中的主导语言,在Node.js环境下的服务器端编程中也显示出重要性。Node.js是一个基于V8引擎的跨平台JavaScript运行环境,具有事件驱动和非阻塞I/O特性,适用于构建高性能的并发服务器。该压缩包文件可能包含有关Node.js核心概念和模块的资料,比如模块化设计、文件系统操作、HTTP服务器创...

weixin_28809949的博客 2082

SQLSTATE58030

在优化一条SQL的时候遇到了执行错误 gtlions =# select t1.telnumber,t2.ua,t2.url,t1.apply_name,t2.apply_name from tb1 t1 gtlions -# left outer join tb2 t2 on t1.sid = t2.ipsid gtlions-# where t1.sum_date=20141128 a

Gtlions Tracker 3658

JavaScript基础知识总结

JavaScript 最开始是专门为浏览器设计的一门语言,但是现在也被用于很多其他的环境。如今,JavaScript 已经成为了与 HTML/CSS 完全集成的,使用最广泛的浏览器语言。有很多其他的语言可以被“编译”成 JavaScript,这些语言还提供了更多的功能。建议最好了解一下这些语言,至少在掌握了 JavaScript 之后大致的了解一下。我们可以正常地从 Error 和其他内建的 error 类中进行继承,。我们只需要注意 name 属性以及不要忘了调用 super。

2301_77209411的博客 2291

一分钟教会你搭建steam新游幻兽帕鲁服务器

总结: 游戏对服务器搭建要求相对较高、且对服务器网络协议有要求不能封堵UDP、多开、游戏运行久、同时在线人数多了这些会很吃内存 我自己用的64G内存多开4区测试玩家同时在线50多人的情况下内存已经跑满了、对于想用服务器搭建联机的小伙伴建议根据开区数量以及玩家人数去选择配置、当然也可以直接找我阿杰购买、我可以提供技术搭建服务。注:如果用的是本地电脑局域网搭建直接输入127.0.0.1:8211就行 如果用的是服务器搭建输入自己服务器IP+端口或解析的域名+端口进入游戏。

用最简单的方式说最重要的事!服务器、存储、云计 算、A智能的大数据产品、游戏开发技术。致力于广 大开发者、政企用户、各项机构等,构建云上世界提供全方位云计算解决方案。旨在打造差异化的开放式闭环生态系统帮助用户快速构建稳定、安全的云计算环境。 2233

深入JavaScript之JS引擎如何执行JS代码

我们大概经常能听到“执行环境”、“作用域”、“原型(链)”、“执行上下文”等内容,它们都在描述什么? JS代码的运行 我们知道了js是弱类型语言,在运行时才确定变量类型。js引擎在执行js代码时,也会从上到下进行 词法分析、语法分析、语义分析 等处理,并在代码解析完成后生成AST(抽象语法树),最终根据AST生成CPU可以执行的机器码并执行。 除此之外,JS引擎在执行代码时还会进行其它处理,如 V8 中还有两个阶段: 编译阶段:该阶段会进行执行上下文的创建,包括创建变量对象、建立作用域链、确定 this

flying meng的菜鸟居 5926

单细胞分析实战:当Seurat的SCTransform遇上Harmony,我的整合流程优化笔记

本文详细介绍了单细胞转录组数据分析中SCTransform与Harmony整合流程的优化策略。通过实战案例展示如何调整SCTransform参数、优化Harmony整合效果,并解决常见问题,帮助研究者获得更可靠的生物学发现。特别适合需要处理批次效应的单细胞数据分析人员。

weixin_42552716的博客 356

Nexus3国内高速下载指南:多版本全平台资源汇总

本文针对国内开发者从官网下载Nexus 3速度慢、易失败的问题,提供了详尽的解决方案。汇总了Windows、Linux、macOS等多个平台的Nexus 3历史及最新版本(如3.31.1)的国内高速下载链接,并附有版本选择建议与Linux环境下的快速启动指南,帮助用户高效获取和部署这一流行的仓库管理工具。

jwt8token的博客 431

node.js和javascript的关系

node.js是一个基于 Chrome V8引擎的 JavaScript 运行时环境 一、类比JavaScript和java JavaScript java V8 JVM node.js JRE JavaScript和java都是一门编程语言,至于两者的关系,是雷锋和雷峰塔的关系 V8是google开源的JavaScript引擎,用于执行JavaScript,...

【小石头的茅坑】 71万+

25年PINN创新点大盘点!

在科研论文的激烈角逐中,想轻松产出高含金量成果?物理信息神经网络(PINN)堪称“宝藏研究方向”,是冲击高分区论文的绝佳赛道!对于渴望发表优质论文的科研伙伴,这三大研究路径值得重点关注。首先是自适应PINN,在PINN训练过程中,物理方程与实测数据间的矛盾常常导致权重调节困难,而恰好直击这一痛点,是极具价值的研究方向。其次,同样前景广阔,传统多物理场同时训练效果欠佳,如今分阶段训练方法脱颖而出,成效显著且竞争较小。最后,探索及多任务学习等技术的融合,能实现优势叠加,碰撞出创新火花。

Malaai的博客 1970

JS讲解(JavaScript)

JS,全称JavaScript,是⼀种。

m0_73776815的博客 7502

Ubuntu桌面消失?可能是lightdm配置在捣鬼:详细解析/etc/lightdm.conf的优先级机制与实战修复

本文详细解析了Ubuntu系统因lightdm显示管理器配置错误导致桌面消失的问题。通过分析/etc/lightdm.conf的优先级加载机制,提供了从systemctl诊断、调试模式运行到实战修复配置语法错误(如缺失[Seat:*]组)的完整方案。文章还探讨了在系统无法启动时使用chroot或恢复模式进行高级救援,并对比了lightdm与gdm3在NVIDIA驱动环境下的不同表现,帮助用户高效恢复图形界面。

weixin_29313547的博客 420

《MATLAB项目实战》,专栏目录和介绍

MATLAB 是一款强大且广泛应用的数值计算和数据可视化软件工具,它提供了一个高效、简洁的编程环境,使用户能够进行从简单的矩阵运算到复杂的多维数据分析的各种计算任务。无论是在人工智能、计算机视觉、图像处理还是其他领域,MATLAB 都能够提供精准、快速的解决方案,因此成为了全球科研人员、工程师以及数据分析师的得力工具。

在职AI算法工程师,擅长计算机视觉,YOLO目标检测、分割等,擅长web、pyqt界面可视化,好内容持续更新中,来这里跟大家一起学习,共同进步 6471

javaScript-如何引入js代码

javaScript-如何引入js代码 直接po代码和截图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js01-如何引入js代码</title> <script type="text/javascript"> //script标签的...

一只苟延残喘的卑微蝼蚁 1万+

基于高斯两步移动搜寻法(2SFCA)的城市绿地可达性分析

第二步,对于每一个街道i,给定空间距离阈值d0,便形成另一个空间作用域,同样对于落在空间作用域内的每块绿地l的供给比率(Rl)利用高斯方程赋以权重,然后对这些加权后的供给比率(Rl)进行加和,便得到每个街道i的绿地可达性Ai。图3与图4是高斯两步移动搜索法的示例。在图3中,以d0为阈值,有1、2、3 三个街道中心点落在了绿地a的空间作用域内。同样在图4中,以d0为阈值,有a、c两个绿地中心点落在了街道2的空间作用域内,根据公式(3),对a、c高斯方程加权后的供需比率进行累加,便得到了街道2 的绿地可达性。

2301_77310370的博客 2404

原生JS(JavaScript)

JS 是JavaScript的简述 JS基于对象和事件驱动脚本语言,作用在浏览器上 JS的事件 onsubmit 主要用于表单的提交,绑定的位置在form标签里面,要有返回标记,如果提交的数据校验未通过,不允许表单提交 onload 用于页面加载的时候使用的事件,绑定的位置在body标签里,也可以用window.οnlοad=function(){} onclick/ondblclick 主要用于鼠标点击事件,常见的有按钮、图片、文字、超链接等等 onfocus/onblur 聚焦离焦事件,主要用

断肠人在刷牙〃的博客 9392

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

Node.js和Javascript的异同

JavaScript的组成: ECMAScript(语言基础,如:语法、数据类型结构以及一些内置对象) DOM(一些操作页面元素的方法) BOM(一些操作浏览器的方法) Nodejs的组成: ECMAScript(语言基础,如:语法、数据类型结构以及一些内置对象) os(操作系统) file(文件系统) net(网络系统) ...

【小石头的茅坑】 71万+

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

【JavaScript】JS对象和JSON

var perStr='{"属性名":"属性值","属性名":"属性值","属性名":{},"属性名":["","",""],"属性名":[{},{},{}]}'3、创建数组并初始化:new Array("one","two",2) ,可简写: var 数组名=[元素,...]9、数组.splice(start,deleteCount,[添加的元素,...])---删除或删除添加原数组元素。1、数组1.concat(数组2)---返回数组1和数组2合并后的新数组。

想做职场小白吗? 我来教您....... 3144

Node.js中运行JavaScript代码

最近学习JS的内容,有幸得到Bill的指点,之前自己运行JS的脚本是在浏览器上,之后惊喜的发现,可以在加载Node.js环境中,在命令窗口运行脚本。这样做的好处是什么呢?大大的减少了窗口来回切换的的频率,提高我们的效率。看起来也是很高大上的。

No body But u 8194

QT与JavaScript交互/Qt调用JS脚本

QT与JavaScript交互 简介 本篇主要对QT与JavaScript的交互方法通过代码进行详细说明,实现的QT版本是 4.8.7, QT += webkit。完整代码中包含启动html调试窗口的方法。 QT中调用JS函数 // 调用js中的无参无返回值,名为QtCallNoParam的函数 ui->qwebView ->page()->mainFrame()->evaluateJavaScript(QString("QtCallNoParam()")); // 调用js中的有两

宁静致远的博客 1万+

Next.js, Node.js, JavaScript, TypeScript 的关系

【代码】Next.js, Node.js, JavaScript, TypeScript 的关系。

坚持输出,记录成长。 1709

JavaScript 前端枚举库 js-enumerate

前端枚举类Enum对象可在JavaScript中使用,用于枚举定义,前端组件单选、多选等的options选项的定义。

带着Bug看世界 2584

JavaScript和Node.js的关系

JavaScript和Node.js的联系与区别。

cnds123的专栏 4487
上一篇: HTML/CSS
下一篇: jQuery
AX_Chu
博客等级 码龄6年 13粉丝 31原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值