JavaWeb项目-----JavaScript

最新推荐文章于 2024-06-28 09:52:57 发布

Renaissance14th

最新推荐文章于 2024-06-28 09:52:57 发布

阅读量708

点赞数

分类专栏： JavaWeb项目文章标签： js javascript

本文链接：https://blog.csdn.net/Culprit/article/details/111241267

版权

JavaWeb项目专栏收录该内容

4 篇文章 0 订阅

订阅专栏

10、当页面中没有name和id时可以用getElementsByTagName

11.节点的常用属性和方法

12.createTextNode和 appendChild的使用

1.且和或运算

&&且运算有两种情况：

第一种：当表达式全为真的时候返回最后一个表达式的值。

第二种：当表达式中，有为假的值时候返回第一个为假的表达式的值。

||或运算

第一种情况：当表达式全为假时，返回最后一个表达式的值。

第二种情况：当表达式有真的时候，返回第一个为真的表达式。

注意：二者皆有短路

2.数组

<script type="text/javascript">
        var arr = [];
        arr[3] = 12;   //arr[0]、arr[1]、arr[2]的值时undefined。
</script>

3.函数

1.js里面函数不能被重载，只能被覆盖。

2.函数的隐藏参数arguments（形参），只在function函数内

就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量，跟Java的可变长参数一样。public void fun(Object ...args);

可变长参数其实是一个数组，

<!--函数-->
    <script type="text/javascript">
        //函数定义之后需要被调用才能执行
        function function1(){
            alert("function 被调用了");
        }
        function1();
        //有参函数定义
        function function2(a,b){
            alert("function2被调用了 a = " + a + "、b = " + b);
        }
        function2(12,"abc");
        function function3(num1,num2){
            var result = num1 + num2;
            return result;
        }
        alert(function3(100,50));
        //函数的第二种定义方法
        var fun = function (){
            alert("函数的第二种定义方法")
        }
    </script>

4.对象

Object形式的自定义对象

对象的定义：

<!--定义对象-->
    <script type="text/javascript">
        var obj = new Object();
        obj.name = "OneLuckGuy"
        alert(obj.name);
    </script>
<!--定义对象方式二-->
    <script type="text/javascript">
        var obj = {
            age:18,
            function1:function(){}
        }
        alert(obj.age)
    </script>

5.事件

事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件：

onload 加载完成事件：页面加载完成之后，常用于做页面 js 代码初始化操作

onclick 单击事件：常用于按钮的点击响应操作。

onblur 失去焦点事件：常用用于输入框失去焦点后验证其输入内容是否合法。

onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作

onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。

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

静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。

动态注册基本步骤： 1、获取标签对象 2、标签对象.事件名 = fucntion(){}

1.onload事件

1.静态注册

注意：onload是在body标签内的属性。

如果要给onload添加函数常常写在head中就可以。。在body中也可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <script type="text/javascript">
        function function1(){
            alert("静态注册页面onload事件，所有代码");
        }
    </script>
</head>
<!--静态注册onload事件
    onload事件时浏览器解析完页面之后就会自动触发的事件
-->
<body onload="function1()">

</body>
</html>

2.动态注册onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <script type="text/javascript">
        window.onload = function(){
            alert("动态注册页面onload事件，所有代码");
        }
    </script>
</head>
<body>
</body>
</html>

2.静态、动态注册onclick事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    静态注册onclick-->
    <script type="text/javascript">
        function function1(){
            alert("静态注册onclick");
        }
    </script>
<!--    动态注册onclick-->
    <script type="text/javascript">
        window.onclick = function (){
//            1.获取标签对象
//             document 是JavaScript提供的一个对象（文档）指整个页面
//             get 获取
//             Element 元素（就是标签）
//             By 通过
//             Id id属性
            //通过Id属性获取对象
            var btnObj = document.getElementById("btn02");
            btnObj.onclick = function(){
                alert("动态注册onclick事件");
            }
        }
    </script>
</head>
<body>
    <button onclick="function1()">button1</button>
    <button id="btn02">button2</button>
</body>
</html>

3.静态动态注册失去焦点事件onclur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    静态注册onclur事件-->
    <script type="text/javascript">
        function onblurfun(){
            //console是控制台对象，是由JavaScript语言提供，专门用来想浏览器的控制器打印输出，用于测试使用。
            //log是打印的方法
            console.log("静态注册失去焦点事件");
        }
    </script>
<!--    动态注册onclur事件-->
    <script type="text/javascript">
        window.onblur = function (){
            var elementById = document.getElementById("pass01");
            elementById.onblur = function (){
                console.log("动态注册失去焦点事件");
            }

        }
    </script>
</head>
<body>
<!--注意这里加的是onblurfun(),而不是onblurfun不要忘记括号-->
    user:<input type="text"onblur="onblurfun()"><br/>
    password:<input type="password" id="pass01"><br/>
</body>
</html>

4.注册onchange事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    静态注册onchange事件-->
    <script>
        function onchangefun(){
            alert("静态注册onchange被调用");
        }
    </script>
<!--    动态注册onchange事件-->
    <script>
        window.onload  = function(){
            var selectObj = document.getElementById("onchangefun1");
            selectObj.onchange = function (){
                alert("动态注册onchange被调用");
            }
        }
    </script>
</head>
<body>
    请选择国家：
    <select onchange="onchangefun()">
        <option>----selcect----</option>
        <option>Japan</option>
        <option>America</option>
        <option>China</option>
    </select>
    选择城市:
    <select id="onchangefun1">
        <option>----select----</option>
        <option>New York</option>
        <option>San Francisco</option>
        <option>Chicago</option>
    </select>
</body>
</html>

5.注册onsubmit事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function onsubmitfun(){
            alert("静态onsubmit,发现不合法,组织提交");
            return false;
        }
    </script>
    <script>
        window.onload = function (){
            var submitObj = document.getElementById("onsubmitfun1");
            submitObj.onsubmit = function (){
                alert("动态onsubmit");
                //动态的发现不合法在后面不用加return
                //如果想要提交return true就可以了
                return false;
            }
        }
    </script>
</head>
<body>
<!--静态阻止提交的时候要加return 才能够得到返回值false-->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitfun()">
        <input type="submit" value="静态表单">
    </form>
    <form action="http://localhost:8080" method="get" id="onsubmitfun1">
        <input type="submit" value="动态表单">
    </form>
</body>
</html>

6.DOM

Document 对象中的方法介绍

document.getElementById(elementId) 通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值

document.getElementsByName(elementName) 通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值

document.getElementsByTagName(tagname) 通过标签名查找标签 dom 对象。tagname 是标签名

document.createElement( tagName) 方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

注： document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName 以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

<!-- 获取页面输入的value-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function function01(){
            var Obj = document.getElementById("user");
            alert(Obj.name + "*********" + Obj.id + "******" + Obj.value);

        }

    </script>
</head>
<body>
    用户名:<input type="text" id="user" name="username" value="value">
    <button type="button" onclick="function01()" name="button1" id="btn01">
        button1
    </button>

</body>
</html>

7.正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 表示要求字符串中，是否包含字母e
        // var patt = new RegExp("e");
        // var patt = /e/; // 也是正则表达式对象
        // 表示要求字符串中，是否包含字母a或b或c
        // var patt = /[abc]/;
        // 表示要求字符串，是否包含小写字母
        // var patt = /[a-z]/;
        // 表示要求字符串，是否包含任意大写字母
        // var patt = /[A-Z]/;
        // 表示要求字符串，是否包含任意数字
        // var patt = /[0-9]/;
        // 表示要求字符串，是否包含字母，数字，下划线
        // var patt = /\w/;
        // 表示要求 字符串中是否包含至少一个a
        // var patt = /a+/;
        // 表示要求 字符串中是否 *包含* 零个 或 多个a
        // var patt = /a*/;
        // 表示要求 字符串是否包含一个或零个a
        // var patt = /a?/;
        // 表示要求 字符串是否包含连续三个a
        // var patt = /a{3}/;
        // 表示要求 字符串是否包 至少3个连续的a，最多5个连续的a
        // var patt = /a{3,5}/;
        // 表示要求 字符串是否包 至少3个连续的a，
        // var patt = /a{3,}/;
        // 表示要求 字符串必须以a结尾
        // var patt = /a$/;
        // 表示要求 字符串必须以a打头
        // var patt = /^a/;

        // 要求字符串中是否*包含* 至少3个连续的a
        // var patt = /a{3,5}/;
        // 要求字符串，从头到尾都必须完全匹配
        // var patt = /^a{3,5}$/;

        var patt = /^\w{5,12}$/;

        var str = "wzg168[[[";

        alert( patt.test(str) );


    </script>
</head>
<body>

</body>
</html>

8.校验用户名是否合法并提示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function function01(){
            var Obj = document.getElementById("user");
            var usernametext = Obj.value;
            /*
            * 1./\w/表示包含数字字母和下划线
            * 2./\W/表示包含非数字字母下划线
            * 3./\d/表示包含数字
            * */
            var patt = /^\w{5,12}$/;
            var spanObj = document.getElementById("usernameSpan");

            /*
            * test()方法用于测试某个字符串，是不是匹配我的规则
            * 匹配就返回true，不匹配就返回false
            * */
            if (patt.test(usernametext)){
                //alert("符合要求");
                spanObj.innerText = "符合要求";
                spanObj.innerText = "<img src='right.png'>"//也可与放图片
            }else{
               //alert("不符合要求");
                spanObj.innerText = "不符合要求";
            }

        }

    </script>
</head>
<body>
    用户名:<input type="text" id="user" name="username" value="value">
    <span id="usernameSpan" style="color: red;"></span>
    <button type="button" onclick="function01()" name="button1" id="btn01">
        校验
    </button>

</body>
</html>

9.全选、全不选、反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        function checkAll(){
        //让所有复选框都选中
            //是一个集合，集合中每个元素都是一个dom对象
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = true;
            }

        }
        //全不选
        function checkNone(){
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = false;
            }
        }
        //反选
        function checkReverse(){
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = !hobbies[i].checked;
            }
        }
    </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="checkNone()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>

10、当页面中没有name和id时可以用getElementsByTagName

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        function checkAll(){
        //让所有复选框都选中
            //是一个集合，集合中每个元素都是一个dom对象
            var tags = document.getElementsByTagName("input");
            for (var i = 0; i < tags.length; i++){
                tags[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>
</html>

上面三个dom的方法都要在页面加载完之后才能用，可以写在btn的函数里因为当你点击页面的butten时候

这时候页面已经加载完成了

11.节点的常用属性和方法

节点：主要指的是标签对象，还包括注释文字等东西

练习：

<!DOCTYPE html>
<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节点
		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节点.getElementsByTagName按标签名查子节点
			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(){
			// 查询id为phone的节点
			alert( document.getElementById("phone").firstChild.innerHTML );
		};
		//7.返回#bj的父节点
		var btn07Ele = document.getElementById("btn07");
		btn07Ele.onclick = function(){
			//1 查询id为bj的节点
			var bjObj = document.getElementById("bj");
			//2 bj节点获取父节点
			alert( bjObj.parentNode.innerHTML );
		};
		//8.返回#android的前一个兄弟节点
		var btn08Ele = document.getElementById("btn08");
		btn08Ele.onclick = function(){
			// 获取id为android的节点
			// 通过android节点获取前面兄弟节点
			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 = "国哥你真牛逼";
		};
		//11.返回#bj的文本值
		var btn11Ele = document.getElementById("btn11");
		btn11Ele.onclick = function(){
			alert(document.getElementById("city").innerHTML);
			// alert(document.getElementById("city").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>

12.createTextNode和 appendChild的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            // 现在需要我们使用js代码来创建html标签，并显示在页面上
            // 标签的内容就是：<div>坂井泉水</div>
            var divObj = document.createElement("div"); // 在内存中 <div></div>

            var textNodeObj = document.createTextNode("坂井泉水"); // 有一个文本节点对象 #坂井泉水

            divObj.appendChild(textNodeObj); // <div>坂井泉水</div>

            // divObj.innerHTML = "坂井泉水"; // <div>坂井泉水</div>,但，还只是在内存中
            // 添加子元素
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>

</body>
</html>