标签：完成后   cli   增加   特效   远程服务   函数名   数位   strong   客户   

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。它包含以下功能：1、HTML元素选取；2、HTML元素操作；3、CSS操作；4、HTML事件函数；5、JavaScript特效和动画；6、HTML DOM遍历和修改；7、AJAX；8、Utilities； 除此之外，Jquery还提供了大量的插件。

一、下载安装

1、可以去官网下载下来然后放入项目中，在项目中引入即可。有两个版本的jQuery可供下载：

• Production version - 用于实际的网站中，已被精简和压缩。
• Development version - 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从jquery.com中下载。jQuery库是一个JavaScript文件，您可以使用HTML的标签引用它：

2、使用CDN在项目中引入jQuery

二、jQuery语法

jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
$表示jQuery，selector表示选择器，有标签选择器，类选择器，id选择器。也就是分别对应html中的标签，class类选择器，id标识。
标签选择器示例：$("p").hide() 意思是隐藏所有的p标签。
类选择器示例：$(".test").hide() 意思是隐藏所有class="test"的元素。
id选择器示例：$("#test").hide() 意思是隐藏id="test"的元素。
jQuery是在html文档完全加载完成之后才执行的，如果在文档加载完成之前执行jQuery代码将会出现问题，因为有些元素还没有加载完成。因此需要执行文档就绪事件。

//意思是文档加载完成之后才进行操作
$(document).ready(function(){
    // 开始写jQuery代码...
 });

//简写方式 与上面效果一样
$(function(){
    // 开始写jQuery代码...
 });

三、jQuery选择器

jQuery选择器允许您对HTML元素组或单个元素进行操作。jQuery选择器基于元素的id、类、类型、属性、属性值等"查找"（或选择）HTML元素。 它基于已经存在的CSS 选择器，除此之外，它还有一些自定义的选择器。jQuery中所有选择器都以美元符号开头：$()。
1、元素选择器

//选中所有的p标签，当点击按钮时p标签全部隐藏
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

2、#id选择器

//当用户点击按钮后，有id="test"属性的元素将被隐藏：
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

3、.class选择器

//用户点击按钮后所有带有class="test"属性的元素都隐藏：
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

4、其他更多实例

四、jQuery事件

jQuery是为事件处理特别设计的。页面对不同访问者的响应叫做事件。事件处理程序指的是当HTML中发生某些事件时所调用的方法。在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发keypress事件"。
常见DOM事件：

在jQuery中，大多数DOM事件都有一个等效的jQuery方法。

例如点击事件：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

jQuery更多事件 参见： https://www.runoob.com/jquery/jquery-events.html

五、jQuery hide()和show()显示和隐藏元素

通过 jQuery，您可以使用hide()和show()方法来隐藏和显示HTML元素。
例如：

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可选的speed参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的callback参数是隐藏或显示完成后所执行的函数名称。
$("#hide").click(function(){
  $("p").hide(1000,function(){
	alert("隐藏之后执行的函数");
});
});

toggle()方法
通过jQuery，您可以使用toggle()方法来切换hide()和show()方法。显示被隐藏的元素，并隐藏已显示的元素。
例如：也可以指定speed和callback函数。

$("button").click(function(){
  $("p").toggle();
});

六、jQuery - 链(Chaining)

通过jQuery，可以把动作/方法链接在一起。Chaining允许我们在一条语句中运行多个jQuery方法（在相同的元素上）。

七、jQuery - 获取html内容和属性

jQuery拥有可操作HTML元素和属性的强大方法。
1、获得内容 - text()、html()以及val()
三个简单实用的用于DOM操作的jQuery方法：

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

//获取所选元素的文本内容
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

//获取文本内容，包括html
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

//获取input中的值
$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});

//设置值
$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("Hello world!");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

2、获取属性 - attr()

//获取a标签中的href属性的值
$("button").click(function(){
  alert($("#runoob").attr("href"));
});

//给属性设置值
$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});

//可以同时设置多个属性的值
$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

八、jQuery - 添加元素

通过jQuery，可以很容易地添加新元素/内容。主要有四个方法，如下：

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

示例：

//在p标签末尾追加
$("p").append("追加文本");

//在p标签开头追加
$("p").prepend("在开头追加文本");
//还可以利用append或者prepend追加多个内容。

jQuery after()和before()方法
jQuery after()方法在被选元素之后插入内容。
jQuery before()方法在被选元素之前插入内容。

//在被选元素之前或者之后添加
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");

九、jQuery - 删除元素

通过jQuery，可以很容易地删除已有的HTML元素。主要有两个方法，如下：

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

//删除div1及其里面的所有元素
$("#div1").remove();

//清空div里面的所有元素，但是不清空这个div
$("#div1").empty();

可以对将要删除的元素进行过滤，例如要删指定的某个元素。
例子：删除class="italic"的所有

十、jQuery - AJAX

AJAX是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
jQuery提供多个与AJAX有关的方法。通过jQuery AJAX方法，您能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或JSON- 同时您能够把这些外部数据直接载入网页的被选元素中。
1、jQuery load()方法
jQuery load()方法是简单但强大的AJAX方法。load()方法从服务器加载数据，并把返回的数据放入被选元素中。
语法格式：$(selector).load(URL,data,callback)
必需的URL参数规定您希望加载的URL。即请求的url路径。
可选的data参数规定与请求一同发送的查询字符串键/值对集合。也就是要传递的参数。
可选的callback参数是load()方法完成后所执行的函数名称。请求成功后要执行的函数。

2、AJAX get()方法
两种在客户端和服务器端进行请求-响应的常用方法是：GET和POST。

• GET - 从指定的资源请求数据
• POST - 向指定的资源提交要处理的数据

GET基本上用于从服务器获得（取回）数据。注释：GET方法可能返回缓存数据。
POST也可用于从服务器获取数据。不过，POST方法不会缓存数据，并且常用于连同请求一起发送数据。
$.get()方法通过HTTP GET请求从服务器上请求数据。
语法格式：$.get(URL,callback)
例如：

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

$.get()的第一个参数是我们希望请求的URL（"demo_test.php"）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

3、AJAX post()方法
$.post()方法通过HTTP POST请求向服务器提交数据。
语法格式:$.post(URL,data,callback)
必需的URL参数规定您希望请求的URL。
可选的data参数规定连同请求发送的数据。
可选的callback参数是请求成功后所执行的函数名。
例如：

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

十一、GET和POST方法的区别

1、发送的数据数量
在GET中，只能发送有限数量的数据，因为数据是在URL中发送的。
在POST中，可以发送大量的数据，因为数据是在正文主体中发送的。

2、安全性
GET方法发送的数据不受保护，因为数据在URL栏中公开，这增加了漏洞和黑客攻击的风险。
POST方法发送的数据是安全的，因为数据未在URL栏中公开，还可以在其中使用多种编码技术这使其具有弹性。

3、加入书签中
GET查询的结果可以加入书签中，因为它以URL的形式存在；而POST查询的结果无法加入书签中。

4、编码
在表单中使用GET方法时，数据类型中只接受ASCII字符。
在表单提交时，POST方法不绑定表单数据类型，并允许二进制和ASCII字符。

5、可变大小
GET方法中的可变大小约为2000个字符。
POST方法最多允许8 Mb的可变大小。

6、缓存

GET方法的数据是可缓存的，而POST方法的数据是无法缓存的。

7、主要作用
GET方法主要用于获取信息。而POST方法主要用于更新数据。

参考资料：（1） https://www.runoob.com/jquery/jquery-tutorial.html

jQuery基础

标签：完成后   cli   增加   特效   远程服务   函数名   数位   strong   客户   

原文地址：https://www.cnblogs.com/jasonboren/p/12995627.html