2021-06-08(周二学习内容)

判断元素对象是否存在

李白乘舟将欲行,忽闻岸上踏歌声

桃花潭水深千尺,不及汪伦送我情

只创建一个元素

创建下拉列表

多次执行指定事件,不想被覆盖,使用   addEventLisrener("click",匿名函数)

注意不是 onclick

BOM

javaScript分为三个部分1.ECMAScript标准----基础语法,核心标准2.DOM-----Document Object Model 文档对象模型,操作页面元素和节点3.BOM-----Browser Object Model 浏览器对象模型,操作浏览器

浏览器Browser中有一个顶层对象window

学DOM的时候页面中有一个顶层对象document

浏览器里面所有内容都是属于window的

页面加载事件  onload = function(){

                        }

用户推出页面执行的函数

onunload = function(){

}

onload 事件,等页面加载完毕再执行后面的处理函数,window可以省略

location对象

location.href = "地址";

location.assign("新的URL字符串"); 指派一个新的url

Location接口的replace()方法将当前资源替换为提供的 URL 中的资源。 与assign()方法的不同之处在于,在使用replace() ,当前页面将不会保存在会话History ,这意味着用户将无法使用后退按钮导航到该页面。

location.replace("https://www.baidu.com");

location.reload();重新加载刷新

window.history.forward();前进

window.history.back();后退

定时器

setInterval(function,milliseconds)等同于,setTimeout(), 但持续重复执行该函数。

setTimeout(function, milliseconds)   在等待指定的毫秒数后执行函数。

清理定时器

第一步:获取setInterval()这个函数的返回值timeID

清理定时器 clearInterval(timeID)

第一步:获取setTimeout()这个函数的返回值timeID

清理定时器 clearsetTimeout(timeID)

定时器小案例,点击摆动,图片晃动,点击停止,停止晃动

jquery入门案例

jquery案例 闪闪的星星

jquery入门案例

先导入jquery文件,导入文件的script标签中不要写代码,写在其他script标签中

$(id选择器)查找指定id对应的标签元素,调用click()方法,相当于原来的onclick事件,给click()方法传入一个函数

调用css方法,传入样式{"样式属性名":"属性值","样式属性名":"属性值"...}

jquery对比原生js

jquery不需要像原生js一样循环遍历,jquery会自动进行循环遍历


jquery中的顶层对象

BOM模型中浏览器的顶层对象是;window,浏览器和页面中所有内容都是属于window的 jquery中的顶层对象是jquery,可以简写为美元符号$

如果想使用jquery中的属性和方法,需要jquery.属性,jquery.方法()来使用;

jquery可以使用$来代替,就可以简写为 $.属性, $.方法()

jquery中大部分都是方法,很少使用到属性 jquery将DOM中的几乎所有事件都封装成了方法,去掉on,变成方法,例如onclick->click(), onfocus->focus()等等

原生js查找元素比较麻烦,jquery比较简单 js原生写法: document.getElementById("id属性值").onclick = 匿名函数;

jquery中的单击事件的写法: $('选择器').click(匿名函数);

页面模仿开关灯案例


jquery


原生js

jquery对象和js对象相互转换

原生的js获取的对象,称为DOM对象

jquery方式获取的对象称为jquery对象

DOM对象(js对象) 转为jquery对对象,在外面加上美元符号就可以了

var p1 =document.getElementById("p1");

$(p1).width("200px");

jquery对象 转为 js对象,在后面加上[下标],如果只有一个写成[0]

var p1Obj =$("#p1");

p1Obj[0].style.height ="600px";

为什么要转?如果不需要转换就尽量不要转换1.DOM操作麻烦(操作复杂,有时还需要写兼容性代码),可以转为jquery对象(操作简单不需要写兼容性代码)2.需要进行一些复杂操作,jquery没有提供这样的功能,这时需要将jquery对象转为js对象

你可能感兴趣的:(2021-06-08(周二学习内容))