王宇凡_20210119王宇凡
知识点总结
random() 方法可返回介于 0（包含） ~ 1（不包含） 之间的一个随机数。
用随机数实现图片的抽奖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 100px;
}
#box1{
margin: 0 auto;
width: 600px;
height: 500px;
border: 1px solid;
}
.boximg{
width: 100%;
height: 100%;
}
.box1img{
width: 100%;
height: 100%;
opacity: 0;
transition: 1s;
}
</style>
</head>
<body>
<div id="box">
<img src="img/1.jpg" class="boximg">
<button id="start" onclick="start()">开始</button>
<button id="stop" onclick="stop()" disabled="disabled">停止</button>
</div>
<div id="box1">
<img src="img/1.jpg" class="box1img">
</div>
<script type="text/javascript">
var imgs = [
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg",
"img/5.jpg",
"img/6.jpg"
];
var timer ;
var lastindex;
var startBtn = document.querySelector("#start");
var stopBtn = document.querySelector("#stop");
var boximg = document.querySelector(".boximg");
var box1img = document.querySelector(".box1img");
function start(){
box1img.style.opacity = 0;
startBtn.disabled = true ;
stopBtn.disabled = false ;
timer = setInterval(function(){
var index = Math.floor(Math.random() * 6) ;
boximg.src = imgs[index];
lastindex = index ;
},100);
}
function stop(){
clearInterval(timer);
startBtn.disabled = false ;
stopBtn.disabled = true ;
box1img.style.opacity = 1 ;
box1img.src = imgs[lastindex];
}
</script>
</body>
</html>
jQuery
JQuery是javascript的类库，具有轻量级，完善的文档，丰富的插件支持，完善的Ajax功能，强大的选择器功能，出色的DOM操作封装，出色的浏览器兼容性，可靠的事件处理机制，隐式迭代和链式编程操作，免费开源的库
jQuery方式监听页面的加载：
1.函数内部的代码页面加载(HTML)完毕之后执行
2.调用N次,会执行N次
3.jQ监听的代码可以简写
jquery定义活动模板
$(function(){
})
css方法
第一种：$("元素名称").css(' name') 获取第一个匹配元素的样式属性。
第二种：$("元素名称").css(' name'，'value') 设置样式属性
第三种：是以对象的形式写多种样式
$("").css({
' name'：'value'，
'backgroundColor': '#ddd',
'fontWeight': '',
})
addClass方法
语法：$("p").addClass('属性名1 属性名2'); 给某个元素添加一个类名，可以是多个类名
removeClass方法
语法：语法：$("p").addClass('属性名1 属性名2'); 给某个元素删除一个类名，可以是多个类名
toggleClass方法
语法：$("元素名称").toggleClass(“class”) 如果存在类就删除，如果没有就添加一个类
获取内容和修改内容的方法 text()和html()
$("元素名称").text() 如果没有内容则获取到元素的内容，
$("元素名称").text('value') 有内容则修改该元素的内容为value
$("元素名称").html() 如果没有内容则获取到该元素的内容，
$("元素名称").html('value') 有内容则修改该元素的内容为value
区别：
一：html()操作的是innerHtml属性节点的内容
text() 操作的是innerText属性节点的内容
二：html如果传递了参数表示设置标签的内容覆盖之前的内容,传递的是标签加内容会覆盖之前的标签和内容
text传递参数是标签，则以文本形式展示
三：html方法没有传参,获取第一个标签的节点内容
text方法没有传参,获取所有标签的文本内容拼接在一起返回
个人心得
今天了解了Jquery的基本内容，它轻量级。jQuery非常轻巧，允许开发者使用从CSS1-CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择权。jQuery封装了大量常用的DOM操作，对发生在同一个jQuery对象上的操作，可以直接连写而无重复获取对象。开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。使各个方面的开发人员各司其职，互不干涉。有完善的文档。让平时的开发更加高效。
评论留言