jquery 学习笔记（一）

浏览数：49 / 时间：2015年06月09日

选择器

语法说明

$(“*”) 选择所以元素

$(this) 选择当前元素

$(“p.intro”) 选项所有class=intro的p元素

$(“p:first”) 选择第一个p元素 www.2cto.com

$(“ul li:first”) 选择第一个<ul>元素的第一个<li>元素

$(“ul li:first-child”) 选择每个<ul>的第一个元素

$(“[href]“) 选择所有带href的元素

$(“a[target=‘_blank‘]“) 选择所有target=_blank的a元素

$(“a[target!=‘_blank‘]“) 选择所有target！=_blank的a元素

$(“:button”) 选择所有button元素及input类型为button的元素

$(“tr:even”) 选择所有偶数行<tr>元素

$(“tr:odd”) 选择所有单数行<tr>元素

常见的DOM事件：

鼠标事件键盘事件表单事件文档/窗口事件

click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll

mouseleave blur unload

隐藏或者显示的语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的参数speed 给出显示或隐藏内容的速度，可以使用“slow”,”fast”或者数字代表微秒。

第二个可选参数为回调函数，在显示或隐藏结束时调用

Query 提供了下面几种方法可以实现显示的淡入淡出效果：

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

fadeIn()方法

fadeTo() 实现淡化到指定的透明度，其基本语法如下：

$(selector).fadeTo(speed,opacity,callback);

必需参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）

第二个必须参数为透明度，值域为0到1之间。www.2cto.com

可选参数为回调函数，在fadeIn()方法结束后调用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jquery练习</title>

    <script src="Jquery/jquery-2.1.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        //$(unction(){});
        $(document).ready(function() {
            // $("#s1").hide();
            $(‘#s1‘).click(function() {

                $(‘*‘).hide();
            });

            $(‘#s2‘).dblclick(function() {

                //双击事件
                $(‘.l1‘).hide();
            });
            //鼠标进入
            $(‘#s1‘).mouseenter(function() {

                $(‘.l2‘).hide();
                //鼠标离开
            }).mouseleave(function() {

                $(‘.l2‘).show();
            });

            //鼠标按下
            $(‘#s3‘).mousedown(function() {

                $(‘.l3‘).hide();
                //鼠标松开
            }).mouseup(function() {

                $(‘.l3‘).show();
            });

            //hover()在鼠标指针放在某个元素之上时触发，为mouseenter和mouseleave的组合，它的第一个回调函数中鼠标进入时调用，第二个回调函数在鼠标离开时执行，
            $(‘#s4‘).hover(function() {

                $(‘.l4‘).hide();
            }, function() {

                $(‘.l4‘).show();
            });
            //focus()
            //当某个表单输入域获得焦点时调用
            //blur()
            // 当某个表单输入域失去焦点时调用
            $("#t1").focus(function() {
                $(".l5").hide();
            }).blur(function() {

                $(".l5").show();
            });


            //toggle()方法，可以实现交替显示和隐藏内容

            $(‘#s5‘).click(function() {
                $(‘.l6‘).toggle(3000);
            });

            //fadeIn() 实现淡入效果
            $(‘#s6‘).click(function() {
                alert(‘1‘);
                $(‘.l10‘).fadeIn();
                $(‘.l11‘).fadeIn(‘slow‘);
                $(‘.l12‘).fadeIn(3000);
            });
            //fadeOut() 实现淡出效果
            $(‘#s7‘).click(function() {
                alert(‘2‘);
                $(‘.l10‘).fadeOut();
                $(‘.l11‘).fadeOut(‘slow‘);
                $(‘.l12‘).fadeOut(3000);
            });
            //fadeToggle() 交替进行fadeIn()和fadeOut()，如果元素是淡出的，那么fadeToggle()将淡入该元素，如果之前是淡入的，fadeToggle将淡出该元素。
            $(‘#s8‘).click(function() {

                $(‘.l7‘).fadeToggle();
                $(‘.l8‘).fadeToggle(‘fast‘);
                $(‘.l9‘).fadeToggle(2000);




            });

            //fadeTo() 实现淡化到指定的透明度
            $(‘#s9‘).click(function() {

               
                $(‘.w1‘).fadeTo("slow", 0.4);
            });
            //fadeIn() 实现淡化到指定的透明度
            $(‘#s10‘).click(function() {


                $(‘.w1‘).fadeTo("slow", 0.8);
            });

        });
    
    
    </script>

</head>
<body>
    <button id="s1" style="background-color: Red;">
        1111
    </button>
    <button id="s2" style="background-color: yellow;">
        2222
    </button>
    <button id="s3" style="background-color: blue;">
        33333
    </button>
    <button id="s4" style="background-color: gary;">
        44444
    </button>
    <button id="s5">
        555555
    </button>
    <button id="s6">
        666666
    </button>
    <button id="s7">
        7777777
    </button>
    </button>
    <button id="s8">
        888888
    </button>
     <button id="s9">
        99
    </button>
      <button id="s10">
        100000
    </button>
    <textarea id=‘t1‘ cols=‘5‘></textarea>
    <label class=‘l1‘>
        11111</label>
    <label class=‘l2‘>
        22222</label>
    <label class=‘l3‘>
        33333333</label>
    <label class=‘l4‘>
        444444</label>
    <label class=‘l5‘>
        5555555555555</label>
    <label class=‘l6‘>
        666666</label>
    <label class=‘l7‘>
        7777</label>
    <label class=‘l8‘>
        8888</label>
    <label class=‘l9‘>
        999</label>
    <label class=‘l10‘>
        0aaaa</label>
    <label class=‘l11‘>
        sssss</label>
    <label class=‘l12‘>
        ddddd</label>
        <table class=‘w1‘ style=" background-color:Red; width:300px; height:300px;"></table>
        
         <label class=‘l13‘>
        131331313</label>
</body>
</html>