JQuery常用方法总结

2023-08-11 15:15:10

1.json的创建方式

<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 () {

        //悬停和移开方法

        $('p').hover(

            function () {

                $(this).css("color", "blue")

            },

            function () {

                $(this).css("color", "black");

            });

    });

</script>

3.data()

<input id="btn1" type="button" value="姓名" />

<input id="btn2" type="button" value="星座"/>

<input id="btn3" type="button" value="血型"/>

<script>

    $(function ()

    {

        $('p').data("姓名", "CallmeYhz");

        var info = {"星座":"金牛座","血型":"B型"};

        $('p').data(info);

        $('#btn1').click(function () { alert($('p').data("姓名")); });

        $('#btn2').click(function () { alert($('p').data("星座")); });

        $('#btn3').click(function () { alert($('p').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='button']").each(function (index,ele) {

            alert("当前索引是:" + index + ",值是:" + $(ele).attr("value"));

        });

    });

</script>

5.toArray()

<ul>

    <li>A</li>

    <li>B</li>

    <li>C</li>

</ul>

<input  type="button" value="开始遍历li" id="btn"/>

<br />

<input type="text" value="第一个"/>

<input type="text" value="第二个" />

<input type="text" value="第三个"/>

<input type="button" value="输出第一个text值" id="btn2" />

<script>

    $(function ()

    {

        //li

        $('#btn').click(function ()

        {

            var lis = $('li').toArray();

            for (var i = 0; i < lis.length; i++) {

                alert(lis[i].innerHTML);

            }

        });

        //text

        $('#btn2').click(function ()

        {

            var texts = $("input[type='text']").toArray();

           alert($(texts[0]).val());

        })

    })

</script>

6.get()

<p>我是P里面的内容</p>

<p id="pp">呵呵我也是</p>

<button id="btn">开始执行</button>

<script>

    $(function ()

    {

        $('#btn').bind("click", function ()

        {

            var get = $("p").get(1);

            var by = document.getElementById("pp");

            alert(get.innerHTML);

            alert(by.innerHTML);

        })

    })

</script>

结果都输出：呵呵我也是
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>

8.parents()

将7中的parent->parents()

<script>

    $(function () {

        $("span").parents().css({ "color": "red", "border": "2px solid red" });

    })

</script>

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>

10.find()

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

将9的脚本改为find函数

  <script>

        $(document).ready(function () {

            $("div").find("span").css({ "color": "red", "border": "2px solid red" });

        });

    </script>

11.siblings()

siblings() 方法返回被选元素的所有同胞元素。

将9的方法改为以下脚本

<script>

        $(document).ready(function () {

            $("p").siblings("p").css({ "color": "red", "border": "2px solid red" });

        });

    </script>

12.next()

next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素

 <script>

        $(document).ready(function () {

            $("p").next("p").css({ "color": "red", "border": "2px solid red" });

        });

    </script>

13.nextAll()

nextAll() 方法返回被选元素的所有跟随的同胞元素。

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>

16.keypress()、keydown()、keyup()、

<script>

    $(function () {

        //获取输入的按键

        $("#txt").keypress(function (event) {

            if (event.keyCode == "13") {

                $("#sp1").text("您按了回车");

            }

            else {

                $("#sp1").text("您没按回车");

            }

        });

        //按下按键

        $("#txt").keydown(function (event) {

            if (event.keyCode == "13") {

                $("#sp2").text("您正在按下回车键");

            }

            else {

                $("#sp2").text("没有正在按回车按键");

            }

        });

        //松开按键

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

17.append()和after()

<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() 和append()相反 before和after相反

18.serializeArray()和serialize()

<script src="~/Scripts/jquery-2.2.1.min.js"></script>

<!DOCTYPE html>

<form action="">

    <p>姓名：<input type="text" name="Name" /></p>

    <p>

        学历：<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>

19.load()

<!DOCTYPE html>

<div id="div"></div>

<button id="btn">执行Load</button>

<script>

    $(function ()

    {

        $("#btn").click(function ()

        {

            //Load方法会将返回的response填充div并且提供重载的函数

            $("#div").load("/Home/LoadData", { "name": "yhz", "age": 25 }, function (response, status, xhr)

            {

                //转化为json对象

                var obj =$.parseJSON(response);

                alert(obj.two);

            })

        })

    })

</script>

后端代码：

 public JsonResult LoadData()

        {

            string name = HttpContext.Request["name"];

            string age = HttpContext.Request["age"];

            return this.Json(new { one = name, two = age });

        }

19.first()、last()、eq()、filter()、not、

first() 方法返回被选元素的首个元素。

last() 方法返回被选元素的最后一个元素。

eq() 方法返回被选元素中带有指定索引号的元素。

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

下面的例子返回带有类名 "intro" 的所有 元素：

$(document).ready(function(){

  $("p").filter(".intro");

});

not() 方法返回不匹配标准的所有元素。

提示：not() 方法与 filter() 相反。

下面的例子返回不带有类名 "intro" 的所有 元素：

$(document).ready(function(){

  $("p").not(".intro");

});

码农公寓

相关文章