jQuery 基本操作
2018-06-25 本文已影响0人
梦亦殇灬
一、jQuery选择器
//jquery-1.12.4.min.js 这是jQuery
<script type="text/javascript" src="js/jquery-1.12.4.min.js">
<script type="text/javascript">
$(fnction(){
$('#div1').css({color:red;})
})
</script>
<body>
<div id="div1"> 我是div</div>
</body>
//选择器色规则与css相同
二、选择集转移
- pre()是同级的上一个元素 preAll()是同级的上面所有元素
- next（）是同级的下一个人元素 nextAll（）是统计下面的所有元素
$('#div1').next().css.({
color:'red',
})
$('#div2').nextAll('p').css({
color:'bule'
})
- parent() 选择上一级的父元素
- paren().parent() 获取祖级的元素 （不建议）
- closest() 获取离自己最近的元素
- children() 获取元素下的所有元素可以通过end()回调父元素
- eq(2)获取索引为2的元素
- siblings() 其他兄弟元素
- find() 选择属性为xx的元素
三、样式操作
写入样式
$('#div1').css({background:'gold'});
增加样式
.big{
background:red;
}//css里边的样式
$('#div1').addClass('big')
减少样式
$('$iv1').removeClass('big')
四、点击事件
$(function(){
$('#bnt').click(function(){
$('.box').toggleClass('big')
})
})
五、索引值
.index() 方法
六、作为选项卡
利用选择集转移增加样式或者删除样式 改变
$('#btns input').click(function(){
$(this).addClass('cur').siblings().removeClass('cur');
})
七、属性操作
- html() 可以读取和写入内容
- prop() 可以读写布尔值
alert($('#check').prop('checked'));//选中为true，非选中为false $('#check').prop({checked:true});//设置默认勾选 - attr() 可以读写非布尔值
$('.box').attr({title:'这是一个div!'});//写入title属性，并赋值 alert($('.box').attr('class'));//读属性class的值，弹出box
八、特殊效果
- fadeOut()淡出
- fadeInt()淡入
- fadeToggle()切换淡出淡入
- hide() 隐藏元素
- show（） 显示元素
- toggle() 切换隐藏显示
- slideDown 向上卷起
- slideUp 向下卷起
- slideToggle 切换展开或者卷起元素
九、动画
参数：
1.什么属性做动画，设置属性
2.动画执行时间 单位 毫秒
3.动画曲线
1.swing（默认值）开始和结束慢 中间块
2.linear 匀速
4.回调函数 动画做完之后做的事 可无限嵌套
$('#div').animate({
width:111,
height:111},
100,
function(){
$(this).anmate(
{marginLeft:333;}
});
};
});
十、循环
each()函数
//一起设置
$('.list li').css({background:red;})
//循环设置
$('.list li').each(function(indexx){
$('this').html(index);
})
