当前位置 : 首页 » 文章分类 :  开发  »  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 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>

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

如果对象是作为集合使用,回调函数每次传递一个键值对的:

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请求提交表达数据示例

// 回复评论,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/x-www-form-urlencoded", //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>

原生JavaScript发送Ajax Get跨域请求示例

<div id="div_origin_json_comments" style="word-wrap:break-word"></div>
<script>
// 全局变量:后台接口server地址
var BACKEND_SERVER = "http://api.devgou.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>

图片轮播插件Slick

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

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

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


获取元素值

一般可以用原生js及jQuery获取html元素的值。
例如

<div id="test">数值</div>

原生js写法:

alert(document.getElementById('test').innerHTML);//数值

jQuery写法:

alert($('#test').html());//数值

说明:
innerHTML是取元素的内部html代码,此例中即div内部的所有html代码
html()方法作用也是取dom节点的内部html内容,是jQuery中的函数方法


$(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>

上一篇 Redis

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

阅读
评论
3,783
阅读预计15分钟
创建日期 2017-07-01
修改日期 2020-01-13
类别

页面信息

location:
protocol:
host:
hostname:
origin:
pathname:
href:
document:
referrer:

评论