【干货篇】步步为营，带你轻松掌握jQuery！

写在前面：

经过系统的学习了原生JS之后，会发现其具有以下三个特点：

1、是一种解释性脚本语言（代码不进行预编译）。
2、主要用来向 HTML 页面添加交互行为。
3、可以直接嵌入 HTML 页面，但写成单独的js文件有利于结构和行为的分离。

而接下来要讲的jQuery 就对原生javascript的一个扩展，封装，就是让javascript更好用，更简单。

换而言之，jquery就是要用更少的代码，漂亮的完成更多的功能。{Write less, Do more!}

1. jQuery 作为 JavaScript 的代码库，自然是使用 JavaScript 语言编写的。
2. jQuery 的代码非常规范，执行效率也很高，是 JavaScript 编码的优秀范例。
3. 很多情只要使用 jQuery 的方法就可以实现大部分的 JavaScript 功能。

所以说，程序员作为一种极懒的物种存在，势必想着要减少不必要的代码劳动量，因此jQuery诞生了。

一、jQuery基础语法

1、适应JQuery、必须要先导入JQuery。x.x.x.js文件。

 $(document).ready(function() { //JQuery代码 })； 简写形式如下： $(function(){});

 $("#p").click() √ $("#p").onclick = function(){}; ×

$("<p>这是被插入的p标签</p>").appendTo("#div1");

$("#div1").prepend("<p>这是被插入的p标签</p>");
$("#div1").after("<p>这是被插入的p标签</p>");
$("<p>这是被插入的p标签</p>").insertBefore("#div1");

$("p").wrap("<div></div>");

$("p").wrapAll("<div></div>");

$("#p").unwrap();

$("p").replaceWith("<span>111</span>");

$("<span>111</span>").replaceAll("p");

$("#div1").empty();

$("#div1").remove();

$("p").toggleClass("selected1");

console.log($("#div1").html());$("#div1").html("<h1>我是新的h1</h1>");

console.log($("#div1").text());$("#div1").text("<h1>我是新的h1</h1>");

console.log($("input[type=‘text‘]").val());$("input[type=‘text‘]").val("啧啧啧！");

console.log($("#div1").innerHeight());console.log($("#div1").innerWidth());

var str1 = " 123 ";console.log(str1.trim());