JQuery系列教材（一）- 教程

JQuery系列教材（二）- 常见方法 val () html() text() 以及html和text的区别

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

工具版本兼容问题

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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 2 :

jquery.min.js

edit 顶折

纠问

要使用Jquery需要导入一个第三方的javascript库 jquery.min.js，可以在右侧下载

<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"

示例 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. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 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. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 6 :

增加监听器

edit 顶折

纠问

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. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 7 :

隐藏与显示

edit 顶折

纠问

通过$("#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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

JQuery系列教材（二）- 常见方法 val () html() text() 以及html和text的区别

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2019-08-14 a jin 错误怎么解决

冀秉杰	关于前端部分-JQuery-Hello JQuery 的提问问题截图代码异常 eclipse运行程序就这样,怎么解决 >

1 个答案

娶一个昵称
答案时间：2019-08-15

可能情况： 1.该项目的 Build Path 的 Libraries 版本不兼容，删除后重新添加，Add Library.. -> JRE System Library 2.包命名问题。你自己定义的包路径以java开头造成。--修改包名 3.使用cmd运行 “java -version”和“javac -version”查看版本是否不一致。 ---不一致则重新配置环境 ……

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

2019-07-31 MyEclipse导入js会报错

8木头人8

关于前端部分-JQuery-Hello JQuery 的提问

就是这样，看图。不明所以。

1 个答案

8木头人8
答案时间：2019-08-11

已经解决

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

2019-06-20 $("#id") 获取到的是一个 JQuery 对象少了一组script标签后执行结果就不一样原因是什么?

2018-12-15 原生JavaScript也不需要在html进行操作啊

JesseStutler

关于前端部分-JQuery-Hello JQuery -增加监听器的提问

Jquery到底优化在了哪里，难道只是简化了js代码和优化了浏览器兼容性吗

<script>
 
window.onload=function(){
    document.getElementById('b1').onclick=function(){
        alert('点击了按钮!');
    };
};
 
</script>
 
<button id="b1">按钮</button>

3 个答案

BeachFish
答案时间：2019-07-03

感谢我会努力学JAVA的回答

我会努力学JAVA的
答案时间：2019-06-17

用的多了你就知道Jquery是对javascript的封装，方便了开发者使用，你两者都不熟，自然觉得两者都难用。不过原生js也确实可以不用在html中操作，我个人感觉jquery除了好用点，其实就那卵用，难怪现在都说jquery已死

代码超过 5行，点击查看

我会努力学JAVA的
答案时间：2019-06-17

用的多了你就知道Jquery是对javascript的封装，方便了开发者使用，你两者都不熟，自然觉得两者都难用

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

2018-12-03 最外面的$(function(){·······})是怎么被调用的，或者是又什么用，不要可以吗？

zl123456zl

关于前端部分-JQuery-Hello JQuery 的提问

4 个答案

yx17
答案时间：2019-05-30

因为这个JS代码块写在了HTML代码前面，如果不加上$()延迟加载的话，就会出现教程中所说的去拿一个还未加载的对象的情况（比如本例子中的#b #d1 #d2）

所以为了防止发生这种情况，除了可以使用各种方法延迟加载之外，一般都会把JS代码块或者外部JS引用写在HTML代码的后面

cirzear
答案时间：2019-02-27

你可以删除试试啊，我试了，不能删

鼬鼬鼬神
答案时间：2018-12-04

通过点击按钮触发隐藏和显示事件

鼬鼬鼬神
答案时间：2018-12-04

通过id选择器调用的function方法吧

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

2018-12-01 实例五中的执行顺序为什么先执行的js脚本后执行的基础语句

2018-11-05 实例五

2018-06-11 小写jQuery

2018-05-06 为什么我和站长的代码一样，点击隐藏过后文本消失后再点击显示文本不出现啦？

2018-05-04 学习方向

2018-04-24 function里面的代码运行顺序问题。。

2018-04-03 为什么一个按钮的点击事件触发不了

铭记

关于前端部分-JQuery-Hello JQuery 的提问

点击事件无效

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test1.jsp</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<h1>这是Test1.jsp</h1>
<button id="a1">按钮</button>

</body>
<script type="text/javascript">
$(function () {
	/* function j() {
		$("#a1").click(function () {
			alert(11);
		})
	}  放这里可以触发*/
})

function j() {
	$("#a1").click(function () {
		alert(11);
	})
	//这里就触发不了，我写在body底部
}

</script>
</html>

1 个答案

IceSugarJing
答案时间：2018-04-11

11是字符串吧

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

2018-04-02 关于$(function(){ })

2017-11-25 jquery导入库不对

2017-09-03 直接通过button的点击事件为何不行呢？？？

唯恐天下不乱

关于前端部分-JQuery-Hello JQuery 的提问

为之奈何？？站长

<head>
    <title>jquery</title>
    <script src="assets/js/jquery.min.js"></script>
    <script>
        var d = document.getElementById("d");
        function show() {
            d.show();
        }
        function hide() {
           // $("#d").hide();  这种方式可以隐藏div
            d.hide();   //这样就不可以隐藏
        }
    </script>
</head>
<body>
    <button id="b1"  onclick="show()">显示</button>
    <button id="b2" onclick="hide()">隐藏</button>
    <div id="d">
        这是一个DIV
    </div>
</body>

4 个答案

阿五
答案时间：2018-03-14

因为$(function(){dosomething}) 里面的代码（也就是dosomething）是会等html页面加载完毕之后，再执行的，相当于原生js中的window.onload=function(){dosomething}; 站长示例4也有提到过；

jamin
答案时间：2018-03-09

既然是顺序执行，那为什么示例5中 $("#d") 可以获取到对象呢？

how2j
答案时间：2017-09-04

6666 哈哈

唯恐天下不乱
答案时间：2017-09-03

犯了两个错误， 1第一个是忘记了js语言是顺序执行的，就是说 var d = document.getElementById("d"); 这个地方获取的d元素值是null，需要写在function方法中，才能获取到元素值 2 是需要将div这个dom元素，转成jquery对象才能生效，那要是不用jquery方法又怎么能将这个div隐藏呢，晕晕晕

代码超过 5行，点击查看

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

2017-08-31 我在Myeclipse导入JQuery的库但是代码都没换行还有错误怎么办？

2017-08-31 怎么打印不出元素节点呢。。

nicoleyeyewang

关于前端部分-JQuery-Hello JQuery -通过id获取元素的提问

站长，我把你这里例子中的div的部分粘到<script> 的前面，然后改成打印div object 而不是jQuery 对象，为什么还是打印空呢？错在哪里。。。谢谢

<script src="http://how2j.cn/study/jquery.min.js"></script>
 
<div id="d">Hello JQuery</div> 
<script >
 
$(function(){
  var  div = document.getElementById("d");
  document.write(div);
  document.close();
});
 
</script>

3 个答案

how2j
答案时间：2017-09-01

哇，IE, 请抛弃之

nicoleyeyewang
答案时间：2017-08-31

谢谢站长！发现换成chrome就有显示了，ie还是不显示。。。

how2j
答案时间：2017-08-31

我使用你的代码，并贴在了这里： http://how2j.cn/code/225 是可以跑起来的呀

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

2017-08-09 我想一直跟着你这个学下去 - - 没想到第一步就卡住了我重新下载了火狐浏览器也是不行就在HBuilder中 jQuery可以有效到底是怎么回事啊 eclipse就是不行

2017-08-09 这是建了一个什么项目啊为啥我建的项目照着做没效果

forjob

关于前端部分-JQuery-Hello JQuery 的提问

这是建了一个什么项目啊为啥我建的项目照着做没效果

4 个答案

单振龙
答案时间：2017-08-24

应该直接/js/jquery-3.2.1.min.js吧

forjob
答案时间：2017-08-09

为啥就是不行呢

forjob
答案时间：2017-08-09

我真的是气死了我用的eclipse 引用了 jQuery 但是就是没效果到底是怎么回事啊是路径问题吗？代码如下 HTML页面和jQuery文件都放在 webcontent/js 文件中的

代码超过 5行，点击查看

how2j
答案时间：2017-08-09

这算不上是个项目，只是一个.js的运用，参考这个步骤： http://how2j.cn/k/jquery/jquery-tutorial/467.html#step1216

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

提问之前请登陆

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

关于前端部分-JQuery-Hello JQuery 的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 881555796

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图