jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。
1.在页面载入时,JavaScript只会显示第一个onload的内容,必须等网页中所有内容加载完成。
jQuery网页中所有的DOM结构绘制完毕后就执行,并且可以依次运行多个ready函数。DOM(document object model--文本对象模型)
JavaScript代码
<script type="text/javascript">
function start(){
alert("今天天气不错");
}
window.onload=function(){
alert("不错~");
}
</script>
只显示一个弹窗,但是显示哪一个不确定。
jQuery代码
<script type="text/javascript">
$(document).ready(function(){
alert("今天天气不错");
});
$(document).ready(function(){
alert("不错");
});
</script>
两个弹窗依次显示
2.jQuery选择器
基本选择器,层次选择器,过滤选择器,表单选择器
<script type="text/javascript">
$(document).ready(function() {
//基本选择器
$("font:eq(2)").css("color","#9CC");
$("p").css("color","#CFC");
//支持奇怪颜色单词
$("#s3").css("color","red");
$("*").css("color","blue");
$("p,#s4").css("color","pink");
//顺序影响颜色效果
//alert($("p:eq(1)").text());
/*$("button").click(function(){
alert($("p:eq(1)").text());
alert($("p:eq(1)").val());
});*/
//部分区域隐藏
var $num=true;
$("button").click(function(){
if($num){
$("p").hide();
$num=false;
}else{
$("p").show();
$num=true;
}
});
//图片缩放
$("button:eq(1)").click(function(){
$("img").attr("width","800");
});
$("button:eq(2)").click(function(){
$("img").attr("width","1000");
});
//css中若要恢复,须知道之前尺寸;而jquery可直接恢复
$("button:eq(3)").click(function(){
$("img").removeAttr("width");
});
});
</script>
<body>
<font>热</font>
<font>热</font>
<font>热</font>
<font>热</font>
<hr>
<p>心静自然凉</p>
<p>心静自然凉</p>
<p>心静自然凉</p>
<p>心静自然凉</p>
<span id="s1">20180717</span>
<span id="s2">20180717</span>
<span id="s3">20180717</span>
<span id="s4">20180717</span>
<button>点我呀</button>
<hr>
<img src="../20180716/image/tanwan.jpg" />
<br>
<button>变大</button>
<button>变最大</button>
<button>恢复</button>
</body>
小练习:
1.创建5对li的无序列表;
写在<body>标签中
<ur>
<li>1.java</li>
<li>2.HTML</li>
<li>3.CSS</li>
<li>4.javascript</li>
<li>5.jQuery</li>
</ur>
2.创建5个按钮;
<button id="b1">隐藏/显示</button>
<button id="b2">删除</button>
<button id="b3">第二个li变色</button>
<button id="b4">所有变色</button>
<button id="b5">弹框</button>
3.第一个按钮,用来隐藏/显示所有内容;
4.第二个按钮,用来删除最后一个li;
此处应用动态删除,每次删除最后(last)一个li。
5.第三个按钮,用来给第二对li的文字变成红色;
6.第四个按钮,让所有文字变色
7.第五个按钮,弹出框,显示每一个li中的内容
用到jQuery中的遍历。
先导入jQuery文件,然后依次实现每个button功能。
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
var $num = true;
$("#b1").click(function(){
if($num){
$("*li").hide();
$num=false;
}else{
$("*li").show();
$num=true;
}
});
$("#b2").click(function(){
$("li:last").remove();
});
$("#b3").click(function(){
$("li:eq(1)").css("color","red");
});
$("#b4").click(function(){
$("li").css("color","#6FF");
});
//动态显示
//each遍历
$("#b5").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
</script>