码迷,mamicode.com
首页 > Web开发 > 详细

9、第九周 - WEB开发基础 - Document文本、样式、事件操作

时间:2018-09-30 20:12:49      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:区别   更改   rip   索引   conf   nts   font   innerhtml   red   

docmount的操作是JavaScript中,比较重要一个知识点。 

docmount 文本内容操作

docmount 的标签查找,分为:间接查找、直接查找。

两者的区别:
	直接查找:
		前面的章节中,已讲过(通过ID、class样式进行查找)
	间接查找:
		文件内容操作:
			innerText  修改网页的信息为文本内容(全网页修改)
			innerHTML  设定超链接(全网页修改)
			values      
				input   value 获取当前标签中的值
				select  获取选中的value值(selectedIndex)
				textarea  value 获取当前标签中的值

 1、文本操作:innerText、innerHTML

操作如下:
<body>
    <div id="s1">
        <div>谷歌</div>
        <div>百度</div>
    </div>
</body>
======================================
console操作:
>obj = document.getElementById(‘s1‘)
>obj.innerText = "<a href=‘http://www.gm99.com‘>台湾</a>"
"<a href=‘http://www.gm99.com‘>台湾</a>" #修改文本内容
>obj.innerHTML = "<a href=‘http://www.gm99.com‘>台湾</a>"
"<a href=‘http://www.gm99.com‘>台湾</a>" #设定超链接的
效果:可以直接看浏览器,效果的变动

 2、文本操作:value的获取

A、input 标签获取

<body>
    <input type="text" id="i2">
</body>

========================
console操作:
>obj = document.getElementById(‘i2‘)
	<input type=?"text" id=?"i2">?
>obj.value = "请输入名字"
	"请输入名字"   #输入框中,固定值
效果:请直接查看浏览器

 B、select 标签获取 (selectedIndex 可根据索引操作)

<body
    <select id="i3">
        <option value="l1">北京</option>
        <option value="l2">上海</option>
        <option value="l3">广州</option>
    </select>
</body>
==================================================
console操作:
>obj=document.getElementById(‘i3‘)
	<select id=?"i3">?<option value=?"l1">?北京?</option>?<option value=?"l2">?上海?</option>?<option value=?"l3">?广州?</option>?</select>?
>obj=document.getElementById(‘i3‘)    
	<select id=?"i3">?…?</select>?
>obj.value=‘l2‘ 
	"l2"  #可用value 更改默认值
>obj.value=‘l3‘
	"l3"
>obj.selectedIndex  (获取默认值)
	0
>obj.selectedIndex=1 (可通过索引的方式更换值)
	1
>obj.selectedIndex=2
	2

 C、textarea 标签获取value 值

<body>
    <textarea id="i4"></textarea>
</body>

=======================

console操作:
>obj=document.getElementById(‘i4‘)
	<textarea id=?"i4" style=?"margin:? 0px;? height:? 77px;? width:? 206px;?">?</textarea>?
>obj.value
	""
>obj.value
"python NB "
>obj.value = ‘chen1203‘
"chen1203" #更改值 

 案例

设定values值,可通过获取鼠标动态事件的方式,让值做变更

<body>
    <div style="width: 600px;margin: 0 auto;">
        <input id="i1" onfocus="Focus();" onblur="Blur();"  type="text" value="请输入关键字">
    </div>
    <script>
        function Focus() {
            var tag = document.getElementById(‘i1‘);
            var val = tag.value;
            if (val == "请输入关键字") {
                tag.value="";
            }
        }
        function Blur() {
            var tag = document.getElementById(‘i1‘);
            var val = tag.value;
            if (val.length == 0) {
                tag.value="请输入关键字";
            }
        }
    </script>
</body>

效果:当鼠标放到框内,字体消失,光标提输入;鼠标移除,提示字体恢复。

  

二、Docmount 样式、标签、表单及其他操作

1、docmount 操作样式

  • className 获取样式的名称
  • classList 获取样式的列表

案例如下:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            color: #5655ff;

        }
        .c2 {
            background-color: lemonchiffon;
        }

        .c3 {
            margin: 0 auto;
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="d1" class="c1 c2 ">
            国庆节快到了
    </div>
</body>


console 操作:
第一种,添加样式的方式
>obj=document.getElementById(‘d1‘)
	<div id=?"d1" class=?"c1 c2 ">?
            国庆节快到了
    ?</div>?
>obj.classList
	DOMTokenList(2) ["c1", "c2", value: "c1 c2 "]
>obj.className
	"c1 c2 "
>obj.classList.add(‘c3‘)
	undefined
>obj.className
	"c1 c2 c3"
>obj.classList.remove(‘c3‘)
	undefined
>obj.className
	"c1 c2"

第二种添加样式的方式
>obj = document.getElementById(‘i1‘)
 	<input id=?"i1" onfocus=?"Focus()?;?" onblur=?"Blur()?;?" type=?"text" value=?"请输入关键字">?
>obj.style.color = ‘red‘
 	"red"
>obj = document.getElementById(‘i1‘)
 	<input id=?"i1" onfocus=?"Focus()?;?" onblur=?"Blur()?;?" type=?"text" value=?"请输入关键字" style=?"color:? red;?">?
>obj.style.fontSize = "16px" 
	"16px"
>obj.style.backgroundColor = "red"
	"red"

 #注意格式,style.fontSize  ,要添加什么样样式,就需要:obj.样式标签.样式名称 = 参数 

2、docmount 属性及标签操作

A、 属性操作:

  • attributes 查看标签里面拥有的属性
  • setAttribute 在标签里面设置属性
  • getAttributes 获取标签中属性的value 值
  • removeAttributes 移除标签里面的属性

案例如下:

<body>
	 <input id=?"i1" onfocus=?"Focus()?;?" onblur=?"Blur()?;?" type=?"text" value=?"请输入关键字">?
 </body>

console 操作:
>obj= document.getElementById(‘i1‘)
	<input id=?"i1" onfocus=?"Focus()?;?" onblur=?"Blur()?;?" type=?"text" value=?"请输入关键字">?
>obj.value
	"发大发"
>obj.value
	"请输入关键字"
>obj.setAttribute(‘xxxx‘,‘chen1203‘)
>obj
	<input id=?"i1" onfocus=?"Focus()?;?" onblur=?"Blur()?;?" type=?"text" value=?"请输入关键字" xxxx=?"chen1203">?
>obj.removeAttribute(‘chen1203‘)
>obj
	<input id=?"i1" onfocus=?"Focus()?;?" onblur=?"Blur()?;?" type=?"text" value=?"请输入关键字" xxxx=?"chen1203">?
>obj.removeAttribute(‘xxxx‘)
>obj
	<input id=?"i1" onfocus=?"Focus()?;?" onblur=?"Blur()?;?" type=?"text" value=?"请输入关键字">?
>obj.getAttribute(‘value‘)
	"请输入关键字"

B、创建标签,并添加到HTML中:
  a、字符串形式
    var tag=‘<p><input type="text" /></p>‘;
  b、对象的形式
    docmount.createElement(‘div‘)

案例如下:

<body>
    <input type="button" onclick="addEle1();" value="+">
    <input type="button" onclick="addEle2();" value="增加按钮">
    <div id="i1">
        <p><input type="text" /></p>
    </div>
    <script>
        function addEle1() {
            //字符串形式, 创建一个标签,将标签添加到ID为i1里面
            var tag = ‘<p><input type="text" /></p>‘;
            document.getElementById("i1").insertAdjacentHTML("beforeEnd",tag);
        }
        function addEle2() {
            //对象的形式,创建一个标签,将标签添加到ID为i1里面
            var tag = document.createElement(‘input‘);
            tag.setAttribute(‘type‘,‘text‘);
            tag.style.fontSize = ‘16px‘;
            tag.style.color = ‘red‘;

            var tag2 = document.createElement(‘p‘);
            tag2.appendChild(tag);//设定p标签,把input标签放到p标签里面
            document.getElementById("i1").appendChild(tag2)
        }
    </script>
</body>

 效果:查看页面去点击+ 、增加按钮,会增加输入框。

3、docmount 提交的表单以及其他

A、表单提交
  document.getElementById(‘f1‘).submit()

案例如下:

<body>
    <form id="f1" action="http://www.gm99.com">
        <input type="text" />
        <input type="submit" value="提交">
        <a onclick="submitForm();">点击提交</a>
    </form>
    <script>
        function submitForm() {
            document.getElementById(‘f1‘).submit()
        }
    </script>
</body>

效果:提交、点击提交,发生操作的话,产生事件页面发生跳转了

 B、其他操作

	调试工具按钮
 	console.log(“请点击”)      调试获取日志文件
 	
 	弹出对话框,提示信息
 	alert("chen1203")		  弹出对话框
 	v = confirm("chen1203")   弹出对话框,提示信息

    设定跳转链接
 	location.href   
 		location.href = ”https://www.gm99.com“    #重定向,页面的
 		location.reload()     #页面刷新
以上小命令测试,可以console中操作,查看效果
  设定定时器
    var l1 = setInterval(function(){
    },5000)  //定时器设定,会按照每5分钟执行一次
    clearInterval(l1); //清除定时器格式

    var l2 = setTimeout(function(){
    },5000)  //定时器设定,会按照每5分钟执行一次
    clearTimeout(l2); //清除定时器格式

 案例如下:

 <body>
    <div id="status"></div>
    <input type="button" value="删除" onclick="deleteEle();">
    <script>
        function deleteEle() {
            document.getElementById(‘status‘).innerText = ‘正在删除.....‘;
            setTimeout(function () {
                document.getElementById(‘status‘).innerText = ‘删除完成‘;
            },5000)
        }
    </script>
</body>

 效果:观察浏览器的字体提示变化。提供删除按钮-->正在删除(5秒过后)-->删除完成

 

三、Docmount 事件处理

1、docmount 操作样式

9、第九周 - WEB开发基础 - Document文本、样式、事件操作

标签:区别   更改   rip   索引   conf   nts   font   innerhtml   red   

原文地址:https://www.cnblogs.com/chen170615/p/9725230.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!