添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

jQuery中html()、text()、val()的使用和区别

jquery中获取或设置对象内容的方法主要有3种,分别是html()、text()、val()。
这三个方法如果未设置参数,则返回被选元素的当前内容。如果传入参数则将设置元素内容为参数值。

$("#id").html() :获取或设置对象包裹的所有html内容,相当于原生js的 innerHTML
$("#id").text() :获取或设置对象中所有的文本内容,不包含html标签。一般用于div、p、span等没有value属性的元素,相当于原生js的 innerText
$("#id").val() :获取或设置对象的value的值。获取的是选择对象的第一个元素的value值。当然该属性并不局限于只有value的元素,对于表单元素都适合。

<div id="source" title="source *" style="padding:10px;">
你好<textarea id="text">you,too</textarea>

$("#source").html()的结果为:你好<textarea id="text">you,too</textarea>
$("#source").text()的结果为:你好 you,too
$("#source").val()的结果为:""
可以看出val()只获取对象的value值,而div本身并没有value属性,故其值为空。text()获取的只是纯文本。

jQuery $(“#id”).text()无效

比如我想在页面的一个 span 中显示浏览器信息 navigator.platform
将 span 的 id 定义为 navigator.platform ,如下

<span id="navigator.platform" style="word-break:break-all;"></span>
<script type="text/javascript">
  $("#navigator-platform").text(navigator.platform);
</script>

始终无法显示出来,后来想到可能是和浏览器中的 navigator.platform 对象重复了,把id改为 navigator-platform 后没问题了。
但奇怪的是我通过 js 原生的
document.getElementById("navigator.platform").innerText = navigator.platform;
是没问题的

$(“#id”)与document.getElementById(“id”)的区别

document.getElementById() 返回的是DOM对象,而 $() 返回的是 jQuery 对象

什么是jQuery对象?
就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。

虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法,乱使用会报错。
比如:
$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码:
document.getElementById("id").innerHTML;
下面写法是错误的:
$("#test").innerHTML, document.getElementById("id").html()

jQuery对象转成DOM对象

两种转换方式将一个jQuery对象转换成DOM对象:[index].get(index);
(1)jQuery对象是一个数据对象,可以通过 [index] 的方法,来得到相应的DOM对象。
如:

var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供,通过 .get(index)方法,得到相应的DOM对象
如:

var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象

对于已经是一个DOM对象,只需要用 $() 把DOM对象包装起来,就可以获得一个jQuery对象了。
如:

var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象

jquery中的$(“#id”)与document.getElementById(“id”)的区别
https://www.cnblogs.com/thewaytoace/p/5591221.html

jQuery 事件

jQuery/JS实时监听input中值变化

首先分清下面几个事件:

onchange

onchange 此事件会在元素内容发生改变,且失去焦点的时候触发。浏览器支持度较好。
onchange触发事件必须满足两个条件:
a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
b)当前对象失去焦点(onblur);

onpropertychange

onpropertychange 老版IE特有的事件。
此事件会在元素内容发生改变时立即触发,即便是通过js改变的内容也会触发此事件。元素的任何属性改变都会触发该事件,不止是value。
只有IE11以下浏览器支持此事件。

oninput

oninput HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。
oninput 并非对象所有属性改变都能触发事件,它只在对象 value 值发生改变时奏效,并且通过js改变value属性值不会触发此事件。
不过 oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代。

jQuery写法

使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码:

$('#username').bind('input propertychange', function(event) {
  console.log(event.target.value);
  console.log($("#local-search-input").val());

其中的参数 event.target 就是 input 对象

完整示例:

<!DOCTYPE html>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <title>测试</title>
</head>
  <input type="text" id="local-search-input" name="q" placeholder="暂时禁用搜索" class="st-search-input"/>
  <script type="text/javascript">
    $("#local-search-input").bind("input propertychange", function(event) {
      console.log(event.target.value);
      console.log($("#local-search-input").val());
  </script>
</body>
</html>

原生JavaScript写法

<head>
    <script type="text/javascript">
      // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
      function OnInput (event) {
          alert ("The new content: " + event.target.value);
      // Internet Explorer
      function OnPropChanged (event) {
          if (event.propertyName.toLowerCase () == "value") {
              alert ("The new content: " + event.srcElement.value);
    </script>
</head>
    Please modify the contents of the text field.
    <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />
</body>

jQuery输入框回车事件

html

<input type="text" id="local-search-input" name="q" results="0" placeholder="欢迎试用自建搜索系统" class="st-search-input st-default-search-input form-control"/>

键盘事件有 3 个: keydown, keypress, keyup,分别是按下,按下没抬起,抬起。
推荐使用 keyup 防止误触。 回车键的 code 是 13

// input 搜索框上的回车事件
$("#local-search-input").keyup(function(event) {
  console.log("keyup 事件, key code: " + event.keyCode);
  if (event.keyCode == 13) {
    var input = $("#local-search-input").val();
    // 调用搜索接口
    search(input);

或者使用 on

$("#local-search-input").on("keyup", function(event) {
  console.log("keyup 事件, key code: " + event.keyCode);
  if (event.keyCode == 13) {
    var input = $("#local-search-input").val();
    // 调用搜索接口
    search(input);

https://api.jquery.com/keyup/

禁用input的自动补全功能

只需要在 input 属性中添加 autocomplete="off" 即可,

<input type="text" autocomplete="off">

jQuery bind 和 on

JQuery 从 1.7+ 版本开始,提供了 on()off(),进行事件处理函数的绑定和取消。
这 2 个 API 与 JQuery 最初提供的 bind()unbind() 有很多相似的地方,也有一些不同之处。
建议使用 on 代替 bind

.bind( eventType [, eventData ], handler )
.on( events [, selector ] [, data ], handler )
on 比 bind 多了 selector 支持,方便进行元素过滤。
由于 javascript 的事件冒泡特性,如果我们在父元素上注册了一个事件处理函数,当子元素上发生这个事件的时候,父元素上的事件处理函数也会被触发
使用 bind 就只能全触发,使用 on 就可以自定义 selector 过滤。

<div id="parent">
    <input type="button" value="a" id="a"/>
    <input type="button" value="b" id="b"/>

上面这段代码,如果我们使用 bind() 在 parent 上绑定了 click 事件处理函数,当点击 a 或者 b 按钮的时候,都会执行事件处理函数。如果我们希望点击 a 的时候触发,点击 b 的时候不触发,那么可以使用 on,代码如下:

$("#parent").on("click","#a",function(){
    alert($(this).attr("id"));

https://api.jquery.com/bind/
https://api.jquery.com/on/

jQuery事件:bind、delegate、on的区别
https://harttle.land/2015/06/26/jquery-event.html

jQuery DOM节点的创建、插入、删除

jQuery DOM节点的创建、插入、删除
https://segmentfault.com/a/1190000010633617

append()前面是被插入的对象,后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容,而后面是被插入的对象

after()向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素后移,然后将html代码插入
before()向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前移,然后将html代码插

.prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).
.prepend()和.prependTo()实现同样的功能,主要的不同是语法,插入的内容和目标的位置不同
对于.prepend() 而言,选择器表达式写在方法的前面,作为待插入内容的容器,将要被插入的内容作为方法的参数
.prependTo() 正好相反,将要被插入的内容写在方法的前面,可以是选择器表达式或动态创建的标记,待插入内容的容器作为参数。

批量删除和修改

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").text("dfsfd"); // 修改所有p的文本内容
    $(".rem-div").remove(); // 删除所有 .rem-div 类别的元素
</script>

empty()情况内容

append() 内部末尾插入

append(content):方法在被选元素的结尾(仍然在内部)插入指定内容
jquery中的append的使用方式:$("#id").append("<a href='#'>test</a>");
该操作是将append中的html标签字符串追加插入到匹配元素的末尾,不会覆盖id下的原有内容。

html() 方法返回或设置被选元素的内容 (inner HTML)。
如果该方法未设置参数,则返回被选元素的当前内容。
$("#id").html() 返回id下的所有html元素
$("#id").html("<b>Hello world!</b>"); 设置id的html内容为参数值

innerHTML是js的原生方法,$("#id")是个Jquery对象,Jquery没有innerHTML这个属性,应该这样写 $("#id")[0].innerHTML=""就可以获得这个Dom对象使用innerHTML。
js中可以通过document.getElementById("#id").innerHTML = ""来实现。

在ajax中拼接页面:

div2.append("<tr ><td >dd</td><td ><select style='width: 40%'>");
div2.append("<option>ff</option>");
div2.append("</select></td></tr>");

这样出不来select的效果是为什么?
但这样能出效果:

div2.append("<tr ><td >dd</td><td ><select style='width: 40%'><option>ff</option></select></td></tr>");

append()和 document.write() 不同,
document.write()是直接输出html代码流,可以一点一点的输出,每次输出标签的一小部分。
append()是每次创建一个完整的元素对象,这就要求每次提供的thml代码必须是完整的闭合标签。

你可以先用字符串拼接,再一次性创建

var str = "<tr ><td >dd</td><td ><select style='width: 40%'>";
str += "<option>ff</option>";
str += "</select></td></tr>";
div2.append(str);

clone()克隆

clone() 方法深度复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点。
clone方法比较简单就是克隆节点,但是需要注意,如果节点有事件或者数据之类的其他处理,我们需要通过 clone(ture) 传递一个布尔值ture用来指定,这样不仅仅只是克隆单纯的节点结构,还要把附带的事件与数据给一并克隆

克隆并追加一个 p 元素:

$("button").click(function(){
  $("body").append($("p").clone());

$.each()遍历json数组

jQuery.each( collection, callback(indexInArray, valueOfElement) )
一个通用的迭代函数,它可以用来无缝迭代对象和数组。
$.each() 返回 false 来终止迭代。
返回非 false 相当于一个循环中的 continue 语句,这意味着,它会立即跳出当前的迭代,转到下一个迭代。

$.each([52, 97], function(index, value) {
  alert(index + ': ' + value);

结果:
0: 52
1: 97

如果对象是 map,回调函数每次传递一个键值对的:

var obj = {
  "flammable": "inflammable",
  "duh": "no duh"
$.each( obj, function( key, value ) {
  alert( key + ": " + value );

结果:
flammable: inflammable
duh: no duh

jQuery.each()
https://www.jquery123.com/jQuery.each/

jQuery.each()
https://api.jquery.com/jQuery.each/

$.get()

使用一个HTTP GET请求从服务器加载数据。

jQuery.get()
https://api.jquery.com/jQuery.get/

$.get()$.ajax() 的封装,等于

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType

从jQuery 1.5开始,所有jQuery的Ajax方法都返回一个XMLHTTPRequest对象的超集。
这个通过$.get()方法返回的jQuery XHR对象,或“jqXHR,”实现了 Promise 接口,使它拥有 Promise 的所有属性,方法和行为(见Deferred object获取更多信息)。
jqXHR.done() (表示成功), jqXHR.fail() (表示错误), 和 jqXHR.always() (表示完成, 无论是成功或错误) 方法接受一个函数参数,用来请求终止时被调用。

jQuery.get()读取当前域内的文档

如果 $.get() 的请求 url 中如果不带 host 信息,表示请求当前域下的文档,可用来读当前域下的各种文档。
比如我下面使用 $.get() 请求当前域下同级的 markdown.md markdown 文档并使用 marked 实时渲染为 html:

<!doctype html>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
  <script src="/js/jquery-2.0.3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
  <div id="markdown"></div>
  <script type="text/javascript">
    $.get("markdown.md").done(content => $("#markdown").html(marked(content)));
  </script>
</body>
</html>

$.ajax()

$.ajax()方法详解
https://www.cnblogs.com/tylerdonet/p/3520862.html

url

类型:String
默认值: 当前页地址。发送请求的地址。

type

类型:String
默认值: “GET”)。请求方式 (“POST” 或 “GET”), 默认为 “GET”。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。

dataType

类型:String
预期服务器返回的数据类型。
如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。
在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:
“xml”: 返回 XML 文档,可用 jQuery 处理。
“html”: 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
“json”: 返回 JSON 数据 。
“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时,如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
“text”: 返回纯文本字符串

contentType

类型:String
发送信息至服务器时内容编码类型。
默认值: “application/x-www-form-urlencoded”。

默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。

data

类型:String
发送到服务器的数据。将自动转换为请求字符串格式。
GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。

success()

类型:Function
请求成功后的回调函数,有两个参数。
(1) data 由服务器返回,并根据dataType参数进行处理后的数据。
(2) textStatus 描述状态的字符串。

function(data, textStatus){
  // data可能是xmlDoc、jsonObj、html、text等等
  this;  //调用本次ajax请求时传递的options参数

error()

类型:Function
默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
这是一个 Ajax 事件。

error函数返回的参数有三个: function(jqXHR jqXHR, String textStatus, String errorThrown)

第一个参数 jqXHR jqXHR:这里的jqXHR是一个jqXHR对象,在Jquery1.4和1.4版本之前返回的是XMLHttpRequest对象,1.5版本以后则开始使用jqXHR对象,该对象是一个超集,就是该对象不仅包括XMLHttpRequest对象,还包含其他更多的详细属性和信息。
这里主要有4个属性:
readyState :当前状态,0-未初始化,1-正在载入,2-已经载入,3-数据进行交互,4-完成。
status :返回的HTTP状态码,比如常见的404,500等错误代码。
statusText :对应状态码的错误信息,比如404错误信息是not found,500是Internal Server Error。
responseText :服务器响应返回的文本信息

第二个参数 String textStatus:返回的是字符串类型,表示返回的状态,根据服务器不同的错误可能返回下面这些信息:”timeout”(超时), “error”(错误), “abort”(中止), “parsererror”(解析错误),还有可能返回空值。

第三个参数 String errorThrown:也是字符串类型,表示服务器抛出返回的错误信息,如果产生的是HTTP错误,那么返回的信息就是HTTP状态码对应的错误信息,比如404的Not Found,500错误的Internal Server Error。

function(jqXHR, textStatus, errorThrown){
   //通常情况下textStatus和errorThrown只有其中一个包含信息
   this;   //调用本次ajax请求时传递的options参数

Uncaught TypeError: Illegal invocation

data直接取的对象,没有加.val()取值,加上就好了

data: {
      'path': postlink,
      'nickname':$('#input_nickname').val(),
      'email':$('#input_email').val(),
      'content':$('#textarea_comment_content').val()

jQuery Ajax 发送 POST JSON 请求示例

// 回复评论,event是“评论”按钮
function replyComment(event) {
  console.log("点击了评论PID " +$(event.target).parent().attr("pid") +" 的提交按钮");
  // "评论"按钮的父节点,即评论form
  var commentForm = $(event.target).parent();
  $.ajax({
      type: "POST",
      dataType: "json", //服务器返回的数据类型
      contentType: "application/json", //post请求的信息格式
      url: BACKEND_SERVER + "comments", // 创建评论接口api
      data: {
            'pathname': commentForm.attr("pathname"),
            'host': window.location.host,
            'pid': commentForm.attr("pid"),
            'nickname':commentForm.children("#input_nickname").val(),
            'email':commentForm.children('#input_email').val(),
            'content':commentForm.children('#textarea_comment_content').val()
      success: function (result) {
          console.log(result);//在浏览器中打印服务端返回的数据(调试用)
          if (result.resultCode == 200) {
              console.log("SUCCESS");
          // 评论成功后触发一次查询
          getCommentsByPathname();
      error : function(jqXHR, textStatus, errorThrown) {
        alert("评论异常");
        console.log(jqXHR.responseText);
        console.log(textStatus);
        console.log(errorThrown);

jQuery Ajax GET 跨域查询并表单展示示例

跨域是通过nginx配置CORS实现的,前端不用管,直接访问跨域url即可。

<div id="my_comment" style="box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); word-wrap:break-word"></div>
<script>
    $(function(){
      var pathSplit = window.location.pathname.split("/");
      var postlink = pathSplit[pathSplit.length-2];
        $.ajax({
            // 请求方式
            type:"GET",
            // 接口地址
            url:"http://api.madaimeng.com/comment/" + postlink,
            // 返回数据格式
            dataType: "json",
            // 请求成功后要执行的函数,data即为返回的数据
            success: function(data){
                var str="";
                // 遍历data
                $.each(data, function(i,n){
                    str+="<div><ul><li>"+"评论ID:"+n.id+"</li>";
                    str+="<li>"+"评论PID:"+n.pid+"</li>";
                    str+="<li>"+"文章PostLink:"+n.path+"</li>";
                    str+="<li>"+"昵称:"+n.nickname+"</li>";
                    str+="<li>"+"内容:"+n.content+"</li>";
                    str+="<li>"+"时间:"+n.createTime+"</li></ul></div>";
                str+="";
                $("#my_comment").append(str);
</script>

Ajax GET 请求不能带 body

GET 请求带 body 会被忽略

XMLHttpRequest 发送 Get 跨域请求示例

<div id="div_origin_json_comments" style="word-wrap:break-word"></div>
<script>
// 全局变量:后台接口server地址
var BACKEND_SERVER = "http://api.masikkk.com";
// 根据pathname查询原始json评论并展示在div_origin_json_comments
function getCommentsJsonByPathname() {
  var xmlhttp;
  if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        if (xmlhttp.responseText != "[]") {
          document.getElementById("div_origin_json_comments").innerHTML = xmlhttp.responseText;
        } else {
          document.getElementById("div_origin_json_comments").innerHTML = "本页面没有评论";
  // 直接跨域发送请求,后端nginx已做好配置,XMLHttpRequest.open(method, url, async) 初始化一个请求,async=true
  xmlhttp.open("GET", BACKEND_SERVER + "/comments?pathname=" + window.location.pathname, true);
  // XMLHttpRequest.send() 发送请求
  xmlhttp.send();
</script>

XMLHttpRequest 发送 POST 请求示例

function getCommentsJsonByPathname() {
  var xhr;
  if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xhr = new XMLHttpRequest();
  } else {
    // code for IE6, IE5
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  // 直接跨域发送请求,后端nginx/springboot已做好CORS配置,XMLHttpRequest.open(method, url, async) 初始化一个请求,async=true
  var api = "http://localhost:8001" + "/comment/listComments";
  xhr.open("POST", api, true);
  xhr.setRequestHeader('content-type', 'application/json'); // open之后才能setHeader
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        if (xhr.responseText != "[]") {
          document.getElementById("div_origin_json_comments").innerHTML = xhr.responseText;
        } else {
          document.getElementById("div_origin_json_comments").innerHTML = "本页面没有评论";
  var req = {
      pathname: location.pathname
  // XMLHttpRequest.send() 发送请求
  xhr.send(JSON.stringify(req));

图片轮播插件Slick

slick
https://github.com/kenwheeler/slick

演示地址、使用方法
http://kenwheeler.github.io/slick/

jquery旋转木马插件SLICK
http://www.jq22.com/jquery-info406

$(window).load()$(document).ready()的区别

在JavaScript中

window.onload = function() {
  alert(“text1”);

等同于在jQuery中

$(window).load(function() {
    alert("text1");

他们都是用于当页面的所有元素,包括外部引用文件,图片等都加载完毕时运行函数内的alert函数。
load方法只能执行一次,如果在js文件里写了多个,只能执行最后一个。(初学者常常在页面结构里对元素直接写行为函数,这样是很丑陋的,可以用选择器等,在js代码里对元素进行行为控制。)

在jquery中

$(document).ready(function() {
    alert("text2");

等同于(简化写法)

$(function() {
    alert("text2");

等同于JavaScript中的:

document.ready=function() {
 alert("ready");

他们都是用于当页面的标准DOM元素被解析成DOM树后就执行内部alert函数。这个函数是可以在js文件里多次编写的,对于多人共同编写的js就有很大的优势,因为所有行为函数都会执行到。而且$(document).ready()函数在HMTL结构加载完后就可以执行,不需要等大型文件加载或者不存在的连接等耗时工作完成才执行,效率高。
当然 也要根据项目需求来使用,比如有时候有些时候图片或者重要信息没出来,会对用户操作产生误导,或者需要等获取某些图片高宽数据后再执行的行为函数,就得使用window.onload了。

可以用下面代码测试这两个事件的异同

<script type="text/javascript">
    $(document).ready(function(){
      console.log("document.ready 事件");
    $(window).load(function(){
      console.log("window.load 事件");
</script>
			
  1. jQuery中的$
  2. jQuery中html()、text()、val()的使用和区别
    1. jQuery $(“#id”).text()无效
  3. $(“#id”)与document.getElementById(“id”)的区别
    1. jQuery对象转成DOM对象
    2. DOM对象转成jQuery对象
  4. jQuery 事件
    1. jQuery/JS实时监听input中值变化
      1. onchange
      2. onpropertychange
      3. oninput
      4. jQuery写法
      5. 原生JavaScript写法
    2. jQuery输入框回车事件
    3. 禁用input的自动补全功能
    4. jQuery bind 和 on
  5. jQuery DOM节点的创建、插入、删除
    1. 批量删除和修改
    2. empty()情况内容
    3. append() 内部末尾插入
    4. clone()克隆
  6. $.each()遍历json数组
  7. $.get()
    1. jQuery.get()读取当前域内的文档
  8. $.ajax()
    1. url
    2. type
    3. dataType
    4. contentType
    5. data
    6. success()
    7. error()
    8. Uncaught TypeError: Illegal invocation
    9. jQuery Ajax 发送 POST JSON 请求示例
    10. jQuery Ajax GET 跨域查询并表单展示示例
    11. Ajax GET 请求不能带 body
    12. XMLHttpRequest 发送 Get 跨域请求示例
    13. XMLHttpRequest 发送 POST 请求示例
  9. 图片轮播插件Slick
  10. $(window).load() 和 $(document).ready()的区别