JQuery学习(1)
定义
基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
使用
1.获取img的src属性
<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script> //调用jquery文件
<script type="text/javascript">
function aaa() {
$(document).ready(function () {
alert($('#img1').attr('src'));
})
}
</script>
<img id="img1" src="风景/29b56ef1ecac0a2e23fe73abb8457ed9.jpg" />
<input id="Button1" type="button" value="单机" onclick="aaa()" />
2.各种效果
<style type="text/css">
.aaa
{
height:300px;
position:absolute;
}
</style>
<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
function setyangshi() {
$(function () {
$('#img1').css('width', '200px');
$('#img1').addClass('aaa');
})
}
$(function () {
$('#Button1').click(function () { //手动给button添加click方法
$('#img1').show(2000); //显示
})
$('#Button2').click(function () {
$('#img1').hide(2000); //收缩隐藏
})
$('#Button3').click(function () {
$('#img1').fadeIn(2000); //淡入
})
$('#Button4').click(function () {
$('#img1').fadeOut(2000); //淡出
})
$('#Button6').click(function () {
$('#img1').animate({ left: '250px' }, 5000); //滑动效果必须要是图片有position:absolute
})
})
</script>
<img alt="" id="img1" src="风景/cda8a8f5b72e165c153fd396db02ab64.jpg" />
<input id="Button5" type="button" value="设置样式" onclick="setyangshi()" />
<input id="Button1" type="button" value="显示" />
<input id="Button2" type="button" value="收缩" />
<input id="Button3" type="button" value="淡入" />
<input id="Button4" type="button" value="淡出" />
<input id="Button6" type="button" value="滑动" />