1.json的创建方式

  1. <script>
  2.     $(function () {
  3.         //第一种
  4.         var my = new People("CallmeYhz", 26);
  5.         alert("(1):" + my.name);
  6.         //第二种
  7.         var you =
  8.             {
  9.                 "name": "周公瑾",
  10.                 "age": 35
  11.             };
  12.         alert("(2):" + you.name);
  13.         //第三种
  14.         var me =
  15.             [
  16.             { "name": "A", "age": 1 },
  17.             { "name": "B", "age": 2 }
  18.             ]
  19.         alert("(3):" +me[1].name+",长度是:"+me.length);
  20.     })
  21.  
  22.     //人物类
  23.     function People(name, age) {
  24.         this.name = name;
  25.         this.age = age;
  26.     }
  27. </script>

2.hover

  1. <p>
  2.     黑色
  3. </p>
  4. <script>
  5.     $(function () {
  6.         //悬停和移开方法
  7.         $('p').hover(
  8.             function () {
  9.                 $(this).css("color", "blue")
  10.             },
  11.             function () {
  12.                 $(this).css("color", "black");
  13.             });
  14.     });
  15. </script>

3.data()

  1. <input id="btn1" type="button" value="姓名" />
  2. <input id="btn2" type="button" value="星座"/>
  3. <input id="btn3" type="button" value="血型"/>
  4. <script>
  5.     $(function ()
  6.     {
  7.         $('p').data("姓名", "CallmeYhz");
  8.         var info = {"星座":"金牛座","血型":"B型"};
  9.         $('p').data(info);
  10.  
  11.         $('#btn1').click(function () { alert($('p').data("姓名")); });
  12.         $('#btn2').click(function () { alert($('p').data("星座")); });
  13.         $('#btn3').click(function () { alert($('p').data("血型")); });
  14.     })
  15. </script>
  16. <p></p>

4.each()

  1. <input id="btn1" type="button" value="姓名" />
  2. <input id="btn2" type="button" value="星座"/>
  3. <input id="btn3" type="button" value="血型"/>
  4.  
  5. <script>
  6.     $(function () {
  7.         $("input[type='button']").each(function (index,ele) {
  8.             alert("当前索引是:" + index + ",值是:" + $(ele).attr("value"));
  9.         });
  10.     });
  11. </script>

5.toArray()

  1. <ul>
  2.     <li>A</li>
  3.     <li>B</li>
  4.     <li>C</li>
  5. </ul>
  6. <input  type="button" value="开始遍历li" id="btn"/>
  7. <br />
  8. <input type="text" value="第一个"/>
  9. <input type="text" value="第二个" />
  10. <input type="text" value="第三个"/>
  11. <input type="button" value="输出第一个text值" id="btn2" />
  12.  
  13. <script>
  14.     $(function ()
  15.     {
  16.         //li
  17.         $('#btn').click(function ()
  18.         {
  19.             var lis = $('li').toArray();
  20.             for (var i = 0; i < lis.length; i++) {
  21.                 alert(lis[i].innerHTML);
  22.             }
  23.         });
  24.  
  25.         //text
  26.         $('#btn2').click(function ()
  27.         {
  28.             var texts = $("input[type='text']").toArray();
  29.            alert($(texts[0]).val());
  30.         })
  31.  
  32.     })
  33. </script>

6.get()

  1. <p>我是P里面的内容</p>
  2. <p id="pp">呵呵我也是</p>
  3. <button id="btn">开始执行</button>
  4. <script>
  5.     $(function ()
  6.     {
  7.         $('#btn').bind("click", function ()
  8.         {
  9.             var get = $("p").get(1);
  10.             var by = document.getElementById("pp");
  11.             alert(get.innerHTML);
  12.             alert(by.innerHTML);
  13.         })
  14.     })
  15. </script>

结果都输出：呵呵我也是
7.parent()

  1. <style>
  2.     .ancestors * {
  3.         display: block;
  4.         border: 2px solid lightgrey;
  5.         color: lightgrey;
  6.         padding: 5px;
  7.         margin: 15px;
  8.     }
  9. </style>
  10. <div class="ancestors">
  11.     <div style="width:500px;">
  12.         div文本内容
  13.         <ul>
  14.             ul文本内容
  15.             <li>
  16.                 li文本内容
  17.                 <span>span文本内容</span>
  18.             </li>
  19.         </ul>
  20.     </div>
  21.  
  22.     <div style="width:500px;">
  23.         div文本内容
  24.         <p>
  25.             p文本内容
  26.             <span>span文本内容</span>
  27.         </p>
  28.     </div>
  29. </div>
  30. <script>
  31.     $(function () {
  32.         $("span").parent().css({ "color": "red", "border": "2px solid red" });
  33.     })
  34. </script>

8.parents()

将7中的parent->parents()

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

9.children()

  1.     <style>
  2.         .descendants * {
  3.             display: block;
  4.             border: 2px solid lightgrey;
  5.             color: lightgrey;
  6.             padding: 5px;
  7.             margin: 15px;
  8.         }
  9.   </style/>
  10.     <script>
  11.         $(document).ready(function () {
  12.             $("div").children().css({ "color": "red", "border": "2px solid red" });
  13.         });
  14.     </script>
  15.  
  16.     <div class="descendants" style="width:500px;">
  17.       div文本内容
  18.         <p>
  19.            p1文本内容
  20.             <span>p1内部span文本内容</span>
  21.         </p>
  22.         <p>
  23.            p2文本内容
  24.             <span>p2内部span文本内容</span>
  25.         </p>
  26.     </div>

10.find()

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

将9的脚本改为find函数

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

11.siblings()

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

将9的方法改为以下脚本

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

12.next()

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

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

13.nextAll()

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

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

与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素

15.slideToggle()

向下滑动切换

  1.     <script>
  2.         $(document).ready(function () {
  3.             $("#flip").click(function () {
  4.                 $("#panel").slideToggle("slow");
  5.             });
  6.         });
  7.     </script>
  8.  
  9.     <style type="text/css">
  10.         #panel, #flip {
  11.             padding: 5px;
  12.             text-align: center;
  13.             background-color: #e5eecc;
  14.             border: solid 1px #c3c3c3;
  15.         }
  16.  
  17.         #panel {
  18.             padding: 50px;
  19.             display: none;
  20.         }
  21.     </style>
  22.  
  23. <div style="width:50%;margin:auto">
  24.     <div id="flip">Click to slide the panel down or up</div>
  25.     <div id="panel">Hello world!</div>
  26. </div>

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

  1. <script>
  2.     $(function () {
  3.         //获取输入的按键
  4.         $("#txt").keypress(function (event) {
  5.  
  6.             if (event.keyCode == "13") {
  7.                 $("#sp1").text("您按了回车");
  8.             }
  9.             else {
  10.                 $("#sp1").text("您没按回车");
  11.             }
  12.         });
  13.         //按下按键
  14.         $("#txt").keydown(function (event) {
  15.  
  16.             if (event.keyCode == "13") {
  17.                 $("#sp2").text("您正在按下回车键");
  18.             }
  19.             else {
  20.                 $("#sp2").text("没有正在按回车按键");
  21.             }
  22.         });
  23.         //松开按键
  24.         $("#txt").keyup(function (event) {
  25.  
  26.             if (event.keyCode == "13") {
  27.                 $("#sp2").text("您松开了回车键");
  28.             }
  29.             else {
  30.                 $("#sp2").text("没有松开回车按键");
  31.             }
  32.         });
  33.     });
  34. </script>
  35. <input id="txt" type="text" />
  36. <span id="sp1"></span>
  37. <br />
  38. <span id="sp2"></span>
  39. <br />
  40. <span id="sp3"></span>

17.append()和after()

  1. <script>
  2.     $(function () {
  3.         $("#btn1").click(function () {
  4.             $("#sp").append("append内容");
  5.         });
  6.  
  7.         $("#btn2").click(function () {
  8.             $("#sp").after("after内容");
  9.         });
  10.     });
  11. </script>
  12.  
  13. <div>
  14.     <span id="sp" style="width:50%; background-color:red">我是span文本</span>
  15. </div>
  16. <input id="btn1" value="运行append" type="button" />
  17. <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()

  1. <script src="~/Scripts/jquery-2.2.1.min.js"></script>
  2. <!DOCTYPE html>
  3. <form action="">
  4.     <p>姓名：<input type="text" name="Name" /></p>
  5.     <p>
  6.         学历：<select name="education">
  7.             <option value="zz">中专</option>
  8.             <option value="dz">大专</option>
  9.             <option value="bk">本科</option>
  10.             <option value="ss">硕士</option>
  11.         </select>
  12.     </p>
  13. </form>
  14. <button id="btn1">serializeArray</button>
  15. <button id="btn2">serialize</button>
  16. <p>serializeArray:&nbsp;&nbsp;&nbsp;<span id="span1"></span>
  17.     </p>
  18. <p>serialize:&nbsp;&nbsp;&nbsp;<span id="span2"></span></p>
  19.  
  20. <script>
  21.     //serializeArray
  22.     $("#btn1").click(function () {
  23.         var formarray = $("form").serializeArray();
  24.         $.each(formarray, function (i, field) {
  25.  
  26.             $("#span1").append(field.name+"的值是:" + field.value + ",");
  27.         });
  28.     });
  29.     //serialize
  30.     $("#btn2").on("click", function () {
  31.  
  32.         var formser = $("form").serialize();
  33.         $("#span2").html(formser);
  34.     });
  35. </script>

19.load()

  1. <!DOCTYPE html>
  2. <div id="div"></div>
  3. <button id="btn">执行Load</button>
  4. <script>
  5.     $(function ()
  6.     {
  7.         $("#btn").click(function ()
  8.         {
  9.             //Load方法会将返回的response填充div并且提供重载的函数
  10.             $("#div").load("/Home/LoadData", { "name": "yhz", "age": 25 }, function (response, status, xhr)
  11.             {
  12.                 //转化为json对象
  13.                 var obj =$.parseJSON(response);
  14.                 alert(obj.two);
  15.             })
  16.         })
  17.     })
  18. </script>

后端代码：

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

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

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

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

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

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

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

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

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

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

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

  1. $(document).ready(function(){
  2.   $("p").not(".intro");
  3. });

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

  1. ThinkPHP第二十四天(JQuery常用方法、TP自动验证)

    ---恢复内容开始--- 1.JQuery常用方法 A:JS中可以用json格式数据当做数组使用,如var validate={username:false,pwd:false,pwded:false ...

  2. JQuery基本知识汇总；JQuery常用方法；浅入了解JQuery

    一.jQuery对象与JavaScript对象 ①JavaScript入口函数比jQuery入口函数执行的晚一些: JQuery的入口函数会等页面加载完成才执行,但是不会等待图片的加载: JavaSc ...

  3. Jquery 常用方法 及属性

    Jquery   常用方法 及属性 jQuery 事件 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown chang ...

  4. jQuery常用方法(持续更新) jQuery（转）

    0.常用代码: 请容许我在1之前插入一个0,我觉得我有必要把最常用的代码放在第一位,毕竟大部分时间大家都是找代码的. (1)AJAX请求 $(function() { $('#send').click ...

  5. jQuery常用方法(五)

    一.jQuery中常用方法相关方法参数说明:a.无参,获取值b.参数param,设置值c.参数function(index,oldVal){}回调函数[返回我们所要使用的新值]    回调函数的两个参 ...

  6. jQuery常用方法和函数

    jQuery 事件 bind() 方法:被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数 $(selector).bind({event:function, event:function ...

  7. JQuery常用方法一览

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

  8. jQuery 常用方法经典总结

    1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom ...

  9. jquery常用方法

    一.多个按钮绑定同一事件 $("#index_svip,#index_svip_renew").click(function() { seajs.use(['svipLayer'] ...

  10. JQuery常用方法(均实践过)

    1,使用jquery修改html元素的值 a,修改form的action的值(即修改html的属性值) 这个可以扩展为修改html元素的属性值的方法,使用的$("#id").att ...

随机推荐

  1. C++11 - 类型推导auto关键字

    在C++11中,auto关键字被作为类型自动类型推导关键字 (1)基本用法 C++98:类型 变量名 = 初值;   int i = 10; C++11:auto 变量名 = 初值;  auto i ...

  2. ANDROID中去掉ACTIONBAR或TABWIDGET的分隔线

    在android中,有时需要对ActionBar或者TabWidget的分隔线进行定制,如取消,相关的属性设置为android:divider 以TabWidget为例,取消对应的函数: tabWid ...

  3. 浅谈Linux中的信号处理机制（三）

    一晃眼,已经到9月底了,都来不及去感慨时间匆匆.最近常常会想明年的今天我将会在那里干着什么样的工作?对未来又是憧憬又是担忧,压力山大.无论如何现在还是踏踏实实的学习吧,能这样安安静静学习的日子也不多了 ...

  4. Neutron 理解 (3): Open vSwitch + GRE/VxLAN 组网 [Netruon Open vSwitch + GRE/VxLAN Virutal Network]

    学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...

  5. 模-数（A/D）转换器

    一.A/D转换的基本原理 在一系列选定的瞬间对模拟信号进行取样,然后再将这些取样值转换成输出的数字量,并按一定的编码形式给出转换结果. 整个A/D转换过程大致可分为取样.量化.编码三个过程.二.取样- ...

  6. NYOJ 451

    光棍节的快乐 描述 光棍们,今天是光棍节.聪明的NS想到了一个活动来丰富这个光棍节. 规则如下: 每个光棍在一个纸条上写一个自己心仪女生的名字,然后把这些纸条装进一个盒子里,这些光 棍依次抽取一张纸条 ...

  7. winform记事本(基本功能)

    本题主要考察各种控件的应用 using System; using System.Collections.Generic; using System.ComponentModel; using Sys ...

  8. Eclipse: 提示 Toolchain "MinGW GCC" is not detected

    解决办法: 1. 把 D:\MinGW\bin, 设置到 PATH 路径. 2. 重启 eclipse

  9. 关于SIGSEGV错误及处理方法(转)

    转自:http://blog.csdn.net/brace/article/details/1102422   今天编程遇到了SIGSEGV错误,比较困惑,所以找了些资料,总结一下: (1)官方说法是 ...

  10. Web API--自定义异常结果的处理

    1.常规的异常处理 统一的异常处理,把正确的信息返回给调用者很重要,可以让接口开发人员或者用户,了解具体的原因所在,这样可以得到有效的错误处理. 参考微信API的处理,微信API,对于调用都有一个错误 ...