js

JavaScript数据校验

DOM中一切皆为节点

元素节点：html标签为元素节点
文本节点：标签中的内容为文本节点
属性节点：标签中的属性称为属性节点

网页中如何使用JavaScript

head部分
- 包含函数的脚本位于文档head部分，这样我们就可以确保在调用函数前，脚本已经载入了。
body部分
- 执行位于body部分的脚本
外部JavaScript
- 编写外部.js文件，在页面引入，在script标签的src属性中指定外部的js文件的路径
- 注意：js文件中不能有script标签，js文件中是直接写js代码的

获取元素节点

根据id查询元素节点，返回一个节点对象并且用inputElement变量来接收
var inputElement = document.getElementById("id值");
注意：在js中，所有声明变量都用var表示

    <body>
     <form action="test.html" name="form1" method="post">
        <input type="text" name="username" value="国庆70周年" id="tid"/>
        <input type="button" name="ok" value="保存"/>
     </form>
    <script type="text/javascript">
     //输出<input type="text" name="username" value="国庆65周年" id="tid"/>标签value的属性值
        var Element = document.getElementById("tid")
           alert(Element.value);
     </script>
</body>

var n = inputElement.value;获取元素节点中的值并且用n变量来接收
2. alert("弹出框中显示的内容")
3. 根据name属性查询元素节点，返回一个节点集合
var inputElement = document.getElementByName("name值")

  <body>
     <form action="test.html" name="form1" method="post">
        <input type="text" name="tname" value="国庆70周年_1" id="tid_1"/>
        <input type="text" name="tname" value="国庆70周年_2" id="tid_2"/>
        <input type="text" name="tname" value="国庆70周年_3" id="tid_3"/>
        <input type="button" name="ok" value="保存"/>
     </form>
    <script type="text/javascript">
      //通过元素的name="tname"属性获取所有元素的引用
           var Elements = document.getElementsByName("tname");
      //测试该数据的长度
      alert(Elements.length);
      //遍历元素,输出所有value属性的值
           for(var i=0;i<Elements.length;i++){
              alert(Elements[i].value);
           }
    </script>
  </body>

根据标签的名称来查询元素节点，返回一个节点集合
可以用document对象来调用，还可以用父节点来调用
option如果没有写value属性，那么value属性值默认为文本内容
获取本网页中所有标签名叫option的标签：var options = document.getElementsByTagName("option").

  <body>
     <form action="test.html" name="form1" method="post">
        <input type="text" name="tname" value="国庆70周年_1" id="tid_1"/>
        <input type="text" name="tname" value="国庆70周年_2" id="tid_2"/>
        <input type="text" name="tname" value="国庆70周年_3" id="tid_3"/>
        <input type="button" name="ok" value="保存"/>
     </form>
     <select name="edu" id="edu">
         <option value="博士">博士^^^^^</option>
         <option value="硕士">硕士^^^^^</option>
         <option value="本科" selected="selected">本科^^^^^</option>
         <option value="幼儿园">幼儿园^^^^^</option>
     </select>
     <select name="job" id="job">
         <option value="美容">美容^^^^^</option>
         <option value="IT">IT^^^^^</option>
         <option value="程序员" selected="selected">程序员^^^^^</option>
         <option value="建筑师">建筑师^^^^^</option>
     </select>  
       <script type="text/javascript">
//     获取所有的input元素,返回值是数组
//         var inputs = document.getElementsByTagName("input");
//
//    测试长度
//    alert(inputs.length)
//    遍历输出value的值
//         for(var i=0;i<inputs.length;i++){
//            alert(inputs[i].value);
//         }
//    输出type="text"中value属性的值不包含按钮(button)
//         for(var i=0;i<inputs.length;i++){
//            if(inputs[i].type=="text"){
//                alert(inputs[i].value);
//            }
//         }
      //输出所有下拉选项id="edu"中option标签中value属性的值
//     var options = document.getElementById("edu");
//     for(var i=0;i<options.length;i++){
//            alert(options[i].value);
//          }
//     vor(var i=0;i<options.length;i++){
//            if(){
//                alert(options[i].value);
//            }
//          }ar options = document.getElementsByTagName("option");
//    输出所有下拉选项内容
//    var optionss = document.getElementsByTagName("option");
//     for(var i=0;i<optionss.length;i++){
//            alert(optionss[i].value);
//      }
//    输出下拉选项选中的值 不写                
      var Element = document.getElementById("edu").getElementsByTagName("option")
      for(var i=0;i<Element.length;i++){
        alert(Element[i].firstChild.nodeValue);
      }
    </script>
  </body>

事件

当事件发生后会触发该事件中的功能

js中如何定义函数
function 函数名(a,b,c...){}
调试时可以使用console.log("").
onload=""表示页面加载完毕后执行
事件：
1. oblur：元素失去焦点
2. onclick：鼠标点击某个对象
3. onfocus：元素获得焦点
4. onkeydown：某个键盘的键被按下
5. onkeyup：某个键盘的键被松开
6. onload：某个页面或图像被完成加载
7. onchange：改变事件

获取文本节点

var aElement = document.getElementByTagName("a")[0];
获取a节点下的第一个子节点：var aText =aElement.firstChild;
获取最后一个子节点：.lastChild;
获取节点的内容并在后台显示：console.log(aText.nodeValue);
- 元素节点返回null、属性节点返回属性的值、文本节点返回文本的内容
获取元素节点下的所有子节点：childNodes
nodeName获取节点的名称，元素节点调用返回元素的名称、属性节点调用返回属性名称、文本节点调用返回#text字符串
nodeType获取节点的类型，元素节点调用返回1、属性节点调用返回2、文本节点调用返回3
parentNode调用节点的父节点

替换节点

replaceChild():把一个给定父元素李的子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针
如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中

方法

.getAttribute("属性名")：获取属性值
.getAttribute("属性名","属性值")：设置属性值

  <body>
     您喜欢的城市:<br>
     <ul>
       <li id="bj" value="beijing">北京</li>
       <li id="sh" value="shanghai">上海</li>
     </ul>
  您喜欢的游戏:<br>
      <ul>
         <li id="fk" value="fankong">反恐<p>精英</p></li>
         <li id="ms" value="moshou">魔兽</li>
         <li id="cq" value="chuanqi">传奇</li>
      </ul>
  </body>
  <script type="text/javascript">
      //给这个<li id="cq" value="chuanqi">传奇</li>元素节点增加一个属性name="chuanqi"
document.getElementById(cq).setAttribute("name","chaunqi");    
  </script>

创建节点

document.createElement();：创建元素节点
document.createTextNode();：创建文本节点
document.appendChild();追加子节点

  <body>
     您喜欢的城市:<br>
     <ul id="city">
       <li id="bj" value="beijing">北京</li>
       <li id="sh" value="shanghai">上海</li>
       <li id="cq" value="chongqing">重庆</li>
     </ul>
  </body>
  <script type="text/javascript">
      //在<ul>标签下增加节点<li id="tj" value="tianjin">天津</li>
      var li = document.createElement("li");
      li.setAttribute("id","tj");
      li.setAttribute("value","tianjin");
      var tjText = document.createTextNode("天津");
      li.appendChild(tjText);
document.getElementById("city").appendChild(li);
  </script>
</html>

posted @ 2019-08-10 16:01 wuliqqq 阅读(184) 评论(0) 收藏举报

刷新页面返回顶部

wuliqqq

且随疾风前行

js