前端技术——javascript

最新推荐文章于 2024-05-06 10:59:29 发布
最新推荐文章于 2024-05-06 10:59:29 发布
阅读量113 收藏
点赞数
文章标签： 前端 javascript ViewUI
原文链接：http://www.cnblogs.com/StingLon/p/9816670.html
版权

javascript

 JavaScript 是一种轻量级的编程脚本语言.

作用：被设计向html页面添加交互行为使页面具有动态效果。

 

功能案例：

1.简单数据校验

2.图片轮播

3.定时弹出广告

4.表单校验

5.隔行换色

6.复选框的全选效果

7.省市联动效果

 

 

一、组成部分

分为三部分：
1.核心（ECMAScript）：包含语法、关键字等
2.文档对象模型（DOM）：整个html页面的内容 允许程序和脚本动态地访问和更新文档的内容
3.浏览器对象模型（BOM）：整个浏览器相关内容

 

1.核心（ECMAScript）：包含语法、关键字等

（1）获取元素内容：
document.getElementById(id).value;

 

二、核心（ECMAScript）：包含语法、关键字等：

1.alert();

2.点击弹出：

  <button type="button" οnclick="alert('dss')">dddsdasd</button>

3.

<p id="d"></p>
<script type="text/javascript">
document.getElementById("d").innerHTML="sds";</script>

 

4.注释  ：  //  和/* ..... */

5. var

6.定义对象及属性

<script type="text/javascript">
var dag={
name: "da",
age:"2",
he:"20Kg"
};
alert(dag.name);
</script>

 

7.数组：

<script type="text/javascript">
var dd=["a","d"]
alert(dd[0]);
</script>

 

8.typeof

9.

 

三、DOM

文档对象：

1.数字

2.字符串

3.日期

4.自定义对象

 

四、BOM

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

浏览器对象包括 ：
Window(窗口)
Navigator(浏览器)
Screen (客户端屏幕)
History(访问历史)
Location(浏览器地址)

 

 

 

 五、案例

 1.简单数据校验功能实现案例：

<script>
function ss(){
var vv=document.getElementById("username").value;
  if(vv==""){

alert("用户名不能为空")}
}
</script>
</head>

<body>
<form action="" method="post" οnsubmit="return ss()">
xx<input type="text" name="username" id="username"/>
<br/>
pp<input type="password" name="password"/>
<button>x</button>
</form>
</body>

 

 

2.图片轮播
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
border:1px solid white ;
width: 500px;
height: 350px;
margin: auto;
text-align: center;
}
</style>

<script >
var i=1;
function changeImg(){
i++;
document.getElementById("img1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
</head>

<body>
<div id="">
<input type="button" value="下一张" οnclick="changeImg()" />
<img src="../img/1.jpg" width="100%" height="100%" id="img1"/>
</div>
</body>

 

3.定时弹出广告

4.表单校验

5.隔行换色

案例：

<script>
window.οnlοad=function(){
//1.获取表格
var eT= document.getElementById("t1");
//2.tbody的行数长度
var len= eT.tBodies[0].rows.length;
//3.遍历
for(var i=0;i<len;i++){
if(i%2==0){
//对偶数行设置颜色
eT.tBodies[0].rows[i].style.backgroundColor="pink";
}else{
//对奇数行设置颜色
eT.tBodies[0].rows[i].style.backgroundColor="red";
}
}
}
</script>

<boby>

<table border="1" width="500" height="50" align="center" id="t1">

xxxx

</table>

</boby>

6.复选框的全选效果

案例：

<script>
function checkall() {
var ch = document.getElementById("checkall");
if (ch.checked == true) {
var cheoneOne = document.getElementsByName("checkone");
for (var i = 0; i < cheoneOne.length; i++) {
cheoneOne[i].checked = true;
}
} else {
var cheoneOne = document.getElementsByName("checkone");
for (var i = 0; i < cheoneOne.length; i++) {
cheoneOne[i].checked = false;
}
}
}
</script>

<boby>

<table border="1" width="500" height="50" align="center" id="t1">

     <th><input type="checkbox" οnclick="checkall()" id="checkall" /></th>

xxxx

</table>

</boby>

 

7.省市联动效果

<script type="text/javascript">
//首先建立一个你需要省，和它对应的市的数组，如下：
var cityList = new Array();
cityList['北京市'] = ['朝阳区', '东城区', '西城区', '海淀区', '宣武区', '丰台区', '怀柔', '延庆', '房山'];
cityList['上海市'] = ['宝山区', '长宁区', '丰贤区', '虹口区', '黄浦区', '青浦区', '南汇区', '徐汇区', '卢湾区'];
cityList['广州省'] = ['广州市', '惠州市', '汕头市', '珠海市', '佛山市', '中山市', '东莞市'];
cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];
cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];
cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];
cityList['江苏省'] = ['南京市', '苏州市', '无锡市'];
cityList['浙江省'] = ['杭州市', '宁波市', '温州市'];
cityList['四川省'] = ['四川省', '成都市'];
cityList['海南省'] = ['海口市'];
cityList['福建省'] = ['福州市', '厦门市', '泉州市', '漳州市'];
cityList['山东省'] = ['济南市', '青岛市', '烟台市'];
cityList['江西省'] = ['江西省', '南昌市'];
cityList['广西省'] = ['柳州市', '南宁市'];
cityList['安徽省'] = ['安徽省', '合肥市'];
cityList['河北省'] = ['邯郸市', '石家庄市'];
cityList['河南省'] = ['郑州市', '洛阳市'];
cityList['湖北省'] = ['武汉市', '宜昌市'];
cityList['湖南省'] = ['湖南省', '长沙市'];
cityList['陕西省'] = ['陕西省', '西安市'];
cityList['山西省'] = ['山西省', '太原市'];
cityList['黑龙江省'] = ['黑龙江省', '哈尔滨市'];
cityList['其他'] = ['其他'];

/**科普小知识
*Option(text,value) 返回包含下拉列表框中的所有选项的一个数组，text==选项文本值；value==文本值
*add(new,old) 用于向<select>中添加一个<option>标签，
new表示新添加到old之前的Option对象，
如果old为null，那则直接添加到<select>所有选项的末尾
*for(in) 循环遍历对象的属性 ，例：for(var i in cityList)
这里的i==cityList的属性，就是省份名称
例：for (var j in city[i])
这里的j==cityList[i]的属性，cityList中下表为i的属性的属性，就是每个城市的index（下标）
**/
//然后写一个方法把这一大长串的数组给他调到你需要的地方去
function change() {
var pVal = document.getElementById("province").value; //获取省份列表中的值
var c = document.getElementById("city"); //获取城市列表
c.options.length = 0; //清除当前城市列表中的值
for (var i in cityList) { //循环遍历cityList的属性
if (i == pVal) { //判断当i等于省份列表中的值时;
for (var j in cityList[i]) { //循环遍历cityList[i]的属性
c.add(new Option(cityList[i][j], cityList[i][j]), null)
//城市列表的末尾增加一个<option>选项，text：cityList[i][j]，value：cityList[i][j]
}
break;
}
}
}
function allCity() {
var p = document.getElementById("province"); //获取省份列表
for (var i in cityList) { //循环遍历cityList的属性
p.add(new Option(i, i), null);
//省份列表的末尾增加一个<option>选项，text：i，value：i
}
}
window.onload = allCity;

</script>

<style type="text/css">
.cascade { float: left; width: 120px; height: 30px; }
.cascade select { width: 100%; height: 100%; }
</style>

</head>

<body>


<div class="cascade">
<select id="province" οnchange="change();">
<option>--请选择省份--</option>
</select>
</div>

<div class="cascade">
<select id="city">
<option>--请选择市--</option>
</select>
</div>

</body>

 

转载于:https://www.cnblogs.com/StingLon/p/9816670.html

baodao0341
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web 前端开发技术 —— JavaScript
敲代码的小李同学的博客
02-02 416
总结 JavaScript 内容。
JavaWeb——JavaScript
qq_45821255的博客
06-25 4377
本文介绍了前端相关的基础知识，适合主要学习后端而想快速把前端知识过一遍。
js省市联动
wanglilong2013的博客
07-25 386
思路:通过二维数组实现省市联动。 第一步：创建一个二维数组来保存省份与城市var cityList = new Array(); cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山']; cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青
前端开发——Javascript知识（介绍）
qq_64552181的博客
03-29 1405
JavaScript的基础知识、直接写在html或者写在js文件中、注释、直接量
前端学习——JavaScript
love_is_zero的博客
03-09 1028
基本概念 JavaScript是最流行的脚本语言，是轻量级的编程语言。插入html以后使静态页面动起来。 JavaScript和Java无直接关系，当时Java很火，叫JavaScript也是为了沾光，不过后来JavaScript也很火。 JavaScript代码通常被放在<script>标签中或者存在js文件中再引用。在HTML中，放在head或者body标签中，为了界面的整洁通常放在head标签或者文档尾部。 字面量与变量 ...
前端技术——7——jQuery
kaoa000的专栏——非淡泊无以明志，非宁静无以致远
03-14 2933
jQuery是继prototype之后又一个JavaScript框架，是一个快速、简洁的JavaScript库，使用户能更方便的处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互；jQuery能够使用户的html页保持代码和内容分离，即不用再在html中插入一堆js来调用命令了，只需定义id即可。 什么是jQuery对象： jQuery对象就是通过jQuery包装DOM对象后产生的对象；jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么
前端——JavaScript基础语法
温良
07-23 2390
是增强用户体验，可以交互的语言 引入JS的方式 内部方式——直接写在页面中 外部方式 基本语法 注释 输入输出语句 输入框 prompt(“提示内容”); 弹出警告框 alert(“提示内容”); 控制台输出 console.log(“显示内容”); 页面内容输出 document.write(“显示内容”); 变量和常量 java是弱类型语言，定义变量时不需要区分数据类型 原始数据局类型 typeof ...
前端——html拖拽原理
编程知识分享，主打前端
12-05 2万+
大家好，我是yma16，本文分享关于 前端——html拖拽原理。 vue3系列相关文章： vue3 + fastapi 实现选择目录所有文件自定义上传到服务器 前端vue2、vue3去掉url路由“ # ”号——nginx配置 csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板 认识vite_vue3 初始化项目到打包 python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示 让大模型分析csdn文章质量 —— 提取csdn
前端必备技能——TypeScript与JavaScript区别
weixin_42397937的博客
04-06 1266
TypeScript逐渐成为前端工程师必备的技能之一，本文将指导你了解并认识TypeScript，然后知道它与JavaScript的区别。特点如下所示javascript是一种动态类型语言，这类语言不会给变量指定类型，而是在赋值时得到数据类型。JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都可以使用 JavaScript。案例一： JavaScript会在变量赋值时得到数据类型var a=123;a='abc;a=true;
web前端——JavaScript基础
03-06
思维导图式笔记， 笔记来源https://blog.csdn.net/qq_38490457/article/details/109257751
前端网络——Ajax使用
01-08
ajax(Asynchronous javaScript and XML 异步的javascript和xml)可实现异步，局部的获取数据 Ajax咋刚开始一看还有点稀里糊涂的，怎么去理解呢？ 这是开发者已经订好的规则，我们只要记住固定的代码，就可以使用，...
前端学习（三）——javaScript学习笔记（一）认识、数据类型、循环判断.xmind
08-09
前端学习（三）——javaScript学习笔记（一）认识、数据类型、循环判断.xmind
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
此资源为我跟着B站up主【遇见狂神说】java系列视频中前端入门部分学习过程中所写 大部分和视频保持一致，有一些自己的理解和一些扩展的部分
前端毕业设计——淘宝网
10-14
基于vue2.0和vuex框架所写，具备基本的淘宝的功能
【前端领域高频笔试面试】—— JavaScript高级相关
热门推荐
商务合作 | 共同学习 | 携手共进
11-12 8万+
JavaScript高级相关笔试面试题38道
使用IIS部署Vue项目
最新发布
weixin_44656422的博客
05-06 302
使用IIS部署Vue项目，后端必须跨域，不要在Vue中用proxy跨域，那个只在dev环境中有用！IIS安装，不用全部打勾，有些他默认就是方块 ■ 选择性安装的，就维持原样就可以。
大模型部署之前端页面编写框架，我选streamlit
人工智能
04-30 856
Streamlit是一个开源的Python库，它让数据科学家和开发者可以快速创建和分享美观的，交互式的Web应用。无需拥有前端开发经验，任何人都可以使用Streamlit将数据脚本转换为分享给非技术用户的交互式Web应用。它简化了Web应用的开发流程，让开发者能够专注于数据和业务逻辑，而不是UI代码。Streamlit的设计哲学是简洁高效，它通过减少样板代码的使用，使得创建数据驱动的应用变得前所未有的简单。
5-用户权限控制（前端）
qq_53568730的博客
04-29 332
注意：此时虽然可以实现用户权限控制的菜单显示，但仍可以通过url访问不属于自己权限的页面（这需要通过动态路由技术实现）3.在对应的侧边框组件中获取菜单数据，并通过循环遍历将其显示到页面。1.登录成功后，调用状态管理中对应的设置菜单的方法。2.将后端返回的菜单数据存入Cookie中。
Web前端开发技术——HTML,CSS,JavaScript 答案
05-20
3. JavaScript：一种编程语言，用于为网页添加交互性和动态效果。 这三种技术是构建现代 Web 应用程序的基础。HTML 提供了页面的结构，CSS 提供了页面的样式和布局，而 JavaScript 则为页面添加了交互性和动态效果...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值