JQuery——一个快速、简洁的JavaScript库

JQuery

jQuery是一个快速、简洁的JavaScript库，极大地简化了 JavaScript 编程。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

一、 语法和选择器

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作

jquery入口函数：

$(document).ready(function(){
     // 执行代码
});

或者

$(function(){
    // 执行代码
});

选择器
#id 选择器
点击按钮对id为test的选择器进行隐藏

$(document).ready(function(){ 
	$("button").click(function(){ 
		$("#test").hide(); 
	}); 
});

.class 选择器
点击按钮对class为test的选择器进行隐藏

$(document).ready(function(){ 
	$("button").click(function(){ 
		$(".test").hide(); 
	}); 
});

二、 事件

$().click(function(){
	….
})

其他事件可参考文末API

三、 获取并设置css类

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

例子：
$(document).ready(function(){
	$("button").click(function(){
		$("body div:first").addClass("important blue");
	 });

});

.important {
	font-weight:bold;
	font-size:xx-large;
}
.blue {
	color:blue;
}

四、 Ajax

JQuery简化了对Ajax的操作，使其能在不同的浏览器都能使用。
语法：

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

例子：

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

入门推荐： https://www.runoob.com/jquery/jquery-noconflict.html
中文API文档： https://jquery.cuishifeng.cn/index.html