|
|
|
示例 2 : jquery.min.js 示例 3 : 本地测试的时候如何使用 jquery.min.js 示例 4 : 理解 $(function(){}) 示例 5 : 通过id获取元素 示例 6 : 增加监听器 示例 7 : 隐藏与显示 <script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d").hide();
});
$("#b2").click(function(){
$("#d").show();
});
});
</script>
<button id="b1">隐藏div</button>
<button id="b2">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
要使用Jquery需要导入一个第三方的javascript库 jquery.min.js，可以在右侧下载
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script src="https://how2j.cn/study/jquery.min.js"></script>
因为学习到目前为止，还没有讲解如何搭建web服务器，所以不能够像本网站上演示的 把jquery.min.js 放在 /study/jquery.min.js 这个地方。
那么本地要测试怎么做呢？ 1. 首先在右侧下载 jquery.min.js 2. 把 jquery.min.js和测试的html放在同一个目录下 3. 在测试的html中直接写 src="jquery.min.js" $(function(){ }); 表示文档加载。看上去略复杂，其实是由下面两种构成： $(); function(){ } 合并在一起就是： $(function(){ }); 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。 换句话说，写在这里面的JQuery代码都是文档加载好之后的。 就不会有获取一个还没有加载好的图片这种问题了。 一样功能，还有另一个写法 $(document).ready(function(){ }); 它也是由两部分组成 $(document).ready(); function(){ } <script src="https://how2j.cn/study/jquery.min.js"></script>
<script >
$(function(){
document.write("文档加载成功!");
document.close();
});
</script>
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script >
$(function(){
document.write("文档加载成功!");
document.close();
});
</script>
与javascript通过id获取元素节点的方式(document.getElementById )不同
JQuery通过 $("#id") 就可以获取了 需要注意的是，通过 document.getElementById 获取到的是 DOM里的 元素节点 而通过$("#id") 获取到的是一个 JQuery 对象 参考 DOM的元素节点 与 JQuery 对象互换 <script src="https://how2j.cn/study/jquery.min.js"></script>
<script >
$(function(){
document.write( $("#d") );
document.close();
});
</script>
<div id="d">Hello JQuery</div>
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script >
$(function(){
document.write( $("#d") );
document.close();
});
</script>
<div id="d">Hello JQuery</div>
JQuery增加click事件的监听
$("#b1").click(function(){ alert("点击了按钮"); }); 这个也是由两部分组成： 1. b1按钮的点击事件 $("#b1").click(); 2. 弹出对话框的函数 function(){ alert("点击了按钮"); } 与原生javascript需要在html元素上增加监听事件不同的是 JQuery 不需要在html元素上进行操作 这样的好处是，html只需要显示内容，特别是业务复杂起来之后维护js代码会更加容易。 <script src="https://how2j.cn/study/jquery.min.js"></script>
<script >
$(function(){
$("#b1").click(function(){
alert("点击了按钮");
});
});
</script>
<button id="b1">按钮</button>
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script >
$(function(){
$("#b1").click(function(){
alert("点击了按钮");
});
});
</script>
<button id="b1">按钮</button>
通过$("#d")拿到div对象后，直接调用hide()和show()方法，即可实现隐藏和显示。
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d").hide();
});
$("#b2").click(function(){
$("#d").show();
});
});
</script>
<button id="b1">隐藏div</button>
<button id="b2">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2022-02-03
可以讲一下close函数吗
2021-03-08
建议
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-10-21
可以到这里来找资源
2020-10-21
不想下载JQuery，也可以把这段代码添加在head里
2020-05-09
分享一个IDEA里面下载jquery.min.js文件的方法
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 16 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||||||||||||||
