JS高级笔记 js基础知识总结笔记


本文主要分享【js基础知识总结笔记】,技术文章【JS高级笔记】为【weixin_51297617】投稿,如果你遇到相关问题,本文相关知识或能到你。

js基础知识总结笔记

JS高级
# 今日目标
1. BOM
2. DOM(与xml的dom4j思想完全一样)可以实现对节点的增删改查
3. js中正则表达式:对表单内容进行校验
4. 综合案例
js的语法构成:
	1. ECMAScrpit 基础语法 (es)
	2. BOM : browser object model (浏览器对象模型)
	3. DOM : document object model(文档对象模型)
js 基于对象的语言 (面向对象)
	1. 跟java类似, 用对象来描述事物的.
	2. js中有些对象不需要创建,已经提前准备好了
一 BOM对象 1.1 BOM简介

浏览器对象模型(Browser Object Model )

作用:把浏览器抽象成为一个对象模型,我们可以使用js模拟浏览器的一些功能。

JS高级笔记 js基础知识总结笔记

1.2 Window对象 ① 三种弹框方式
1. 警告框:提示信息
		alert()
2. 确认框:确认信息
		confirm()
3. 输入框:输入信息
		prompt()

    DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>01-js三个弹框
      title> 
       head> <body> 
        body> <script> /* * # BOM: browser object model 浏览器对象模型 * * # window对象 * 三种弹出框 * * 1. alert 警告 * alert(msg) * 2. confirm 确认 * boolean result = confirm(msg) * 1). msg : 问题 * 2). result : 用户点击确认返回true,取消返回false * * 3. prompt 提示 * string result = prompt(msg,defaultValue) * 1). msg : 问题 * 2). defaultValue : 默认值 * 3). result : 点击确定返回输入框中的内容,点击取消返回null * * 关于window对象 * window调用的内容,在语法上window可以省略 * */ // window.alert("待会要下雨了,记得打伞") // var result = window.confirm("你满18岁了吗?"); // console.log(result); // var result = window.prompt("你女朋友是?","高圆圆"); var result = prompt("你女朋友是?"); console.log(result); 
         script> 
          html> 
② 二种定时器方式

    DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>02-js二个定时器
      title> 
       head> <body> <input type="button" value="按钮"> <button id="btn1">取消计时器
        button> 
         body> <script> /* * window对象两种计时器 * 1. setInterval(函数名,时间) * 每隔指定的时间执行一次函数 , 无限 * * 2. setTimeout(函数名,时间) * 超过指定的时间执行一次函数 , 就一次 * * 上面两个函数,都会返回一个计时器对象 * * 取消: * 1. clearInterval(计时器对象) * 2. clearTimeout(计时器对象) * */ function method01(){
           console.log("hehe"); } var timer = window.setInterval(method01,1000) // var timer = window.setTimeout(method01,3000) var btn1 = document.getElementById("btn1"); btn1.onclick = function () {
           // clearTimeout(timer) clearInterval(timer) } 
          script> 
           html> 
1.3 Location对象

    DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>03-location对象
      title> 
       head> <body> <button onclick="addr()">获取当前浏览器地址
        button> <button onclick="refresh()">刷新当前页面
         button> <button onclick="jump()"> 跳转页面(重点)
          button> <hr> 
          <a href="http://www.baidu.com">百度
           a> <a href="javascript:method01()">我是一个按钮
            a> 
             body> <script> /* * location对象: 表示地址栏 * 1). href 属性: 表示地址栏中的网址 * 2). reload 函数: 重新加载 * */ function addr() {
               console.log(location.href); } function jump() {
               location.href = "http://www.baidu.com" } function method01() {
               console.log("hehe"); } function refresh() {
               location.reload() } 
              script> 
               html> 
二 DOM对象【重点】 1.1 DOM简介

dom4j : dom for java

文档对象模型(Document Object Model)

作用:把所有页面标签抽象成为一个document对象,我们可以使用js动态修改标签及属性等内容。

JS高级笔记 js基础知识总结笔记

1.2 DOM获取元素
* 第一种:es6之前获取方式
	1)获取一个
		document.getElementById(id属性值)  -> 推荐
	2)获取多个(了解)
		document.getElementsByTagName(标签名)	根据标签名获取,返回数组对象
		document.getElementsByClassName(class属性值)	根据class属性获取,返回数组对象
		document.getElementsByName(name属性值)  根据name属性获取,返回数组对象

* 第二种:es6可根据CSS选择器获取
	1)获取一个
		非数组变量 = document.querySelector(id选择器)
	2)获取多个
		数组变量 = document.querySelectorAll(css选择器)   -> 推荐
        	标签
        	class
        	属性
        	多层级
        	并集
        	单层级
        	....

    DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>04-dom获取元素
      title> 
       head> <body> <form action="#" method="get"> 姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/> 密码 <input type="password" name="password"> <br/> 生日 <input type="date" name="birthday"><br/> 性别 <input type="radio" name="gender" value="male" class="radio"> <input type="radio" name="gender" value="female" class="radio"/><br/> 爱好 <input type="checkbox" name="hobby" value="smoke">抽烟 <input type="checkbox" name="hobby" value="drink">喝酒 <input type="checkbox" name="hobby" value="perm">烫头<br/> 头像 <input type="file" name="pic"><br/> 学历 <select name="edu"> <option value="0">请选择
        option> <option value="1">入门
         option> <option value="2">精通
          option> <option value="3">放弃
           option> 
            select><br/> 简介 <textarea name="userIntro" cols="30" rows="10">默认值
             textarea><br/> <input type="reset" value="清空按钮"/> <input type="submit" value="提交按钮"/><br/> 
              form> <script> // 1.获取id="username"的标签对象 var a = document.getElementById("username"); console.log(a); var b = document.querySelector("#username"); console.log(b); // 2.获取class="radio"的标签对象数组 var array1 = document.getElementsByClassName("radio"); console.log(array1); var array2 = document.querySelectorAll(".radio"); console.log(array2); // 3.获取所有的option标签对象数组 var array3 = document.getElementsByTagName("option"); console.log(array3); var array4 = document.querySelectorAll("option"); console.log(array4); // 4.获取name="hobby"的input标签对象数组 var array5 = document.getElementsByName("hobby"); console.log(array5); var array6 = document.querySelectorAll("input[name='hobby']"); console.log(array6); 
               script> 
                body> 
                 html> 
1.3 DOM操作内容
1. 获取或者修改元素(标签)的纯文本内容
	语法:
		js对象.innerText; 

2. 获取或者修改元素的html超文本内容
	语法:
		js对象.innerHTML; 


    DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>05-dom操作内容
      title> <style> #myDiv{
        border: 1px solid red; } 
       style> 
        head> <body> <div id="myDiv">程序猿最讨厌的四件事:写注释、写文档…… 
         div> <script> /* * # dom操作内容 * 1. 内容: 开标签到闭标签之间的所有东西 * 2. innerText : 文本内容 (不识别标签) * 3. innerHTML : 超文本内容 (识别标签) * * = : 重置 * += : 追加 * */ let myDiv = document.getElementById('myDiv'); console.log(myDiv.innerText); //重置,覆盖 // myDiv.innerText = "改bug,项目上线" //追加 // myDiv.innerText = myDiv.innerText + "改bug,项目上线" // myDiv.innerText += "改bug,项目上线" //文本 // myDiv.innerText += "
改bug,项目上线"
//超文本 myDiv.innerHTML += "
改bug,项目上线"
script> body> html>
1.4 DOM操作属性
1. 获取文本框的值(string),单选框或复选框的选中状态(boolean)
	语法: 
		js对象.属性名 获取属性值
		js对象.属性名='新属性值'
		

    DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>06-dom操作属性
      title> 
       head> <body> <form action="#" method="get"> 姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/> 爱好 <input type="checkbox" name="hobby" value="smoke" id="smoke">抽烟 <input type="checkbox" name="hobby" value="drink" checked>喝酒 <input type="checkbox" name="hobby" value="perm">烫头<br/> <input type="reset" value="清空按钮"/> <input type="submit" value="提交按钮"/><br/> 
        form> <script> /* * 标签属性 * 1. 文本属性 * * 2. 状态属性 * 1). 在html中,状态属性基本都可以书写 * eg. checked = "checked" 缩写成 checked * 2). 在js中,状态属性值是用boolean来表示的 * * html 中的checked 相当于 js.checked = true * html 不写checked 相当于 js.checked = false * */ var username = document.getElementById("username"); //获取 console.log(username.value); // 德玛西亚 console.log(username.type); // text //设置 username.value = "张三" var smoke = document.getElementById("smoke"); smoke.checked = true 
         script> 
          body> 
           html> 
1.5 DOM操作样式
1. 设置一个css样式【会用】  行内样式,优先级高
	语法: 
		js对象.style.样式名='样式值'
			特点:样式名按照驼峰式命名
				css格式:font-size
				js格式:fontSize
				
2. 批量设置css样式(了解)  行内样式
	语法: 
		js对象.style.cssText='css样式字符串'
			缺点:让开发者痛苦,有耦合性
			
3. 通过class设置样式【重点】 内部样式,外部样式,优先级低
	语法: 
		js对象.className='class选择器名'
			特点:解耦

    DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>07-dom操作样式
      title> <style> #p1{
        background-color: red;} .mp {
        color: pink; font-size: 20px; } .mpp {
        background-color: lightgray; } 
       style> 
        head> <body> <p id="p1">1. 设置一个css样式
         p> <p id="p2">2. 批量设置css样式
          p> <p id="p3">3. 通过class设置样式
           p> <p id="p4">4. 优先级
            p> 
            <script> let p1 = document.getElementById("p1");//获取段落标签 let p2 = document.getElementById("p2");//获取段落标签 let p3 = document.getElementById("p3");//获取段落标签 let p4 = document.getElementById("p4");//获取段落标签 // 1. 设置一个css样式 p1.style.color = "green" p1.style.fontSize = "50px" // 2. 批量设置css样式 p2.style.cssText = "color:blue;font-size : 30px" // 3. 通过class设置样式 p3.className = "mp" //4. 优先级 p4.style.color = "green" p4.className = "mp" 
             script> 
              body> 
               html> 
三 正则表达式【了解】

作用:根据定义好的规则,过滤文本内容;这里我们用于校验表单

JS高级笔记 js基础知识总结笔记

package com.itheima.regex;
/* * 正则表达式: regular expression (regex) * 0. 用一些符号表示指定的规则 * 1. [abc] : 表示 abc中任意一个 (范围) * 2. {1,3} : 至少1次,至多3次 (次数) * 3. + : 表示一次至多次 * 4. \r\n : 回车换行 * 5. \t : 制表符 * 6. \d : 等价于[0-9] * */
public class Demo {
   

    public static void main(String[] args) {
   
        // abc中的任意一个
// String regex = "[abc]{1,3}";
        String regex = "abc";

        String str = "abcd";
        //str是否匹配regex,如果匹配返回true
        boolean result = str.matches(regex);
        System.out.println(result);

        String phoneRegex = "1[34578]\\d{9}";
        String phone = "13800138000";
        System.out.println(phone.matches(phoneRegex));
    }
}

今天我们学习如何在js中使用正则表达式

强调:我们只需要学会正则表达式的赋值和校验即可…

* 在js中使用正则表达式
	1.创建方式
		1)let regex = new RegExp(“正则表达式字符串”);
		2)let regex = /正则表达式/;
        
	2.验证方法
		正则对象.test(字符串)
			符合正则规则就返回true,否则false

	3.在线正则表达式
    	https://tool.oschina.net/regex/#

    DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>08-正则表达式
      title> 
       head> <body> <script> /* * * 在js中使用正则表达式 1.创建方式 1)let regex = new RegExp(“正则表达式字符串”); 2)let regex = /正则表达式/; 2.验证方法 正则对象.test(字符串) 符合正则规则就返回true,否则false 3.在线正则表达式 https://tool.oschina.net/regex/# * */ // let regex1 = new RegExp("abc") // let regex = /abc/ // java中的规则精准匹配,js中的规则模糊匹配 // let regex = /^abc/ // ^ 以...开头 // let regex = /abc$/ // $ 以...结尾 let regex = /^abc$/ // 精准匹配 let str = "abc" //str符合regex规则,返回true var result = regex.test(str); console.log(result); 
        script> <script> // 以邮箱举例 let emailReg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/; // 以手机号举例 let phoneReg = /^1[34578]\d{9}$/; 
         script> 
          body> 
           html> 
四 综合案例【作业】 4.1 表单校验

    DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>案例-表单校验
      title> <style type="text/css"> .regist_bg {
        width: 100%; height: 600px; padding-top: 40px; background-image: url(../img/bg.jpg); } .regist {
        border: 7px inset #ccc; width: 700px; padding: 40px 0; padding-left: 80px; background-color: #fff; margin-left: 25%; border-radius: 10px; } input[type="submit"] {
        background-color: aliceblue; width: 100px; height: 35px; color: red; cursor: pointer; border-radius: 5px; } .warn {
        color: red; font-size: 12px; display: none; } 
       style> 
       
        head> <body> <div class="regist_bg"> <div class="regist"> <form action="http://www.baidu.com" id="myForm"> <table width="700px" height="350px"> <tr> <td colspan="3"> <font color="#3164af">会员注册
         font> USER REGISTER 
          td> 
           tr> <tr> <td align="right">用户名
            td> <td colspan="2"><input id="loginnameId" type="text" name="loginname" size="50"/><span id="loginnamewarn" class="warn">用户名不能为空
             span>
              td> 
               tr> <tr> <td align="right">密码
                td> <td colspan="2"><input id="pwd1" type="password" name="pwd1" size="50"/>
                 td> 
                  tr> <tr> <td align="right">确认密码
                   td> <td colspan="2"><input id="pwd2" type="password" name="pwd2" size="50"/><span id="pwdwarn" class="warn">密码不一致
                    span>
                     td> 
                      tr> <tr> <td align="right">Email
                       td> <td colspan="2"><input id="email" type="text" name="email" size="50"/> <span id="emailwarn" class="warn">邮箱格式有误
                        span> 
                         td> 
                          tr> <tr> <td align="right">姓名
                           td> <td colspan="2"><input name="text" name="username" size="50"/>
                            td> 
                             tr> <tr> <td align="right">性别
                              td> <td colspan="2"> <input type="radio" name="gender" value="" checked="checked"/><input type="radio" name="gender" value=""/>
                               td> 
                                tr> <tr> <td align="right">电话号码
                                 td> <td colspan="2"><input id="phone" type="text" name="phone" size="50"/> <span id="phonewarn" class="warn">手机格式有误
                                  span> 
                                   td> 
                                    tr> <tr> <td align="right">所在地
                                     td> <td colspan="3"> <select id="provinceId" onchange="selectCity(this.value)" style="width:150px"> <option value="">----请-选-择-省----
                                      option> <option value="0">北京
                                       option> <option value="1">辽宁
                                        option> <option value="2">江苏
                                         option> 
                                          select> <select id="cityId" style="width:150px"> <option>----请-选-择-市----
                                           option> 
                                            select> 
                                             td> 
                                              tr> <tr> <td width="80" align="right">验证码
                                               td> <td width="100"><input type="text" name="verifyCode"/>
                                                td> <td><img src="../img/checkMa.png"/>
                                                 td> 
                                                  tr> <tr> <td>
                                                   td> <td colspan="2"> <input id="rebtn" type="submit" value="注册"/> 
                                                    td> 
                                                     tr> 
                                                      table> 
                                                       form> 
                                                        div> 
                                                         div> <script> /* * 已学事件: * onclick * 事件 * 1. onblur 失去焦点时触发 * * 2. onsubmit 当表单提交的时候 * 1). 注册位置 * 注册在form标签上,由form表单中onsubmit按钮触发 * 2). 返回值 * return true : 表示允许提交 * return false : 表示不允许提交 * */ /* var loginName = document.getElementById("loginnameId"); loginName.onblur = function () { console.log("hehe"); } var myForm = document.getElementById("myForm"); myForm.onsubmit = function () { console.log("xixi"); return true; }*/ 
                                                          script> <script> // 1. 两次密码输入一致 let checkPwd = function () {
                                                            var pwd2 = document.getElementById("pwd2"); var pwd1 = document.getElementById("pwd1"); var pwdWarn = document.getElementById("pwdwarn"); if(pwd2.value == "" || pwd1.value != pwd2.value){
                                                            // console.log("两次密码不一致") pwdWarn.style.display = "inline" return false; }else{
                                                            pwdWarn.style.display = "none" return true; } } pwd2.onblur = checkPwd // 2. 邮箱格式正确 let emailReg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/; var email = document.getElementById("email"); let checkEmail = function () {
                                                            var emailwarn = document.getElementById("emailwarn"); if(!emailReg.test(email.value)){
                                                            //邮箱格式有误 emailwarn.style.display = "inline" return false; }else{
                                                            emailwarn.style.display = "none" return true; } } email.onblur = checkEmail //当表单提交的时候,需要再次校验 var myForm = document.getElementById("myForm"); myForm.onsubmit = function () {
                                                            //校验所有的规则: 密码, 邮箱 var result = checkPwd(); var result2 = checkEmail(); return result && result2; } 
                                                           script> 
                                                            body> 
                                                             html> 
4.2 商品全选

    DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>案例-商品全选
      title> 
       head> <body> 
       <button id="btn1">1. 全选
        button> <button id="btn2">2. 反选
         button> <br/> <input type="checkbox">电脑 <input type="checkbox">手机 <input type="checkbox">汽车 <input type="checkbox">别墅 <input type="checkbox" checked="checked">笔记本 <script > /* * 全选 * 1. btn1上注册一个点击事件 * 2. 找到所有的checkbox * 3. 然后进行遍历,修改每一个checkbox的checked = true * * 反选 * 1. btn2上注册一个点击事件 * 2. 找到所有的checkbox * 3. 然后进行遍历,修改每一个checkbox.checked = !checkbox.checked * */ document.getElementById("btn1").onclick = function () {
           var cbs = document.querySelectorAll("input[type='checkbox']"); for(let cb of cbs){
           cb.checked = true } } document.getElementById("btn2").onclick = function () {
           var cbs = document.querySelectorAll("input[type='checkbox']"); for(let cb of cbs){
           cb.checked = !cb.checked } } 
          script> 
           body> 
            html> 
4.3 省市联动

JS高级笔记 js基础知识总结笔记


    DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>案例-省市级联
      title> <style type="text/css"> .regist_bg {
        width: 100%; height: 600px; padding-top: 40px; background-image: url(../img/bg.jpg); } .regist {
        border: 7px inset #ccc; width: 600px; padding: 40px 0; padding-left: 80px; background-color: #fff; margin-left: 25%; border-radius: 10px; } input[type="submit"] {
        background-color: aliceblue; width: 100px; height: 35px; color: red; cursor: pointer; border-radius: 5px; } 
       style> 
        head> <body> <div class="regist_bg"> <div class="regist"> <form action="#"> <table width="600" height="350px"> <tr> <td colspan="3"> <font color="#3164af">会员注册
         font> USER REGISTER 
          td> 
           tr> <tr> <td align="right">用户名
            td> <td colspan="2"><input id="loginnameId" type="text" name="loginname" size="60" /> 
             td> 
              tr> <tr> <td align="right">密码
               td> <td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="60" /> 
                td> 
                 tr> <tr> <td align="right">确认密码
                  td> <td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="60" /> 
                   td> 
                    tr> <tr> <td align="right">Email
                     td> <td colspan="2"><input id="emailId" type="text" name="email" size="60" /> 
                      td> 
                       tr> <tr> <td align="right">姓名
                        td> <td colspan="2"><input name="text" name="username" size="60" /> 
                         td> 
                          tr> <tr> <td align="right">性别
                           td> <td colspan="2"> <input type="radio" name="gender" value="" checked="checked" /><input type="radio" name="gender" value="" />
                            td> 
                             tr> <tr> <td align="right">电话号码
                              td> <td colspan="2"><input type="text" name="phone" size="60" /> 
                               td> 
                                tr> <tr> <td align="right">所在地
                                 td> <td colspan="3"> <select id="provinceId" style="width:150px"> <option value="">----请-选-择-省----
                                  option> <option value="0">福建省
                                   option> <option value="1">江苏省
                                    option> <option value="2">上海市
                                     option> 
                                      select> <select id="cityId" style="width:150px"> <option value="">----请-选-择-市----
                                       option> 
                                        select> 
                                         td> 
                                          tr> <tr> <td width="80" align="right">验证码
                                           td> <td width="100"><input type="text" name="verifyCode" /> 
                                            td> <td><img src="../img/checkMa.png" /> 
                                             td> 
                                              tr> <tr> <td>
                                               td> <td colspan="2"> <input type="submit" value="注册" /> 
                                                td> 
                                                 tr> 
                                                  table> 
                                                   form> 
                                                    div> 
                                                     div> 
                                                      body> <script> /* * 省市联动 : 省的选项改变,市也会随之改变 * 1. 准备省对应的市数据,建立省和市的联系 * 二维数组: 每个元素都是一维数组的数组 (List
                                                       
                                                         , List
                                                        
                                                         >) * 索引0 -> fj , 1 -> js , 2 -> sh * 2. 事件 * onchange : 当内容改变时触发 * * 3. 从二维数组中取出省对应的市数据 * * 4. 遍历市数据,循环追加到市下拉框中 * * 5. 注意: 在遍历追加之前,将市下拉框中的数据清空 * */
                                                        
                                                        var fj = ["福州市","泉州市","三明市"] var js = ["南京市","苏州市","无锡市"] var sh = ["浦东新区","航头区","青浦区"] var cityDatas = [fj,js,sh] var province = document.getElementById("provinceId"); province.onchange = function () {
                                                        // console.log(province.value); var cityData = cityDatas[province.value] // console.log(cityData); var city = document.getElementById("cityId"); city.innerHTML = `` for(let element of cityData){
                                                        city.innerHTML += `${
                                                         element}` } } 
                                                       script> 
                                                        html> 
4.4 隔行换色

    DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>案例-隔行变色
      title> 
       head> <body> <table id="tab1" border="1" width="800" align="center"> <tr> <th width="100px"><input type="checkbox">全/<input type="checkbox">反选
        th> <th>分类ID
         th> <th>分类名称
          th> <th>分类描述
           th> <th>操作
            th> 
             tr> <tr> <td><input type="checkbox" class="checkbox">
              td> <td>1
               td> <td>手机数码
                td> <td>手机数码类商品
                 td> <td><a href="">修改
                  a>|<a href="">删除
                   a>
                    td> 
                     tr> <tr> <td><input type="checkbox" class="checkbox">
                      td> <td>2
                       td> <td>电脑办公
                        td> <td>电脑办公类商品
                         td> <td><a href="">修改
                          a>|<a href="">删除
                           a>
                            td> 
                             tr> <tr> <td><input type="checkbox" class="checkbox">
                              td> <td>3
                               td> <td>鞋靴箱包
                                td> <td>鞋靴箱包类商品
                                 td> <td><a href="">修改
                                  a>|<a href="">删除
                                   a>
                                    td> 
                                     tr> <tr> <td><input type="checkbox" class="checkbox">
                                      td> <td>4
                                       td> <td>家居饰品
                                        td> <td>家居饰品类商品
                                         td> <td><a href="">修改
                                          a>|<a href="">删除
                                           a>
                                            td> 
                                             tr> <tr> <td><input type="checkbox" class="checkbox">
                                              td> <td>5
                                               td> <td>牛奶制品
                                                td> <td>牛奶制品类商品
                                                 td> <td><a href="">修改
                                                  a>|<a href="">删除
                                                   a>
                                                    td> 
                                                     tr> <tr> <td><input type="checkbox" class="checkbox">
                                                      td> <td>6
                                                       td> <td>大豆制品
                                                        td> <td>大豆制品类商品
                                                         td> <td><a href="">修改
                                                          a>|<a href="">删除
                                                           a>
                                                            td> 
                                                             tr> <tr> <td><input type="checkbox" class="checkbox">
                                                              td> <td>7
                                                               td> <td>海参制品
                                                                td> <td>海参制品类商品
                                                                 td> <td><a href="">修改
                                                                  a>|<a href="">删除
                                                                   a>
                                                                    td> 
                                                                     tr> <tr> <td><input type="checkbox" class="checkbox">
                                                                      td> <td>8
                                                                       td> <td>羊绒制品
                                                                        td> <td>羊绒制品类商品
                                                                         td> <td><a href="">修改
                                                                          a>|<a href="">删除
                                                                           a>
                                                                            td> 
                                                                             tr> <tr> <td><input type="checkbox" class="checkbox">
                                                                              td> <td>9
                                                                               td> <td>海洋产品
                                                                                td> <td>海洋产品类商品
                                                                                 td> <td><a href="">修改
                                                                                  a>|<a href="">删除
                                                                                   a>
                                                                                    td> 
                                                                                     tr> <tr> <td><input type="checkbox" class="checkbox">
                                                                                      td> <td>10
                                                                                       td> <td>奢侈用品
                                                                                        td> <td>奢侈用品类商品
                                                                                         td> <td><a href="">修改
                                                                                          a>|<a href="">删除
                                                                                           a>
                                                                                            td> 
                                                                                             tr> <tr> <td><input type="checkbox" class="checkbox">
                                                                                              td> <td>4
                                                                                               td> <td>家居饰品
                                                                                                td> <td>家居饰品类商品
                                                                                                 td> <td><a href="">修改
                                                                                                  a>|<a href="">删除
                                                                                                   a>
                                                                                                    td> 
                                                                                                     tr> 
                                                                                                      table> <script> /* * 隔行换色: 奇数行和偶数行背景色不一致 * 1. 找到所有的行 * 2. 遍历, 给奇数行设置背景色=pink * * 触摸换色: 鼠标移上去高亮,鼠标移出去恢复原来的颜色 * 1. 事件 * 1). onclick * 2). onsubmit * 3). onblur * 4). onchange * 2. 新事件 * onmouseover : 当鼠标移上去的时候 * onmouseout : 当鼠标移出去的时候 * */ var trs = document.querySelectorAll("tr"); for(let i=0; i<trs.length;i++){
                                                                                                        if(i % 2 == 1){
                                                                                                        trs[i].style.backgroundColor = "pink" } let oldColor; //给每一行设置鼠标移上去的事件,当某一行该事件触发,当前行高亮 trs[i].onmouseover = function () {
                                                                                                        //记录原来的颜色 oldColor = this.style.backgroundColor; this.style.backgroundColor = "yellow" } //鼠标移出去必然在鼠标移上去之后 trs[i].onmouseout = function () {
                                                                                                        this.style.backgroundColor = oldColor } } 
                                                                                                       script> 
                                                                                                        body> 
                                                                                                         html> 
断点调试
```html
/a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
</table>
<script>
    /*
    *  隔行换色: 奇数行和偶数行背景色不一致
    *   1. 找到所有的行
    *   2. 遍历, 给奇数行设置背景色=pink
    *
    *  触摸换色: 鼠标移上去高亮,鼠标移出去恢复原来的颜色
    *   1. 事件
    *       1). onclick
    *       2). onsubmit
    *       3). onblur
    *       4). onchange
    *   2. 新事件
    *       onmouseover : 当鼠标移上去的时候
    *       onmouseout : 当鼠标移出去的时候
    * */
    var trs = document.querySelectorAll("tr");
    for(let i=0; i
     
  
断点调试

JS高级笔记 js基础知识总结笔记

4.5 js实现点赞按钮功能的实例代码

    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title
      title> 
       head> <body> 
       
       <div class="content1"> <div class="content1box1" > <img src="images/001.jpeg" > <br> <font class="content1box1font">网络用户
        font> <br> <br> <br> <br> 
        
        <span id="tixing1" style="font-size:30px;color:red;position:relative;left:0px;top:40px;">
         span> <div class="dianzan1"> <div class="dianzan1font"> <center><span id="cishu1">18
          span>
           center> 
            div> <button class="btn" id="1" onclick="">
             button> 
              div> 
               div> <div class="content1box2"> <font>阿斯达四大撒大所,爱仕达撒所大所所大所,阿斯达萨达萨达!阿斯达四大撒大所 奥术大师大所!啊啊撒大所大所
                font> 
                 div> 
                  div> 
                  <div class="content2"> <div class="content2box1"> <img src="images/001.jpeg" > <font class="content2box1font">网络用户
                   font> <br> <br> <br> <br> <span id="tixing2" style="font-size:60px;color:red;position: relative;left:120px;top:40px;">
                    span> <br> <br> <br> <br> <div class="dianzan2"> <div class="dianzan2font"> <center><span id="cishu2">
                     span>19
                      center> 
                       div> <button class="btn" id="2" onclick="">
                        button> 
                         div> 
                          div> <div class="content2box2"> <font>阿斯达四大撒大所,爱仕达撒所大所所大所,阿斯达萨达萨达!阿斯达四大撒大所 奥术大师大所!啊啊撒大所大所
                           font> 
                            div> 
                             div> 
                              body> <script> //初始化 var i=2;//评论条数 var Atixing=new Array(); //存储提醒字的id名 var Acishu=new Array(); //存储次数的id名 var count=new Array();//限制每次按钮只可以单击一次 window.onload = function(){
                               //页面加载出来后实现下列方法 bianliButtonCount();//获取所有按钮id chushizhi();//将数据初始化 button();//根据button 不同id进入不同标签 } function bianliButtonCount(){
                                for(var j = 1;j<=i;j++){
                                Atixing[j] = String("tixing"+j); Acishu[j] = String("cishu"+j); //alert(Atixing[j]); } } function chushizhi(){
                                for(var m =1;m<=i;m++){
                                document.getElementById(Atixing[m]).innerHTML="adad"; document.getElementById(Acishu[m]).innerHTML="13"; } } function button(){
                                var arr = document.getElementsByTagName('button'); for(var i = 1;i<arr.length+1;i++){
                                arr[i].onclick = function(){
                                var btn = document.getElementById(this.id); btn.style.background="red"; change(this.id);//根据button id,通过这个函数改变次数、提醒字 } } } function change(id){
                                if(count[id]!=1){
                                document.getElementById(Acishu[id]).innerHTML="14"; count[id]=1; }else{
                                document.getElementById(Atixing[id]).innerHTML="亲,您的赞太多了~"; setTimeout(function(){
                               document.getElementById(Atixing[id]).innerHTML="";},3000);//提示字三秒消失 } } 
                               script> 
                                html> 

展示结果:

JS高级笔记 js基础知识总结笔记

images:

JS高级笔记 js基础知识总结笔记

本文《JS高级笔记》版权归weixin_51297617所有,引用JS高级笔记需遵循CC 4.0 BY-SA版权协议。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: