jquery笔记

head标签里放：
语句放在:$(document).ready( function(){} )的{}中


语法:$(selector).action()
     $定义jQuery  selector查询HTML元素  action()执行对元素的操作
函数内行动:$(this).hide()隐藏当前元素 show显示
           $("p").css("color","red")将所有p元素color变成red
           语法可以连接


action()包括:hide() show()


效果
   隐藏显示 hide(speed,callback) show()显示 toggle(speed,callback)改变元素的hide和show值
   淡入淡出 fadeIn(speed,callback)淡入 fadeOut()淡出 fadeToggle()改变
            fadeTo(speed,透明度,callback)淡入淡出到透明度为0-1之间
   滑动 slideDown(speed,callback)元素下滑出现 slideUp()上滑消失 slideToggle()
   动画 animate({params},speed,callback)
        移动时元素position需要为relative fixed absolute 因为默认有一个静态定位
        params可以是一个eg:left:"5px" 
              可以是多个用,分开 eg:width:"5px",opacity:"0.5" 同时行动
        可以定义相对值,值前面加+=或-=    left:"5px"是绝对值
        预定义值hide show toggle  height:"hide"相当于height:"0px"
  停止效果:stop(all,gotoend)
  操作多个:逐个写做个调用,队列模式.也可以一个元素chaining很多效果,依次逐个执行 


选择器
   元素:$("p") 选择p元素 $("#test")选择id为test的元素
        $(".test")选择class为test的元素  $(this)选择本元素 
        $("p.intro")选择class为intro的p元素 "p#demo"类同
   属性:$("[href]")有href属性的元素 "[href='#']"选href为#的元素
        $("[href!='#']")选href不为#的元素
        $("[href$='.jpg']")选href以.jpg结尾的元素
        $("ul li:first")每一个ul的第一个li


事件
    $(document).ready(function(){A}) 文档就绪时运行代码块A
    $('button').click(function(){A}) 点击button按钮时运行代码块A
        dblclick双击 focus获得焦点 blur失去焦点 mouseover悬停
        mouseenter穿过 mouseleave离开  mousedown元素上方按下 mouseup松开
        hover( ,)里面两个函数
    $(p).hide() 隐藏所有的p标签


DOM操作  用法和事件差不多
    $(selector).text()获取selector的文本内容  html()所有内容包括标签
                val()表单的输入字段 attr("A")获取A属性的值
      text("A") html("A") val("A")将text html val的值设置为A
          回调函数
      attr("A":"1","B":"2") 设置A属性的值为1 B属性的值为2
          回调函数
    $(selector).append("A")内部结尾插入,A为html代码,标签
        prepend()开头插入 after()之后插入 before()之前插入
        append prepend是子级元素 after before是兄弟元素
   创建:var g = $("

").text("love")创建一个内容为love的P标签
        $("body").append(g) 把创建的元素添加到html页面中
   删除:remove()删除该元素及其子元素 empty()删除他的子元素
        remove()可以接收一个参数".a"删除class为a的选择器元素 也接受"#a"
   类: addClass("")增加类 removeClass("")删除类 toggleClass()
   css: $(selector).css("color")获取属性值
        $(selector).css("color":"red")设置属性值,可以设置多个用,隔开
   尺寸:width() height()等等
遍历
  祖先:parent()直接父元素 parents()所有父元素
       parentsUntil("div")从本元素到div之间的父元素,不包括div
       parents("div")所有div父元素
  后代:children()所有直接子元素 ("p.1")类名为1的直接p子元素 相当于>
       find("span")后代所有span标签  find("*")所有后代 相当于空格
  同胞:siblings()所有同胞元素 next()下一个 nextAll()后面所有
       nextUntil()后面直到  prev()之前
  过滤:first()第一个 last()最后一个 eq(索引)选择该索引的元素
       filter("")匹配元素 not("")不匹配元素
ajax:load(url,data,callback)  加载url将其内容转化为html标签
       $("#test").load("text.txt")在id为test的内部加载text.txt文件
       $("#test").load("text.txt #p1")仅加载id为p1的元素
          callback加载完执行的函数可以有回调参数
     $.get(url,callback) callback一般用function(){ }表示,可以传参
     $.post(url,data,callback) data一般用{ }表示












备注: var jq=jQuery.noConflict() 自定义$变成jq
         也可以用var jq=$.noConflict()
      var div=$("div") 后面的可以简写点
      speed速度slow fast或毫秒,毫秒不加引号 callback完成后执行的函数名
      callback可以直接写函数function(){  }