JQuery基础

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("点击了按钮");}