js的页面交互
与html标签建立关系
//获取标签,js如何与html标签建立联系 两种方式
//1、
let num = document.getElementsByClassName('d1');
console.log(num[0]);
let n = document.getElementById('aa');
console.log(n);
let c = document.getElementsByTagName('div');
console.log(c);
//2、同css选择器 querySelector querySelectorAll
let p1 = document.querySelector(".d2");
// querySelector 是选一个
// querySelectorAll 是选多个,放在数组里面
console.log(p1);
建立联系的两种方式
获取并修改html标签的内容及属性
//修改样式
//1.找到修改目标
let d1 = document.querySelector('.d1');
//2.获取样式
console.log(d1.style.color);
// getAttribute 也是获取标签属性,也是只能获取行间式的属性
console.log(d1.getAttribute("background"));
//前两种获取方式只能获取行间式的属性
//想要获取内联外联的属性,需要getComputedStyle
let d4 = getComputedStyle(d1,null).background;
console.log(d4);
//3.修改样式
d1.style.color = "black";
console.log(d1.style.color);
//修改内容
d1.innerText = "大沙地";
d1.innerHTML = "<b>哈哈</b>";
//修改属性 setAttribute(属性key 属性value)
d1.setAttribute("title","别点我");
获取及修改样式内容
事件
鼠标事件
//鼠标事件
// onclick ondblclick onmouseover onmouseleave onmousedown onmouseup
// onclick 单击触发(只是鼠标左键)
// ondblclick 双击触发(也是鼠标左键)
// onmouseover 鼠标移到上面就触发
// onmouseleave 鼠标移开触发
// onmousedown 鼠标处于点下状态触发,所以单击也会触发(时间短),不区分左右键
// onmouseup 鼠标松开触发,不区分左右键
// 在鼠标事件绑定的函数中,我们可以修改任意标签的属性,没有了css之前的限制
// 自身的属性页可以修改,this就是代表自身标签
//eg:
let ms = document.querySelector('.d1');
ms.ondblclick = function (ev) {
//鼠标事件绑定函数这里传入的参数就是鼠标的一些相关信息
//我们比较关心的几个参数是:clientX clientY altKey ctrlKey shiftKey
console.log(ev.clientX, ev.clientY);
console.log(ev.altKey, ev.ctrlKey , ev.shiftKey);
// this.setAttribute("background-color","blue"); 这样只会给标签
// 添加一个background-color属性,而不会添加到他的样式中
// this.setAttribute('style',"background-color:blue;");
//修改是直接在行间式里修改
};
ms.onmousedown = function (ev) {
this.setAttribute('style',"background-color:blue;");
};
ms.onmouseup = function (ev) {
this.setAttribute('style',"background-color:black;");
};
鼠标事件
键盘事件
// 键盘事件
// 键盘事件的话需要鼠标点一下才会触发(相当于选择你这个程序开始输入键盘的值了)
//onkeydown onkeyup onkeypress
// onkeydown 键盘按下去就会触发,并且不松开的话会一直触发
// onkeyup 键盘松开就会触发
// onkeypress 也是键盘按下去就会触发,但是不松开的话只会触发一次
// ev 里面重要的几个参数,也有altKey ctrlKey altKey
// 还有一个keyCode 表示的是每个键的键盘编码
document.onkeypress = function (ev) {
console.log(ev);
};
document.onkeydown = function (ev) {
console.log(1111111,ev);
};
键盘事件
表单事件
`
表单事件 onchange oninput
onchange:当input输入框失去焦点时才触发绑定的函数
oninput:内容改变就会触发绑定的函数
`;
let t = document.querySelector('.t1'); // 获取需要绑定事件的标签
let h = document.querySelector('.h1'); // 获取要操作的标签
t.oninput = function () {
h.innerText = this.value; // 把h标签的内容改成输入的内容
};
表单事件
js的页面交互的更多相关文章
- Js与flash交互:在html页面中用js与MyReport插件交互
Html页面与flash的加载 如下图,flash是html页面的一个插件节点. js与flash进行交互,首先要处理好html页面和swf的加载问题. Swf调用外部js方法,要确保js方法已存在, ...
- javascript语法 1.运算符 2. 流程控制 3. 函数 4. 四种变量 5. 数据类型的运用 6. js页面交互
1.运算符 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- js与native交互
js与native交互 UIWebView Native调用JS,使用stringByEvaluatingJavaScriptFromString来解释执行js脚本. //script即为要执行的js ...
- jquery实现页面交互的几个小例子
翻看了以前留下的笔记,发现自己竟然做过这么多的页面交互效果,没有使用原生js,全是通过jquery实现的,于是把他们整理下来,附上表现效果图及源代码 1 业务应用:授权商品组和删除商品组 本质:复选框 ...
- js与C++交互及C++解析json
转载:http://zhidao.baidu.com/link?url=LLuWzwMmpfVcQeSGv1CrAfRXpnZaetm9xypqwMW6zxLhhKES-rITAsG0-Ku-bSMA ...
- 史上最全的 UIWebview 的 JS 与 OC 交互
来源:伯乐在线 - 键盘风筝 链接:http://ios.jobbole.com/89330/ 点击 → 申请加入伯乐在线专栏作者 其实一直想给大家整理一下JS与OC的交互,但是没有合适的机会,今天借 ...
- iOS原生App与H5页面交互笔记
文/MikeZhangpy(简书作者)原文链接:http://www.jianshu.com/p/4ed3e5ed99c6著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 最近在做一个项 ...
- MXBridge - 插件式JS与OC交互框架
概述 MXBridge,提供一个插件式的JavaScript与Objective-C交互的框架,通过JavaScriptCore实现,插件式扩展Obejctive-C接口以供JavaScript调用. ...
- js和native交互方法浅析
一.背景 最近接触公司项目,需要和原生app做交互,由此业务需求,开始了学习探索之路. 二.解决方案之WebViewJavascriptBridge 想要和app交互,必须在app上先把bridge进 ...
随机推荐
- python 中 logging 模块的 log 函数以及坑
记录下吧,一个日志的函数,但有个坑是在调用函数时需要先将函数实例化为一个变量,否则进入某个循环时会多次刷新日志: """ 日志模块 """ ...
- PAT 甲级 1046 Shortest Distance (20 分)(前缀和,想了一会儿)
1046 Shortest Distance (20 分) The task is really simple: given N exits on a highway which forms a ...
- PAT 甲级 1040 Longest Symmetric String (25 分)(字符串最长对称字串,遍历)
1040 Longest Symmetric String (25 分) Given a string, you are supposed to output the length of the ...
- Windows .net服务器系列 wmic命令使用示例--Examples of WMIC commands for Windows .NET SERVER Family
1.0 Method execution: NICCONFIG (Win32_NetworkAdapterConfiguration) WMIC NICCONFIG WHERE Index=1 CAL ...
- MySQL 5.7 源码中的目录结构
MySQl Server的源码可以直接去Github浏览. 这里我们选择5.7版本的:https://github.com/mysql/mysql-server/tree/5.7 也可以通过: git ...
- git推送远程仓库以及分支介绍
1.介绍 我们要把本地仓库的项目推送到远程服务器,首先我们得有自己的服务器,一般我们选择码云和github,码云和github的操作差不多,今天我们再次介绍码云的使用 2.码云的使用 第一步:首先我们 ...
- SSRF——漏洞利用(二)
0x01 概述 上篇讲述了SSRF的一般用法,用http协议来进行内网探测,攻击内网redis,接下来讨论的是SSRF的拓展用法,通过,file,gopher,dict协议对SSRF漏洞进行利用. 0 ...
- 【C/C++开发】C++ Thread对象封装
Pthread库是posix linux的线程库,调用接口如下,我们模仿JDK,对Thread进行封装,具体的业务逻辑只需要如同Thread一样实现run方法即可. 线程操纵函数(简介起见,省略参数) ...
- Red Hat Enterprise 6.5 在虚拟机上将系统语言修改为中文
Red Hat Enterprise 6.5 在虚拟机上将系统语言修改为中文 说明:本文是个人在使用RedHat时候为方便而设置的,作为学习札记记录. 在虚拟机安装RedHat时候会跳过语言的安装选项 ...
- csu 1756: Prime
1756: Prime Submit Page Summary Time Limit: 3 Sec Memory Limit: 128 Mb Submitted: 281 ...