与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的页面交互的更多相关文章

  1. Js与flash交互:在html页面中用js与MyReport插件交互

    Html页面与flash的加载 如下图,flash是html页面的一个插件节点. js与flash进行交互,首先要处理好html页面和swf的加载问题. Swf调用外部js方法,要确保js方法已存在, ...

  2. javascript语法 1.运算符 2. 流程控制 3. 函数 4. 四种变量 5. 数据类型的运用 6. js页面交互

    1.运算符 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  3. js与native交互

    js与native交互 UIWebView Native调用JS,使用stringByEvaluatingJavaScriptFromString来解释执行js脚本. //script即为要执行的js ...

  4. jquery实现页面交互的几个小例子

    翻看了以前留下的笔记,发现自己竟然做过这么多的页面交互效果,没有使用原生js,全是通过jquery实现的,于是把他们整理下来,附上表现效果图及源代码 1 业务应用:授权商品组和删除商品组 本质:复选框 ...

  5. js与C++交互及C++解析json

    转载:http://zhidao.baidu.com/link?url=LLuWzwMmpfVcQeSGv1CrAfRXpnZaetm9xypqwMW6zxLhhKES-rITAsG0-Ku-bSMA ...

  6. 史上最全的 UIWebview 的 JS 与 OC 交互

    来源:伯乐在线 - 键盘风筝 链接:http://ios.jobbole.com/89330/ 点击 → 申请加入伯乐在线专栏作者 其实一直想给大家整理一下JS与OC的交互,但是没有合适的机会,今天借 ...

  7. iOS原生App与H5页面交互笔记

    文/MikeZhangpy(简书作者)原文链接:http://www.jianshu.com/p/4ed3e5ed99c6著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 最近在做一个项 ...

  8. MXBridge - 插件式JS与OC交互框架

    概述 MXBridge,提供一个插件式的JavaScript与Objective-C交互的框架,通过JavaScriptCore实现,插件式扩展Obejctive-C接口以供JavaScript调用. ...

  9. js和native交互方法浅析

    一.背景 最近接触公司项目,需要和原生app做交互,由此业务需求,开始了学习探索之路. 二.解决方案之WebViewJavascriptBridge 想要和app交互,必须在app上先把bridge进 ...

随机推荐

  1. springboot之freemarker 和thymeleaf模板web开发

    Spring Boot 推荐使用Thymeleaf.FreeMarker.Velocity.Groovy.Mustache等模板引擎.不建议使用JSP. 一.Spring Boot 中使用Thymel ...

  2. 发布一个史上最简单代码最少Javascript Timer,解决一切定时执行的问题

    这个函数实现如下 function TimerStart(func,delay) { var TimerID = window.setInterval( function() { if(!func() ...

  3. osg 在fbx模型中添加自定义节点

  4. 迭代器iterator-生成器generator

    1. 迭代 根据记录的前面的元素的位置信息 去访问后续的元素的过程 -遍历 迭代 2. 可迭代对象 iterable 如何判断可迭代对象的3种方式 能够被迭代访问的对象 for in 常用可迭代对象- ...

  5. (七)UML之用例图

    用例图主要用来描述“用户.需求.系统功能单元”之间的关系.它展示了一个外部用户能够观察到的系统功能模型图. [用途]:帮助开发团队以一种可视化的方式理解系统的功能需求. 用例图所包含的元素如下: 1. ...

  6. Java多线程——线程池使用示例

    示例代码: import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; public cla ...

  7. 表格组件---bootstrapTable

    bootstrapTable中文官方网站http://bootstrap-table.wenzhixin.net.cn1.文件引用 //1.引用Jquery <script src=" ...

  8. CTF 专用文件监控系统

    # -*- coding: utf-8 -*-#use: python file_check.py ./ import osimport hashlibimport shutilimport ntpa ...

  9. VS2010调试warning MSB8012:路径不匹配问题

    VS2010调试warning MSB8012:路径不匹配问题 调试信息如下: warning MSB8012: TargetPath(D:\J2KCodecSDK\Samples\C++\a_Eas ...

  10. [转帖]postgres csv日志和查看用户权限

    postgres csv日志和查看用户权限 最近在使用postgres 时遇到的2个问题,顺便记录一下查到的比较好的资料. 怀疑postgres在执行SQL时报错,程序日志中有无明确异常信息.通过查看 ...