Jquery中常见问题

 

最近也是在做项目的时候刚接触到jQuery。下面汇总一下遇到的几个问题

• 如何动态创建按钮

   方式一： $("#a").html("<input type='button' value='按钮'  class='button‘/>");

   方式二： $("#a").append("<input type='button' value='按钮' class='button‘/>");

<input  type="button" id="add_html" value="使用html方法增加"/>
<input  type="button" id="add_append" value="使用append方法增加"/>


<div id="a">
    <p>添加一个按钮的地方：</p>
</div>

<script src="~/Scripts/jquery-1.7.1.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $("#add_html").click(function () {
            $("#a").html("<input type='button' value='按钮' class='button'/>");
        })

        $("#add_append").click(function(){
            $("#a").append("<input type='button' value='按钮' class='button'/>");
        })        
    })
</script>

两种做法得到的效果是：

      html只会在标签处生成相应的按钮，即不管点几下，都只生成一个按钮

 

      append是在标签的最后添加，点一次，就会出现一个按钮

      还有一种方法是

$("#add").click(function () {
            $("<input type='button' value='新按钮' class='button'/>").insertAfter("#a");
            $("<input type='button' value='新按钮' class='button'/>").insertBefore("#a");
        })

 

• 如何对动态添加的按钮绑定事件

  　　上面所讲的生成的按钮就是动态按钮（由脚本创建的新元素），我们通常使用的click事件

  　　 $('.button').click(function(){});

  　　只能绑定到页面中当前存在的对象，而对于动态生成的对象不能绑定

  　　这里就用到两种方法 ：    on（）方法或者deletege（）方法

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>


<input  type="button" id="add_append" value="使用append方法增加"/>

<div id="abc"> 
    <input type="button" class="button" value="按钮"/>
    <div id="a">
        <p>添加一个按钮的地方：</p>
    </div>
</div>

<script src="~/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#add_append").click(function () {
            $("#a").append("<input type='button' value='新按钮' class='button'/>");
        })

        //以下两种方法都可以实现
        //添加元素必须是某一个元素的子元素

        //$("#abc").on("click", ".button", function () {
        //    alert("1");
        //})

        $("#abc").delegate(".button", "click", function () {
            alert("1");
        })
    })
</script>

 

• 元素的定位

•  children()只能向下遍历一级（子元素）； find()可以找出所有后代元素
•  $("tr td") tr的所有后代元素td；  $("tr>td") tr的子元素td
•  parent 父元素； cloest 最近的祖先元素
•  按层次查找元素 $("#a b c d") 每一层次所在的元素个数必须是一个（each方法的最后一个除外）

 

• 方法定义相关

    1. 定义数组

     var aArray={}

     使用的时候  aArray[i]

 var aArray = {};
    var i = 0;
    $.each($("#"+TableId+" > tbody >tr"), function (index, item) {
        if ($(this).children("td").first().find("input").attr("checked") == 'checked') {         
            aArray[i] = $(this).children("td").last().find("input").val();            
            i++;
        }
    });

    2.this参数      

    以$(this)作为参数（实参），以$this作为形参

    使用的时候 $this = $this

function Com($this, keyValue) {
    var aArray = {};
    var i = 0;
    var $this = $this;
    $.each($this.parent("div").prev("table").children("tbody").children("tr"), function (index, item) {
        if ($(this).children("td").first().find("input").attr("checked") == 'checked') {         
            aArray[i] = $(this).children("td").last().find("input").val();            
            i++;
        }
    })
})


 $("#emission").delegate(".add", "click", function () { 
            Com($(this), "inKey");
        })

 

• 常用方法

• ajax方法 

　　

　　定义和用法

　　ajax() 方法通过 HTTP 请求加载远程数据。

　　该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

　　最简单的情况下，$.ajax() 可以不带任何参数直接使用。

　　注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

        $.each($(".EnumClass"), function (index, item) {
                var enumvalue = $(this).prev("select").val();
                var typename = $(this).attr("id").toString(); 
                var enumIndex;
                $.ajax({
                    type: 'POST',
                    url: '/Enum/StringToInt',
                    async:false,
                    data: { typeName: typename, enumValue: enumvalue },
                    success: function (result) {                       
                         enumIndex = result;
                    }
                })
                $(this).val(enumIndex);
       }）

注意两个问题：

      1.async属性很重要，表示是否是异步调用此方法。如果true表示异步，表示两个方法可以同时执行。引起的问题可能是方法二可能会用到方法一执行完的结果，这些就不能设置异步运行
      2.在success方法里是不能使用jquery选择器的。

 

• 常用的控件

     My97datepicker 非常好用的日期控件