jQuery进阶部分笔记

jquery特殊效果

fadeIn() 淡入

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

    });

• fadeIn() 淡入
• fadeOut() 淡出
• fadeToggle() 切换淡入淡出

---

• hide() 隐藏元素
• show() 显示元素
• toggle() 切换元素的可见状态

---

• slideDown() 向下展开
• slideUp() 向上卷起
• slideToggle() 依次展开或卷起某个元素

---

jquery链式调用

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

jquery属性操作

1、html() 取出或设置html内容

var $htm = $('#div1').html();  // 取出html内容


$('#div1').html('<span>添加文字</span>');  // 设置html内容

2、prop() 取出或设置某个属性的值(一个参数为获取值,两个参数为设置值)

var $src = $('#img1').prop('src');  // 取出图片的地址

$('#img1').prop({src: "test.jpg", alt: "Test Image" });  // 设置图片的地址和alt属性

jquery事件

事件函数列表：(常用的就这几个尽量背下来)

blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
submit() 用户递交表单