how2j.cn

下载区
文件名 文件大小
jquery.min.js 81k

解压rar如果失败,请用5.21版本或者更高版本的winrar

点击下载 winrar5.21

工具版本兼容问题
JQuery是一个javascript的框架,是对javascript的一种封装。

通过JQuery可以非常方便的操作html的元素


本例通过JQuery 实现 "隐藏与显示",并分步讲解每一个步骤的意思


示例 1 : 使用JQuery进行隐藏和显示   
示例 2 : jquery.min.js   
示例 3 : 本地测试的时候如何使用 jquery.min.js   
示例 4 : 理解 $(function(){})   
示例 5 : 通过id获取元素   
示例 6 : 增加监听器   
示例 7 : 隐藏与显示   

示例 1 :

使用JQuery进行隐藏和显示

edit
运行效果
<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>
1
<script src="https://how2j.cn/study/jquery.min.js"></script>
示例 3 :

本地测试的时候如何使用 jquery.min.js

edit
因为学习到目前为止,还没有讲解如何搭建web服务器,所以不能够像本网站上演示的 把jquery.min.js 放在 /study/jquery.min.js 这个地方。
那么本地要测试怎么做呢?
1. 首先在右侧下载 jquery.min.js
2. 把 jquery.min.js和测试的html放在同一个目录下
3. 在测试的html中直接写 src="jquery.min.js"
本地测试的时候如何使用 jquery.min.js
示例 4 :

理解 $(function(){})

edit
$(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>
1
2
3
4
5
6
7
8
9
10
<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script >
 
$(function(){
  document.write("文档加载成功!");
  document.close();
});
 
</script>


示例 5 :

通过id获取元素

edit
与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>
1
2
3
4
5
6
7
8
9
10
11
12
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
<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函数吗
HYH-HSC

close()函数







回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢

2021-03-08 建议
DK_afei

站长能出下JQuery EasyUI 和Vue EasyUI的教程吗,或者推荐下去哪学这两个比较好







回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢

2020-10-21 可以到这里来找资源
2020-10-21 不想下载JQuery,也可以把这段代码添加在head里
2020-05-09 分享一个IDEA里面下载jquery.min.js文件的方法


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 16 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢