事件

 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. 区间问题 codeforces 422c+hiho区间求差问

    先给出一个经典的区间处理方法 对每个区间 我们对其起点用绿色标识  终点用蓝色标识 然后把所有的点离散在一个坐标轴上 如下图 这样做有什么意义呢.由于我们的区间可以离散的放在一条轴上面那么我们在枚举区 ...

  2. mssql 数据库“查询处理器用尽了内部资源,无法生成查询计划。”问题的处理

    在项目中动态拼接sql语句,使用union all连接结果集,每个查询语句都使用了in(几百个数值).语句如: ,,,..............................) UNION ALL ...

  3. python3.3.2中的关键字(转)

    The following identifiers are used as reserved words, or keywords of the language, and cannot be use ...

  4. WebStorm 启动时提示Failed to load JVM DLL

    环境:win7 64位:时间:2019-11-18 问题描述 启动webstorm 时提示failed to load JVM DLL 解决方法 启动时快捷方式要选到64位的exe

  5. 【Git的基本操作三】基本操作命令

    基本操作 (1) 状态查看操作 git status 作用:查看工作区.暂存区状态 (2) 添加操作 git add [filename] 作用:将工作区文件的 添加/修改,添加到暂存区 (3) 提交 ...

  6. Python字符串、组合数据类型练习

    一.Python字符串练习 1.http://news.gzcc.cn/html/2017/xiaoyuanxinwen_1027/8443.html 取得校园新闻的编号. (这个方法就很多了,一般方 ...

  7. 几种常用的java 实现反转的方法———reverse

    1.最简单的方法 public static String reverse1(String str) return new StringBuffer(str).reverse().toString() ...

  8. Nginx 无法重启

    报错如下 Starting nginx... nginx (pid)already running. 重启nginx时,说多个进程已存在,,, 执行 ps -ef | grep nginx 发现 有多 ...

  9. fastadmin Excel导出时数字被科学计数

    /public/assets/libs/bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js //exportOpt ...

  10. deep_learning_Function_sklearn.preprocessing.LabelBinarizer()

    在多数的机器学习比赛中,给出的标签都是非数字化的,所以我们需要对其进行转换.代码如下: from sklearn import preprocessing feature = [[0,1], [1,1 ...