jQuery_link之家

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

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

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

jQuery对象转成DOM对象

DOM对象转成jQuery对象

jQuery 事件

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

onchange

onpropertychange

oninput

jQuery写法

原生JavaScript写法

jQuery输入框回车事件

禁用input的自动补全功能

jQuery bind 和 on

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

批量删除和修改

empty()情况内容

append() 内部末尾插入

clone()克隆

`$.each()`遍历json数组

`$.get()`

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

`$.ajax()`

url

type

dataType

contentType

data

success()

error()

Uncaught TypeError: Illegal invocation

jQuery Ajax 发送 POST JSON 请求示例

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

Ajax GET 请求不能带 body

XMLHttpRequest 发送 Get 跨域请求示例

XMLHttpRequest 发送 POST 请求示例

图片轮播插件Slick

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