jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
（值得一提的是jQuery很多操作也是操作dom，我们应该避免减少的操作dom）
基础语法： $(selector).action()
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素
jQuery 中所有选择器都以美元符号开头：$()。
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });
$("#test").hide();
$(".test").hide();
事件：
比如
$("p").click(function(){
// 动作触发后执行的代码!!
});
val() 方法返回或设置被选元素的值。
元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
如果该方法未设置参数，则返回被选元素的当前值。
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("RUNOOB"); }); }); </script> </head> <body> <p id="test1">这是一个段落。</p> <p id="test2">这是另外一个段落。</p> <p>输入框: <input type="text" id="test3" value="菜鸟教程"></p> <button id="btn1">设置文本</button> <button id="btn2">设置 HTML</button> <button id="btn3">设置值</button> </body> </html>
我们将学习用于添加新内容的四个 jQuery 方法：
jQuery append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）。
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
jQuery remove() 方法删除被选元素及其子元素。
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
<script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); }); }); </script> <style type="text/css"> .important { font-weight:bold; font-size:xx-large; } .blue { color:blue; } </style> </head> <body> <h1>标题 1</h1> <h2>标题 2</h2> <p>这是一个段落。</p> <p>这是另外一个段落。</p> <div>这是一些重要的文本!</div> <br> <button>为元素添加 class</button> </body>
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
$(document).ready(function(){ $("span").parent(); });
下面是两个用于向下遍历 DOM 树的 jQuery 方法：
$(document).ready(function(){ $("div").children(); });
有许多有用的方法让我们在 DOM 树进行水平遍历：
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
first() 方法返回被选元素的首个元素。
下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：
last() 方法返回被选元素的最后一个元素。
下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素：
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
下面的例子返回带有类名 "url" 的所有 <p> 元素：
<head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").filter(".url").css("background-color","yellow"); }); </script> </head> <body> <h1>欢迎访问我的主页</h1> <p>菜鸟教程 (index 0).</p> <p class="url">http://www.runoob.com (index 1)。</p> <p>google (index 2).</p> <p class="url">http://www.google.com (index 3)。</p> </body> </html>
原文：https://www.cnblogs.com/yangj-Blog/p/13042214.html