posts - 247,  comments - 25,  trackbacks - 0
1.jquery 8大选择器:基本、属性选择器,层级、子元素选择器,内容、可见性选择器,表单、表单属性选择器
2.jquery dom元素操作(对象访问)
     each()   $("img").each(function{alert("test each()";});
     size()   $("img").size();计算dom元素的个数
    length  $("img").length; 同上
    get()   $("img").get(); 获取dom元素的集合
    get(index) $("img").get(0);获取某一个dom元素
    index(subject) $("li").index($("#bar"))   获取索引值
3.属性操作:
    attr(name,val);
    removeAttr(name)
    html() //获取 html("append"); 负值
    text() 同上
    val()取当前值
4.css相关操作
    css:
            css(name,val);
    位置:
            offset()   $("p:last").offset({top:30,left:20});  设置匹配元素相对于document对象的坐标
            postion() var postion = $("p:first").postion();  获取匹配元素相对父元素的偏移坐标
            scrollTop() $("p:last").scrollTop();获取匹配元素相对滚动条顶部的偏移
            scrollLeft   $("p:last").scrollLeft;       获取匹配元素相对滚动条左侧的偏移
      尺寸:
            width();
            height();
            innerWidth();innerHeight();
            outerWidth();outerHeight();          
5.文档处理
    内部插入:
        append();在匹配元素中插入
        appendTo();被插入
        prepend();
        prependTo()
    外部插入:
        after();  $("p").after("<b>ss</b>");  放到匹配元素后面
        insertAfter(); 把匹配元素放到后面
        before();
        insertBefor()
    包裹:
        wrap(html,elem,fn);  作用与内部插入appendTo()差不多
        unwrap();  移除父元素
        wrapInner(html,elem,fn); 作用与wrap相反,在匹配元素内部包裹
    替换: replaceWith(); replaceAll();
    删除: 
     empty();  清空匹配元素的所有子元素
    remove();  只清空匹配元素,不清空匹配元素内容
    复制:clone();clone(true);
6.筛选
    过滤:
        eq(index); 取得index处的值
        first();
        last();
        filter();   $("p").filter(".myClass,:first");    
        is();    $("input[type='checkbox']").parent.is("form");是form,则返回true,否则返回false
        has();   $("li").has("ul").css("background-color","red");
        not();   $("p").not($("#id")[0]); 删除匹配的元素
        slice(start,end);   <p>hello</p><p>ni hao</p><p>hoo</p>   选取第一个P,$("p").slice(0,1);
    
    查找:
        find(expr)        $("p").find("span"); expr 可以像是.selected  .myClass
        children(expr)  不带expr时是不带查找条件所有子结点元素
        parent(expr)   查找匹配元素的唯一父元素,最后还包括匹配元素
        prev(expr)      取得前一个紧邻元素
        next(expr)        取得后一个紧邻元素
        subling(expr)    取得同级其它子元素集合
  7.事件
        bind(type,[data],fn);
$('#bar').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
});
        one(type,[data],fn);一次性事件绑定 ,只要第一次
$("p").one("click", function(){
  alert( $(this).text() );
});
        trigger(type,[data]);在匹配元素上触发事件
$("form:first").trigger("submit") 不用submit提交第一个表单
//给事件传递一个参数
$("p").click( function (event, a, b) { // 一个普通的点击事件时,a和b是undefined类型 // 如果用下面的语句触发,那么a指向"foo",而b指向"bar" } ).trigger("click", ["foo", "bar"]);
//显示Hello World!
$("p").bind("myEvent", function (event, message1, message2) { alert(message1 + ' ' + message2); }); $("p").trigger("myEvent", ["Hello","World!"]);
     unbind([type],[data]);   去除绑定
    hover(overFn,outFn); 鼠标悬停时事件,不是点击
    
$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);
        toggle(fn1,fn2,fn3....)  鼠标点击依次事件
    
 $("li").toggle(
      function () {
        $(this).css({"list-style-type":"disc", "color":"blue"});
      },
      function () {
        $(this).css({"list-style-type":"disc", "color":"red"});
      },
      function () {
        $(this).css({"list-style-type":", "color":"});
      }
    );
8.效果
    基本:
        show(); 也可带参数show(speed,callback)
        hidden();也可带参数hidden(speed,callback)
        toggle();也可带参数toggle(speed,callback);
    滑动:
        slideDown(speed,[callback]);
        slideUp(speed,[callback]);
        slideToggle(speed,[callback]);
    淡入淡出:
        fadeIn(speed,[callback]);
        fadeOut(speed,[callback]);
        fadeTo(speed,opacity,[fn]); //opacity,不透明度值(0到1之间的数字
    动画效果:
        animate(parames,[duration],[easing],[callback])
       

paramsOptions

一组包含作为动画属性和终值的样式属性和及其值的集合

duration (可选)String,Number

三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

easing (可选)String

要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

callback (可选)Function

在动画完成时执行的函数



// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});
 9.数组对象操作
    $.each(Array or Object,[callback]); // 遍历数组或对象
      
//例遍对象,同时使用成员名称和变量内容。
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
      $.grep(array,callback,[invert]) //过滤数组元素
//过滤数组中大于 0 的元素
$.grep( [0,1,2], function(n,i){ return n > 0; });
结果:[1,2]
    $.map(array,callbak)//  对数组内元素操作,得到新的数组
    
//将原数组中每个元素加 4 转换为一个新数组。
$.map( [0,1,2], function(n){ return n + 4; });

//原数组中大于 0 的元素加 1 ,否则删除

$.map( [0,1,2], function(n){
  return n > 0 ? n + 1 : null;
});

    $.makeArray(obj) //将类数组对象转换为数组对象
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
arr.reverse(); // 使用数组翻转函数
Fourth
Third
Second
First

        $.inArray(val,array)  //确定第一个参数在数组中的位置(索引值) ,没有则返回-1
    
        $.toArray();           //将多个DOM元素转变成一个数组
        $.merge(arr1,arr2);//合并两个数组
        $.unique(array);//删除重复元素,但是只对dom元素的数组好使,对数字或字符串数组不好使
 10.判断操作
        $.contains(container,contained)  //一个DOM节点是否包含另一个DOM节点
        $.isEmptyObject(obj)   //判断是否为空对象,即不包含任何属性
        $.trim(str)   去首尾空格
        

          
posted on 2011-08-24 09:36 林的 阅读(234) 评论(0)  编辑  收藏 所属分类: jquery

只有注册用户登录后才能发表评论。


网站导航:
 
<2011年8月>
31123456
78910111213
14151617181920
21222324252627
28293031123
45678910

想回家了,呵呵!

常用链接

留言簿(6)

随笔分类

随笔档案

文章分类

文章档案

相册

收藏夹

搜索

  •  

最新评论

阅读排行榜

评论排行榜