DOM对象属性
事件
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对象属性的更多相关文章
- DOM对象属性(property)与HTML标签特性(attribute)
HTML中property与attribute是极易混淆的两个概念.大多数时候这两个单词都翻译为"属性",为了区分二者,一般将property翻译为"属性",a ...
- JavaScript学习-4——DOM对象、事件
本章目录 --------window对象 --------document对象 --------事件 一.window对象 函数调用: 自己封装的函数只写:函数名(): 数学函数Math 例:绝对值 ...
- jQuery对标签、类样式、值、文档、DOM对象的操作
jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...
- 如何通过源生js获取一个元素的具体样式值 /* getCss:获取指定元素的具体样式的属性值 curElement:[dom对象] attr:[string] */
昨天的博客些的真的是惨不忍睹啊!!!但是我的人生宗旨就是将不要脸的精神进行到底,所以,今天我又来了.哈哈哈哈哈! 方法一:元素.style.属性名:(这个有局限性--只能获取行内样式的值,对于样式表或 ...
- HTML DOM对象的属性和方法
HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 docum ...
- 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery基础(样式篇,DOM对象,选择器,属性样式)
1. $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真 ...
- javascript总结44: DOM对象的dataset属性方式
1 DOM设置属性的特殊方式: DOM对象的dataset属性方式获取data-xxx方式定义的属性 由于我们经常需要在标签上自定义属性来存储数据或状态,但是如果用传统的方式操作起来比较繁琐,而且不熟 ...
- jQuery easyUI id选择器 类选择器 标签选择器 属性选择器 及DOM对象和jQuery相互之间的转换
首先导入js文件 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
随机推荐
- 发明专利定稿&递交申请啦,开心
也不想写些什么,只是想简单的分享一下当前的心情! 第一版到最后一版中间因为各种事情耽误,一直弄到现在.5月中旬找的专利代理局中间连续修改很多次,从大改到小改,再到微调真的是学习到了! 下面就是搞定&l ...
- 服务端相关知识学习(三)Zookeeper的配置
前面两篇文章介绍了Zookeeper是什么和可以干什么,那么接下来我们就实际的接触一下Zookeeper这个东西,看看具体如何使用,有个大体的感受,后面再描述某些地方的时候也能在大脑中有具体的印象.本 ...
- centos安装配置mariadb
CentOS7下使用yum安装MariaDB CentOS 6 或早期的版本中提供的是 MySQL 的服务器/客户端安装包,但 CentOS 7 已使用了 MariaDB 替代了默认的 MySQL.M ...
- java文件上传复制等功能
package com.sitech.message.controller.task;import java.io.File;//引入类 import java.io.FileInputStream; ...
- css 单位
CSS 有几个不同的单位用于表示长度. 一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等. 长度有一个数字和单位组成 ...
- Nginx访问限制配置
Nginx访问限制配置 nginx访问限制可以基于两个方面,一个是基于ip的访问控制,另一个是基于用户的信任登陆控制 下面我们将对这两种方法逐个介绍 基于IP的访问控制 介绍: 可以通过配置基于ip的 ...
- fastadmin 列表展示时字段值截取
{field: '字段名', title: __('lang中的语言名'),formatter:function(value,row,index){ value=value?value:''; var ...
- Hive(七)Hive参数操作和运行方式
Hive参数操作和运行方式 1.Hive参数操作 1.hive参数介绍 hive当中的参数.变量都是以命名空间开头的,详情如下表所示: 命名空间 读写权限 含义 hiveconf 可读写 hive ...
- 自然语言处理(三) 预训练模型:XLNet 和他的先辈们
预训练模型 在CV中,预训练模型如ImagNet取得很大的成功,而在NLP中之前一直没有一个可以承担此角色的模型,目前,预训练模型如雨后春笋,是当今NLP领域最热的研究领域之一. 预训练模型属于迁移学 ...
- Python——变量的作用域
原创声明:本文系博主原创文章,转载及引用请注明出处. 1. 在编程语言中,变量都有一定的作用域,用来限定其生命周期,且不同类型的变量作用域不同. 在Python中解释器引用变量的顺序(优先级)为:当前 ...