<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--导入工具模块-->
<script type="text/javascript" src="js/tool.js"></script>
<style type="text/css">
.fruitBox{
width: 250px;
height: 60px;
background-color: cadetblue;
margin-bottom: 2px;
line-height: 60px;
}
.fruitName{
float: left;
width: 230px;
text-align: center;
font-size: 20px;
color: white;
}
.close{
font-size: 20px;
color: white;
/*设置光标样式*/
cursor: pointer;
}
/*输入框*/
#newFruit{
border: 0;
border-bottom: 1px solid #444444;
font-size: 30px;
width: 250px;
height: 50px;
text-align: center;
vertical-align: bottom;
}
#newFruit:focus{
outline: 0;
}
/*确定按钮*/
#sure{
border: 0;
background-color: coral;
color: white;
font-size: 20px;
width: 70px;
height: 30px;
}
#sure:focus{
outline: 0;
}
</style>
</head>
<body>
<div id="show"></div>
<div id='add'>
<input type="" name="" id="newFruit" value="" />
<button id="sure" onclick="addNewFruit()">确定</button>
</div>
<!--默认显示的水果-->
<script type="text/javascript">
//创建水果节点
function creatFruitNode(name){
//水果父节点
var divNode = document.createElement('div')
divNode.className = 'fruitBox'
//水果名字节点
var nameNode = document.createElement('font')
nameNode.innerText = name
nameNode.className = 'fruitName'
//关闭按钮
var closeNode = document.createElement('font')
closeNode.innerText = '×'
closeNode.className = 'close'
//关闭按钮添加点击事件
closeNode.addEventListener('click', function(){
//移除被点击的节点的父节点
this.parentElement.remove()
})
divNode.appendChild(nameNode)
divNode.appendChild(closeNode)
return divNode
}
fruitArray = ['苹果', '香蕉', '梨', '猕猴桃']
//展示所有水果的节点
showNode = document.getElementById('show')
for(index = 0; index < fruitArray.length; index++){
//拿水果名
fruitName = fruitArray[index]
//创建对应的节点
fruitNode = creatFruitNode(fruitName)
//添加水果节点
showNode.appendChild(fruitNode)
}
//点击确定按钮
function addNewFruit(){
//拿到输入的水果名
var newFruitName = document.getElementById('newFruit').value
//创建对应的节点
var newFruitNode = creatFruitNode(newFruitName)
newFruitNode.style.backgroundColor = randomColor()
//添加节点
showNode.insertBefore(newFruitNode, showNode.firstElementChild)
//清空输入框
document.getElementById('newFruit').value = ''
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<img src="" alt="" id="big"/>
</div>
<div id="small"></div>
<script type="text/javascript">
//图片对象构造方法
function YTImageModel(smallImage, bigImage, title=''){
this.smallImage = smallImage
this.bigImage = bigImage
this.title = title
}
imageArray = [
new YTImageModel('thumb-1.jpg', 'picture-1.jpg', '图片1'),
new YTImageModel('thumb-2.jpg', 'picture-2.jpg', '图片2'),
new YTImageModel('thumb-3.jpg', 'picture-3.jpg', 'iamge3'),
]
//大图节点
bigImgNode = document.getElementById('big')
bigImgNode.src = 'img/'+imageArray[0].bigImage
//小图盒子
smallBoxNode = document.getElementById('small')
//创建小图标
for(i=0; i<imageArray.length;i++){
//拿到图片模型
imageModel = imageArray[i]
//创建对应的小图节点
imageNode = document.createElement('img')
//设置图片
imageNode.src = 'img/'+ imageModel.smallImage
//***通过节点来保存图片模型
imageNode.imageMode = imageModel
//添加节点
smallBoxNode.appendChild(imageNode)
//添加事件
imageNode.addEventListener('mouseover', function(){
//使用鼠标点击的小图节点中保存的信息
bigImgNode.src = 'img/'+this.imageMode.bigImage
bigImgNode.title = this.imageMode.title
})
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/tool.js"></script>
<style type="text/css">
body{
text-align: center;
}
/*小盒子是60X60*/
#box{
width: 600px;
height: 300px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
border: 1px solid #666666;
}
/*按钮*/
button{
width: 60px;
height: 30px;
color: white;
background-color: red;
border: 0;
font-size: 16px;
}
button:focus{
outline: 0;
}
.newDiv{
width: 60px;
height: 60px;
float: left;
}
</style>
</head>
<body>
<div id="box"></div>
<button onclick="addAction()">添加</button>
<button onclick="blink()" id="blink">闪烁</button>
<script type="text/javascript">
boxNode = document.getElementById('box')
//添加
function addAction(){
//创建节点
newDivNode = document.createElement('div')
newDivNode.className = 'newDiv'
newDivNode.style.backgroundColor = randomColor()
//添加节点
boxNode.insertBefore(newDivNode, boxNode.firstElementChild)
//判断是否溢出
if(boxNode.children.length > 50){
//删除最后一个
boxNode.lastElementChild.remove()
}
}
//闪烁
function blink(){
//拿到按钮
blinkBtnNode = document.getElementById('blink')
//拿到所有的子标签
allSmallDiv = boxNode.children
if(blinkBtnNode.innerText == '闪烁'){
blinkBtnNode.innerText = '暂停'
//闪烁功能
timmer = setInterval(function(){
for(i=0; i<allSmallDiv.length;i++){
smallDivNode = allSmallDiv[i]
smallDivNode.style.backgroundColor = randomColor()
}
}, 100)
}else{
blinkBtnNode.innerText = '闪烁'
//暂停功能
clearInterval(timmer)
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
jquery实质就是对js的封装，封装的目的是为了更方便的使用js。
js的代码写在哪，jq代码就可以写在哪，但是使用jq之前必须导入jq
-->
<!--1.导入jquery-->
<!--<script type="text/javascript" src='js/jquery.min.js'></script>-->
<!--导入CDN服务器上的远程的jquery-->
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">
</script>
<!--导入jquery后，就可以在后面使用jquery语法-->
<script type="text/javascript">
//$() - 代表jqury对象
//1.onload(js原生的)和ready(jq提供的)
//onload - 网页加载完成对应的事件(包括标签加载完成和网络请求完成)
window.onload = function(){
pNode = document.getElementById('p1')
pNode.innerText = 'hello jquery'
}
//使用jq里的东西都需要一个$符
//ready:$(document).ready(函数) - 网页中标签加载完成后会自动调用对应的函数
//$(函数) - 网页中标签加载完成后会自动调用对应的匿名函数
// $(document).ready(function(){
// pNode2 = document.getElementById('p2')
// pNode2.innerText = '你好，jquery'
// })
//相当于上面的写法
$(function(){
pNode2 = document.getElementById('p2')
pNode2.innerText = '你好，jquery'
})
</script>
</head>
<body>
<p id="p1">我是段落1</p>
<p id="p2">我是段落2</p>
</body>
</html>
<script type="text/javascript">
//2.节点操作
//1)获取节点(DM)
//语法：$('选择器') - 返回的是jq的节点对象
//选择器 - 这个选择器和css选择器一模一样
$('#p1')
$('.p1')
$('p')
$('div p')
//选择器1 + 选择器2 - 选中紧跟着选择器1的选择器2对应的标签
$('p+a') //选中所有紧跟着p标签的a标签
$('#p1~*') //选中id值是p1的标签后面同级的所有标签
$('#p1~a') //选中id值是p1的标签后面同级的所有a标签
$('p:first') //选中当前页面中的第一个p标签
$('div p:first') //选中当前页面中所有div下的第一个p标签
$('p:last') //选中当前页面中最后一个p标签
$('div *:first-child') //选中div下面的第一个子标签
//2)创建节点
//$('html标签语法')
imageNode = $("<img src='img/thumb-2.jpg' title='图标' />") //创建一个img标签
//3)添加节点
$('body').append(imageNode) //在body的最后添加一个子标签
$('body').prepend($('<input placeholder="请输入账号" />')) //在body的最前面插入一个子标签
$('#img').before($('<button>before</button>')) //在id是img的标签的前面添加一个按钮标签
$('#img').after($('<button>after</button>')) //在id是img的标签的后面添加一个按钮标签
//4)删除节点
//标签.remove() - 删除指定的标签
$('#img').remove() //删除img标签
//标签.empty() - 清空指定标签中的内容
$('div').empty() //清空div标签
//5)克隆和替换(查文档)
//3.属性操作
//1)获取普通属性
//标签.attr('属性名') - 这的属性名不包括标签内容相关的三个：innerHTML,innerText,value
console.log($('#img2').attr('title'))
console.log($('#img2').attr('src'))
//2.修改、增加普通属性
//标签.attr(属性名,值)
$('#img2').attr('src','img/thumb-1.jpg')
//3.特殊属性
//1)innerHTML(标签内容属性) - html()
console.log($('#div').html())
$('#div').html('我是新的div')
//2)innerText(标签文本内容) - text()
console.log($('#div').text())
$('#div').text('我是新的div2')
//3)value(单标签内容) - val()
console.log($('#user').val())
$('#user').val('李四')
//4)class
//标签.addClass(类名) - 给标签添加class值
$('p').addClass('color')
//标签.removeClass(类名) - 移除指定的class值
$('p').removeClass('color')
//4.样式属性
//标签.css(样式属性名) - 获取样式属性值
//标签.css(样式属性名,值) - 设置样式
//标签.css({属性名：属性值,属性名：属性值...}) - 同时设置多种样式属性
$('p').css('color','slateblue')
$('p').css('font-size', '20px')
$('p').css({
'color':'slateblue',
'font-size':'30px'
})
//5.事件绑定
//标签.on(事件名,函数) - 和js中的addEventListener是一样的
$('#btn1').on('click',function(evt){
alert('点击按钮')
console.log(this,evt)
})
</script>
网友评论