javascript_基础整理

最新推荐文章于 2024-07-16 16:43:05 发布

Mr_HuangJW

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量347

点赞数

分类专栏： HTML_基础部分文章标签： javascript HTML

本文链接：https://blog.csdn.net/Mr_HuangJW/article/details/53406549

版权

HTML_基础部分专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.document.write()

document.write(mystr+"<br>");换行符<br>

document.write("1 2 3");输出不保留空格

document.write("  "+"1");空格符&nbsp

document.write("<span style='white space:pre;' >"+"1 2 3"+"</span>");使空格可以保留下来，比&nbsp更简洁

2.alert 弹出警告窗口

1.有多个alert按顺序弹出窗口

3.confirm确认对话框的使用

var A=confirm（“Are you Kidding?”）;

if(A==ture){}else{}

或者：

if(confirm("OK?"))

{}else{}

4.prompt消息对话框，用于与用于交互，可输入信息

prompt（str1，str2）;str1不可修改为输入的提示，str2可修改为预设输入内容,返回内容为网址。

5.window.open('URL','窗口名称'，‘可选参数字符串’),window.close()

window.open--------------------------------------------------------------------------

窗口名称由字母数字下划线组成，有些具有特殊意义：
_self:本窗口打开

_blank:新窗口打开

_top:框架网页中在上部窗口创建目标网页,即无框架（顶端）打开

_parent:父窗口打开，若已在顶级框架，与_self等效

除blank外三个，无框架网页显示几乎一样。

可选参数字符串：

height,width,top等，还有menubar(yes,no菜单)，toolbar(yes,no工具条)，scrollbar（yes,no滚动条），status（yes,no状态栏）。

多个用，隔开。如'width=300,（不加单位，默认像素px）height=200,menubar=no,toolbar=no'

window.close()------------------------------------------------------------------------

var A=window.open('URL');

A.close();

6.DOM操作

DOM（Document Object Model）

标签加id=‘ssr’,var A=document.getElementById("ssr");得到不了标签文本，得到的是整个对象。

得到文本的方法：document.getElementById("ssr").innerHTML;

也可以修改对象css样式：A.style.color="red";A.style.fontsize="20";A.style.backgroundColor="#ccc";

也可以显示隐藏文本，显示ssr标记的文本：A.style.display="block";

隐藏ssr标记的文本：A.style.display="none";

还可以改变css中类的赋予：

如<p id="ssr" class="fomer"></p>

现A.classNme="after ";会用css中.after的样式代替.former的样式

还可以取消上述的CSS样式：A.removeAttribute('style');

7.补充函数

<style>

function hide(){}

</style>

8.操作符优先级

算数操作符（乘除>加减）>比较操作符（>=）>逻辑操作符(!,==)>赋值运算符（==）

eg:js=3+30>10&&6*3<2 false

9.switch的case中不写break会怎么样？

从初始switch的case开始一直执行到最后的default中的case。

下面是一个综合的例子，演示了通过函数改变颜色、高宽、显示隐藏及恢复指令。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
    height:400px;
    width:600px;
  border:#333 solid 1px;
  padding:5px;}
p{
  line-height:18px;
  text-indent:2em;}
</style>
</head>
<body>
  <h2 id="con">JavaScript课程</h2>
  <div id="txt"> 
     <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
        <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
        <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
        <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
  </div>
  <form>
  <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
    <input type="button" οnclick="changecolor()" value="改变颜色" >  
    <input type="button" οnclick="changeheight()" value="改变宽高" >
    <input type="button" οnclick="hide()" value="隐藏内容" >
    <input type="button" οnclick="show()" value="显示内容" >
    <input type="button" οnclick="cancel()" value="取消设置" >
  </form>
  <script type="text/javascript">
//定义"改变颜色"的函数
  var A=document.getElementById("con");
  var B=document.getElementById("txt");
  function changecolor(){
      A.style.color="red";
      A.style.background="#ccc";
  }

//定义"改变宽高"的函数
  function changeheight(){
      B.style.height="200px";
      B.style.width="300px";
      /*B.style.width="1800";*/
  }

//定义"隐藏内容"的函数
  function hide(){
      B.style.display="none";
  }

//定义"显示内容"的函数
  function show(){
      B.style.display="block";
  }

//定义"取消设置"的函数
  function cancel(){
      if(confirm("确定要取消所有设置吗？"))
      A.removeAttribute('style');
      B.removeAttribute('style');
  }
  </script>
  </body>
  </html>

Mr_HuangJW

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript_基础整理

1.document.write()document.write(mystr+"");换行符document.write("1 2 3");输出不保留空格document.write("  "+"1");空格符&nbspdocument.write(""+"1 2 3"+"");使空格可以保留下来，比&nbsp更简洁2.alert
复制链接

扫一扫