how2j.cn

JQuery是一个javascript的框架,是对javascript的一种封装。

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


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

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

示例 1 :

使用JQuery进行隐藏和显示

运行效果
<script src="http://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

要使用Jquery需要导入一个第三方的javascript库 jquery.min.js,可以在右侧下载
运行效果
<script src="http://how2j.cn/study/jquery.min.js"></script>
<script src="http://how2j.cn/study/jquery.min.js"></script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

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

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

理解 $(function(){})


$(function(){
});

表示文档加载。看上去略复杂,其实是由下面两种构成:

$();


function(){
}

合并在一起就是:

$(function(){
});

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
换句话说,写在这里面的JQuery代码都是文档加载好之后的。
就不会有获取一个还没有加载好的图片这种问题了。
一样功能,还有另一个写法

$(document).ready(function(){
});

它也是由两部分组成

$(document).ready();


function(){
}
运行效果
<script src="http://how2j.cn/study/jquery.min.js"></script> <script > $(function(){ document.write("文档加载成功!"); document.close(); }); </script>
<script src="http://how2j.cn/study/jquery.min.js"></script>

<script >

$(function(){
  document.write("文档加载成功!");
  document.close();
});

</script>



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 5 :

通过id获取元素

与javascript通过id获取元素节点的方式(document.getElementById )不同
JQuery通过 $("#id") 就可以获取了


需要注意的是,通过 document.getElementById 获取到的是 DOM里的 元素节点
而通过$("#id") 获取到的是一个 JQuery 对象
参考 DOM的元素节点 与 JQuery 对象互换
运行效果
<script src="http://how2j.cn/study/jquery.min.js"></script> <script > $(function(){ document.write( $("#d") ); document.close(); }); </script> <div id="d">Hello JQuery</div>
<script src="http://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 :

增加监听器

JQuery增加click事件的监听

$("#b1").click(function(){
alert("点击了按钮");
});

这个也是由两部分组成:
1. b1按钮的点击事件

$("#b1").click();

2. 弹出对话框的函数

function(){
alert("点击了按钮");
}

与原生javascript需要在html元素上增加监听事件不同的是
JQuery 不需要在html元素上进行操作
这样的好处是,html只需要显示内容,特别是业务复杂起来之后维护js代码会更加容易。
运行效果
<script src="http://how2j.cn/study/jquery.min.js"></script> <script > $(function(){ $("#b1").click(function(){ alert("点击了按钮"); }); }); </script> <button id="b1">按钮</button>
<script src="http://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 :

隐藏与显示

通过$("#d")拿到div对象后,直接调用hide()和show()方法,即可实现隐藏和显示。
运行效果
<script src="http://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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果



问答区域    
2017-11-25 jquery导入库不对
status



用Safari写的jquery代码,引入的jquery库报错,不知为何。
<script src="http://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.min.js:1SyntaxError: Invalid character '\u10799'


1 个答案

小白雪 答案时间:2017-11-26
既然这样那你为何不引进jq的静态资源呢?
<script type="text/javascript" src="js/jquery.min.js" ></script>




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-09-03 直接通过button的点击事件为何不行呢???
唯恐天下不乱



为之奈何??站长
<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>

							


2 个答案

how2j 答案时间:2017-09-04
6666 哈哈

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




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-08-31 我在Myeclipse导入JQuery的库 但是代码都没换行 还有错误怎么办?
2017-08-31 怎么打印不出元素节点呢。。
2017-08-09 我想一直跟着你这个学下去 - - 没想到第一步就卡住了 我重新下载了火狐浏览器 也是不行 就在HBuilder中 jQuery可以有效 到底是怎么回事啊 eclipse就是不行
2017-08-09 这是建了一个什么项目啊 为啥我建的项目照着做 没效果




提问之前请登陆
关于 前端基础-JQuery-Hello JQuery 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 661682521
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图