jquery 学习 笔记(一)

选择器

语法 说明 

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

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

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。