javascript基本知识点梳理总结

本文介绍了JavaScript的基础概念及其在网页开发中的应用,包括通过ID获取页面元素、处理点击事件、实现全选功能、创建省市级联下拉菜单及轮播图效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

javascript的认识与理解

    javascript也称JS,其主要用于写jsp页面事件触发的函数,基本格式为function  f  (参数列表){ 函数体},其中f为函数名,函数的参数列表可带参可不带参。
  
  在JS中,所有的变量类型均可使用var类型接收,包括数组,整型,float(浮点型),char(字符型)等,其中的变量称为“弱变量”,而在java中的那类型变量为强变量。举例:var  tem = 3;

  同java中一样,在JS中,是严格区分大小写的。

  JS中获取页面元素对象(DOM对象)的方法有三种:
     1.根据ID获取,如   var username = document.getElementById("username");此时得到的为对象,若要取出其具体的数值,要调用其.value属性。
     2.根据name值获取,得到的为对象数组,var userpwd = document.getElementsByName("userpwd");取出对象数组中的value属性值,用alert (userpwd[0].value);因为其为数组,所以带下标。
     3.根据标签名来获取,得到的也为对象数组,var input = document.getElementsByTagName("input");取出对象数组的value属性方法同上。
补充:若要在取出的对象中直接赋值,用到innerHTML方法。

  JS中的常见事件:onload,写在body体中,一进入JSP页面立即加载的方法。
                               onclick,点击事件。
                               onchange事件。

  小技巧:写JS方法时,一般不一次性写完,而是在每创建一个方法的时候都进行alert,看方法是否被调用成功。
                alert弹窗,不点确定程序不会继续往下执行,而console.log(1)会继续往下执行,并在控制台显示信息。

案例代码:全选特效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选特效</title>
</head>
 <script>
  function change(){
  //获取子选框对象,得到一个数组对象
  var chs = document.getElementsByName("ch");
  //获取全选框对象
  var chall = document.getElementById("chall");
  for (var i=0;i<chs.length;i++) {
  //使子选框的状态同全选框的状态保持一致
  chs[i].checked = chall.checked;
  }
  }
 </script>
<body>
<table border="1" align="center">
<tr>
<td>
<input type="checkbox"   id="chall"  onchange="change()"/>全选
</td>
<td>用户名</td>
<td>密码</td>
</tr>

<tr>
<td>
<input type="checkbox" name="ch"/>
</td>
<td>aa</td>
<td>123</td>
</tr>

<tr>
<td>
<input type="checkbox" name="ch" />
</td>
<td>bb</td>
<td>234</td>
</tr>

<tr>
<td>
<input type="checkbox" name="ch"/>
</td>
<td>cc</td>
<td>345</td>
</tr>

<tr>
<td>
<input type="checkbox" name="ch" />
</td>
<td>dd</td>
<td>456</td>
</tr>
</table>

</body>
</html>



下拉菜单(省市级联)
<!DOCTYPE html>
<html>


<head>
<meta charset="UTF-8">
<title>省市级连</title>
</head>
 <script>
   
   
   function sel(){
    //创建数组
    var citys =new Array();
    citys["山西"] = ['大同','太原','阳泉'];
    citys["河南"] = ['洛阳','郑州','开封'];
    citys["北京"] = ['朝阳区','海淀区','昌平区'];
   
    //获取下拉框的值(省份的值),并将city中的请选择清空
        var pro = document.getElementById("province").value;
        document.getElementById("city").options.length = 0;
        //遍历省份下对应的城市
          for (var i in citys[pro]) {
          //将遍历得到的城市创建成option对象
            var op = new Option(citys[pro][i],citys[pro][i]);
          //将创建好的option对象放入city中
          document.getElementById("city").options.add(op);
          }
   


   }
 </script>
<body>
省份:<select onchange="sel()" id="province">
   <option>请选择</option>
   <option value="山西">山西</option>
   <option value="河南">河南</option>
   <option value="北京">北京</option>
     </select> &nbsp; 
      
      城市:<select id="city">
   <option>请选择</option>
        </select>
        <br/>
        用户名<input  onblur="check()" type="text" id="username"/>
              <span id="sp"></span>         
<script>
 
function check(){
var usernameObj = document.getElementById("username");
var username = usernameObj.value;
if(username==""){
document.getElementById("sp").innerHTML="<font color='red'>用户名不能为空!</font>";
usernameObj.focus();
}else{
document.getElementById("sp").innerHTML="";
}
        }
   
</script>
</body>


</html>

轮播图
(JS一般可写在头部或者body体中,也可以从外部JS文件中引入,<script type="text/javascript"src="js/toggle.js" ></script>

JS代码
targetPic = 1;
var ti;
function show(t) {
if(Number(t)){
targetPic = t;
}
clearTimeout(ti);
for (var i = 1; i < 5; i++) {
if (i == targetPic) {
document.getElementById('img' + i).style.display = "block";
} else {
document.getElementById('img' + i).style.display = "none";
}
}
if (targetPic < 4) {
targetPic++;
}else{
targetPic=1;
}
ti = setTimeout("show()","1000");


}

html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>togglePic</title>
</head>
<script type="text/javascript" src="js/toggle.js" ></script>
<style>
#d2{
position: absolute;
left: 635px;
top: 185px;
}
a:link{
font-size: 25px;
text-decoration: none;
color: red;
}
a:visited{
color: brown;
}
</style>
<body onload="show()">
<div align="center">
<p><img src="img/scroll1.jpg" width="400px" height="200px" id="img1"/></p>
<p><img src="img/scroll2.jpg" width="400px" height="200px" id="img2"/></p>
<p><img src="img/scroll3.jpg" width="400px" height="200px" id="img3"/></p>
<p><img src="img/scroll4.jpg" width="400px" height="200px" id="img4"/></p>
</div>
<div id="d2">
            <a href="javascript:show(1)">1</a>
            <a href="javascript:show(2)">2</a>
            <a href="javascript:show(3)">3</a>
            <a href="javascript:show(4)">4</a>
</div>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值