jQuery用法和简单实现

什么是jQuery?

jQuery是目前使用最广泛的javascript函数库。

引入方式

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

但是要写js代码不能再引入的这个标签里写,要重开一个script标签

常用的语法和用法

加载元素:ready方法
用法分析:将获取元素的语句写到页面头部，会因为元素还没有加载而出错.ready可以解决这个问题

<script type="text/javascript">

$(document).ready(function(){

     ......

});

</script>

// 也可以简写成这样
<script type="text/javascript">

$(function(){

     ......

});

</script>

jQuery选择器
选择规则和css选择规则一样

$('#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').filter('.myClass'); //选择class等于myClass的div元素
$('div').eq(5); //选择第6个div元素

选择集转移

$('div').prev(); //选择div元素前面紧挨的同辈元素
$('div').prevAll(); //选择div元素之前所有的同辈元素
$('div').next(); //选择div元素后面紧挨的同辈元素
$('div').nextAll(); //选择div元素后面所有的同辈元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素

例如:按钮操作选项卡

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样式

jQuery事件
常用的事件有

click语法和用法

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

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

    // 使用jquery对象用 $(this) 简单来说就是点击的元素

})

获取页面的滚动事件

$(window).scroll(function(){  
    ......  
})

还有上面提到的ready事件(文档就绪事件)

jQuery的特殊效果

fadeIn() 淡入

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

    });

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

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

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

获取元素的尺寸

width()、height()    获取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

获取元素的相对位置

offset()

获取浏览器可视区的尺寸

$(window).width();
$(window).height();

获取文档的尺寸

$(document).width();
$(document).height();

获取页面滚动的距离

$(document).scrollTop();  
$(document).scrollLeft();

jQuery属性操作
html() 取出或设置html内容

// 取出html内容

var $htm = $('#div1').html();

// 设置html内容

$('#div1').html('<span>添加文字</span>');

prop() 取出或设置某个属性的值,单个!

// 取出图片的地址

var $src = $('#img1').prop('src');

// 设置图片的地址和alt属性

$('#img1').prop({src: "test.jpg", alt: "Test Image" });

多个的话我们就用上面的

//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});  //这个用字典的形式来写样式

jQuery循环
用each方法实现循环效果

(function(){
    $('.list li').each(function(i){
        $(this).html(i);
    })
})
......
<ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>