<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
//对标签事件进行操作实现的效果
//隐私迭代后台进行手动添加 可以连写操作
$('p').click(function(){
alert('点击标签事件之后弹出')
$(this).hide();//点击标签之后进行隐藏
}).dblclick(function(){
$(this).hide();
})
})
//用绑定的方式实现操作交互
$('p').bind('click',function(){
$(this).hide()
})
//循环遍历标签中的数据
$(function(){
console.log($('p').html())
console.log($('p').html())
var p=$('p')
for(var i=0;i<=p.length;i++){
console.log(p[i])
}
})
$(function(){
console.log($('h1').html())
console.log($('h1').text())
//替换h1标签中的内容
$('h1').html('静夜思唐代')
console.log($('h1').html())
//获取表单内容
console.log($('input').val())
//替换input标签中的内容
$('input').val('李白')
console.log($('input').val())
})
</script>
<body>
<h1><i>静夜思</i></h1>
<ul>
<li>床前明月光，</li>
<li>疑是地上霜。</li>
<li>举头望明月，</li>
<li>低头思故乡。</li>
</ul>
作者*<input type='text' name='uname' id='uname' value='张华'>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
<p>段落四</p>
<p>段落五</p>
<p>段落六</p>
<p>段落七</p>
</body>
</html>
鼠标操作事件显示
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<img src="img/dog1.png" />
<h1>给图片添加了鼠标移</h1>
<body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
function bian(){
console.log($("img").attr('src'))
var imgsrc = $("img").attr('src');
if(imgsrc=='img/dog1.png'){
$('img').attr('src',"img/dog2.png");
}else{
$('img').attr('src',"img/dog1.png");
}
}
//鼠标滑过和移开两个事件
$('img').mouseover(function(){
bian();
}).mouseout(function(){
bian();
})
})
</script>
</body>
</html>
单选框事件
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box1{width: 200px;height: 200px;background-color: red;border: 1px solid red;}
.box2{width: 200px;height: 200px;background-color: yellow;border: 1px solid red;
transition: 5s; /*设置渐变时间*/
border-radius: 50%;/*设置边框未圆形 50%，或高度的二分之一*/
}
</style>
</head>
<body>
<div class="box1">aaaa</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('div').mouseover(function(){
$(this).removeClass('box1').addClass('box2');
})
})
</script>
</body>
</html>
类名切换
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{width: 200px;height: 200px;border: 1px solid red; }
.box{
background-color: red;
transition: 5s; /*设置渐变时间*/
border-radius: 50%;/*设置边框未圆形 50%，或高度的二分之一*/
}
</style>
</head>
<body>
<div>aaaa</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('div').mouseover(function(){
$(this).toggleClass('box'); //toggle切换 原来有就去掉，没有就自动添加
})
})
</script>
</body>
</html>
将鼠标放在图片上之后经过5秒就会改变为椭圆形
网友评论