一、jquery选择器
1、jquery用法思想一 :
选择某个网页元素,然后对它进行某种操作
jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。
$('myId')//选择id为myId地网页元素
$('.maClass')//选择class为myClass的元素
$('li')//选择所有的li元素
$('#ul1 li span')//选择id为ul1元素下地所有li下的span元素
$('input[name=first]')//选择name属性等于first的input元素
对选择集进行过滤
$('div').has('p');//选择包含p元素的div元素
$('div').not('.myClass');//选择clas不等于myClass的div元素
$('div').eq(5);//选择第6个div元素
选择集转移
$('#box').prev();//选择id是box的元素前面紧挨的同辈元素
$('#box').prevAll(); //选择id是box的元素前面所有的同辈元素
$('#box').next();//选择id是box的元素后面紧挨的同辈元素
$('#box').nextAll();//选择id是box的元素后面所有的同辈元素
$('#box').parent();//选择id是box的元素父元素
$('#box').children();//选择id是box的元素所有子元素
$('#box').siblings();//选择id是box的元素同级元素,就是反选,除了它自身,其他都选中
$('#box').find('.myClass');//选择id是box的元素内的class等于mwclass的元素
判断是否选择到了元素
// 获取div的样式
$("div").css("width");
$("div").css("color");
//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
特别注意
选择器获取的多个元素,获取信息获取的是第一个,比如:$("div").css("width"),获取的是第一个div的width。
jquery有容错机制,即使没有找到元素,也不会出错,可以用length属性来判断是否找到了元素,length等于0,就是没有找到元素,length大于0,就是找到了元素。
var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length);//弹出1
alert($div2.length);//弹出0
......
<div id= "div1">这是一个div</div>
二、jquery 样式操作
2、jquery用法思想二 :
同一个函数完成取值和赋值
操作行间样式
// 获取div的样式
$("div").css("width");
$("div").css("color");
//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
特别注意
选择器获取的多个元素,获取信息获取的是第一个,比如:$("div").css("width"),获取的是第一个div的width。
操作样式类名
$('#div1').addclass("divClass2") //给id为div1的对象追加divClass2
$('#div1').removeClass("divclass") //移除id为div1的对象的class名为divClass的样式
$('#div1').removeClass("divclass divClass2")//移除多个样式
$('#div1').toggleClass("anotherClass")//重复切换anotherClass样式
三、绑定click事件
给元素绑定click事件,可以用如下方法:
$('#btn1').click(function(){
//内部的this指的是原生对象
//使用jquery对象用$(this)
})
获取元素的索引值
有时候需要获得匹配元素相对于其同胞元素的索引位置,此时可以用index() 方法获取
var $li =$('.list li').eq(1);
alert($li.index()); //弹出1
.....
<ul class = "list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
四、jquery动画
通过animate方法可以设置元素某属性值上的动画,可以设置一个或者多个属性值,动画执行完成后会执行一个函数。
/* animate的参数
参数一:要做动画的样式属性,写成字典形式
参数二:动画持续的时间,默认是400毫秒,设置时不写单位
参数三:动画曲线,默认是'swing',缓冲运动,还有'linear' 匀速运动
参数四:动画的回调函数,它是一个匿名函数,在动画结束时会自动调用
*/
$('#div1').animate({
width :300,
heigt :300
},1000,'swing',function(){
alert('done')
})