前端jQuery

jQuery语法

  • 基本语法：$(selector).action()
  • $符号：定义 jQuery
  • (selector) ：查找HTML 元素
  • action() ：对元素进行操作
  • 入口函数
1
2
3
4
5
6
7
8
$(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切换
1
2
3
4
5
$(selector).hide([duration],[complete]);

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

$(selector).toggle([duration],[complete]);
  • duration 规定动画速度，默认400ms
  • complete 规定回调函数

淡入淡出

  • fadeIn() 淡入已隐藏的元素
  • fadeOut() 淡出可见元素
  • fadeToggle() fadeIn和fadeOut切换
  • fadeTo() 渐变为给定的不透明度
1
2
3
4
5
6
7
$(selector).fadeIn([duration],[complete]);

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

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

$(selector).fadeTo(duration,opacity,[complete]);
  • duration 规定动画速度
  • complete 规定回调函数

滑动

  • slideDown() 向下滑动
  • slideUp() 向上滑动
  • slideToggle() slideDown和slideup切换
1
2
3
4
5
$(selector).slideDown([duration],[complete]);

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

$(selector).slideToggle([duration],[complete]);
  • duration 规定动画速度
  • complete 规定回调函数

动画

  • animate() 设置CSS动画
1
2
3
4
5
6
7
8
9
$(selector).animate(properties,[duration],[easing],[complete]);

//例子
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
  },1000);
});
  • properties 定义形成动画的CSS属性，多个属性用对象表示
  • duration 规定动画速度
  • easing 规定缓动函数
  • complete 规定回调函数

注意jQuery允许链式编程

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

jQuery HTML

获取&&设置

  • text() 设置或返回所选元素的文本内容
  • html() 设置或返回所选元素的内容（包括 HTML 标记）
  • val() 设置或返回表单字段的值
  • attr() 设置或返回所选元素的属性
1
2
3
4
5
6
7
$(selector).text(content);

$(selector).html(html);

$(selector).val(value);

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

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

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

添加

  • append() 在被选元素的结尾插入内容
  • prepend() 在被选元素的开头插入内容
  • after() 在被选元素之后插入内容
  • before() 在被选元素之前插入内容
1
2
3
4
5
6
7
$(selector).append(content,[content]);

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

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

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

删除

  • remove() 删除被选元素（及子元素）
  • empty() 从被选元素中删除子元素
1
2
3
$(selector).remove();

$(selector).empty()
  • 可以对元素进行过滤删除
1
2
//删除class="del"的所有<p>元素
$("p").remove(".del");

获取并设置 CSS

  • addClass() 向被选元素添加一个或多个类
  • removeClass() 从被选元素删除一个或多个类
  • toggleClass() addClass和removeClass切换
  • css() 设置或返回样式属性
1
2
3
4
5
6
7
8
9
10
11
$(selector).addClass(className(s));

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

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

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

//设置样式属性
$(selector).css(propertyName,value);
  • 如需设置多个样式属性，需要写成对象形式
1
$(selector).css({"propertyName":"value","propertyName":"value",...});

jQuery遍历

DOM向上遍历

  • parent() 返回被选元素的直接父元素
  • parents() 返回被选元素的所有祖先元素
  • parentsUntil() 返回介于两个给定元素之间的所有祖先元素
1
2
3
4
5
$(selector).parent([filter]);

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

$(selector).parentsUntil([selector],[filter]);
  • selector 给定元素，确定查找范围（对于parentsUntil）
  • filter 元素筛选

DOM向下遍历

  • children() 返回被选元素的所有直接子元素
  • find() 返回被选元素的后代元素，一路向下直到最后一个后代
1
2
3
4
5
6
7
8
9
10
$(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()
1
2
3
4
5
6
7
$(selector).siblings([filter]);

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

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

$(selector).nextUntil([selector],[filter]);
  • selector 给定元素，确定查找范围
  • filter 元素筛选

过滤

  • first() 返回被选元素的首个元素
  • last() 返回被选元素的最后一个元素
  • eq() 返回被选元素中带有指定索引号的元素
1
2
3
4
5
$(selector).first()

$(selector).last()

$(selector).eq(index)

jQuery AJAX

LOAD

  • load() 从服务器加载数据，并把返回的数据放入被选元素中
1
$(selector).load(url,[data],[complete])
  • url 加载的 URL
  • data 与请求一同发送的查询字符串键/值对集合
  • complete 回调函数

GET&&POST

  • GET 从指定的资源请求数据
  • POST 向指定的资源提交要处理的数据
  • $.get() 通过 HTTP GET 请求从服务器上请求数据
  • $.post() 通过 HTTP POST 请求从服务器上请求数据
1
2
$.get(url,complete);
$.post(url,data,complete);
  • url 加载的 URL
  • data 连同请求发送的数据
  • complete 回调函数