jquery学习基础(二)

今天继续学习jquery的基础。直接看栗子吧。

jquery操作checkbox

demoOne

这里我点击超链接的时候，使用alert将所有已经checked的checkbox的value值打印出来，先看下效果：

关键的html和jquery代码：

<div>
<a href="#">获得被选中的元素</a>
<input type="checkbox" checked value="111">checked learn
<input type="checkbox" checked value="222">checked learn
<input type="checkbox" value="333">checked learn
<input type="checkbox" checked value="444">checked learn
</div>

<script type="text/javascript">
    $(function($) {
        $("a").click(
            function() {
                $("[type='checkbox']").each(
                    function(i) {
                        if(this.checked) {//this.checked == false
                            alert(this.value);
                        }
                    }
                );
            }
        );
    });
</script>

这里用到了属性选择器，然后使用jquery为我们提供的each函数，遍历每一个选择器筛选过后的元素。

demoTwo

这里栗子学习radioButton，当点击超链接的时候，会显示被选中的radio的值。看效果：

关键html和jquery代码如下：

<div>
    <a href="#">获得被选中的元素</a>
    <input type="radio" value="1111" name="items">one
    <input type="radio" value="2222" name="items">two
    <input type="radio" value="3333" name="items" checked>three
    <input type="radio" value="4444" name="items">four
</div>


$(function($) {
        $("a").click(
            function() {
                if($("input:checked")) {
                    alert($("input:checked").val());
                }
            }
        );
});

这里选择器得到具有checked属性的input元素，然后打印出该元素的值。

jquery常用方法

html()，find()，end()，children()，eq()，siblings()

<div class="border">
    <a href="#" class="html">html()方法</a>
    <a href="#" class="find">find()方法</a>
    <a href="#" class="end">end()方法</a>
    <a href="#" class="children">children()方法</a>
    <a href="#" class="eq">eq()方法</a>
    <a href="#" class="siblings">siblings()方法</a>

    <div class="parent">
        <div class="contain_div">this is a conent</div>
        <div class="contain_div_two">it's second div</div>
        <div class="contain_div_three">it's third div</div>
        <p>this is a p</p>
        <span>this is a span</span>
    </div>
</div>

$(function($) {
        $(".parent").add("<span>Again</span>")
        $(".html").click(
            function() {
                //得到class="parent"的html内容
                alert($(".parent").html());
            }
        );

        $(".find").click(
            function() {
                //得到class="parent"中的class="contain_div"的元素
                alert($(".parent").find(".contain_div").html());
            }
        );
        $(".end").click(
            function() {
                //得到class="parent"的html内容,这里的end方法将匹配的元素列表变为前一次的状态
                alert($(".parent").find(".contain_div").end().html());
            }
        );
        $(".children").click(
            function() {
                //循环遍历输出class="parent"的子元素
                $(".parent").children().each(
                    function(i) {
                        alert($(this).html());
                    }
                );
            }
        );

        $(".eq").click(
            function() {
                //找出第一个div元素,下标从0开始
                alert($("div").eq(1).html());
            }
        );

        $(".siblings").click(
            function() {
            //循环遍历与class=".contain_div"同级的元素
                $("div").filter(".contain_div").siblings().each(
                    function(i) {
                        alert($(this).html());
                    }
                );
            }
        );
    });

clone()和appendTo的用法

下面带大家使用clone和appendTo方法完成一个简单的案例，先看效果：

可以看到，每次点击超链接的时候，会将li中最上层的标签移动到最后一个。

<div>
    <a href="#">开始循环</a>
    <ul>
        <li>111111111111</li>
        <li>222222222222</li>
        <li>333333333333</li>
        <li>444444444444</li>
        <li>555555555555</li>
    </ul>
</div>

$(function($) {
        $("a").click(
            function() {
                //$("li").eq(0).fadeOut(速度,淡出完成后的回调函数)
                $("li").eq(0).fadeOut("slow",function(){
                    //克隆一个当前元素，并且追加到父元素的最后，淡入。
$(this).clone().appendTo($(this).parent()).fadeIn("slow");
                    //移除当前元素
                    $(this).remove();
                })
            }
        );
    });

jquery实现简单的导航栏

下面主要利用jquery提供的hide()方法和hover(fun,fun)方法来实现简单的导航栏，先看效果：

主要代码如下：

<ul>
        <li class="item">
            <a>first</a>
            <ol>
                <li><p>1111</p></li>
                <li><p>1111</p></li>
                <li><p>1111</p></li>
            </ol>
        </li>
        <li class="item">
            <a>second</a>
            <ol>
                <li><p>2222</p></li>
                <li><p>2222</p></li>
                <li><p>2222</p></li>
            </ol>
        </li>
        <li class="item">
            <a>third</a>
            <ol>
                <li><p>3333</p></li>
                <li><p>3333</p></li>
            </ol>   
        </li>
    </ul>

$(function($) {
        $("ol").hide();
        $(".item").hover(
            function () {
                $("ol,p",this).slideDown("fast");
            },
            function () {
                $("ol,p",this).slideUp("slow");
            }
        );
});

这里，首先在页面加载函数中，使ol元素隐藏，为class=”item”的li元素绑定hover事件，该事件有两个回调函数，分别是，鼠标移动到该元素上，和鼠标从该元素移出的事件。

jquery操作select

下面给大家带来一个jquery操作select的demo，先看效果：

关键代码：

<div>
    <label>改变字体颜色</label>
    <select id="sele">
        <option value="red">红色</option>
        <option value="green">绿色</option>
        <option value="blue">蓝色</option>
        <option value="gray">灰色</option>
    </select>

    <p>我是一个字体,请改变我的颜色</p>
</div>

$(function($) {
        $("#sele").change(
            function(){
                //alert($(this).val());
                $("p").css({"color":$(this).val()})
            }
        );
});

可以看到核心代码，其实很简单，为select设置change事件，在回调函数里得到用户选择的值然后，为p标签设置字体颜色该该值即可。

使用keyup监听键盘弹起

在jquery中有一个keyup可以监听键盘按下以后弹起的那一刻。先看效果：

这里，每当用户弹起键盘，都会捕捉到该事件，在回调函数中显示用户输入的字符，比较简单：

请输入姓名：<input type="text" width="150px" name="uname">
<p></p>

$(function($) {
        $("input[name='uname']").keyup(
            function(){
                $("p").html($(this).val());
            }
        );
});

jquery改变图片透明度

下面给大家带来使用animate自定义动画和css的opacity属性改变图片的透明度。先看效果：

代码其实很简单：

<img src="../../images/88.jpg">
<img src="../../images/bb.jpg">

$(function($) {
        $("img").hover(
            function () {
                $(this).animate({"opacity":0.3},1000);
            },
            function () {
                $(this).animate({"opacity":1.0},1000);
            }
        );
});

源码下载
ok，今天就学习到这里了。