jQuery是一个快速、简洁且功能强大的JavaScript库。它是为了简化JavaScript编程而创建的，通过提供简洁的API和跨浏览器兼容性，使开发者能够更轻松地处理HTML文档的操纵、事件处理、动画效果、AJAX交互等任务。

jQuery的设计目标是提供一种简单的方式来处理复杂的JavaScript操作。它封装了许多常见的JavaScript任务，使得开发者能够使用更少的代码来实现相同的功能。通过使用jQuery，开发者可以更快速地开发交互性强的网页和Web应用程序。

以下是一些jQuery的特点和功能：

1. DOM操作：jQuery提供了简洁的API来选择和操作HTML文档中的元素。开发者可以使用CSS选择器来选择元素，并使用jQuery提供的方法来修改元素的样式、内容、属性等。

2. 事件处理：jQuery简化了事件处理的过程。开发者可以使用jQuery的事件处理方法来绑定事件、触发事件和处理事件。它还提供了方便的方法来处理常见的用户交互事件，如点击、鼠标移动、键盘输入等。

3. 动画效果：jQuery提供了丰富的动画效果和过渡效果。开发者可以使用jQuery的动画方法来创建平滑的过渡效果，如淡入淡出、滑动、展开收起等。

4. AJAX交互：jQuery简化了使用AJAX进行服务器交互的过程。它提供了简单的方法来发送AJAX请求、处理响应数据，并支持各种数据格式如JSON、XML等。

5. 插件扩展：jQuery拥有一个庞大的插件生态系统，开发者可以使用这些插件来扩展jQuery的功能。这些插件提供了各种各样的功能，如图表绘制、表单验证、轮播图等。

总之，jQuery是一个流行的JavaScript库，它简化了JavaScript编程的复杂性，提供了丰富的功能和简洁的API，使得开发者能够更高效地开发交互性强的网页和Web应用程序。

选择器

事件

jQuery 是为事件处理特别设计的。

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

常见 DOM 事件：

效果

隐藏/显示

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

$(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

toggle()

淡入淡出

• fadeIn()

• fadeOut()

• fadeToggle()

• fadeTo()

• $("#div2").fadeIn(“slow”);

• $("#div3").fadeIn(3000);

• 渐变：$(selector).fadeTo(speed,opacity,callback);
• speed：速度
• opacity：透明度
• callback：回调函数

滑动

语法：

• $(selector).slideDown(speed,callback);
• $(selector).slideUp(speed,callback);
• $(selector).slideToggle(speed,callback);
• speed：时间
• callback：回调函数

动画

• $(selector).animate({params},speed,callback);
• params：css 属性（键值对形式，-号替换为驼峰 → border-radius=borderRadius:'15px'）
• speed：时间
• callback：回调函数

操作：

1. 能操作单个属性
2. 能操作多个属性
3. 值能使用相对值（+=、-=）
4. 属性值能为"show"、“hide” 或 “toggle"等
5. 编写多个animate能使用队列功能

捕获

• text()：捕获文本
• html()：捕获HTML
• val()：捕获表单文本值
• attr()：捕获属性值

添加元素

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

删除元素

• remove() - 删除被选元素（及其子元素）（可附加参数）
• empty() - 从被选元素中删除子元素

类

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

尺寸

• width() - 元素宽度
• height() - 元素高度
• innerWidth() - padding+元素 宽度
• innerHeight() - padding+元素 高度
• outerWidth() - border+padding+元素 宽度
• outerHeight() - border+padding+元素 高度

祖先选择器

• parent() - 上一级父元素
• parents() - 上至html标签
• parentsUntil() - 介于目前元素与选择元素之间的所有标签。

后代选择器

• children() - 所选元素的所有直接子元素
• find() - 找到符合条件的子元素

同胞选择器

• siblings() - 被选元素的所有同胞元素
• next() - 被选元素的下一个元素
• nextAll() - 被选元素的下面所有元素
• nextUntil() - 被选元素到后面指定元素中间的所有元素
• prev() - 被选元素的前一个元素
• prevAll() - 被选元素的前面所有元素
• prevUntil() - 被选元素到前面指定元素中间的所有元素

过滤选择器

• first() - 第一个匹配条件的元素
• last() - 最后一个匹配条件的元素
• eq() - 符合索引号的元素
• filter() - 匹配filter里条件的元素
• not() - 去掉not里符合条件的元素后的其他元素

请求

load

语法：$(selector).load(URL,data,callback);

• URL：请求加载的URL
• data：查询字符串键值对集合
• callback：load() 方法完成后所执行的函数名称
  • responseTxt - 包含调用成功时的结果内容
  • statusTxt - 包含调用的状态
  • xhr - 包含XMLHttpRequest对象

get/post

get - 从指定的资源请求数据

post - 向指定的资源提交要处理的数据

语法：

• $.get(URL,callback);
• URL：请求的 URL
• callback：请求成功后所执行的函数名

Ajax

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

$.ajax({
  url: host + '/addressInfo',
  type: 'get',
  dataType: 'json',
  data: {
  addressName: $serA
}
}).done(function (res) {
  console.log(res);
}).fail(function () {
  console.log("error");
}).always(function () {
  console.log("complete");
});

或

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

$.ajax({
    url: host + '/olduser/up',
    type: 'get',
    dataType: 'json',
    data: {
    userName: $("#search-name").val(),
    adsl: $("#search-id").val()
  },
  success:function(res){
    if(res.code == 0) {
      "#search-name").val()) + "&adsl=" + escape($("#search-id").val());
    } else {
      alert(res.msg);
    }
  }
})

JSONP

跨域读取数据，请用 JSONP。

注意：JSONP 与 Ajax 没任何关系！JSONP 是利用 script 标签来 get 到被包裹的 json 数据。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

 $.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function (data) {

        var html = '<ul>';
        for (var i = 0; i < data.length; i++) {
          html += '<li>' + data[i] + '</li>';
        }
        html += '</ul>';

        $('#divCustomers').html(html);
      });

插件扩展

jQuery Validate

说明：jQuery Validate是在jQuery基础上扩展的为表单提供验证功能的插件。

JQuery Accordion

说明：jQuery Accordion插件用于创建折叠菜单

jQuery Autocomplete

说明：jQuery Autocomplete插件根据用户输入值进行搜索和过滤

jQuery Growl

说明：jQuery Growl用户做消息提醒

jQuery Password Validation

说明：jQuery Password Validation 在jQuery Validation 的基础上扩展，专门对密码进行验证