版权声明: https://blog.csdn.net/qq_36801966/article/details/78435403
1、列举jquery中常用的选择器
基本选择器
id选择器:每个id选择器名称只能使用一次
class:允许重复使用
*: 匹配所有
层次选择器:
$("#a.b") 选取id值为a的元素里所有class值为b的元素
$("#a>.b") 选取id值为a的元素后class为b的子元素
$("#a+b.") 选取id值为a的元素后紧挨着class为b的元素
过滤选择器:
:first 选取第一个元素
:odd 选取索引是奇数的元素
:even 选取索引是偶数的元素
:not() 选取除某元素外的其他元素
:eq()按索引寻找元素
:gt() 大于某索引的元素
2 如何实现查找DOM树种的元素
var input = $("input:first"); //获取input标签中的第一个节点
3 如何在DOM树种创建并插入元素
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>friut</div>
<script>
var title = $("<span>apple</span>");
$("div").append(title); //将title追加到div标签内容的后面
$("div").before(title); //将title追加到div标签之前与div标签同级
$("div").prepend(title); //将title追加到div标签内容之前
$("div").after(title); //将title追加到div标签后面与div同级
</script>
4 如何在dom树种替换指定元素
注:jQuery中主要使用replaceWith()和replaceAll()
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>friut</div>
<script>
var title = $("<span>apple</span>");
$("div").replaceWith(title); //将节点div换成span
</script>
5 给一张图片,让这张图片以淡出的效果消失在页面
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img src="col.jpg">
<script>
$("img").click(function){
$(this).fadeOut("slow"); //图片淡出网页
});
</script>
6 制作一个按钮,当按钮被点击时以卷帘效果消失
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" value="but" style="width:100px;height:100px;">
<script>
$("input").click(function){
$(this).sideUp("slow"); //以卷帘效果向上消失
});
</script>
7 制作一个照片轮换
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
ul {
list-style:none;
width: 350 px;
height: 200 px;
position: absolute;
}
li{ position: absolute;}
</style>
<div class="change">
<ul>
<li><img src="1.jpg" width=350px height=200px></li>
<li><img src="2.jpg" width=350px height=200px></li>
<li><img src="3.jpg" width=350px height=200px></li>
<li><img src="4.jpg" width=350px height=200px></li>
</ul>
</div>
<script>
$(function(){
$(".change ul li:not(:first)").hide();
setInterval(function(){
if($(".change ul li:last").is(":visible")){
$(".change ul li:first").fadeIn("slow");
$(".change ul li:last").hide();
}else{
$(".change ul li:visible").next.fadeIn("slow");
}
},1000);
});
</script>