jQuery----操作、效果
jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。
jquery属性操作:
1、html() 取出或设置html内容
取出html内容 var $htm = $('#div1').html();
设置html内容 $('#div1').html('添加文字');
2、text()取出或设置text内容
取出文本内容 var $htm = $('#div1').text();
设置文本内容 $('#div1').text('添加文字');
3、attr()取出或设置某个属性的值
取出图片的地址 var $src = $('#img1').attr('src');
设置图片的地址和alt属性 $('#img1').attr({ src: "test.jpg", alt: "Test Image" });
给元素绑定click事件,可以用如下方法:
$('#btn1').click(function(){
内部的this指的是原生对象
使用jquery对象用 $(this) })
特殊效果:
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展示或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写:
$('#div1') id为div1的元素
.children('ul') 该元素下面的ul子元素
.slideDown('fast') 高度从零变到实际高度来显示ul元素
.parent() 跳到ul的父元素,也就是id为div1的元素
.siblings() 跳到div1元素平级的所有兄弟元素
.children('ul') 这些兄弟元素中的ul子元素
.slideUp('fast'); 高度实际高度变换到零来隐藏ul元素
通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。
就算跌倒,也要豪迈的笑