web前端(五)——jquery入门

jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

 

jquery文档加载完再执行

　　将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。

　　可以简写为：

<script type="text/javascript">

$(function(){

     ......

});

</script>

 

 

 

jquery选择器

　　jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功

 

　　$('#myId') //选择id为myId的网页元素

　　$('.myClass') // 选择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'); //选择class不等于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等于myClass的元素

判断是否选择到了元素 

var $div1 = $('#div1');

var $div2 = $('#div2');

alert($div1.length); // 弹出1

alert($div2.length); // 弹出0

......

<div id="div1">这是一个div</div>

 

 

jquery样式操作

操作行间样式

// 获取div的样式
$("div").css("width");
$("div").css("color");

//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

 

 

绑定click事件

$('#btn1').click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)

})

//获取元素的索引值 
var $li = $('.list li').eq(1);
alert($li.index()); // 弹出1
......
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

 

 

jquery动画

/*
    animate参数：
    参数一：要改变的样式属性值，写成字典的形式
    参数二：动画持续的时间，单位为毫秒，一般不写单位
    参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
    参数四：动画回调函数，动画完成后执行的匿名函数

*/

$('#div1').animate({
    width:300,
    height:300
},1000,'swing',function(){
    alert('done!');
});