jQuery进阶部分笔记
发布日期:2021-11-02 02:26:39 浏览次数:0 分类:技术文章

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() 用户递交表单
上一篇:jQuery高级部分笔记
下一篇:jQuery基础部分笔记