JS的简单操作和表单以及事件

HTML:主要用于往页面上放置所需要的控件。

CSS:主要用来控制页面以及上面控件的样式。

JS:主要用来控制页面上的特效以及数据交互。

JS也分为顺序,条件(IF()... ELSE()),循环(FOR())三种语句,与C#基本一致。

JS定义变量统一用var,定义数组不固定长度和类型,类似C#中的集合。

JS的简单操作:

DOM操作:

一、window:
1、window.onload 页面打开完再执行后面的操作

2、window.open(1,2,3,4) - 打开新页面,
1 - 打开页面的地址:‘http://www......‘
2 - target:_blank 新页面中打开
3 - 打开窗口的样式,toolbar=no:没有工具栏; menubar=no:无菜单栏;status=no:无状态栏;
width,height:打开时的宽度和高度;
left=100:打开窗口距离屏幕的左边距;
resizable=no:打开的窗口大小不可调;
scrollbars=no;不出现滚动条;
location=no;不出现地址栏;

注意:window.open(‘xxx‘,‘‘,‘‘)

3、window.opener - 打开页面2的原页面,可以在页面2中控制原页面

4、window.close(); - 关闭当前页面

5、window.setInterval(‘要执行的代码‘,执行的间隔时间-毫秒); - 重复的执行代码
6、window.setTimeout(‘要执行的代码‘,执行等待的时间-毫秒); - 等待一段时间再执行代码

它俩都可以用一个变量来接收,var a = window.setInterval(‘xxx‘,1000);
如果你想让它停,window.clearInterval(a);

7、window.navigate(‘url‘); - 页面跳转
8、window.moveTo(x,y); - 将浏览器的位置定位
9、window.resizeTo(x, y); -先写!!!!!
10、window.scrollTo(x,y); - 很像锚点

二、window.history
window.history.back();

三、window.location
window.location.href - 当做值来使用,返回当前页面的地址

document对象:

1、id来取值 - document.getElementById(‘要取的ID‘); - 返回的就是一个对象
3、class来取值 - document.getElementsByClassName(‘xxx‘); -返回一堆对象

4、标记名来取值 - document.document.getElementsByTagName(‘xxx‘); -返回一堆对象
2、name来取值 - document.getElementsByName(‘要取的name‘); -返回一堆对象

innerHTML = ‘‘;如果赋值标记,那会把标记编译显示
innerText = ‘‘;放啥给你看啥,放标记也不会给你编译

普通标记可以依靠以上方法来取到内容,但是表单元素需要使用value属性来获取里面的内容

1、添加,删除,修改,获取属性
setAttribute(‘属性名‘,‘属性值‘); - 添加、修改
removeAttribute(‘属性名‘); - 删除
getAttribute(‘属性名‘); --获取属性
2、添加,删除,修改样式
对象.style.样式名=值;

HTML中十二种表单

文本类:
text - 文本框
password - 密码框
textarea - 文本域
hidden - 隐藏域
按钮类:
submit - 提交
button - 普通按钮
image - 图片按钮
reset - 重置按钮
选择类:
radio - 单选框
checkbox - 复选框
select option - 下拉列表
file - 文件上传对话框

radio和checkbox对应的值应该放在一个label中,并且设置label的for=对应的ID!!!

HTML事件
onclick - 点击事件
ondblclick - 双击事件
onmouseover / onmouseout - 鼠标移入/移除事件
onmousemove - 鼠标移动时触发
onchange - 内容改变时触发(焦点丢失时触发)
onfocus - 焦点进入事件
onblur - 焦点丢失事件
onkeydown / onkeyup / onkeypress - 按键按下、抬起、按下并抬起

注意!!!
表单元素,添加了runat = "server",就变成了服务器控件,服务器就可以看到它了,
此表单元素的onclick事件是js代码事件,onserverclick是C#服务器代码事件
vs
服务器控件,OnClick是C#服务器事件,OnClientClick是js事件

时间: 2024-08-03 15:38:34

JS的简单操作和表单以及事件的相关文章

jquery.validate.js【简单实用的表单验证框架】

在线演示1 本地下载 原文链接:http://www.gbtags.com/gb/share/5749.htm 最近在做用户登录.注册.以及用户中心...然后之前在慕课网学的jquery.validate用得着地方了,根据自己需求进行了细节修改,重要是样式方面吧. 第一次发表这些,说得不好不要介意,开始吧.首先: $("#form").validate({ //在这里面编辑 }); 验证的时候常常需要调试,该框架内置了一个方法,如下: debug:true, //调试模式(并不会提交)

jquery.validate.js【简单实用的表单验证框架】【进阶版】

这个是这个插件的官网和我找到的一个中文博客.(虽然插件的名字叫做jquery.validte.js,但其实,这个插件的名字叫jquery validation). 基础的用法可以去看冷子欲的文章或者上面的博客,我这里就不详细介绍了. 首先最重要的一点,所有要验证的域都要在form里,同时这些域都要有name属性. 详细内容请见原文链接:http://www.gbtags.com/gb/share/5765.htm 1. 默认validate参数的初始化: 这个插件如果要用,肯定很多页面都会用到,

Fort.js – 时尚、现代的表单填写进度提示效果

Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradient.Sections 以及 Flash 四种效果,满足开发的各种场合需要. 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 真是好东西!13种非常动感的页面加载动画效果 你见过吗?9款超炫的复选框(Checkbox)效果 时尚设

【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯.这些特性使JSON成 为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络

js监听input等表单输入框的变化事件oninput

js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变化的,复制粘贴也不能监听到,于是就用到了oninput事件来监听文本框value值的改变.由于是手机端页面没有考虑IE 这货.过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现,但是这存在着一些不好的用户体验.比如onchange事件只在键盘或者鼠标操作改变

简单的Jquery表单验证

本段代码举了一个最简单的表单验证实例,就是判断输入框是否为空而已,大家可以根据这个原理,加入正则表达式判断,实现各种功能强大的表单验证功能 <html>    <head>        <title>Validate empty fields</title>        <style type="text/css">            body{font-family:"Trebuchet MS",

DIV+CSS+JS仿Select下拉表单网页特效源代码下载

DIV+CSS+JS仿Select下拉表单 原文:DIV+CSS+JS仿Select下拉表单网页特效源代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463331830784.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <

python简单实现用户表单登录

实现简单的用户表单验证登录 user="desperado" pwd="123456" s=0 for i in range(10): if s < 3: username = input("用户名:") password = input("密码:") if username == user and password == pwd: print("welcome,login successful")

JSP简单练习-用户注册表单

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.get