jQuery学习笔记

jQuery 语法

• 基本语法：$(selector).action()
• $符号：定义 jQuery
• (selector) ：查找 HTML 元素
• action() ：对元素进行操作
• 入口函数

$(document).ready(function(){
//...
});

//可简写为
$(function(){
//...
};

jQuery 选择器

• 元素选择器
  • $("p") 选取 <p> 元素
  • $("p.intro") 选取所有 class=“intro” 的 <p> 元素
  • $("p#demo") 选取所有 id=“demo” 的 <p> 元素
• 属性选择器
  • $("[attri]") 选取所有含有 attri 属性的元素
  • $("[attri='value']") 选取所有含有 attri 值等于 “value” 的元素
  • $("[attri!='value']") 选取所有含有 attri 值不等于 “value” 的元素
  • $("[attri^='value']") 选取所有 attri 值以 “value” 开头的元素
  • $("[attri$='value']") 选取所有 attri 值以 “value” 结尾的元素
  • $("[attri*='value']") 选取所有 attri 值包含 “value” 的元素

jQuery 效果

隐藏和显示

• hide() 隐藏
• show() 显示
• toogle() hide 和 show 切换

$(selector).hide([duration], [complete]);

$(selector).show([duration], [complete]);

$(selector).toggle([duration], [complete]);

• duration 规定动画速度，默认 400ms
• complete 规定回调函数

淡入淡出

• fadeIn() 淡入已隐藏的元素
• fadeOut() 淡出可见元素
• fadeToggle() fadeIn 和 fadeOut 切换
• fadeTo() 渐变为给定的不透明度

$(selector).fadeIn([duration], [complete]);

$(selector).fadeOut([duration], [complete]);

$(selector).fadeToggle([duration], [complete]);

$(selector).fadeTo(duration, opacity, [complete]);

• duration 规定动画速度
• complete 规定回调函数

滑动

• slideDown() 向下滑动
• slideUp() 向上滑动
• slideToggle() slideDown 和 slideup 切换

$(selector).slideDown([duration], [complete]);

$(selector).slideUp([duration], [complete]);

$(selector).slideToggle([duration], [complete]);

• duration 规定动画速度
• complete 规定回调函数

动画

• animate() 设置 CSS 动画

$(selector).animate(properties, [duration], [easing], [complete]);

//例子
$("button").click(function () {
  $("div").animate(
    {
      left: "250px",
      opacity: "0.5",
    },
    1000
  );
});

• properties 定义形成动画的 CSS 属性，多个属性用对象表示
• duration 规定动画速度
• easing 规定缓动函数
• complete 规定回调函数

注意 jQuery 允许链式编程

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

jQuery HTML

获取&&设置

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

$(selector).text(content);

$(selector).html(html);

$(selector).val(value);

$(selector).attr(attributeName, value);

注意 text()、html() 以及 val()拥有回调函数，回调函数的两个参数为被选元素列表中当前元素的下标，以及原始值，函数返回值为新值

$("#test").text(function(i,origText){
  return "Old text: " + origText + " New text: Hello world!
  (index: " + i + ")";
});

添加

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

$(selector).append(content, [content]);

$(selector).prepend(content, [content]);

$(selector).after(content, [content]);

$(selector).before(content, [content]);

删除

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

$(selector).remove();

$(selector).empty();

• 可以对元素进行过滤删除

//删除class="del"的所有<p>元素
$("p").remove(".del");

获取并设置 CSS

• addClass() 向被选元素添加一个或多个类
• removeClass() 从被选元素删除一个或多个类
• toggleClass() addClass 和 removeClass 切换
• css() 设置或返回样式属性

$(selector).addClass(className(s));

$(selector).removeClass(className(s));

$(selector).toggleClass(className(s));

//返回样式属性
$(selector).css(propertyName(s));

//设置样式属性
$(selector).css(propertyName, value);

• 如需设置多个样式属性，需要写成对象形式

$(selector).css({"propertyName":"value","propertyName":"value",...});

jQuery 遍历

DOM 向上遍历

• parent() 返回被选元素的直接父元素
• parents() 返回被选元素的所有祖先元素
• parentsUntil() 返回介于两个给定元素之间的所有祖先元素

$(selector).parent([filter]);

$(selector).parents([filter]);

$(selector).parentsUntil([selector], [filter]);

• selector 给定元素，确定查找范围（对于 parentsUntil）
• filter 元素筛选

DOM 向下遍历

• children() 返回被选元素的所有直接子元素
• find() 返回被选元素的后代元素，一路向下直到最后一个后代

$(selector).children([filter]);

$(selector).find(filter);

e, g;
//返回<div>后代的所有<span>元素
$("div").find("span");

//返回<div>的所有后代
$("div").find("*");

• filter 元素筛选

DOM 水平遍历

• siblings() 返回被选元素的所有同胞元素
• next() 返回被选元素的下一个同胞元素
• nextAll() 返回被选元素的所有跟随的同胞元素
• nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素
• prev()
• prevAll()
• prevUntil()

$(selector).siblings([filter]);

$(selector).next([filter]);

$(selector).nextAll([filter]);

$(selector).nextUntil([selector], [filter]);

• selector 给定元素，确定查找范围
• filter 元素筛选

过滤

• first() 返回被选元素的首个元素
• last() 返回被选元素的最后一个元素
• eq() 返回被选元素中带有指定索引号的元素

$(selector).first();

$(selector).last();

$(selector).eq(index);

jQuery AJAX

LOAD

• load() 从服务器加载数据，并把返回的数据放入被选元素中

$(selector).load(url, [data], [complete]);

• url 加载的 URL
• data 与请求一同发送的查询字符串键/值对集合
• complete 回调函数

GET&&POST

• GET 从指定的资源请求数据
• POST 向指定的资源提交要处理的数据
• $.get() 通过 HTTP GET 请求从服务器上请求数据
• $.post() 通过 HTTP POST 请求从服务器上请求数据

$.get(url, complete);
$.post(url, data, complete);

• url 加载的 URL
• data 连同请求发送的数据
• complete 回调函数