jQuery

下列思维导图内容包括：jQuery基础、jQuery效果、jQueryHTML、jQuery遍历、ajax。

jquery

• jq 基础
  • 导包
    • <script type="text/javascript" src="jquery.js"></script>
    • <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
  • 语法
    • $(selector).action()
      • 美元符号定义jQuery
      • 选择符（selector）“查询”和“查找” HTML 元素
      • jQuery 的 action() 执行对元素的操作
  • 文档就绪函数
    • $(document).ready(function(){}
    • 防止文档在完全加载之前运行jQuery代码
  • 元素选择器
    • $("p")
      • 选取 <p> 元素
    • $("p.intro")
      • 选取所有 class="intro" 的 <p> 元素
    • $("p#demo")
      • 选取所有 id="demo" 的 <p> 元素
  • 属性选择器
    • $("[href]")
      • 选取所有带有 href 属性的元素
    • $("[href='#']")
      • 选取所有带有 href 值等于 "#" 的元素
    • $("[href!='#']")
      • 选取所有带有 href 值不等于 "#" 的元素
    • $("[href$='.jpg']")
      • 选取所有 href 值以 ".jpg" 结尾的元素
  • css选择器
    • $("p").css("background-color","red"
      • 把所有 p 元素的背景颜色更改为红色
  • 事件函数
    • $("button").click(function() {..some code... } )
  • 名称冲突
    • var jq = jQuery.noConflict()
      • 使用jq代替$
• jq 效果
  • 概念
    • speed
      • fast
      • slow
      • 毫秒
    • callback函数
      • 在动画执行后执行
    • chaining
      • 把动作或方法链接起来
      • $("#p1").css("color","red").slideUp(2000).slideDown(2000)
  • 隐藏显示
    • $(selector).hide(speed,callback)
      • 隐藏
    • $(selector).show(speed,callback)
      • 显示
    • $(selector).toggle(speed,callback)
      • 切换显示/隐藏
    • 折叠缩小放大
  • 淡入淡出
    • $(selector).fadeIn(speed,callback)
      • 淡入
    • $(selector).fadeOut(speed,callback)
      • 淡出
    • $(selector).fadeToggle(speed,callback)
      • 切换淡入/淡出
    • $(selector).fadeTo(speed,opacity,callback)
      • 允许渐变为给定的不透明度（值介于 0 与 1 之间）
    • 整体淡入淡出
  • 滑动
    • $(selector).slideDown(speed,callback)
      • 向下滑动元素
    • $(selector).slideUp(speed,callback)
      • 向上滑动元素
    • $(selector).slideToggle(speed,callback)
      • slideDown() 与 slideUp() 方法之间进行切换
  • 动画
    • $(selector).animate({params},speed,callback);
    • $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' })
    • var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow");
      • 队列功能
  • 停止
    • $(selector).stop([stopAll],[goToEnd])
      • 停止滑动、淡入淡出和自定义动画
      • stopAll： 是否应该清除动画队列。默认是 false，即仅停止活动的动画
      • goToEnd： 规定是否立即完成当前动画。默认是 false
• jq HTML
  • 获取
    • 内容
      • $("div").text()
        • 设置或返回所选元素的文本内容
      • $("div").html()
        • 设置或返回所选元素的内容（包括 HTML 标记）
      • $("div").val()
        • 设置或返回表单字段的值
    • 属性
      • $("div").attr("href")
        • 用于获取属性href的值
  • 设置
    • 内容和回调函数
      • $("div").text("abc"或function(i,origText){})
        • i：被选元素列表中当前元素的下标
        • origText：原始（旧的）值
      • $("div").html("abc"或function(i,origText){})
      • $("div").val("abc"或function(i,origText){})
    • 属性和回调函数
      • $("div").attr("href","www.bing.com")
      • $("div").attr({"href":"www.bing.com","title":"必应"})
      • $("div").attr("href",function(i, origValue){})
  • 添加
    • $("div").append("a"",b")
      • 在被选元素的结尾插入内容
    • $("div").prepend("a"",b")
      • 在被选元素的开头插入内容
    • 被选元素内部
    • $("div").after("a"",b")
      • 在被选元素之后插入内容
    • $("div").before("a"",b")
      • 在被选元素之前插入内容
    • 与被选元素并列
  • 删除
    • $("div").remove()
      • 删除被选元素（及其子元素）
    • $("div").remove(".a");
      • 删除class=a的div元素（及其子元素）
    • $("div").empty()
      • 从被选元素中删除子元素
  • css类
    • $("div, .a, #b").addClass("blue import")
      • 向被选元素添加一个或多个类
    • $("div, .a, #b").removeClass(blue import)
      • 从被选元素删除一个或多个类
    • $("div").toggleClass()
      • 对被选元素进行添加/删除类的切换操作
    • $("div").css("background-color")
      • 设置被选元素的一个或多个样式属性
    • $("div").css({"background-color","yellow","font-size":"200%"});
      • 返回被选元素的一个或多个样式属性
  • 尺寸
    • $("div").width()
      • 设置或返回元素的宽度（不包括内边距、边框或外边距）
    • $("div").heigth()
      • 设置或返回元素的高度（不包括内边距、边框或外边距）
    • $("div").innerWidth()
      • 方法返回元素的宽度（包括内边距）
    • $("div").innerHeight()
      • 方法返回元素的高度（包括内边距）
    • $("div").outerWidth()
      • 方法返回元素的宽度（包括内边距和边框）
    • $("div").outerHeight()
      • 方法返回元素的高度（包括内边距和边框）
• jq 遍历
  • 根据其相对于其他元素的关系来“查找”（或选取）HTML 元素
  • 祖先
    • $("div").parent()
      • 返回被选元素的第一个父元素
    • $("div").parents("ul")
      • 返回被选元素的所有ul父元素
    • $("span").parentsUntil("div")
      • 返回介于span和div元素之间的所有父元素
  • 后代
    • $("div").children("p")
      • 返回被选元素的第一个p子元素
    • $("div").find("*")
      • 返回被选元素的所有后代元素
  • 同胞
    • $("div").siblings()
      • 返回被选元素的所有同胞元素
    • $("div").next()
      • 返回被选元素的下一个同胞元素
    • $("div").nextAll()
      • 返回被选元素的所有跟随的同胞元素
    • $("div").nextUntil()
      • 返回介于两个给定参数之间的所有跟随的同胞元素
    • $("div").prev()
    • $("div").prevAll()
    • $("div").prevUntil()
  • 过滤
    • $("div p").first()
      • 选取首个 <div> 元素内部的第一个 <p> 元素
    • $("div p").last()
      • 选择最后一个 <div> 元素中的最后一个 <p> 元素
    • $("p").eq(1)
      • 选取第二个 <p> 元素（索引号 1）
    • $("p").filter(".intro")
      • 返回带有类名 "intro" 的所有 <p> 元素
    • $("p").not(".intro")
      • 返回不带有类名"intro"的所有p元素
• ajax
  • 跟服务器交换数据
  • 加载
    • $(selector).load(URL,data,callback)
      • 从服务器加载数据，并放到被选元素中
    • $("#div1").load("demo_test.txt #p1")
      • 也可以把文件中的元素的内容放到被选元素中
    • rollback: function(responseTxt, statusTxt, xhr(){}
      • responseTxt：包含调用成功时的结果内容
      • statusTXT： 包含调用的状态
      • xhr： 包含XMLHttpRequest对象
  • 请求
    • $.get(URL, callback)
      • 从服务器上的一个文件中取回数据
    • $.post(URL, data, callback)
      • 使用post从服务器请求参数
    • rollback： function(data, status){}
      • data： 被请求页面的内容
      • staus： 请求的状态