事件

 onmouseover 鼠标以上事件
 onmouseout    鼠标离开事件
 onclock 鼠标点击事件 
onfocus 获取焦点
onblur 失去焦点
oninput  输入事件
页面直接获取光标:事件源 . focus()
 
小知识
1、replace("被替代的值","替换值") 方法用于在字符串中。用一些字符替换另一些字符
 
表单属性
 
1、type、value、checked、selected、disabled
2、禁用文本框
    A) disabled 禁用文本框
    B) disabled true类型的值都可以用
inp.disabled=true “aaa”;  inp.disabled=false;

案例

  //显示 隐藏二维码
window.onload=function(){
var nodeSmall=document.getElementsByClassName("nodeSmall")[]; //类名取值
var div=document.getElementsByTagName("div")[];//标签取值
console.log(div.className)//获取它的 类名 字符串 //绑定事件 调用事件函数,不要写括号,只写函数名
nodeSmall.onmouseover=fu1;
nodeSmall.onmouseout=fu2;
function fu1(){
//了解 字符串操作,吧字符串中的hide替换成show
/*div.className="erweima show"*/
div.className=div.className.replace("hide","show");
}
function fu2() {
/* div.className="erweima hide"*/
div.className=div.className.replace("show","hide");
} };
  //获取失去焦点
var inp1=document.getElementById("inp1");
inp1.onfocus=function (){
if(this.value==="我是京东"){
this.style.color="#000";
this.value=""
}
};
inp1.onblur =function (){
if(this.value === ""){
this.style.color="#ccc";
inp1.value = "我是京东";
} }
//需求1:点击上面的的input,下面全选或者反选。
//思路:获取了上面的input按钮,只需要判断,checked属性是true还是false,如果是true,
下面的全部变成true;false同理。
var tioInp=document.getElementById("theadInp");
var tbo=document.getElementById("tbody");
var inpArr=tbo.getElementsByTagName("input"); tioInp.onclick=function(){
//费劲版
/* if(tioInp.checked===true){
for(var i=0; i<inpArr.length; i++ ){
inpArr[i].checked=true;
}
}else{
for(var i=0; i<inpArr.length; i++ ){
inpArr[i].checked=true;
}
}*/
//优化版
//被点击的input按钮的checked属性值,应该直接作为下面的所有的input按钮的checked属性值
for(var i=; i<inpArr.length; i++ ){
inpArr[i].checked=this.checked;
} } //需求2:点击下面的的input,如果下面的全部选定了,上面的全选,否则相反。
//思路:为下面的每一个input绑定事件,每点击一次都判断所有的按钮
// checked属性值是否全部都是true,如果有一个是false,
// 那么上面的input的checked属性也是false;都是true,topInp的checked就是true;
for(var i=; i<inpArr.length; i++){
inpArr[i].onclick=function () {
var bool=true;//开辟原则
//检测每一个input的checked属性值。
for(var j=; j<inpArr.length; j++){
if(inpArr[j].checked===false){
bool=false;
}
tioInp.checked=bool;
}
}
}

用户名:<input type="text" onclick="fu(this)"><br><br>
<script>
function fu(aa){
//这里的this window 标签行内调用function的时候,是先通过
//window调用的function
console.log(this);
//只有传递的this才指的是标签本身
console.log(aa)

DOM对象属性的更多相关文章

  1. DOM对象属性(property)与HTML标签特性(attribute)

    HTML中property与attribute是极易混淆的两个概念.大多数时候这两个单词都翻译为"属性",为了区分二者,一般将property翻译为"属性",a ...

  2. JavaScript学习-4——DOM对象、事件

    本章目录 --------window对象 --------document对象 --------事件 一.window对象 函数调用: 自己封装的函数只写:函数名(): 数学函数Math 例:绝对值 ...

  3. jQuery对标签、类样式、值、文档、DOM对象的操作

    jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...

  4. 如何通过源生js获取一个元素的具体样式值 /* getCss:获取指定元素的具体样式的属性值 curElement:[dom对象] attr:[string] */

    昨天的博客些的真的是惨不忍睹啊!!!但是我的人生宗旨就是将不要脸的精神进行到底,所以,今天我又来了.哈哈哈哈哈! 方法一:元素.style.属性名:(这个有局限性--只能获取行内样式的值,对于样式表或 ...

  5. HTML DOM对象的属性和方法

    HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 docum ...

  6. 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery基础(样式篇,DOM对象,选择器,属性样式)

      1. $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真 ...

  8. javascript总结44: DOM对象的dataset属性方式

    1 DOM设置属性的特殊方式: DOM对象的dataset属性方式获取data-xxx方式定义的属性 由于我们经常需要在标签上自定义属性来存储数据或状态,但是如果用传统的方式操作起来比较繁琐,而且不熟 ...

  9. jQuery easyUI id选择器 类选择器 标签选择器 属性选择器 及DOM对象和jQuery相互之间的转换

    首先导入js文件 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

随机推荐

  1. vue打包后css背景图片地址找不到

    背景图片变成了这样:static/css/static/imgs/xxx.jpg 解决方法,修改build/utils,添加   publicPath: '../../'    就行 对比了下,com ...

  2. webpack提取图片文件打包压缩

    抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...

  3. CSS3--transform相关属性

    ---transform属性使用--- 1.过度时间 :transition: transform 2s; 2.transform: 应用 2D 或 3D 转换.可以对元素进行旋转.缩放.移动或倾斜. ...

  4. python中进制转换

    使用Python内置函数:bin().oct().int().hex()可实现进制转换. 先看Python官方文档中对这几个内置函数的描述: bin(x)Convert an integer numb ...

  5. SSM框架中的Mapper.xml文件中的增、删、改、查等操作

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "- ...

  6. c#类生成表

    第一步: 创建MyContext类 public class MyContext:DbContext { public MyContext():base() { } public DbSet<U ...

  7. 《python解释器源码剖析》第6章--python中的dict对象

    6.0 序 元素和元素之间可能存在着某种关系,比如学生姓名和成绩.我希望能够通过学生的姓名找到这个学生的成绩,那么只需要将两者关联起来即可.字典正是这么做的,字典中的每个元素就是一个key:value ...

  8. kubernetes之requests和limits

    说明 1.当集群中的计算资源不很充足, 如果集群中的pod负载突然加大, 就会使某个node的资源严重不足, 为了避免系统挂掉, 该node会选择清理某些pod来释放资源, 此时每个pod都可能成为牺 ...

  9. 1.Shell脚本

    1.Shell脚本 可以将Shell终端解释器当作人与计算机硬件之间的“翻译官”,它作为用户与Linux系统内部的通信媒介,除了能够支持各种变量与参数外,还提供了诸如循环.分支等高级编 程语言才有的控 ...

  10. zabbix 监控TCP状态连接数

    1.zabbix客户端,监控TCP状态脚本,并保存到的定路径.(/usr/local/zabbix-agent/shells) # cat zabbix_linux_plugin.sh #!/bin/ ...