JQuery3.3.1
1.引包
# 该标签如果用来引包,里面不允许写任何js语句!
<script src="jquery-3.3.1.min.js></script>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
alert("hello world.");
</script>
注意:使用jQuery要先引入包、jquery-3.3.1.min.js去注释、缩短了变量等长度、比较小、所以引用这个min.js包。
2.入口函数
$()或jQuery() 称之为jq选择器环境,在里面加上引号填写相关选择器即可,就可以获取匹配的元素。
js:window.onload=function(...){}
jq:$(document).ready(function(){...});
$(function(){...});
(1)两者功能都一致,都可以让获取元素的行为发生在渲染元素之后;
(2)JS入口只允许存在一个,书写多个的话,后面的会覆盖前面的;
(3)JQ入口允许存在多个,且并行存在,都会生效;
(4)JS入口需要等待页面上所有资源加载完毕,而JQ入口只需要等待页面上标签渲染完毕即可,JQ入口速度更快。
3.案例
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
// JS 页面加载完成
window.onload = function () {
alert("谢谢惠顾!");
}
window.onload = function () {
alert("恭喜你,中特等奖!");
}
// $ 符号就是 jquery 的简写方式.
// 复杂书写 :
$(document).ready(function () {
alert("恭喜你,中一等奖!");
});
// 简化书写
$(function () {
alert("恭喜你,获得女朋友一个!");
})
</script>
4.事件
# jq中的事件类型统一不要加on
js:js对象.onclick = function(){...}
jq:jquery对象.click(function(){...})
5.案例-js代码
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
// 注意 : JS 的代码都是写在 = 后面. jquery 的代码基本上都是写在 () 里面.
// jquery 入口函数 :
$(function () {
// JS 代码 :
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("按钮被点击了...");
}
});
</script>
jQuery代码
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
// 注意 : JS 的代码都是写在 = 后面. jquery 的代码基本上都是写在 () 里面.
// jquery 入口函数 :
jQuery(function () {
// jquery 代码 :
$("#btn").click(function () {
alert("按钮被点击了...");
});
});
</script>
<input type="button" value="按钮" id = "btn"/>
6.事件
(1)在jq里面,通过$()返回的数组,允许开发者整体操纵
(2)选择数组中的其中一个元素:js对象[下标] jq对象.eq(下标)
html代码:
<body>
<input type="button" value="按钮1111" />
<input type="button" value="按钮2222" />
</body>
js代码:
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
// jquery 入口函数 :
$(function () {
// JS 代码为两个按钮绑定事件 (JS代码不可以进行整体绑定)
// JS 中 document.getElementsByTagName 该方法返回的是一个数组, 只能取出对应的元素才可以绑定.
var inputs = document.getElementsByTagName("input");
inputs[0].onclick = function () {
alert("按钮1111被点击了...");
}
inputs[1].onclick = function () {
alert("按钮2222被点击了...");
}
});
</script>
jQuery代码:
# JQuery整体操作绑定
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
// jquery 入口函数 :
$(function () {
// jquery 书写 :
$("input").click(function () {
alert("按钮被点击了...");
});
});
</script>
# 单个标签实现事件绑定
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
// jquery 入口函数 :
$(function () {
// jquery 书写 :
$("input").eq(0).click(function () {
alert("按钮1111被点击了...");
});
$("input").eq(1).click(function () {
alert("按钮2222被点击了...");
});
});
</script>
jQuery的学习到此结束!!