（一）jQuery基础

jQuery 是一个 JavaScript 库。jQuery 极大地简化了JavaScript 编程。

如： $('#test') 和 document.getElementById('test') 相等，但是来得简洁。

使用JQuery要在<head></head>之间引入jquery-3.2.1.js文件，或者其他的版本。

<head>  
 <script src="js/jquery-3.2.1.js"></script>
</head>

$(selector).action()

$: jQuery

selector: "查询"和"查找" HTML 元素

action() : 执行对元素的操作

$(document).ready()方法允许我们在文档完全加载完后执行函数。

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

1.jQuery选择器（selector）

元素选择器： $("p")

#id 选择器： $("#test")

.class 选择器： $(".test")

$(“*”)：选取所有的元素

$(“this”)：选取当前元素

$("[href]")：选取带有 href 属性的元素

$("tr:even")：选取偶数位置的<tr> 元素

$("tr:odd")：选取奇数位置的<tr> 元素

层级选择：空格、>、：

$(".test .test1").hide();      //选择的是class=”test”下的元素的class=”test1”元素
$("div>p").hide();             //div下的p元素
$("div p:last-child").hide();  //div下p元素的最后一个节点

2.jQuery事件（是属于action，但不是所有的action，还有的action是一些方法）

click() ：方法是当按钮点击事件被触发时会调用一个函数。

dblclick()：当双击元素时，会发生 dblclick 事件。

mouseenter() ：当鼠标指针穿过元素时，会发生mouseenter 事件。

mouseleave() ：当鼠标指针离开元素时，会发生mouseleave 事件。

mousedown() ：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mouseup() ：当在元素上松开鼠标按钮时，会发生mouseup 事件。

hover() ：方法用于模拟光标悬停事件(当鼠标悬停在元素上)。

focus() ：当元素获得焦点时，发生 focus 事件。

blur() ：当元素失去焦点时，发生 blur 事件。

<html> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<head>  
 <script src="js/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();//隐藏get click 的这个p标签   
  });
  $("button").click(function(){
    $("p").hide();//button get click时隐藏所有p标签
  });
  $("#show").click(function(){
   $("p").show();//显示隐藏的
  });
  $("h2").click(function(){
    $(".test").hide();//隐藏所有class为test的标签
  });
  $("h3").click(function(){
    $("#test").hide();//隐藏所有id="test"的标签
  });
});
</script>
</head>  
<body>
<h2 class="test">点我隐藏所有class="test"的标签</h2>
<h3 id="test">点我隐藏所有id="test"的标签</h3>
<p>如果你点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
<button>点我</button>
</body>
</html>

3.jQuery方法（作为action，有的方法中有callback函数）

hide() 和 show() 方法来隐藏和显示 HTML元素；

toggle() 方法来切换 hide() 和 show() 方法；显示被隐藏的元素，并隐藏已显示的元素；

jQuery 元素的尺寸：

width() height() innerWidth() innerHeight() outerWidth() outerHeight()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<script src="js/jquery-3.2.1.js"></script>