javascript程序媛初入门学习笔记（更新中--粗略版）

木子进一

已于 2022-07-31 18:34:59 修改

阅读量1.6k

点赞数

文章标签： javascript 开发语言 ecmascript

于 2022-07-15 15:12:30 首次发布

本文链接：https://blog.csdn.net/lijingyi2345/article/details/125805083

版权

2022年-大二暑假

好好踢书

经常忘记的两条引用css的语法：

<link rel="stylesheet" type="text/css" href="zs.css">

 <style type="css/text></style>

接下来，正式开启javascript

HTML与js结合的方式

<script type="text/javascript">alert("")</script>
<script type="text/javascript" src="1.js"></script>
两种方式二选一
变量：
|数值类型|number|
|字符串类型|string|
|对象类型|object|
|布尔类型|boolean|
|函数类型|function|

typeof：取变量的类型
关系运算
逻辑运算

在这里插入图片描述

数组

javascript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
函数定义的第一种方式
有参数（无参数原理相同）：

  function fun(a,b){
        alert("你真漂亮！！"+a+"+"+b+"="+"12abc");
    }
    fun(12,"abc");

函数定义的第二种方式

js中函数不允许重载
js隐形参数-arguments
JS 中的自定义对象：
（1）Object 形式的自定义对象
对象的定义： var 变量名 = new Object(); // 对象实例（空对象）
变量名.属性名 = 值; // 定义一个属性
变量名.函数名 = function(){} // 定义一个函数
对象的访问：变量名.属性 / 函数名();
（2）{}花括号形式的自定义对象
对象的定义： var 变量名 = { // 空对象属性名：值, // 定义一个属性
属性名：值, // 定义一个属性
函数名：function(){} // 定义一个函数 };
对象的访问：变量名.属性 / 函数名();
js中的事件：事件是电脑输入设备与页面进行交互的相应。
常用的事件：
事件注册（绑定）：告诉浏览器，当事件相应后要执行哪些操作代码。
onload 事件动态注册。是固定写法 window.onload = function () { alert("动态注册的 onload 事件"); }
静态注册 onload 事件。onload 事件是浏览器解析完页面之后就会自动触发的事件 <body onload="onloadFun();">
onlick
静态注册 onClick 事件： <button onclick="onclickFun();">按钮 1</button>

在这里插入图片描述

DOM模型：文档对象模型
验证用户名是否有效
Document 对象中的方法介绍
getElementById（验证用户名是否有效）方法示例代码：

如何验证字符串，符合某个规则，需要用到正则表达式。
（1）test
（2）正则表达式
正则表达式
两种常见的验证提示效果
节点的常用属性和方法

练习：05.DOM 查询练习

 <!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>