JQuery入门（一）

1、JQuery加载方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script>
            jQuery(document).ready(function(){
                alert("aaa");
            });

            $(document).ready(function(){
                alert("bbb");
            });

            $(function(){
                alert("ccc");   
            });
        </script>
    </head>
    <body>
    </body>
</html>

2、JQ的获取

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script>
            $(function(){
                //Js方式
                document.getElementById("btn").onclick = function(){
                    alert("aaa");
                }
                //JQ方式
                $("#btn").click(function(){
                    alert("ddd");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="点击" id="btn"/>
    </body>
</html>

3、DOM对象和JQ对象的转换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script>
            function writejs(){
                //Js的DOM操作
                document.getElementById("span1").innerHTML = "好可爱";
            }
            $(function(){
                $("#btn").click(function(){
                    //JQ
                    $("#span1").html("呵呵呵");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="JS写入" onclick="writejs()"/>
        <input type="button" value="JQ写入" id="btn"/><br />
        哎呀<span  id="span1">你好帅</span>
    </body>
</html>

JQ无法使用innerHTML。JS也无法使用html(“value”)。

JQ对象和DOM对象可以相互转化：

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
    function writejs(){
        //Js的DOM操作
        //document.getElementById("span1").innerHTML = "好可爱";
        //DOM对象转化成JQ对象
        var spanELe = document.getElementById("span1");
        $(spanELe).html("卡哇伊");;
    }
    $(function(){
        $("#btn").click(function(){
            //JQ
            //$("#span1").html("呵呵呵");
            //JQ转化DOM，方式一
            $("#span1").get(0).innerHTML = "呵呵哒";
            //JQ转化DOM，方式二
            $("#span1")[0].innerHTML = "厉害啦！";
        });
    });
</script>

4、广告的弹出和消失

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script>
            $(function(){
                timeShow = setInterval("showAd()",3000)
            });

            function showAd(){
                //$("#img1").show(2000);
                //$("#img1").show();
                //$("#img1").slideDown();
                $("#img1").fadeIn(3000);
                clearInterval(timeShow);
                timeHidden = setInterval("hiddenAd()",3000);
            }
            function hiddenAd(){
                //$("#img1").hide();
                //$("#img1").slideUp(3000);
                $("#img1").fadeOut();
                clearInterval(timeHidden);
            }
        </script>
    </head>
    <body onload="init()">
        <div>
            <img src="img/1.jpg" width="100%" style="display: none" id="img1"/>
        </div>
    </body>
</html>

5、Toggle的使用-实现隐藏和显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script>
            $(function(){
                $("#btn").click(function(){
                    $("#img").toggle();
                });
            });
        </script>
    </head>
    <body">
        <div>
            <input type="button" value="显示/隐藏" id="btn"/><br />
            <img src="img/1.jpg" id="img"/>
        </div>
    </body>
</html>

6、jquery的选择器
6.1、基本选择器

id选择器：$(“#id名称”);
元素选择器：$(“元素名称”);
类选择器：$(“.类名”);
通配符：*
多个选择器共用(并集)

<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
    $(function(){
        $("#btn1").click(function(){
            $("#one").css("background-color","pink");
        });

        $("#btn2").click(function(){
            $(".mini").css("background-color","pink");
        });

        $("#btn3").click(function(){
            $("div").css("background-color","pink");
        });

        $("#btn4").click(function(){
            $("*").css("background-color","pink");
        });

        $("#btn5").click(function(){
            $("#two,.mini").css("background-color","pink");
        });
    }); 
</script>

6.2、层级选择器

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
    $(function(){
        $("#btn1").click(function(){
            $("body div").css("background-color","gold");
        });

        $("#btn2").click(function(){
            $("body > div").css("background-color","gold");
        });

        $("#btn3").click(function(){
            $("#two + div").css("background-color","gold");
        });

        $("#btn4").click(function(){
            $("#one ~ div").css("background-color","gold");
        });
    });

</script>

6.3、基本过滤选择器

$('li').first() 等价于：$(“li:first”)

<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
    $(function(){
        $("#btn1").click(function(){
            $("body div:first").css("background-color","red");
        });

        $("#btn2").click(function(){
            $("body div:last").css("background-color","red");
        });

        /*奇数偶数从0开始*/
        $("#btn3").click(function(){
            $("body div:odd").css("background-color","red");
        });

        $("#btn4").click(function(){
            $("body div:even").css("background-color","red");
        });
    });
</script>

6.4、属性选择器

<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
    $(function(){
        $("#btn1").click(function(){
            $("div[id]").css("background-color","red");
        });

        $("#btn2").click(function(){
            $("div[id='two']").css("background-color","red");
        });
    });
</script>

6.5、表单选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){

                $("#btn1").click(function(){
                    $(":input").css("background-color","pink");
                });

                $("#btn2").click(function(){
                    $(":text").css("background-color","pink");
                });

            });

        </script>
    </head>
    <body>
        <input type="button" id="btn1" value="选择所有input元素" />
        <input type="button" id="btn2" value="选择文本框" />
        <br/>
        <form>
            <input type="text[还可以使用属性选择]" /><br />
            <input type="checkbox" /><br />
            <input type="radio" /><br />
            <input type="image" /><br />
            <input type="file" /><br />
            <input type="submit" />
            <input type="reset" /><br />
            <input type="password" /><br />
            <input type="button" /><br />
            <select><option/></select><br />
            <textarea></textarea><br />
            <button></button>
        </form>
    </body>
</html>

7、JQ完成表格的隔行换色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                /*//偶数行设置背景颜色
                $("tbody tr:even").css("background-color","yellow");
                //奇数行并设置背景颜色
                $("tbody tr:odd").css("background-color","green");*/

                //偶数行设置背景颜色
                $("tbody tr:even").addClass("even");
                //$("tbody tr:even").removeClass("even");
                //奇数行设置背景颜色
                $("tbody tr:odd").addClass("odd");

            });
        </script>
    </head>
    <body>
        <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr >
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr >
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr >
                    <td>4</td>
                    <td>赵六</td>
                    <td>29</td>
                </tr>
                <tr >
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr >
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>

    </body>
</html>

style.css中：

.even       { background:#FFF38F;}  /* 偶数行样式*/
.odd        { background:#FFFFEE;}  /* 奇数行样式*/

8、JQ完成全选和全不选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("#select").click(function(){
                    //获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
                    //attr方法与JQ的版本有关，在1.8.3及以下有效。
                    //$("tbody input").attr("checked",this.checked);
                    $("tbody input").prop("checked",this.checked);
                });
            });
        </script>
    </head>
    <body>
        <table border="1" width="500" height="50" align="center" id="tbl" >
            <thead>
                <tr>
                    <td colspan="4">
                        <input type="button" value="添加" />
                        <input type="button" value="删除" />
                    </td>
                </tr>
                <tr>
                    <th><input type="checkbox" id="select"></th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>4</td>
                    <td>赵六</td>
                    <td>29</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>