JQuery常用方法总结

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 id="sp" style="width:50%; background-color:red">我是span文本</span>

append: <span id="sp" style="width:50%; background-color:red">我是span文本append内容</span>

after: <span id="sp" style="width:50%; background-color:red">我是span文本</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" 的所有 <p> 元素:

$(document).ready(function(){
  $("p").filter(".intro");
}); 

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

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

下面的例子返回不带有类名 "intro" 的所有 <p> 元素:

$(document).ready(function(){
  $("p").not(".intro");
}); 
时间: 2024-10-05 19:33:10

JQuery常用方法总结的相关文章

jquery 常用方法 集锦

JQuery常用方法 1.获取元素 $("标签名").$("#id").$(".类名").$("标签名,#id,.class") $("祖先 子孙").$("父>子").$("前+后").$("兄~弟")指定层次关系 $("p[id]")获取有id的p.$("p[id^=p]")获取有id且,id设定值

Jquery 常用方法经典总结(转)

1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象. 普通的dom对象一般可以通过$()转换成jquery对象. 如:$(document.ge

一篇 jQuery 常用方法及函数的文章留存备忘。

jQuery 常见操作实现方式 $("标签名") //取html元素 document.getElementsByTagName("") $("#ID") //取单个控件document.getElementById("") $("div #ID") //取某个控件中 控件 $("#ID #ID") // 通过控件ID取其中的控件 $("标签.class样式名") /

JQUERY 常用方法大全

JQUERY 常用方法大全 Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值,参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值 $(&quo

JQuery基本知识汇总;JQuery常用方法;浅入了解JQuery

一.jQuery对象与JavaScript对象 ①JavaScript入口函数比jQuery入口函数执行的晚一些: JQuery的入口函数会等页面加载完成才执行,但是不会等待图片的加载: JavaScript入口函数需要等待页面加载和图片加载完成才执行: JavaScript入口函数:window.onload = function(){}: JQuery入口函数:①$(document).ready(function(){});    ②$(function(){}); ②JQuery对象与D

Javascript - Jquery - 常用方法

常用方法(Common Method) 类名 方法 addClass(className) className是css类名,为该对象指定或增加一个类名,返回该对象. removeClass(className) className是css类名,移除参数指定的类名,返回该对象. hasClass(className) className是css类名,测试该对象是否含有参数指定的类名. toggleClass(className) className是css类名,该对象的类名在原来的类名与参数指定的

jQuery常用方法

1.text():如果不传参数,表示获取jQuery对象对应节点及子节点的文本内容,单纯的文本内容.如果jQuery对象对应的dom不只一个,则得到所有dom的文本内容,直接拼接:如果传参数,则表示设置文本内容为给定值. 2.html():如果不传参数,表示获取jQuery对象对应节点内部的html内容,不仅包括文本内容,还包括标签.即使jQuery对象对应的dom不只一个,也仅得到第一个dom相关的html内容:如果传参数,则表示设置html内容为给定值 3.val():如果不传参数,表示获取

jQuery常用方法以及demo

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery案例</title> <script src="jquery-1.12.2.js"></script></head><body><div id="dv"&g

JavaScript与jQuery常用方法的比较

1.加载DOM区别 JavaScript: window.onload = first; window.onload = second; 只会执行第二个window.onload jQuery: $(document).ready(function(){ first(); } $(document).ready(function(){ first(); } 2.获取ID JavaScript: document.getElement("idName") jQuery: $("

jQuery常用方法一览

Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值,参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值 $("img").a