当前位置 : 首页 » 文章分类 :  开发  »  jQuery

jQuery

jQuery学习笔记

jQuery 官方文档
https://api.jquery.com/

jQuery API 中文文档
https://www.jquery123.com/


jQuery中的$

$() 函数是 jQuery() 函数的别称

$ 接收以下参数:

  • 选择器 .class
  • 一个元素 document.body
  • 一个对象 document, window
  • 一个jq对象, 此时是复制一个jq对象
  • $() 一个空jq对象。

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>
</div>

$("#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>
<html>
<head>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <title>测试</title>
</head>
<body>
  <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>
<body>
    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"/>
</div>

上面这段代码,如果我们使用 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>
<html>
<head>
  <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>
<body>
  <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>

JQGrid 表格操作

http://www.trirand.com/blog/jqgrid/jqgrid.html

JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信。


上一篇 Redis-安装部署运维

下一篇 2017年第三季度运动记录

阅读
评论
6.1k
阅读预计27分钟
创建日期 2017-07-01
修改日期 2022-12-01
类别

页面信息

location:
protocol:
host:
hostname:
origin:
pathname:
href:
document:
referrer:
navigator:
platform:
userAgent:

评论