Jquery中常见问题

浏览数：28 / 时间：2015年06月09日

最近也是在做项目的时候刚接触到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是在标签的最后添加，点一次，就会出现一个按钮

还有一种方法是

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

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

　　上面所讲的生成的按钮就是动态按钮（由脚本创建的新元素），我们通常使用的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++;
        }
    });

View Code

2.this参数

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

使用的时候 $this = $this

 1 function Com($this, keyValue) {
 2     var aArray = {};
 3     var i = 0;
 4     var $this = $this;
 5     $.each($this.parent("div").prev("table").children("tbody").children("tr"), function (index, item) {
 6         if ($(this).children("td").first().find("input").attr("checked") == ‘checked‘) {         
 7             aArray[i] = $(this).children("td").last().find("input").val();            
 8             i++;
 9         }
10     })
11 })
12 
13 
14  $("#emission").delegate(".add", "click", function () { 
15             Com($(this), "inKey");
16         })

View Code

常用方法
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);
       }）