jquery

介绍

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

jquery选择器

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

('li') //选择所有的li元素
('.myClass') // 选择class为myClass的元素
('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素

对选择集进行修饰过滤(类似CSS伪类)

('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
('div:visible') //选择可见的div元素

对选择集进行函数过滤

('div').not('.myClass'); //选择class不等于myClass的div元素
('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素

选择集转移

('div').next('p'); //选择div元素后面的第一个p元素
('div').parent(); //选择div的父元素
('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的cl

jquery样式操作

操作行间样式

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

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

操作样式类名

("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

jquery属性操作

1. html() 取出或设置html内容

// 取出html内容
var ('#div1').html();
// 设置html内容
$('#div1').html('<span>添加文字</span>');

2. text() 取出或设置text内容

// 取出文本内容
var ('#div1').text();
// 设置文本内容
$('#div1').text('<span>添加文字</span>');

3. attr() 取出或设置某个属性的值

// 取出图片的地址
var ('#img1').attr('src');
// 设置图片的地址和alt属性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

绑定click事件

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

// 内部的this指的是原生对象
// 使用jquery对象用 $(this)
})

jquery特殊效果

fadeIn() 淡入

    $btn.click(function(){

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

    });

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

选项卡

.btns{
            width: 500px;
            height: 50px;
        }
        /*选项卡的样式*/
        .btns input{
            width: 100px;
            height: 50px;
            background-color: #ddd;/*默认灰色*/
            color: #666;
            border: 0px;
        }
        /*被选中的选项卡的样式*/
        .btns input.cur{
            background-color: gold;
        }
        /*内容区的样式*/
        .contents div{
            width: 500px;
            height: 300px;
            background-color: gold;
            display: none;/*默认隐藏*/
            line-height: 300px;
            text-align: center;
        }
        /*被选中的内容区的样式*/
        .contents div.active{
            display: block;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btns input').click(function() {
                //失去焦点，避免出现默认的蓝框
                $(this).blur();
                //this是原生的对象
                // alert(this);//弹出[object HTMLInputElement]，说明this就是当前点击的input元素

                //jQuery的this对象使用时要用$()包起来，这样就可以调用jQuery的方法了
                //给当前元素添加选中样式，为兄弟元素移除选中样式
                $(this).addClass('cur').siblings().removeClass('cur');

                //$(this).index()获取当前按钮所在层级范围的索引值
                //显示对应索引的内容区，隐藏其它兄弟内容区
                $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
            });
        })

事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

• 一般绑定事件的写法

$(function(){
    $ali = $('#list li');
    $ali.click(function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

• 事件委托的写法

$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>