jQuery
jQuery文件
<script src=""></script>#写src加载js文件
#路径名不能有中文，不能有空格
-使用jQuery提供的API
*jQuery特点
*$() - jQuery的工厂函数
*另外一种写法- jQuery()
*作用
*使用jQuery的选择器获取对象
引入Jquery 获取
jquery和Dom转换
通过id 获得页面元素 dom var dom = docuemnt.getElementById("id值"); dom.value $(dom).val();Jquery var jquery=$("#id值"); jquery.val(); jquery[0].value;
基本选择器
<script>
$(function(){
//1 id选择器 #id值
$("#btn1").click(function(){
$("#one").css("background-color","red");
});
//2 类选择器 .类名
$("#btn2").click(function(){
$(".mini").css("background-color","pink");
});
//3 标签选择器
$("#btn3").click(function(){
$("div").css("background-color","green");
});
//4 通用选择器
$("#btn4").click(function(){
$("*").css("background-color","blue");
});
//5 后代选择器
$("#btn5").click(function(){
$("#two,.mini").css("background-color","blue");
});
});
</script>
<body>
<input type="button" id="btn1" value="选择为one的元素" />
<input type="button" id="btn2" value="选择为mini的元素" />
<input type="button" id="btn3" value="选择div的元素" />
<input type="button" id="btn4" value="选择所有的元素" />
<input type="button" id="btn5" value="选择为id为two 并且样式为mini的元素" />
<div id="one">
<div class="mini">
1111
</div>
</div>
<div id="two">
<div class="mini">
2222
</div>
<div class="mini">
3333
</div>
</div>
<div id="three">
<div class="mini">
4444
</div>
<div class="mini">
5555
</div>
<div class="mini">
6666
</div>
</div>
</body>
基本过滤选择器
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("body div:first").css("background-color","pink");
});
$("#btn2").click(function(){
$("body div:last").css("background-color","pink");
});
$("#btn3").click(function(){
$("body div:odd").css("background-color","pink");
});
$("#btn4").click(function(){
$("body div:even").css("background-color","pink");
});
});
</script>
<body>
<input type="button" id="btn1" value="body中第一个div元素" />
<input type="button" id="btn2" value="body中最后一个div元素" />
<input type="button" id="btn3" value="选择body中 div奇数的元素" />
<input type="button" id="btn4" value="选择body中 div偶数的元素" />
<div id="one">
<div class="mini">
1111
</div>
</div>
<div id="two">
<div class="mini">
2222
</div>
<div class="mini">
3333
</div>
</div>
<div id="three">
<div class="mini">
4444
</div>
<div class="mini">
5555
</div>
<div class="mini">
6666
</div>
</div>
</body>
层级选择器
<script>
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","gold");
});
$("#btn2").click(function(){
$("body>div").css("background-color","gold");
});
$("#btn3").click(function(){
$("#two+div").css("background-color","gold");
});
$("#btn4").click(function(){
$("#one~div").css("background-color","gold");
});
});
</script>
<body>
<input type="button" id="btn1" value="body中 所有的div" />
<input type="button" id="btn2" value="body中第一级为div 的孩子" />
<input type="button" id="btn3" value="选择id为two的元素的下一个元素" />
<input type="button" id="btn4" value="id为one的所有兄弟元素" />
<div id="one">
<div class="mini">
1111
</div>
</div>
<div id="two">
<div class="mini">
2222
</div>
<div class="mini">
3333
</div>
</div>
<div id="three">
<div class="mini">
4444
</div>
<div class="mini">
5555
</div>
<div class="mini">
6666
</div>
</div>
</body>
属性选择器
<script>
$(function(){
$("#btn1").click(function(){
$("div[id]").css("background-color","gold");
});
$("#btn2").click(function(){
$("div[id='two']").css("background-color","gold");
});
});
</script>
<body>
<input type="button" id="btn1" value="选择div属性中有id" />
<input type="button" id="btn2" value="选择div属性中有id 并且值为 two 的 div" />
<div id="one">
<div class="mini">
1111
</div>
</div>
<div id="two">
<div class="mini">
2222
</div>
<div class="mini">
3333
</div>
</div>
<div id="three">
<div class="mini">
4444
</div>
<div class="mini">
5555
</div>
<div class="mini">
6666
</div>
</div>
</body>
表单选择器
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("input").css("background-color","red");
});
$("#btn2").click(function(){
$("input[type='text']").css("background-color","red");
});
});
</script>
<body>
<input type="button" id="btn1" name="" value="选择所有input元素" />
<input type="button" id="btn2" value="选择文本框"/>
<form>
<input type="text" /><br />
<input type="checkbox" /><br />
<input type="radio" /><br />
<input type="file" /><br />
<input type="submit" /><br />
<input type="password" /><br />
<input type="button" /><br />
</form>
</body>
轮播图
function jiazai(){
// 1 定时操作
setInterval("changeImg()",2000);
//2 定时操作显示弹出广告
time = setInterval("showImg()",3000);
}
var i = 1;
function changeImg(){
i++;
document.getElementById("img1").src="images/banner"+i+".jpg";
if(i==3){
i=0;
}
}
弹广告
//1 获取广告的位置
var img2 = document.getElementById("img2");
//2 修改display 的属性值 为block
img2.style.display="block";
//3 清楚定时器 time clearInterval(time);
clearInterval(time);
//4 设置广告的图片 属性为none
time = setInterval("hiddeImg()",3000);
}
function hiddeImg(){
document.getElementById("img2").style.display="none";
//清除定时器；
clearInterval(time);
}
time =setInterval("show()",1000);
});
function show(){
$("#img2").fadeIn(2000);
clearInterval(time);
time = setInterval("hide()",2000);
}
function hide(){
$("#img2").fadeOut(2000);
clearInterval(time);
}