zoukankan      html  css  js  c++  java
  • javascript

      1 一、javascript简介<br />
      2 1、JavaScript是脚本语言,需要有宿主文件,它的宿主文件是html文件<br />
      3 2、JavaScript与Java并没有关系,并不属于一家公司<br />
      4 3、JavaScript的用法<br />
      5     位置(1)head里面(2)body里面(3)/html里面 一般是写在/html里面<br />
      6     <!--<script language="javascript">  脚本内容 </script>  --> <br />
      7 4、三个常用的对话框<br />
      8    alert警告对话框,弹出警告内容<br />
      9    confirm确定对话框,作用是弹出一个可供选择的对话框,点击确定它返回true,点击取消返回false<br />
     10    prompt(“要显示提示的文字”),作用是弹出一个可以输入内容对话框<br />
     11 二、JavaScript语法<br />
     12   1、基本数据类型<br />
     13     字符串,小数,整数,日期时间,布尔类型等<br />
     14   2、都是通用类型var,可以随意储存其他类型的值,也可以直接使用,不用定义,但习惯上是定义<br />
     15   3、类型转换:<br />
     16     一般分为自动转换和强制转换,一般是强制转换<br />
     17     其他类型转换为整数类型:parseInt()<br />
     18     其他类型转换为小数类型:parseFloat()<br />
     19     判断是不是不是一个数字:isNaN() 如果返回值是false证明数字,如果返回值是true证明不是数字<br />
     20   4、运算符:<br />
     21      数学运算符:+ - * / % ++ --;<br />
     22      关系运算符:==  !=  >  >=  <  <=;<br />
     23      逻辑运算符:&&  ||  !;<br />
     24      其它运算符:+= -= *= /= %= ?:<br />
     25   5、语句:<br />
     26      顺序,分支,循环语句<br />
     27      分支语句:if(){}else{}<br />
     28      循环语句:for(初始条件 循环条件 状态改变){循环体}<br />
     29      问题类型:穷举 迭代<br />
     30      用break continue跳出<br />
     31      如果要输出某一个参数的值,输出的值是“+a+”和“+b<br />
     32   6、数组<br />
     33      数组的定义:new Array() ,它的长度是不断变换的,里面可以存放很多类型的数据<br />
     34      数组元素的赋值:a[0]=123, a[1]="123"<br />
     35      数组元素的取值:a[i]<br />
     36      数组属性:a.length数组元素的长度个数<br />
     37      方法:a.sort()排序数组,按照第一个字符排序a.reverse()翻转数组<br />
     38    7、函数:<br />
     39      函数四要素:名称,输入,返回值,加工<br />
     40      定义函数:function add(形参) { 函数体 },函数名为add,输入为参数的形式,返回值可以是var类型也可以return个值;<br />
     41      函数不调用是不会执行的,函数的调用:add(实参)<br />
     42 三、JavaScript的dom操作<br />
     43    1、dom的基本概念,dom是文档对象模型,这种模型为树模型<br />
     44       文档是指标签文档   对象是指标签里的每个元素   模型是指抽象化的东西<br />
     45    2、windows操作对象<br />
     46      (1)属性(值或子对象)<br />
     47         openner:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则openner是null<br />
     48         dialogArgument:对话框返回值<br />
     49         子对象:hisitory,location,document,status,toolbar等<br />
     50         方法(函数):事件(事先设置好的程序,被触发)<br />
     51       (2)window.open("第一部分","第二部分","第三部分","第四部分",)<br />
     52         第一部分:-blank打开方式,在新窗口还是自身窗口<br />
     53         第二部分:控制窗口打开的格式,可以写多个,用空格隔开<br />
     54                 toolbar=no新打开的窗口无工具条<br />
     55                 mennubar=no无菜单栏<br />
     56                 stantus=no无状态栏<br />
     57                 windth height宽高<br />
     58                 left等设置位置<br />
     59                 resizable=no窗口大小不可调<br />
     60                scorllbars=yes出现滚动条<br />
     61                 location=yes  有地址栏<br />
     62             window.open也有返回值,它的返回值是:新打开的窗口对象。<br />
     63        (3)window.close():关闭当前窗口<br />
     64            w.close():关闭保存在变量w中的那个窗口<br />
     65            关闭多个子窗口,先将打开的窗口存入数组内,利用循环卓哥关闭<br />
     66            关闭打开当前窗口的源窗口:window.openner.close()<br />
     67         (4)间隔与延迟<br />
     68            间隔执行一段代码的函数:window.setInterval(“要执行的代码”,间隔的毫秒数)<br />
     69            清除间隔执行:window.clearinterval(间隔的id);循环一次后用来清除间隔执行的代码<br />
     70            延迟一段时间执行某一个代码:window.settTimeout(“要执行代码”,延迟毫秒数)<br />
     71            清除延迟:window.clearTimeout(延迟的id);清除setTimeout<br />
     72         (5)调整页面<br />
     73            window.navigate("url")跳转至目标页面,在谷歌浏览器下有bug<br />
     74            window.moveTo(x,y)移动页面至某一位置,位置由x,y决定<br />
     75           window.resizeTo[宽,高]调整页面的宽度和高度<br />
     76           window.scrollTo()滚动页面至哪里,y代表纵向滚动<br />
     77         (6)模拟对话框和非模态对话框
     78             模态对话框(Modal Dialogue Box),是指用户想要对对话框以外的应用程序进行操作,必须首先对该对话框进行响应。如果单击确定或取消按钮等<br />
     79             将该对话框关闭,它和非模态对话框永远置顶的他们的区别在于当对话框打开是,是否允许用户进行其他对象的操作<br />
     80             打开模态对话框:window.showModaiaLog("url",“向目标对话框传的值”,“窗口特征参数”)<br />
     81             特征参数:用分号分开,像像素用px,dialogHeight,diaLogWidth,center,等<br />
     82             var a=window.dialogArgument用一个参数来获取模态或非模态对话框传递的值<br />
     83        3、windows.history对象<br />
     84           window.history.back();页面进行后退<br />
     85           window.history.forward();页面前进<br />
     86           window.history.go(n);n如果是正数代表前进n个网页,n如果是负数,则代表后退n个页面<br />
     87        4、windows.location对象<br />
     88           location地址栏<br />
     89           var s=window.location.href:获取当前页面的地址<br />
     90           window.location.href="";修改网页地址,跳转到所设立页面<br />
     91           window.location.hostname:主机名,域名,网站名,可用变量接收<br />
     92           window.location.pathname:路径名,可用变量接收<br />
     93         5、window.status对象<br />
     94          status状态栏,可以给状态栏天骄要显示的文字<br />
     95          window.status=“要在状态栏显示的内容”;设置状态栏的文字<br />
     96       6、windows.document对象<br />
     97          (1)找到元素<br />
     98             document.getElemetById("id");根据id最多找到一个<br />
     99             var a=document.getElemetById("id");将找到的元素放在变量中<br />
    100           (2)操作内容<br />
    101             非表单元素<br />
    102              1)获取内容<br />
    103                innerHTML标签里的html代码和文字都获取<br />
    104                innerText只有取的里面的文字<br />
    105                outHTML包括标签本身的内容<br />
    106              2)设置内容<br />
    107                a.innerHTML="";<br />
    108              表单元素<br />
    109             1)获取内容,有两种获取方式<br />
    110               var t=document.f1.t1; form表单id为f1里面的id为t1的input<br />
    111               var t=document.getElementById()直接用id获取<br />
    112               t.value表示获取里面的值<br />
    113             2)设置内容:t.value="内容改变"<br />
    114              小知识点<br />
    115              a herf="www.baidu.com" onclick="return false"加了return flase则不会跳转,默认是return true 按钮也是同样的道理<br />
    116           (3)操作属性<br />
    117              a.setAttribute("属性名","属性值"),设置一个属性,添加或者更改都可以<br />
    118              a.getAttribute("属性名");获得属性的值<br />
    119              a.removeAttribute("属性名");移除属性<br />
    120            (4)操作样式<br />
    121                首先利用元素的ID找到该元素,存在一个变量中<br />
    122                var a=document.getElementById("id");<br />
    123               然后可以对该元素进行操作<br />
    124               a.style="" 样式改变<br />
    125              document.body.style.backgroundColor="颜色";整个窗口的背景色<br />
    126             (5)相关元素操作<br />
    127                var a=documnet.gerElementById("id");找到a<br />
    128                var b=a.nextSibling;找到a的下一个同辈元素,注意包含空格<br />
    129                var b=a.previousSibling;找到a的上一个同辈元素,注意包含空格<br />
    130                var b=a.parentNode找到a的上一级父元素<br />
    131                var b=a.childNodes,找出a的下一级元素,找出来的是数组<br />
    132                var b=a.fistchild 第一个元素 lastchild最后一个 chidNode[n]找到第几个子元素<br />
    133                alert(nodes[i]instanceof Text);判断是不是文本,是返回true,不是返回false,用if判断它的值可以去除空格<br />
    134              (6)元素的创建,添加,删除<br />
    135                 var a=document.gerElementById("id");找到a<br />
    136                 var a=document.createElemet("标签名"):创建一个元素obj.innerHTML=""添加的时候首先要创建一个元素<br />
    137                 a.apppendChild();向a中添加一个子元素<br />
    138                 a.removeChild()删除一个子元素<br />
    139                 列表中a.selectIndex;选中是第几个;<br />
    140                 a.options[a.selectIndex]按下取出第几个option对象<br />
    141               (7)字符串的操作<br />
    142                  var s=new String()或var s="aaa"<br />
    143                  alert(s.toLowerCase())转小写toUpperCase()转大写<br />
    144                  alert(s.substring(3,8))从第三个字符截取到第八个位置<br />
    145                  alert(s.substr(3,8))从第三个位置开始截取,截取八个字符长度,不写后面的数字是截取到最后<br />
    146                  s.split('')将字符按照指定的字符拆开<br />
    147                  s.length是属性<br />
    148                  s.indexOf("")字符在字符串第一次出现的位置<br />
    149                  s.lastIndexof("")字符在字符串最后一次出现的位置<br />
    150                 (8)日期时间的操作<br />
    151                    var d=new Date();当前时间<br />
    152                    var d=new Date(1999,3,2);定义一个时间,1999年4月2日,月份要加1<br />
    153                    a.getFullYear();取年份   d.getMoth();取月份,取出来少1:;d.getDate()取天 d.getDay()取的是星期几<br />
    154                    a.getHours()取小时; d.getMinutes()取分钟; d.getSecibds()取秒<br />
    155                    a.setFullYear():设置年份设置月份的时候记得加1<br />
    156                  (9) 数学函数操作<br />
    157                   Math.ceil();大于当前小数的最小整数
    158                   Math.floor();小鱼当前小数的最大整数
    159                   Math.sqrt();开平方
    160                   Math.round();四舍五入
    161                   Math.random();随机数,0-1之间<br />
    162                  (10)小知识点
    163                    外面双引号,里面的双引号改为单引号;
    164                    在div里面行高设置和整个外面高度一样,才能用竖直居中,居中是行居中。
    165                     文本框取出来的值是字符串,需要用parseint()转化为数字
    166                    s.match(reg); s代表一个字符串,reg代表一个字符串,两者进行匹配,如果两个字符串不匹配,返回一个null。
  • 相关阅读:
    java spring boot 跳转
    了解什么是 redis 的雪崩、穿透和击穿
    小白学k8s(12)-k8s中PV和PVC理解
    小白学k8s(11)-k8s中Secret理解
    小白学k8s(10)-k8s中ConfigMap理解
    小白学k8s(9)-gitlab-runner实现go项目的自动化发布
    小白学k8s(8)-Bazel部署go应用
    记go中一次http超时引发的事故
    小白学k8s(7)helm[v3]使用了解
    小白学k8s(6)使用kubespray部署k8s
  • 原文地址:https://www.cnblogs.com/tonyhere/p/5567475.html
Copyright © 2011-2022 走看看