判断元素对象是否存在
<p class="c-p1">李白乘舟将欲行,忽闻岸上踏歌声</p>
<p id="p1">桃花潭水深千尺,不及汪伦送我情</p>
<script>
console.log(document.getElementById("p1"));//<p id="p1">
console.log(document.getElementById("p-not"));//null
//转为布尔类型结果不同,null转为布尔类型结果为false,使用函数Boolean(参数)将参数转换为布尔类型
console.log(Boolean(document.getElementById("p1")));//true
console.log(Boolean(document.getElementById("p-not")));//false
//当对象元素不存在时,获取的对象为null
if(!document.getElementById("p-not")){
console.log("元素对象不存在")
}
</script>
只创建一个元素
创建下拉列表
多次执行指定事件,不想被覆盖,使用 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(匿名函数);
页面模仿开关灯案例
<input type="button" value="press me" id="btn1">
<script src="js/jquery-3.4.1.js"></script>
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对象
