jQuery 学习笔记二

第四章 jQuery中的事件和动画

加载DOM
$(window).load(function(){
        //处理函数绑定给window对象 所有内容加载完毕后触发
        //如果绑定在元素上，元素内容加载完毕后触发
})

事件绑定
bin( type [,data] ,fn); //简写像click mouseover mouseout这类事件

合成事件
hover(enter,leave);     //模拟光标悬停事件      光标移动到元素上触发enter 移除元素触发leave
toggle(fn1,fn2,...fnN); //模拟鼠标连续点击      第一次触发函数fn1      依次触发fn2

事件冒泡
$("element").bind("click" ,function(event){     //event事件对象
        event.stopPropagation();        //停止事件冒泡
        event.preventDefault();         //阻止默认行为
        return false;                           //也可用return false
})

事件对象的属性
event.type()    //获取事件类型
event.preventDefault()  //阻止默认行为
event.stopPropagation() //停止事件冒泡
event.target()  //获取触发事件的元素
event.relatedTarget()   //
event.pageX()   //获取光标相对于页面的x和y坐标
event.pageY()
event.which()   //鼠标单击事件获取鼠标的左 中 右键 在键盘事件中获取键盘按键
event.metaKey() //获取ctrl按键
event.originalEvent()   //指向原始的事件对象

移除事件
unbind([type][, data])  //第一个参数是事件类型 第二个参数是要移除的函数
$("div").unbind("click");

模拟操作
trigger()
$("#btn").trigger("click")      //简化$("#btn").click()


jQuery中的动画
show()  //slow normal fast      1000毫秒=1秒
hide()
fadeIn()        //改变元素的透明度
fadeOut()
slideUp()       //改变原始的高度
slideDown()

自定义动画
animate(params ,speed ,callback);
$(function(){
        $("#panel").click(function(){
                $(this).animate({left:"500px" ,height:"500px"} ,3000);  //使元素在3秒内 向右移动500像素
        })
})

stop()  //停止动画
:animate        //获取动画元素

其他动画方法
toggle(speed,[callback])        //显示隐藏
slideToggle(speed,[callback])
fadeTo(speed,opacity,[callback])

第5章 jquery对表单 表格的操作及更多应用

表单应用
focus() //获得焦点
blur()  //失去焦点
keyup() //松开键盘时触发
find()  //查找元素
attr()  //元素属性

$(function(){

        $(":input").focus(function(){
                $(this).addClass("fucos");
        }).blur(function(){
                $(this).removeClass("fucos");
        });
        
})

复选框应用
<form>

        <label><input type="checkbox" name="items" value="足球" />足球</label>
        <label><input type="checkbox" name="items" value="篮球" />篮球</label>
        <label><input type="checkbox" name="items" value="羽毛球" />羽毛球</label>
        <label><input type="checkbox" name="items" value="冰球" />冰球</label>
        <br />
        <label><input type="checkbox" name="CheckedALL"   />全选/全不选</label>
        <input type="button"   />
        <input type="button"   />
        
</form>
<script>
$(function(){

        $("#CheckedALL").click(function(){
                if(this.checked){
                        $("[name=items]:checkbox").attr('checked' ,true);
                } else {
                        $("[name=items]:checkbox").attr('checked' ,false);
                }

        });
        
        //反选
        $("#CheckedREV").click(function(){
                $("[name=items]:checkbox").each(function(){
                        this.checked = !this.checked;
                })
        });
        
        //提交
        $("#Send").click(function(){
                var str = "";
                $("[name=items]:checkbox:checked").each(function(){
                        str += $(this).val() + "\n";
                })
                alert(str);
        });

})
</script>

下拉框
<form>
  <select multiple="multiple" >
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
        <option value="5">option5</option>
        <option value="6">option6</option>
        <option value="7">option7</option>
        <option value="8">option8</option>
        <option value="9">option9</option>
  </select>
  <input type="button"  />
  <input type="button"  />
  
  <select multiple="multiple" >
  </select>
  <input type="button"  />
  <input type="button"  />
</form>
<script>
$(function(){

        $("#toRight").click(function(){
                var $option = $("#s1 option:selected");
                $option.appendTo("#s2");
        });
        
        $("#toRightALL").click(function(){
                var $option = $("#s1 option");
                $option.appendTo("#s2");
        });
        
        $("#s1").dblclick(function(){
                var $option = $("option:selected" ,this);
                $option.appendTo("#s2");
        });
        
        $("#toLeft").click(function(){
                var $option = $("#s2 option:selected");
                $option.appendTo("#s1");
        });
        
        $("#toLeftALL").click(function(){
                var $option = $("#s2 option");
                $option.appendTo("#s1");
        });

        $("#s2").dblclick(function(){
                var $option = $("option:selected" ,this);
                $option.appendTo("#s1");
        });


})
</script>