初识jQuery
1 jQuery的简单认识
jQuery 是目前最流行的 JS 代码库，而且提供了大量的扩展。
2 jQuery的入口函数
$(document).ready(function(){
// 执行代码
});
$
$(function(){
// 执行代码
});
3 jQuery 与js的区别
js的入口函数要等页面所有资源图片文件等加载完成后才开始执行(自上而下)
jQuery的入口函数只会等待dom(文档树)加载完成就开始执行 不用等待其他的加载
4 jQuery的链式写法
可以在一行代码后拼接
节约JS代码;所返回的都是同一个对象,可以提高代码的效率.
var title=$("#div").html("练习").css("font-size","80px").attr("title");
5 jquery基本属性选择器
<body>
<button id="btn1">全部class</button>
<button id="btn2">选择box1</button>
<button id="btn3">选择不是box1</button>
<button id="btn4">以b开头的</button>
<button id="btn5">包含o的</button>
<div class="box1">box1</div>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="pox1">pox1</div>
<div class="pox2">pox2</div>
<div>好久了</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$('div[class]').css('background-color',"aqua");
})
$("#btn2").click(function(){
$('div[class=box1]').css('background-color',"purple");
})
$("#btn3").click(function(){
$('div[class!=box1]').css('background-color',"black");
})
$("#btn4").click(function(){
$('div[class^="b"]').css('background-color',"black");
})
$("#btn5").click(function(){
$('div[class*="b"]').css('background-color',"red");
})
})
</script>
</body>
6 jquery操作标签的作用
7 jquery过滤选择器
<body>
<ul>
<li>相见时难别亦难</li>
<li>东风无力百花残</li>
<li>此情可待成追忆</li>
<li>只是当时已惘然</li>
<li>2023年</li>
<li>1月</li>
<li>30日</li>
</ul>
<script src="js/jquery-1.12.4.js">
</script>
<script>
$(function(){
$("li:eq(3)").css("color","white")
$("li:odd").css("background-color","aqua")
$("li:even").css("background-color","purple")
$("li:gt(2)").css("color","red")
$("li:lt(2)").css("color","blue")
})
</script>
</body>
8 jQuery筛选选择器
<body>
<div>
<ul>
<li><img src="img/m6.jpg" alt=""></li>
<li><img src="img/m6.jpg" alt=""></li>
<li><img src="img/m6.jpg" alt=""></li>
<li><img src="img/m6.jpg" alt=""></li>
<li><img src="img/m6.jpg" alt=""></li>
<li><img src="img/m6.jpg" alt=""></li>
</ul>
</div>
<script src="js/jquery-1.12.4.js">
</script>
<script>
$(function(){
$("ul>li").mouseenter(function(){
$(this).css("opacity","1").siblings("li").css("opacity","0.5")
})
$("ul>li").mouseleave(function(){
$("ul").find("li").css("opacity","1")
})
})
</script>
</body>
9 jQuery可见性过滤器
<body>
<div style="display: none;">今天喝热水</div>
<div>今天忘记喝了</div>
<button id="btn1">点击显示</button>
<button id="btn2">点击隐藏</button>
<script src="js/jquery-1.12.4.js">
</script>
<script>
$(function(){
$("#btn1").click(function(){
$("div:hidden").show("slow")
})
$("#btn2").click(function(){
$("div:visible").hide("2000")
})
})
</script>
</body>
扫一扫
1214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
