JQuery引入

引入jQuery

联网时可以使用在线版本

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

也可以使用下载的jQuery

在idea中添加下面的语句，再alt+enter进行下载

<script src="https://how2j.cn/study/jquery.min.js"></script>

理解$(function(){})

表示文档加载
这是为了防止再文档加载完毕前就运行jQuery代码
同时也可以写成

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

代码示例如下

<>

通过id获取元素

JavaScript中获取元素的方法是document.getElementById()
而jQuery中只需要$("id")就可以了
需要注意的是，通过 document.getElementById 获取到的是 DOM里的 元素节点
而通过$("#id") 获取到的是一个 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>

添加事件监听

JQuery添加click事件监听：

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

与原生JavaScript需要在html元素上加上onclick()函数不同的是，JQuery不需要对html元素有任何的操作
这样的好处是，html只需要显示内容，特别是业务复杂起来之后维护js代码会更加容易。