## Jquery basis (b)

Jquery basis (b)

## a, Window.onload and $ (function) of the difference between:

　　## 1, we first look at the Window.onload usage:

　　window.onload=function () {
        $("#btn").click(function () {
            alert("爱你！");
        });
    }

　　 function f() {
        alert("lala");
    }
    function f1() {
        alert("sisi");
    }
    window.onload=f;
    window.onload=f1;

　　window.onload btn with id after binding events, can only be defined once, if you define multiple times, only the last execution

　　## 2, $ (function) binding events:

 　　$ ( Function () { 
        $ ( "#btn") the Click (. Function () { 
            Alert ( "eat?" ); 
        }); 
    });

 $(function () {
       $("#d1").css("background-color","red");
       $("#d2").css("background-color","pink");
   });

　　## Conclusion: The two examples above, you can see that $ (function) regardless of the definition several times, it will be executed

## Second, the basic selector:

　　Requirements: Please input form according to the following requirements to operate:

　　<body>
        <input type="button" value="save" class="mini" name="ok" />
        <input type="button" value="change id值为one的 元素背景为red" id="b1" />
        <input type="button" value="change元素为div所有元素  背景red" id="b2"/>
        <input type="button" value="change  class  值为mini 背景为red"  id="b3"/>
        <input type="button" value="change 所有span元素和 id为two元素为红色" id="b4"/>
        <h1>坚持是一种品质 自信源于努力</h1>
        <h2>坚持的可贵之处可以培养我们更多的优秀的品质</h2>
        <div id="one">
            id为one的div
        </div>
        <div id="two" class="mini">
            id为two  是mini
        </div >
        <div class="one">
            class是one
            <div class="mini">class是mini</div>
            <div class="mini">class是 mini</div>
        </div>
        <div class="one">
            class是one
            <div class="mini01">class是mini01</div>
            <div class="mini">class是 mini</div>
        </div>
        <span class="spanone">class为spanone的span元素</span>
        <span class="mini">class为mini的span元素</span>
    </body>

　　##1.1 标签选择器

 　　　　语法：$("标签名")

 　　##1.2 id选择器

 　　　　语法：$("#id值")

 　　##1.3 类选择器

 　　　　$(".class的属性值")

 　　##1.4 并集选择器

 　　　　$("选择器1,选择器2,.....")

style属性：

　　　　<style>
            div,span{
                width: 180px;
                height: 180px;
                margin: 20px;
                background: #999ccc;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: roman;
            }
            div .mini{
                width: 50px;
                height: 50px;
                background: #cc66ff;
                border:#000 1px solid;
                font-size: 12px;
                font-family: roman;
            }
            div .mini01{
                width: 50px;
                height: 50px;
                background: #cc66ff;
                border:#000 1px solid;
                font-size: 12px;
                font-family: roman;
            }
        </style>

<script type="text/javascript">
    $(function () {
       $("#b1").click(function () {
           $("#one").css("background-color","red");
       });
       $("#b2").click(function () {
           $("div").css("background-color","pink");
       });
       $("#b3").click(function () {
           $(".mini").css("background-color","blue");
       });
       $("#b4").click(function () {
           $("span,#two").css("background-color","yellow");
       });
    });
</script>

##三、过滤选择器：

　　## 1，首元素选择器

　　　　：first 获得选择元素的第一个元素

　　 ## 2，尾元素选择器

　　　　 :last

　　 ## 3，非元素选择器

　　　　 not(selectot) 不包含指定元素的选择器

　　 ## 4，偶数选择器

　　　　 even 从0 开始计算

 　　## 5，奇数选择器

 　　　　odd从0 开始计算

 　　## 6，等于索引选择器

　　　　 eq（index）

　　 ## 7，大于索引选择器

 　　　　gt(index)

 　　## 8，小于索引选择器

　　　　 lt（index）

 　　## 9，标题选择器

　　　　 header 获得标题(h1-h6) 固定写法

<script type="text/javascript">
    // 程序入口
    $(function () {
　　　　　　//第一个元素
        $("#b1").click(function () {
            $("div:first").css("background-color","red");
        });
　　　　　　//最后一个
        $("#b2").click(function () {
            $("div:last").css("background-color","pink");
        });
　　　　　　//id不为one
        $("#b3").click(function () {
            $("div:not(.one)").css("background-color","blue");
        });
　　　　　　//偶数even
        $("#b4").click(function () {
            $("div:even").css("background-color","black");
        });
　　　　　　//奇数odd
        $("#b5").click(function () {
            $("div:odd").css("background-color","yellow");
        });
　　　　　　//大于gt（）
        $("#b6").click(function () {
            $("div:gt(3)").css("background-color","#5b5b5b");
        });
　　　　　　//等于eq（）
        $("#b7").click(function () {
            $("div:eq(3)").css("background-color","#ff22c8");
        });
　　　　　　//小于lt（）
        $("#b8").click(function () {
            $("div:lt(3)").css("background-color","#2fff3a");
        })
　　　　　　//所有标签
        $("#b9").click(function () {
            $(":header").css("background-color","red");
        });
    });
</script>

##四、表单过滤选择器

　　 ## 1，可用元素选择器

 　　　　：enabled

 　　## 2，不可用元素选择器

　　　　 :disabled

　　 ## 3，选中的选择器

 　　　　：checked

 　　## 4，获得下拉框的选择器

　　　　 ：selected

　　　　<script>
            $(function(){
                $("#b1").click(function(){
                    $("input[type='text']:enabled").val("宝宝");
                });
                $("#b2").click(function(){
                    $("input[type='text']:disabled").val("宝宝");
                });
                $("#b3").click(function(){
                    alert($("input[type='checkbox']:checked").length);
                });
                $("#b4").click(function(){
                    alert($("#edu > option:selected").length);
                });
            });
        </script>

Guess you like