事件

 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. SQL SERVER 相关

    while循环 declare @sum int; declare @i int; ; ; ) begin ) begin set @sum=@sum+@i; end ; end select @su ...

  2. Huge Packet Drops (Tx drops) Observed on NetScaler

    Huge Packet Drops (Tx drops) Observed on NetScaler 来源  https://support.citrix.com/article/CTX215843 ...

  3. BZOJ4887可乐题解--矩阵运算

    题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=4887 分析 话说这道题经常见到类似模型来计数算期望,概率啊,然而我太蒻了都不会做,今天看 ...

  4. 上述代码在JavaScript事件处理中

    上述代码在JavaScript事件处理中很常见,主要设置为与旧版本的Internet Explorer(主要在IE9之前)兼容,因为旧版本的IE不支持标准的W3C事件处理规范. 此代码中的e表示事件对 ...

  5. C#字符串和16进制字符串之间的转换

    将字符串编码成 16进制 字符串表示: using System;using System.Collections.Generic;using System.Linq;using System.Tex ...

  6. 深入学习Mybatis框架(二)- 进阶

    1.动态SQL 1.1 什么是动态SQL? 动态SQL就是通过传入的参数不一样,可以组成不同结构的SQL语句. 这种可以根据参数的条件而改变SQL结构的SQL语句,我们称为动态SQL语句.使用动态SQ ...

  7. Delphi ActiveX的使用

    樊伟胜

  8. 使用metamask钱包

    一.安装火狐浏览器metamask插件 打开火狐浏览器的附件组件,搜索metamask 点击第一个 点击“添加到Firefox” 添加成功后,浏览器右上角有一个狐狸标志 点击这个标志,打开插件 二.创 ...

  9. Hive优化(十一)

    Hive优化 ​ Hive的存储层依托于HDFS,Hive的计算层依托于MapReduce,一般Hive的执行效率主要取决于SQL语句的执行效率,因此,Hive的优化的核心思想是MapReduce的优 ...

  10. 内核模式构造-Mutex构造(RecursiveAutoResetEvent)

    internal sealed class RecursiveAutoResetEvent : IDisposable { private AutoResetEvent m_lock = new Au ...