js（JavaScript）

最新推荐文章于 2022-06-24 15:41:38 发布

菜鸟gb

最新推荐文章于 2022-06-24 15:41:38 发布

阅读量179

点赞数

分类专栏： Java学习文章标签： js的BOM js的DOM 基本语法函数事件（阻止）

本文链接：https://blog.csdn.net/weixin_42738506/article/details/83387124

版权

Java学习专栏收录该内容

35 篇文章 0 订阅

订阅专栏

一.js的简介
1.什么是js
js可以嵌套到HTML中（基于对象）和（事件触发）的脚本语言
特点
A.交互性
B.安全性 js不能直接访问本地磁盘
C.跨平台浏览器只要具备js解析器
2.js能干嘛
1）js动态修改（新增、删除）HTML标签和CSS代码
2）js动态做校验数据
3）js的历史及组成
ECMAScript(js的基本语法和对象) BOM(浏览器对象模型) DOM(文档对象模型)
4）js的引用方式
A.内嵌脚本
<input type="button" value="button" οnclick="alert('XXX')"/>
B.内部脚本
<input type="button" value="button"/>
       <script type="text/javascript">
       alert('XXX');
       </script>
   C.外部脚本
   1.创建一个js文件
   2.在HTML中引入js脚本
   <input type="button" value="button"/>
<script type="text/javascript" src="demo1.js"></script>
总结：
1.JS往哪儿放
在不影响HTML页面加载效果情况下，越晚加载越好
2.编程建议 <script>引入外部文件的时候标签中不建议写脚本内容
二.js的基本语法
1)变量
var a=12;
a="javascript";
a='哈哈';
var b=true;
2)原始数据类型(了解)
1)number:数字类型
2)string:字符串类型
3)boolean:布尔类型
4)null:空类型
5)undefined:未定义的
注意：
number string boolean 伪对象
数据类型转换
number boolean 转 string
toString()

string boolean 转 number
parseInt()
parseFloat()
boolean类型 parseInt() 不能转 number NaN
string类型 parseInt()可以转 number '123哈哈456' 转'123'

string number 转 boolean
Boolean()
number转 boolean 可以非0为true 0为false
string转boolean 可以非空为true 空为false

string boolean 转 number
Number()
boolean类型 Number() 可以转 number true 1 false 0
string类型 Number() 如果是数字可以转如果 '123哈哈' 转换结果 NaN

3)引用数据类型
java:Object obj=new Object();
js: var obj=new Object();
4)运算符
1.赋值运算符
=
var a=5;
2.算术运算符
+ - * / % ++ --
+:遇到字符串连接符拼接
-:遇到字符串转为数字 Number() 再计算
*:遇到字符串转为数字 Number() 再计算
/:遇到字符串转为数字 Number() 再计算 7/2=3.5 number
3.逻辑运算符
&& ||
4.比较运算符
> < >= <= == !=
== ：忽略数据类型的值比较
===：全等比较值与数据类型
5.三目运算符
3>2?"大于":"小于"
6.void运算符
<a href="javascript:void(0)">点击我吧</a>
7.类运算符
typeof() :判断数据类型返回数据的该类型
instanceof:判断类型返回布尔值
alert(typeof(obj));//object
alert(obj instanceof Object);//true

5)逻辑语句
if:条件
number转 boolean 可以非0为true 0为false
string转boolean 可以非空为true 空为false
switch:
jdk1.7 string
for:
for in *****
var arr=[1,2,3,"aa",true];
       for(index in arr){
       alert(arr[index]);
       }

三.js的内置对象
1.Number
var myNum=new Number(value);
var myNum=Number(value);
方法：
toString 把数字转换为字符串，使用指定的基数。
valueOf 返回一个 Number 对象的基本数字值。
2.Boolean
var flag=new Boolean(value);   //构造函数
var flag=Boolean(value);       //转换函数
方法：
toString() 把逻辑值转换为字符串，并返回结果。
valueOf() 返回 Boolean 对象的原始值。
3.String
new String(s);
String(s);
方法
length 字符串的长度
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
indexOf() 检索字符串。
lastIndexOf() 从后向前搜索字符串。
split() 把字符串分割为字符串数组。
substring() 提取字符串中两个指定的索引号之间的字符。
substr() 从起始索引号提取字符串中指定数目的字符。
toUpperCase() 把字符串转换为大写
4.Array
new Array();
       new Array(size);
       new Array(element0, element1, ..., elementn);

       var arr=[];
       var arr=[1,"aa"];

       属性：
       length 设置或返回数组中元素的数目。
       方法：
       join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
       pop() 删除并返回数组的最后一个元素
       push() 向数组的末尾添加一个或更多元素，并返回新的长度。
       reverse() 颠倒数组中元素的顺序。
       sort() 对数组的元素进行排序
5.Date
var myDate=new Date()
方法
getFullYear() 从 Date 对象以四位数字返回年份
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。 ****
6.Math
var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);
注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，
像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把
Math 作为对象使用就可以调用其所有属性和方法。
方法：
PI 返回圆周率（约等于3.14159）。
abs(x) 返回数的绝对值。
ceil(x) 对数进行上舍入。
floor(x) 对数进行下舍入。
round(x) 把数四舍五入为最接近的整数。
sqrt(x) 返回数的平方根。
pow(x,y) 返回 x 的 y 次幂。 **
random() 返回 0 ~ 1 之间的随机数。 ***
7.RegExp
var reg=new RegExp(pattern);
可选参数： attributes
var reg=/^正则表达式$/
属性方法：
[0-9]:数字
[A-Z]:A-Z
[a-z]:a-z
[A-z]:所有字母（大小写字母）
\d:代表数值
\D:非数值
\w:单词字符
\W:非单词字符
\s:查找的空白字符
\S：查找的非空白字符
n+:至少一次
n*:出现0次或多次
n?:出现0次或1次
{5}：出现5次
{2,8}:出现2~8次
方法
test 检索字符串中指定的值。返回 true 或 false
四.js的函数
1.js函数定义方式
A.普通函数
语法：
function 函数名(参数列表){函数体}
实例：
function method(){
   alert("XXX");
   }
   method();
   B.匿名函数(闭包)
   语法：
   var 函数名=function(){}
   案例：
   var method=function (){
       alert("XXX");
       }
method();
C.对象函数(了解)
语法：
new Function(参数1,参数2，参数3);
注意点：
1.形参只能是string类型 ,最后一个只能是函数体
2.函数体也是string
案例：
var fn=new Function("a","b","alert(a+b)");
fn(2,22);
2.函数中的参数问题
1.形参不用var来修饰
2.形参和是实参个数可以不一样(只多不少)
案例：
function fn(a,b,c){
           var sum=a+b+c;
           alert(sum);
           //arguments 数组内部对参数进行封装的对象
           for(var i=0;i<arguments.length;i++){
           alert(arguments[i]);
           }
           }

           fn(1,2,3,4,5);
   3.函数中返回值问题
   1.定义函数的时候不用定义返回值类型 var
   2.返回值可以通过return体现
   案例：
   function fn(a,b){
   return a+b;
   }
   alert(fn(2,3));
   4.js中的全局函数
   1）编码问题
   decodeURI() 解码某个编码的 URI。
   encodeURI() 把字符串编码为 URI。

   decodeURIComponent() 解码一个编码的 URI 组件。
   encodeURIComponent() 把字符串编码为 URI 组件。

   unescape() 对由 escape() 编码的字符串进行解码。
   escape() 对字符串进行编码。

   2）强转
   parseInt()
   parseFloat()
   3)
   Number()
   Boolean()
   4)*****
   eval(); 计算 javascript字符串把它们作为脚本代码执行

五.js的事件****
   事件
   事件源
   响应行为
1)事件的绑定方式***
A.将事件与响应行为内嵌到HTML代码中
<input type="button" value="button" οnclick="alert('XXX')"/>
B.将事件内嵌到HTML代码中，将响应行为封装成函数**
<input type="button" value="button" οnclick="fn()"/>
       <script type="text/javascript">
       function fn(){
       alert('XXX');
       }
       </script>
C.事件与响应结果完全从HTML分离出来***
<input type="button" value="button123" id="btn"/>
<script type="text/javascript">
       var btn=document.getElementById("btn");
       //alert(btn.value);
       btn.οnclick=function fn(){
       alert('XXX');
       }
       </script>
2)常用的事件
A.onclick()点击事件
B.onchange()用户改变域的内容
当用户改变域内容会触发该事件
实现二级菜单联动
案例：
<body>
           <select id="city">
           <option value="bj">北京</option>
           <option value="tj">天津</option>
           <option value="sh">上海</option>
           </select>
           <select id="area">
           <option>昌平区</option>
           <option>海淀区</option>
           <option>朝阳区</option>
           </select>
           </body>
           <script type="text/javascript">
           var city=document.getElementById("city");
           city.οnchange=function(){
           var option=city.value;
           // alert(option);
           switch(option){
           case 'bj':
           var area= document.getElementById("area");
           area.innerHTML="<option value='cp'>昌平区</option><option value='hd'>海淀区</option><option value='cy'>朝阳区</option>";
           break;
           case 'tj':
           var area= document.getElementById("area");
           area.innerHTML="<option value='tg'>塘沽区</option><option value='nk'>南开区</option>";
           break;
           case 'sh':
           var area= document.getElementById("area");
           area.innerHTML="<option value='pd'>浦东区</option>";
           break;
           }

           }
           </script>
C.onblur 元素失去焦点
onfocus 元素获得焦点
案例：
<body>
           <label for="txt">用户名:</label>
           <input type="text" name="username" id="txt"/><span id="active"></span>
           </body>
           <script type="text/javascript">
           var txt=document.getElementById("txt");
           //元素获取焦点事件
           txt.οnfοcus=function(){
           //绑定友好提示
           var span= document.getElementById("active");
           span.innerHTML="用户名最少长度是六位";//动态绑定文字
           span.style.color="green";
           }
           //元素失去焦点事件
           txt.οnblur=function(){
           //绑定友好提示
           var span= document.getElementById("active");
           //alert(txt.value);
           if(txt.value.length<6){
           span.innerHTML="对不起您的格式有误";
           span.style.color="red";
           }else{
           span.innerHTML="√";
           span.style.color="green";
           }
           }
           </script>
D.onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
案例：
<body>
       <div id="d1">div</div>
       </body>
       <script type="text/javascript">
       var div=document.getElementById("d1");
       div.οnmοuseοver=function(){
       this.style.backgroundColor="green";
       }
       div.οnmοuseοut=function(){
       this.style.backgroundColor="red";
       }
       </script>
E.
onload 某个页面或图像被完成加载
等待页面加载完成之后，在执行onload事件里面的代码
案例：
<script type="text/javascript">
               window.οnlοad=function(){
               var span =document.getElementById("s");
               span.innerHTML="HELLOJS";
               }
               </script>
               </head>
               <body>
               <span id="s"></span>
               </body>
   3)阻止事件的默认行为
   IE:window.event.returnValue=false;(IE低版本)
   w3c:传递过来的事件对象.preventDefault();
   案例：
   <body>
       
       
       <a href="demo1.html" οnclick="return false">点击我吧</a>
       </body>
       <script type="text/javascript">
       function fn(e){
       //IE:window.event.returnValue=false;(IE低版本)
           //w3c:传递过来的事件对象.preventDefault();
           if(e&&e.preventDefault){
           alert("w3c");
           e.preventDefault();//return false;
           }else{
           alert("ie");
           window.event.returnValue=false;
           }
       }
       </script>
   4）js中的冒泡事件阻止事件传播
   IE:window.event.cancelBubble=true;//IE低版本
   w3c:传递过来的事件对象.stopPropagation();
   案例：
   <body>
       <div οnclick="fn1()" style="width: 100px; height: 100px; background-color: blue; padding: 50px;">
       <div οnclick="fn2(event)" style="width: 100px; height: 100px; background-color: red;">
       XXX
       </div>
       </div>
       </body>
       <script type="text/javascript">
       function fn1(){
       window.alert("fn1");
       }
       function fn2(e){
       //window.alert("fn2");
       // IE:window.event.cancelBubble=true;//IE低版本
           // w3c:传递过来的事件对象.stopPropagation();
           if(e&&e.stopPropagation){
           alert("w3c");
           alert("fn2");
           e.stopPropagation();
           }else{
           alert("ie");
           alert("fn2");
           window.event.cancelBubble=true;
           }
       }
       </script>
六.js的BOM
BOM(浏览器对象模型)
alert();
window.alert();
1)window对象
弹框方式
提示弹框 alert();
确认弹框 confirm();
确认弹框有返回值：点击确定 true 点击取消（叉） false
输入弹框 prompt();
输入框有返回值：点击确定返回输入框的值点击取消 null ""
open()
案例：
window.open("../jsCode/demo1.html");
定时器
A.setTimeout(函数,毫秒值); 过多少毫秒值后调用该函数（只调用一次）
案例：
window.setTimeout(function() {
                   alert("XXX");
               }, 3000);
   B. clearTimeout(参数);
   案例：

   <body>
               <input type="button" value="button" οnclick="closer()"/>
               </body>
               <script type="text/javascript">
               /* window.setTimeout(function() {
                   alert("XXX");
               }, 3000); */

               var timer;
               var fn=function(){
               alert("XXX");
               timer=setTimeout(fn, 3000);
               }
               var closer=function(){
               window.clearTimeout(timer);
               }

               fn();
               </script>
       C.setInterval(函数，毫秒值);//过多少毫秒之后重复调用该函数
       clearInterval(参数);清除定时任务
       案例：
       <body>
               <input type="button" value="button" οnclick="closer()"/>
               </body>
               <script type="text/javascript">
               var timer=setInterval(function() {
                  alert("nihao");
               }, 3000);
               var closer=function(){
               window.clearInterval(timer);
               }
               </script>
   案例：
   注册成功之后，5秒钟跳转到某个页面
   <body>
       恭喜您，终于注册成功了，<span id="s" style="color: red; font-size: 100px;">5</span>秒钟页面自动跳转，如果不跳转<a href="../jsCode/demo1.html">点击这里</a>
       </body>
       <script type="text/javascript">
       var time=5;
       var timer;
       timer=window.setInterval(function() {
          var span=document.getElementById("s");
          if(time>=1){
          span.innerHTML=time;
          time--;
          }else{
          //页面跳转事件结束
          window.clearInterval(timer);
          location.href="../jsCode/demo1.html";
          }
       }, 1000);
       </script>
   2.location对象
   location.href="链接地址";
   location对象不能省
   window.location.reload();//页面重新刷新
   3.history对象
   历史记录
   back()
   forward()
   go()
   案例：
   <a href="demo8.html">后一页</a>
       
       <input type="button" value="上一页" οnclick="history.go(-1)"/>
       <input type="button" value="下一页" οnclick="history.go(1)"/>
七.js中DOM
DOM(文档对象模型)****
文档对象模型：用来操作页面元素
DOM：document节点
作用：通过他对页面元素进行操作和定位
NODE操作
1.NODE的元素
A.元素类型
B.文本类型
C.文档类型
D.属性类型
E.注释类型
2.NODE的获取方式
1）通过元素获取
document.getElementById("elementid");******
document.getElementsByName("name");***
document.getElementsByTagName("input");***
document.getElementsByClassName("classname");
2)通过NODE关系获取引用
document.parentNode;//获取该元素的父节点
document.childNode;//获取该元素的子节点
document.firstChild;//获取该元素的第一个子节点
document.lastChild;//获取该元素的最后一个子节点
document.nextSibling;//获取该元素的下一个兄弟节点
document.previousSibling;//获取该元素的上一个兄弟节点
3)NODE的属性
节点中文 nodeType nodeName nodeVale
元素 1 tagname null
属性 2 attr 属性值
文本 3 #text 文本值
注释 8 #comment 注释的文字
文档 9 #document null

4)NODE节点的增删改查
A.创建一个节点
1)创建一个元素的节点 document.createElement();
2)创建属性节点：object.attr=val;
object.setAttribute(sttr,value);
3)创建一个文本节点
object.innerTHML=val;
object.createTextNode();

B.添加节点
1.parentNode.appendChild(newNode);
说明：
向节点子节点末尾追加一个新的子节点，如果文档中存在新的节点，将其从文档中删除，重新插入新的节点
2.parentNode.insertBefore(newNode,exisingNode);
说明：
如果文档中存在新的节点，将其从文档中删除，重新插入新的节点
3.parentNode.replace(newNode,oldNode);
说明：
如果文档中存在新的节点，将其从文档中删除，重新插入新的节点
4.parentNode.removeChild(node);
说明：
找到文档中存在的节点，删除其子节点
-----------------------------------------------------------------------------------------------
总结：
1.定位页面
<input type="text" name="uname" id="txt"/>
document.getElementById("txt");
document.getElementsByName("uname");
document.getElementsByTagName("input");
2.可以查看和修改属性
setAttribute(name,value);
getAttribute(name);
3.空格换行的处理
使用层级关系访问节点
document.parentNode;//获取该元素的父节点
document.childNode;//获取该元素的子节点
document.firstChild;//获取该元素的第一个子节点
document.lastChild;//获取该元素的最后一个子节点
document.nextSibling;//获取该元素的下一个兄弟节点
document.previousSibling;//获取该元素的上一个兄弟节点
4.节点的操作
   创建节点： createElement("节点名");
   元素前添加新的节点：insertBefore("新节点","旧节点");
   节点后拼接新节点：appendChild(新节点);
   删除子节点：removeChild(节点);
   克隆节点：cloneNode(deep); //false 只克隆该标签 true 克隆所有标签
   替换节点：replaceChild(新,旧);
   5.NODE操作表格
   table对象中的属性和方法
       属性：rows获取所有行
       方法：
       insertRow(行下标);
       deleteRow(行下标);
       tableRow属性和方法
           属性：
           cells获取所有单元格
           rowIndex:获取行位置下标
           方法：
           insertCell(单元格下标);
           deleteCell(单元格下标);
tableCell属性和方法
       属性：
       innerHTML:设置文本的HTML标签
       innerText:设置文本内容（纯文本）
       className:类样式
小结：
js可以修改CSS样式
1）元素对象 setAttribute("style","CSS样式");
2）通过className绑定CSS样式

菜鸟gb

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js（JavaScript）

一.js的简介 1.什么是js js可以嵌套到HTML中（基于对象）和（事件触发）的脚本语言特点 A.交互性 B.安全性 js不能直接访问本地磁盘 C.跨平台浏览器只要具备js解析器 2.js能干嘛 1）js动态修改（新增、删除）HTML标签和CSS代码 2）js动态做...
复制链接

扫一扫