JQuery甯哥敤鏂规硶鎬荤粨

Posted 2020-06-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery甯哥敤鏂规硶鎬荤粨相关的知识，希望对你有一定的参考价值。

鏍囩锛?/p>

1.json鐨勫垱寤烘柟寮?/p>

<script>
    $(function () {
        //绗竴绉?
        var my = new People("CallmeYhz", 26);
        alert("(1):" + my.name);
        //绗簩绉?
        var you =
            {
                "name": "鍛ㄥ叕鐟?,
                "age": 35
            };
        alert("(2):" + you.name);
        //绗笁绉?
        var me =
            [
            { "name": "A", "age": 1 },
            { "name": "B", "age": 2 }
            ]
        alert("(3):" +me[1].name+",闀垮害鏄?"+me.length);
    })

    //浜虹墿绫?
    function People(name, age) {
        this.name = name;
        this.age = age;
    }
</script>

2.hover

<p>
    榛戣壊
</p>
<script>
    $(function () {
        //鎮仠鍜岀Щ寮€鏂规硶
        $(鈥榩鈥?.hover(
            function () {
                $(this).css("color", "blue")
            },
            function () {
                $(this).css("color", "black");
            });
    });
</script>

鎶€鏈垎浜? src=

3.data()

<input id="btn1" type="button" value="濮撳悕" />
<input id="btn2" type="button" value="鏄熷骇"/>
<input id="btn3" type="button" value="琛€鍨?/>
<script>
    $(function ()
    {
        $(鈥榩鈥?.data("濮撳悕", "CallmeYhz");
        var info = {"鏄熷骇":"閲戠墰搴?,"琛€鍨?:"B鍨?};
        $(鈥榩鈥?span style="color: #000000;">).data(info);

        $(鈥?btn1鈥?.click(function () { alert($(鈥榩鈥?.data("濮撳悕")); });
        $(鈥?btn2鈥?.click(function () { alert($(鈥榩鈥?.data("鏄熷骇")); });
        $(鈥?btn3鈥?.click(function () { alert($(鈥榩鈥?.data("琛€鍨?)); });
    })
</script>
<p></p>

4.each()

<input id="btn1" type="button" value="濮撳悕" />
<input id="btn2" type="button" value="鏄熷骇"/>
<input id="btn3" type="button" value="琛€鍨?/>

<script>
    $(function () {
        $("input[type=鈥榖utton鈥榏").each(function (index,ele) {
            alert("褰撳墠绱㈠紩鏄?" + index + ",鍊兼槸:" + $(ele).attr("value"));
        });
    });
</script>

鎶€鏈垎浜? src=

5.toArray()

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
<input  type="button" value="寮€濮嬮亶鍘唋i" id="btn"/>
<br />
<input type="text" value="绗竴涓?/>
<input type="text" value="绗簩涓? />
<input type="text" value="绗笁涓?/>
<input type="button" value="杈撳嚭绗竴涓猼ext鍊? id="btn2" />

<script>
    $(function ()
    {
        //li
        $(鈥?btn鈥?.click(function ()
        {
            var lis = $(鈥榣i鈥?span style="color: #000000;">).toArray();            
            for (var i = 0; i < lis.length; i++) {
                alert(lis[i].innerhtml);
            }
        });

        //text
        $(鈥?btn2鈥?.click(function ()
        {
            var texts = $("input[type=鈥榯ext鈥榏").toArray();
           alert($(texts[0]).val());
        })
        
    })
</script>

鎶€鏈垎浜? src=

6.get()

<p>鎴戞槸P閲岄潰鐨勫唴瀹?lt;/p>
<p id="pp">鍛靛懙鎴戜篃鏄?lt;/p>
<button id="btn">寮€濮嬫墽琛?lt;/button>
<script>
    $(function ()
    {
        $(鈥?btn鈥?.bind("click", function ()
        {
            var get = $("p").get(1);           
            var by = document.getElementById("pp");
            alert(get.innerHTML);
            alert(by.innerHTML);
        })
    })
</script>

缁撴灉閮借緭鍑猴細鍛靛懙鎴戜篃鏄?br />7.parent()

<style>
    .ancestors * {
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
</style>
<div class="ancestors">
    <div style="width:500px;">
        div鏂囨湰鍐呭
        <ul>
            ul鏂囨湰鍐呭
            <li>
                li鏂囨湰鍐呭
                <span>span鏂囨湰鍐呭</span>
            </li>
        </ul>
    </div>

    <div style="width:500px;">
        div鏂囨湰鍐呭
        <p>
            p鏂囨湰鍐呭
            <span>span鏂囨湰鍐呭</span>
        </p>
    </div>
</div>
<script>
    $(function () {
        $("span").parent().css({ "color": "red", "border": "2px solid red" });
    })
</script>

鎶€鏈垎浜? src=

8.parents()

灏?涓殑parent->parents()

<script>
    $(function () {
        $("span").parents().css({ "color": "red", "border": "2px solid red" });
    })
</script>

鎶€鏈垎浜? src=

9.children()

    <style>
        .descendants * {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
  </style/>
    <script>
        $(document).ready(function () {
            $("div").children().css({ "color": "red", "border": "2px solid red" });
        });
    </script>

    <div class="descendants" style="width:500px;">
      div鏂囨湰鍐呭
        <p>
           p1鏂囨湰鍐呭  
            <span>p1鍐呴儴span鏂囨湰鍐呭</span>
        </p>
        <p>
           p2鏂囨湰鍐呭
            <span>p2鍐呴儴span鏂囨湰鍐呭</span>
        </p>
    </div>

鎶€鏈垎浜? src=

10.find()

find() 鏂规硶杩斿洖琚€夊厓绱犵殑鍚庝唬鍏冪礌锛屼竴璺悜涓嬬洿鍒版渶鍚庝竴涓悗浠ｃ€?/p>

灏?鐨勮剼鏈敼涓篺ind鍑芥暟

  <script>
        $(document).ready(function () {
            $("div").find("span").css({ "color": "red", "border": "2px solid red" });
        });
    </script>

鎶€鏈垎浜? src=

11.siblings()

siblings() 鏂规硶杩斿洖琚€夊厓绱犵殑鎵€鏈夊悓鑳炲厓绱犮€?/p>

灏?鐨勬柟娉曟敼涓轰互涓嬭剼鏈?/p>

<script>
        $(document).ready(function () {
            $("p").siblings("p").css({ "color": "red", "border": "2px solid red" });
        });
    </script>

鎶€鏈垎浜? src=

12.next()

next() 鏂规硶杩斿洖琚€夊厓绱犵殑涓嬩竴涓悓鑳炲厓绱犮€傝鏂规硶鍙繑鍥炰竴涓厓绱?/p>

 <script>
        $(document).ready(function () {
            $("p").next("p").css({ "color": "red", "border": "2px solid red" });
        });
    </script>

鎶€鏈垎浜? src=

13.nextAll()

nextAll() 鏂规硶杩斿洖琚€夊厓绱犵殑鎵€鏈夎窡闅忕殑鍚岃優鍏冪礌銆?/p>

14.prev(), prevAll() & prevUntil()

涓庝笂闈㈢殑鏂规硶绫讳技锛屽彧涓嶈繃鏂瑰悜鐩稿弽鑰屽凡锛氬畠浠繑鍥炵殑鏄墠闈㈢殑鍚岃優鍏冪礌

15.slideToggle()

鍚戜笅婊戝姩鍒囨崲

    <script>
        $(document).ready(function () {
            $("#flip").click(function () {
                $("#panel").slideToggle("slow");
            });
        });
    </script>

    <style type="text/css">
        #panel, #flip {
            padding: 5px;
            text-align: center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
        }

        #panel {
            padding: 50px;
            display: none;
        }
    </style>

<div style="width:50%;margin:auto">
    <div id="flip">Click to slide the panel down or up</div>
    <div id="panel">Hello world!</div>
</div>

鎶€鏈垎浜? src=

16.keypress()銆乲eydown()銆乲eyup()銆?/p>

<script>
    $(function () {
        //鑾峰彇杈撳叆鐨勬寜閿?/span>
        $("#txt").keypress(function (event) {

            if (event.keyCode == "13") {
                $("#sp1").text("鎮ㄦ寜浜嗗洖杞?/span>");
            }
            else {
                $("#sp1").text("鎮ㄦ病鎸夊洖杞?/span>");
            }
        });
        //鎸変笅鎸夐敭
        $("#txt").keydown(function (event) {

            if (event.keyCode == "13") {
                $("#sp2").text("鎮ㄦ鍦ㄦ寜涓嬪洖杞﹂敭");
            }
            else {
                $("#sp2").text("娌℃湁姝ｅ湪鎸夊洖杞︽寜閿?/span>");
            }
        });
        //鏉惧紑鎸夐敭
        $("#txt").keyup(function (event) {

            if (event.keyCode == "13") {
                $("#sp2").text("鎮ㄦ澗寮€浜嗗洖杞﹂敭");
            }
            else {
                $("#sp2").text("娌℃湁鏉惧紑鍥炶溅鎸夐敭");
            }
        });
    });
</script>
<input id="txt" type="text" />
<span id="sp1"></span>
<br />
<span id="sp2"></span>
<br />
<span id="sp3"></span>

鎶€鏈垎浜? src=

17.append()鍜宎fter()

<script>
    $(function () {
        $("#btn1").click(function () {
            $("#sp").append("append鍐呭");
        });

        $("#btn2").click(function () {
            $("#sp").after("after鍐呭");
        });       
    });
</script>

<div>
    <span id="sp" style="width:50%; background-color:red">鎴戞槸span鏂囨湰</span>
</div>
<input id="btn1" value="杩愯append" type="button" />
<input id="btn2" value="杩愯after" type="button" />

鍘熷: 鎴戞槸span鏂囨湰

append: 鎴戞槸span鏂囨湰append鍐呭

after: 鎴戞槸span鏂囨湰after鍐呭

prepend() 鍜宎ppend()鐩稿弽 before鍜宎fter鐩稿弽

18.serializeArray()鍜宻erialize()

<script src="~/Scripts/jquery-2.2.1.min.js"></script>
<!DOCTYPE html>
<form action="">
    <p>濮撳悕锛?span style="color: #0000ff;"><input type="text" name="Name" /></p>
    <p>
        瀛﹀巻锛?/span><select name="education">
            <option value="zz">涓笓</option>
            <option value="dz">澶т笓</option>
            <option value="bk">鏈</option>
            <option value="ss">纭曞＋</option>
        </select>
    </p>
</form>
<button id="btn1">serializeArray</button>
<button id="btn2">serialize</button>
<p>serializeArray:&nbsp;&nbsp;&nbsp;<span id="span1"></span>
    </p>
<p>serialize:&nbsp;&nbsp;&nbsp;<span id="span2"></span></p>

<script>
    //serializeArray
    $("#btn1").click(function () {
        var formarray = $("form").serializeArray();
        $.each(formarray, function (i, field) {

            $("#span1").append(field.name+"鐨勫€兼槸:" + field.value + ",");
        });
    });
    //serialize
    $("#btn2").on("click", function () {

        var formser = $("form").serialize();
        $("#span2").html(formser);
    });
</script>

鎶€鏈垎浜? src=

19.load()

<!DOCTYPE html>
<div id="div"></div>
<button id="btn">鎵цLoad</button>
<script>
    $(function ()
    {
        $("#btn").click(function ()
        {
            //Load鏂规硶浼氬皢杩斿洖鐨剅esponse濉厖div骞朵笖鎻愪緵閲嶈浇鐨勫嚱鏁?/span>
            $("#div").load("/Home/LoadData", { "name": "yhz", "age": 25 }, function (response, status, xhr)
            {
                //杞寲涓簀son瀵硅薄
                var obj =$.parseJSON(response);
                alert(obj.two);
            })
        })
    })
</script>

鍚庣浠ｇ爜锛?/p>

 public JsonResult LoadData()
        {
            string name = HttpContext.Request["name"];
            string age = HttpContext.Request["age"];
            return this.Json(new { one = name, two = age });            
        }

鎶€鏈垎浜? src=

19.first()銆乴ast()銆乪q()銆乫ilter()銆乶ot銆?/span>

first() 鏂规硶杩斿洖琚€夊厓绱犵殑棣栦釜鍏冪礌銆?/span>

last() 鏂规硶杩斿洖琚€夊厓绱犵殑鏈€鍚庝竴涓厓绱犮€?/span>

eq() 鏂规硶杩斿洖琚€夊厓绱犱腑甯︽湁鎸囧畾绱㈠紩鍙风殑鍏冪礌銆?/span>

filter() 鏂规硶鍏佽鎮ㄨ瀹氫竴涓爣鍑嗐€備笉鍖归厤杩欎釜鏍囧噯鐨勫厓绱犱細琚粠闆嗗悎涓垹闄わ紝鍖归厤鐨勫厓绱犱細琚繑鍥炪€?/p>

涓嬮潰鐨勪緥瀛愯繑鍥炲甫鏈夌被鍚?"intro" 鐨勬墍鏈? 鍏冪礌锛?/p>