专栏首页凯哥Java常用的web方法 web API(一)

常用的web方法 web API(一)

本文主要讲解web API常用的方法,主要内容如下:

1:绑定事件的几种方式

2:解绑事件的几种方式

3:创建元素的几种方式

4:获取节点的几种方式

一、为元素绑定事件三种方式:

1 对象.on+事件类型=事件处理函数

   例子:  my$("btn").onclick=function(){};

         事件处理函数:可以是命名函数,也可以是匿名函数

2 对象.addEventListener("事件类型",事件处理函数,false);

     例子: my$("btn").addEventListener("click",function(){},false);

3 对象.attachEvent("on"+事件类型,事件处理函数);

例子: my$("btn").attachEvent("onclick",function(){});

为元素解绑事件三种方式

1 对象.on事件类型=null(同一个元素,注册了多个相同的事件,只能执行最后一个)

 例子: my$("btn").onclick=null;

2 对象.removeEventListener("事件类型",事件处理函数名字,false);

 例子: my$("btn").removeEventListener("click",f1,false);

3 对象.detachEvent("on"+事件类型,事件处理函数名字);

例子:l my$("btn").detachEvent("onclick",f1);

总结:addEventListener和attachEvent的区别

   addEventListener 谷歌和火狐值,IE11支持,IE8不支持

       三个参数,第一个参数是没有on的

       这里的this是当前的对象

   attachEvent IE8支持,谷歌和火狐不支持,IE11不支持

       两个参数,第一个参数有on

       这里的this是window对象

最后:用什么方式绑定事件,就用对应的方式解绑事件

二、百度搜索大项目

1.获取文本框,注册键盘抬起事件

my$("txt").onkeyup=function ()

三、创建元素的三种方式

1、 //创建p标签

 //如果是在页面全部加载完毕后通过下面方式创建元素,会把页面中所有的内容全部干掉

document.write("<p>this is p</p>");

2、my$("dv").innerHTML="<p>这是一个P</p>";

3、//创建input标签

var inputObj=document.createElement("input");

inputObj.type="button";

inputObj.value="这是按钮";

//追加到div中

my$("dv").appendChild(inputObj);

四、获取对应节点

//ul的父级节点

console.log(my$("uu").parentNode);

//ul的父级元素

console.log(my$("uu").parentElement);

//ul的所有子级节点

console.log(my$("uu").childNodes);

//ul的所有的子元素

console.log(my$("uu").children);

//ul中第一个子节点

console.log(my$("uu").firstChild);

//ul中第一个子元素

console.log(my$("uu").firstElementChild);

//ul中最后一个子节点

console.log(my$("uu").lastChild);

//ul中最后一个子元素

console.log(my$("uu").lastElementChild);

//某个li的前一个兄弟节点

console.log(my$("three").previousSibling);

//某个li的前一个兄弟元素

console.log(my$("three").previousElementSibling);

//某个li的后一个兄弟节点

console.log(my$("three").nextSibling);

//某个li的后一个兄弟元素

console.log(my$("three").nextElementSibling);

//总结:获取节点的代码,谷歌是获取节点,获取元素的代码,谷歌是获取元素

//但是,到了IE8中,获取节点的代码是获取元素,获取元素的代码,不支持

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 怎么设置tomcat在get请求的中文也不乱码?两种情况下配置

    我们都知道,get请求和post请求的一个比较显著区别就是,在使用post请求的时候,中文不会乱码,但是在使用get请求的时候,如果url后面带有中文就会乱码了...

    凯哥Java
  • 【精选好文】Reddit如何统计每个帖子的浏览量

    之前没听过也没了解过 HyperLogLog,通过翻译这篇文章正好简单学习下。欢迎指正错误~

    凯哥Java
  • 常用的web方法 web API(二)

    在上一篇《常用的web方法 web API(一)》中我们学习了:绑定事件的几种方式、解绑事件的几种方式、创建元素的几种方式、获取节点的几种方式本篇我们将继续学习...

    凯哥Java
  • 从零开始学 Web 之 DOM(七)事件冒泡

    事件冒泡:当有多个元素嵌套,并且这些元素绑定了相同的事件,这时候如果里面的元素事件触发了,那么外面的事件会自动触发。

    Daotin
  • Android瀑布流照片墙实现,体验不规则排列的美感

    传统界面的布局方式总是行列分明、坐落有序的,这种布局已是司空见惯,在不知不觉中大家都已经对它产生了审美疲劳。这个时候瀑布流布局的出现,就给人带来了耳目一新的感觉...

    用户1158055
  • Analog使用中的一些技巧和总结

    Analog是一款用来快速处理日志的开源工具,具有很高的效率,但是生成的结果并不美观,本文就analog使用过程中的一些问题进行总结,讨论如何对analog进行...

    大江小浪
  • 独家 | 建立软件的经济学分析框架,浅议开源软件的经济学特性(附图解)

    人类社会正在加速数字化。一个显而易见的事实是,人们生活、工作的方方面面都离不开各种各样的软件。不久以前,人们还不知道什么是软件;从今往后,软件正在吞噬整个世界[...

    数据派THU
  • Python 速学!不懂怎么入门python的小白看这篇就够了!

    Python是一种非常流行的脚本语言,而且功能非常强大,几乎可以做任何事情,比如爬虫、网络工具、科学计算、树莓派、Web开发、游戏等各方面都可以派上用场。同时无...

    一墨编程学习
  • HIVE:JOIN原理、优化

    hive的一些join操作以及hivejoin操作的优化

    俺也想起舞
  • CSS3 object-fit和object-position

    最近一直忙于将JavaScript学习的笔记整理成电子书,也没什么空闲时间写新的文章。趁着今天有点空闲,决定再来折腾一下CSS3中的两个属性:object-fi...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券