JQuery简介
JQuery是一个javascript的框架,是对javascript的一种封装。
通过JQuery可以非常方便的操作html的元素 。
简单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>
<div id="d">
这是一个div
</div>
分布解析
- jquery.min.js
<script src="http://how2j.cn/study/jquery.min.js"></script>
要使用Jquery需要导入一个第三方的javascript库 jquery.min.js - 理解$(function(){})
表示文档加载。看上去略复杂,其实是由下面两种构成:
$()
和funtion(){}
合并而成为$(function(){});
亦可写成由:$(document).ready()
和function(){}
组成为$(document).ready(function(){});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
换句话说,写在这里面的JQuery代码都是文档加载好之后的。
就不会有获取一个还没有加载好的图片这种问题了。 - 通过id获取元素
与javascript通过id获取元素节点的方式(document.getElementById )不同JQuery通过 $("#id") 就可以获取了
<b>注:</b>通过 document.getElementById 获取到的是 DOM里的 元素节点,而通过$("#id") 获取到的是一个 JQuery 对象 - 增加监听器
JQuery增加click事件的监听
$("#b1").click(function(){
alert("点击了按钮");
});
这个也是由两部分组成:
1.b1按钮的点击事件 $("#b1").click();
2.弹出对话框的函数 function(){alert("点击了按钮");}