JQuery基础汇总

1. 对象获取与赋值：：$("#obj").val("Hello World!");

2. 对象的显示与隐藏：$("#obj").show(); $("#obj").hide();

3. 添加属性：$("#obj").attr("disabled","disabled");

4. 移除属性：$("#obj").removeAttr("disabled");

5. attr和prop的区别：attr适用于自定义的DOM属性，而prop则用于元素的固有属性，如:id,value等;

6. 查找元素：方法1：$("#obj").find("option:eq(0)").html();--(以select为例)

　　　　   方法2：$("#Tab").children("tr:eq(1) td:eq(1)").html()；--(以Table 为例)

方法1和方法2的区别：children只能获取当前元素的下级元素，获取不到下下级, 所以方法1获取不到值，而find获取所有的下级元素，所以要想用children达到find的效果，必须使用多次.children(xx)；

*JQuery根据对象ID查找元素：$(父元素).find("#ObjID").html()

7. 选择器：$("#obj").find("option:eq(0)")选择obj对象的第一个<option>元素,index 值从 0 开始;

8. 鼠标进入和退出事件：$("#Tab").hover(”进入时执行的操作“,”退出时执行的操作“);

9. 对象添加判断与移除CSS样式：$("#obj").addClass("CssStyle"); $("#obj").hasClass("CssStyle");  $("#obj").removeClass("CssStyle");

10. JQuery遍历：$("#obj").each function(){  //执行操作如：alert($(this).text());}）

切换元素的可用状态：$(“#obj”).toggle(speed,callback,switch);

　　　　如：$(“#Obj”).toggle(0,function(){alert('Hello World!');},switch);

　　　　第一个参数：0为快速显示或隐藏，数值越大，显示或隐藏越慢；

　　　　第二个参数：显示或隐藏完成后调用的回调方法；

　　　　第三个参数：是否显示或隐藏元素，值为：True/False;

　　　　PS.第一个参数和第三个参数互斥，设置第二个参数必须设置第一个参数；

 11. JQuery验证：

//This method is used to define the validate,Please note invoke this method when load this page

jQuery.validator.addMethod("decimal", function (value, element) {

   var decimal = /^-?\d+(\.\d{1,2})?$/;

   return this.optional(element) || (decimal.test(value));

});

$("#editRangeForm").validate({

   rules: {

       firstValueEdit: {

          decimal: true

                  //Define by user

       },

       consecutiveValueEdit: {

          digits: true,

          max: 50

          //JQuery default

       }

   messages: {

       firstValueEdit: {

          decimal: "Invalid range value."

          //Error message definited by user

       },

       consecutiveValueEdit: {

          digits: "Invalid consecutive reading(s).",

          max: "Consecutive reading(s) should be less than 50."

          //Error message definited by user

       }

   },

   //The container is used to render the error message
   errorLabelContainer: "#rangeErrMsg ul",   
   
   wrapper: "li",   //The label is used to wrap the error message

   submitHandler: function (form) {
         //Do other things where validation is successful
         Alert('Validation is successful!You can do the next step in this method!');

   }

});
View Code

12. JQuery同步与异步：默认情况下，JQuery采用异步的方式即：async为true;

      (*以下示例中，如果设置为异步而且第一个方法执行时间大于第二个方法，则先弹出:SumB=55)

$(function () {

        $.ajax({

            type: "post",

            url: '@Url.Action("ActionNameA", "ControllerName")',

            datatype: "json",

            data: { TaskDeviceType: DeviceType },

            async: true,

            success: function (mess) {

                A();

            }

        });

        $.ajax({

            type: "post",

            url: '@Url.Action("ActionNameB", "ControllerName")',

            datatype: "json",

            data: { TaskDeviceType: DeviceType },

            async: true,

            success: function (mess) {

                B();

            }

        });

    });

 

    function A() {

        var SumA = 0;

        for (var i = 0; i <= 10; i++) {

            SumA += i;

        }

        alert("SumA=" + SumA);

    }

    function B() {

        var SumB = 0;

        for (var j = 0; j <= 10; j++) {

            SumB += j;

        }

        alert("SumB=" + SumB);

    }
View Code

 13. JQuery中CSS()用法：

       $("#obj").css("background-color");   //获取对象的背景色

       $("#obj").css("color", "gray");  //设置对象颜色，同理，也可以通过定义CSS样式属性变量给对象添加属性，如下所示：

<script type="text/javascript">
var DTCss = {
      background: 'blue',
      height:'100px';
      width: '100px';
};
$("#Obj").css(DTCss);
</script>
View Code

14. JQuery中toggleClass用法（实例来自W3C）

一个参数示例：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass("main");
  });
});
</script>
<style type="text/css">
.main
{
    font-size:120%;
    color:red;
}
</style>
</head>

<body>
<h1 id="h1">This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>
</body>
</html>
View Code

两个参数示例：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass("main",true);
  });
});
</script>
<style type="text/css">
.main
{
font-size:120%;
color:red;
}
</style>
</head>

<body>
<h1 id="h1">This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>
</body>
</html>
View Code

 15. JQuery判断Checkbox是否被选中：

      if ($("#obj").is(':checked'){..;}

 16. 页面刷新：

      A. location.reload(true); B.location.assign(location);

  17. JQuery操作Select控件：

        获取选中的值：$("#obj").find("option:selected").val();
        获取选中的文本：$("#obj").find("option:selected").text();
        根据Value设置选中的项：$("#obj").val(2);
        清空下拉列表：$("#obj").empty();

18. 通过CSS样式操作对象：

　　$(".CssStyle").click(function () {
            --operation;
      });

posted on 2016-04-15 12:38  Joye_Zhou  阅读(286)  评论(0)  编辑  收藏  举报

导航