事件

 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. 区间dp 整数划分问题

    整数划分(四) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 暑假来了,hrdv 又要留学校在参加ACM集训了,集训的生活非常Happy(ps:你懂得),可是他最近 ...

  2. [js]$.ajax标准写法

    $.ajax({     url:"http://www.microsoft.com",    //请求的url地址     dataType:"json",  ...

  3. Struts的相关基础

    为什么要用struts? 1.该框架基予mvc的开发设计模式上的,所以拥有mvc的全部优点,他在M.V.C上都有涉及,但它主要是提供一个好的控制器和一套定制的标签库上,有mvc的一系列优点:层次分明, ...

  4. 销售订单(SO)-API-登记销售订单

    登记销售订单可以在新增订单的时候就登记:并不是去修改 flow_status 为booked,而是赋值action request:就下面两句 l_action_request_tbl(l_actio ...

  5. js扩展Date对象的方法,格式化日期格式(prototype)

    扩展:Date.prototype.format = function(format){     var o =  {     "M+" : this.getMonth()+1, ...

  6. python之字典一

    字典的定义: 前面我们说过列表,它适合于将值组织到一个结构中并且通过编号对其进行引用.字典则是通过名字来引用值的数据结构,并且把这种数据结构称为映射,字典中的值没有特殊的顺序,都存储在一个特定的键(k ...

  7. Java学习笔记【十三、多线程编程】

    概念 Java 给多线程编程提供了内置的支持.一个多线程程序包含两个或多个能并发运行的部分.程序的每一部分都称作一个线程,并且每个线程定义了一个独立的执行路径. 多线程是多任务的一种特别的形式,但多线 ...

  8. Django静态资源配置

    Settings文件设置 INSTALLED_APPS 设置 确保 django.contrib.staticfiles 添加到INSTALLED_APPS中 默认是已经添加上的 INSTALLED_ ...

  9. IntelliJ IDEA 如何设置代码提示和代码模板

    在编写java代码时如何设置不分大小写提示和设置快捷输出模板代码 首先设置不分大小写,settings-Editor-General-CodeCompletion 将红框的Match case取消打勾 ...

  10. 如何设置zencart买满多少免运费?

    有时候会希望客户买满多少免运费,当订单总金额大于免运费的订单金额设值时,免运费.下面介绍一下zencart设置买满多少免运费: 1.进入后台–模块管理(Modules)–总额计算(Order Tota ...