jQuery总结（一）

jQuery的核心特征可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器并且可对css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

Jquery是一个函数库，页面 用script标签引入这个js文件使用

jQuery的口号和愿望Write Less ,Do More(写得少，做的多 )

导入jQuery

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

<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的元素

Length等于0，就是没有选择到元素，length大于 0，就是选择到了元素

jquery样式操作

操作行间样式

获取div的样式    $(“div”).css(“width”);

设置div的样式    $(“div”).css(“width”,”30px”);

操作样式类名

$("#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>

</ul>

Jquery动画

通过animate方法可以设置元素某属性值上的动画，可以设置 一个或多个属性 值，动画 执行完成后会执行一个函数

/*

    animate参数：

    参数一：要改变的样式属性值，写成字典的形式

    参数二：动画持续的时间，单位为毫秒，一般不写单位

    参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动

    参数四：动画回调函数，动画完成后执行的匿名函数

*/

$('#div1').animate({

    width:300,

    height:300

},1000,'swing',function(){

    alert('done!');

});