JS.2

-------===----作用域
判断函数没有
函数有


----————-----+-+-—— window 对象
window.alert("提示文本")   //弹出框
window.confirm("提示信息")  // 有选择 返回true 或 false
window.prompt(" ") // 输入框 返回文本  没有返回null


open("http//www.baidu.com") //打开新的窗口
close()  //关闭窗口


setInterval(函数名, 时间)   //几秒后执行函数(周期)  时间单位为毫秒
clearInterval()   // 取消setInerval设置的 timeout


setTimeout()  // 几秒后执行一次函数 
clearTimeout()  // 取消setTimeout设置的 timeout 


scrollTo() // 把内容滚动到指定坐标


--——————----——-----history 对象(相当于历史记录)
history.back()  // 退回
history.forward()  // 前进

history.go() // 前进到哪


————-------------- location 对象
location.assign(url)  //打开新的连接
location.reload()   //刷新页面
location.replace(newURL)  // 打开新的页面替代原来的页面


# 获取当前时间 time=new Date().toString()
# 改变标签内容 获取ID docment.getElementById("id")
# element 获取标签 document.getElementsByClassName("p")[1]
# onclick 点击事件写在标签内




**************  DOM对象(控制HTML标签)
整个文档 document节点
下面的小节点 element 节点


取ID docment.getElementById("id")  不支持局部
获取标签 document.getElementsByClassName("p")[1]  
获取标签名字 getElementsByTagName()
获取标签name属性  getElementsByName()  不支持局部
(
.innnerHTML  获取标签内容
.parentNode  父标签
.nextElementSibling  下一个兄弟标签
.children   所有子标签
.firstElementChild   第一个子标签
.lastElementChild   最后一个子标签
.previousElementSibling   上一个兄弟标签
)


innerHTML 拿取所有包括标签
innerText 只拿文本


***************  event 事件
onclick    点击事件
ondblcick  双击事件
onfocus 获得焦点    // 输入框  
onblur  失去焦点      //表单提交验证时,代表用户输入完成
onchange   域的内容被改变    //应用场景:用于表单内容被触发改变时(三级联动)
onkeydown  某个键被按下    // 应用场景:当用户最后一个输入框按下回车时,表单提交
onkeypress  某个键被按下并松开
onkeyup  某个键被松开
onmousedown  鼠标按钮被按下
onmouseover 鼠标被移动到某元素
onmouseout  鼠标从某元素移开
onselect  文本被选中   // select下拉框 (三级联动)


********* 监听 onsubmit 事件
from表单提交时触发 前端自动做检测


onsubmit 可以接受返回值,其中返回false表示拦截表单提交
var ele=document.getElementByid("form1");   // 给from绑定onsubmit事件
ele.onsubmit=function (e){   // e:形参 不是this即可
alert(123); 
e.preventDefault()   // 阻止默认的事件
    //return false 拦截表单提交 只在这管用
}


************ DOM节点增删改查
添加:
var ele=document.createElement("p")  // 增加p标签  createElement 创建元素
ele.innerHTML="内容"  // 添加内容
父级.appendChild()   // 添加元素


删除:
获取要删除的元素 var son 父级.getElementsByTagName("标签")
获取他的父级元素 var 父级=document.getElementsByClassName("标签")
使用removeChild()方法删除  父级.removeDhild(son)


替换:
添加的标签 var img=document.createElement("img")
标签添加属性:  img.src="路径文件名"
原标签: var ele=docment.getElementsByTagName("p")[0]
父标签: var father=document.getElementsByTagName('父标签')[0]
替换  父标签.replaceChild(添加的标签,原标签)


# 改变标签属性 一般css样式中的fond-size换为fondSize 


***** 标签对象属性
ele.className   // 标签所有name
ele.classList[1]  // 取值
ele.classList.add("")  //添加name   隐藏时使用 添加name 给name 绑定css实现效果
ele.classList.remove("")  //删除class的name
可以绑定css实现效果


************ 添加删除元素
创建新的 HTML 元素 createElement(name)
删除已有的元素  elementNode.removeChild(node)


************* 改变 HTML 属性
elementNode.setAttribute(name,value)
elementNode.getAttribute(name) <------>elementNode.value(DHTML)

猜你喜欢

转载自blog.csdn.net/weixin_42100915/article/details/80517675