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 规定回调函数

$("#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);

$("#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" 的所有 & lt;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

// 返回 & lt;div > 后代的所有 & lt;span > 元素

$("div").find("span");

// 返回 & lt;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 回调函数