版权声明:文章为作者自己原创文章,转载请注明出处。 https://blog.csdn.net/qq_37128049/article/details/84886000
今日内容:
1.JavaScript:
1.ECMAScript:
2.Bom:
3.Dom:
4. 事件
Dom简单学习: 为了满足案例要求
* 功能:控制html文档的内容
* 代码: 获取页面标签(元素)对象Element
* 通过元素ID获取元素对象。
* document.ElementById();
* 操作Element对象:
1.修改属性值:
1.明确获取的对象是哪一个?
2.查看API文档,找其中有哪些属性可以设置
2.修改标签体内容:
* 属性:innerHTML
* 代码演示:DOM:
1.获取对象:decument.getElementById("想获取的元素其id值");
2.通过元素对象:可以对元素进行操作,如添加内容等: 元素对象名.innerHTML=“元素内部的HTML内容”;也可以使用innerText,但是它只能输入文本信息。
事件简单学习:
* 功能:某些组件被执行了某些操作后,触发某些代码的执行。
* 造句:xxx被xxx,我就xxx
* 如何绑定事件:
1.直接在html标签上,指定事件的属性(操作),属性值就是js代码。
1.事件:onclik
* 直接标签绑定:如:<img id="light" src="img/off.gif" onclick="alert('我被点了');">
也可以定义一个function方法,onclick直接调用方法。
缺点:事件和标签绑定在一起,耦合性比较高。
* 使用docment.getElemtById获取对象,再使用onclik绑定事件。
优点:可以避免对html代码侵入,耦合性低。
*更换灯泡的步骤:
1.获取标签
2.给标签添加点击事件
3.每次点击切换图片
BOM:
1.概念:Browser Object Model 浏览器对象模型
2.组成:
* 将浏览器
* 划分为五个部分:
1.Navigator 浏览器对象
2.window 窗口对象(包含了历史记录,地址,内容(DOM对象document))
3.Location 地址栏对象
4.history 历史记录对象(当前浏览的,可以前进后退的对象)
5.Screen 显示器屏幕对象(不重要)
3.Window:窗口对象
1.创建
* Window对象不需要创建,可以直接使用。
* Window.方法名
* Window可以省略。 方法名();
2.方法:
* 与弹出框有关的方法:
* alert() 显示带有一段消息和一个确认按钮的警告框
* comfirm()显示带有一段消息以及确认按钮和取消按钮的对话框(常用)
* 如果用户点击确定按钮,则方法返回true
* 如果用户点击取消按钮,则返回false;
* prompt() 显示可提示用户输入的对话框
* 返回值:获取用户输入的值;
* 与打开关闭有关的方法:
* open(); 打开一个浏览器窗口。
* close(); 关闭浏览器窗口,谁调用我,我关谁。 如果直接写close,则为window.close();,而该方法是谁调用它,它就会关闭掉它,所以应该写成:新窗口.close();
* 与定时器有关的方法:
* setTimeout() 在指定的毫秒数后调用函数或计算表达式
* 一次性定时器
* 参数:
* js代码或者方法对象
setTimeout("fun();",3000); 方法
setTimeout("alert(我被执行了)",3000); 对象
* 毫秒值 setTimeout("alert(我被执行了)",3000); 具体js代码
* clearTimeout(id) 取消由 setTimeout()方法设置的timeout。
* setInterval(fun,2000); 循环定时器,按照指定的周期(以毫秒计)来调用函数或计算表达式
* clearInterval(id) 取消由setInterval()设置的timeout。
方法:Ctrl+Shift+T :还原浏览器历史记录。
3.属性:
1.获取其他BOM对象
history
location
Navigator
Screen
2.获取DOM对象
window.document.getElementById("");
4.Location:地址栏对象
1. 创建:
1.window.location
2.location
2. 方法:
* reload(); 刷新当前页面; location.reload();
* href(); 获取href属性; location.href;//获取当前地址信息 location.href="www.itcast.cn"; 可以绑定点击事件,点击后自动跳转网页。
注意:在参数中传对象不需要加引号,传方法需要加对象.function函数对象如果不加括号就是对象,加对象就是方法。
5.History:历史记录对象
1.创建(获取):
1.window.history
2.history
2.方法:(这里的历史记录是指在一个窗口中曾经打开的多次目录,跟浏览器自带的前进后退是一样的功能)
* back() 加载history列表中的前一个URL。
* forward() 加载history列表中的下一个URL。
* go() 加载history列表中的某个具体页面。
3.属性:
* length 返回当前窗口历史列表中的URL数量。
DOM:它是将html文档表达为树结构(dom树),后期可以通过树形结构的层级得出上一级的对象。
* W3C DOM标准被分为3个部分:
* 核心 DOM - 针对任何结构化文档的标准模型
* Document:文档对象 (重点
* Element:元素对象 (重点
* Attribute:属性对象
* Text:文本对象
* Comment:注释对象
* Node:节点对象,其他5个的父对象 (重点
* XML DOM - 针对XML文档的标准模型
* HTML DOM - 针对HTML文档的标准模型
一句话来讲:DOM 将标签都封装成对象,让我们能方便的去操作这些标签。
* 核心DOM模型 文档对象
* CRUD:增删改查:
* 创建(获取):在html dom模型中可以使用window对象获取
1.window.document
2.document
* 方法:
1.获取Element对象(前三个与基本选择器:id,标签,class;):
* getElementById(): 根据id属性值获取元素对象。id属性值一般唯一。
* getElementsByTagName(): 根据元素名称获取元素对象们。返回值是一个数组。
* 比如:document.getElementsByTagName("div");
* getElementSByClassName():根据Class属性值获取元素对象们,返回值是一个数组。
* 比如: document.getElementsByClassName("cls1");
* getElementsByName():根据name属性值获取元素对象们,返回值也是一个数组。
* 比如:document.getElementsByName("username");
1.name属性值一般用于表单提交,所以不是所有的标签都会有name属性值,所以最好一般不要用name的方法来获取元素。input标签一般会有name属性。
2.如果有重复的id标签,但是document.getElementById返回的id是获取第一个id的对象,而不会报错。
2.创建其他DOM对象:
* createAttribute(name) :创建属性
* createComment(): 创建注释
* createElement():创建元素
* createTextNode():
这里创建的对象跟当前的html页面没有任何关系,所以需要使用这些元素的时候需要添加进来。这些对象是空,需要自己为其添加内容。
* 属性:
* Element:元素对象
1.获取/创建:通过document来获取和创建
2.方法:
* removeAttribute():删除属性
* setAttribute():添加属性
如:var element_img= document.getElementsByClassName
element_img.setAttribute("class",img);
3.应用:可以用来与控件绑定事件,对其他的元素添加属性和删除属性。
* Node: 节点对象,其他5个的父对象
* 特点:所有DOM对象都可以被认为一个节点。
* 方法:
* CRUD 树:
* appendChild(): 向节点的子节点列表的结尾添加新的子节点
* removeChild(): 删除(并返回)当前节点的子节点
* replaceChild():用新节点替换一个子节点
* 属性:
* parentNode 返回节点的父节点。
* HTML DOM
1.标签体的设置和获取:innerHTML
* 替换:元素名.innerHTML="<input type='text';"
* 添加:元素名.innerHTML+=
2.使用html元素对象的属性
3.控制样式
1.使用元素的style属性来设置
如://修改方式1:
div1.style.border="1px solid red";
div1.style.width="200px";
2.提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。
var div2= document.getElementById("div2");
div2.onclick=function(){
div2.className="d1"; //这里的d1是id选择器已经配置好的样式。
}
注意:类似于font-size的,用style连接时,写成fontSize;
* 可以通过js控制元素的样式。
事件监听机制:
* 概念:某些组件被执行了某些操作后,触发某些代码的执行。
* 事件: 某些操作,如:单击,双击,键盘按下了,鼠标移动了
* 事件源:组件。 如: 按钮 文本输入框...
* 监听器: 它是一些代码,当事件发生时,这些代码会被执行。
* 注册监听:将事件,事件源,监听器结合在一起。当事件源上发生了某个事件,则触发执行某个监听器代码。
* 常见的事件:
1.点击事件
* onclick:单击事件
* ondbclick:双击事件
2.焦点事件
* onblur:失去焦点
* onfocus:元素获得焦点
3.加载事件
* onload:一张页面或一幅图像被加载完成
* window.onload=function(){};
4.鼠标事件
* onmusedown 鼠标按键被按下
* 定义方法时,定义一个形参,接受event对象
* event对象的button属性可以获取鼠标
* onmouseup 鼠标按键被松开
* onmousemove 鼠标被移动
* onmouseover 鼠标移到某元素之上
* onmouseout 鼠标从某元素移开
5.键盘事件
* onkeydown 某个键盘按键被按下
* onkeyup 某个键盘按键被松开
* onkeypress 某个键盘按键被按下并松开
6.选择和改变
* onchange 域的内容被改变
* onselect 文本被选中
7.表单事件:
* onsubmit 确认按钮被点击。
* 可以阻止表单的提交
* 方法返回false阻止表单提交
* onreset 重置按钮被点击。
我们只需要给具体的标签添加事件,到时候如果有事件被触发,对应的代码就会执行。
transition:margin-top 200ms; 动画。
/^[\u4e00-\u9fa5]+$/ 中文