jQuery总结(二)
2018-10-23 12:53 flyPENG 阅读(118) 评论(0) 编辑 收藏 举报Jquery特殊效果
fadeIn() 淡入
$btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});
});
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元素
$(this).next().slideToggle().parent().siblings().children('ul').slideUp();
jQuery属性 操作
1、html() 取出或设置html内容
// 取出html内容 var $htm = $('#div1').html();
// 设置html内容 $('#div1').html('<span>添加文字</span>');
2、prop() 取出或设置某个属性的值
取出图片的地址 var $src = $('#img1').prop('src');
设置图片的地址和alt属性 $('#img1').prop({src: "test.jpg", alt: "Test Image" });
3、val()获取input 标签 的value
jQuery循环
对jQuery选择的对象集合分别进行操作,需要用到jQuery循环操作,此时可以用对象上的each 方法 。
$(function(){
$('.list li').each(function(i){
$(this).html(i);
})
})
......
<ul class="list">
<li></li>
<li></li>
</ul>
// each 中的this 表示当前正遍历出来的那个标签对象
// each函数中传的匿名函数可以传放两个形参
// 形参1: 遍历时的索引/标签的索引
// 形参2: 遍历出来的那个标签对象和动态的this同一个对象
$lis.each(function (i, elem) {
// if ($(this).index() % 2 == 1) {
// $(this).css({'color':'red'});
// }
console.log(i + elem);
})
jQuery事件函数列表
blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入(进入子元素也触发)
mouseout() 鼠标离开(离开子元素也触发)
mouseenter() 鼠标进入(进入子元素不触发)
mouseleave() 鼠标离开(离开子元素不触发)
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
submit() 用户递交表单
调试程序的方法
1、alert()
2、console.log()
3、document.title()