JQuery、JS 的一些技巧

JQuery、JS 的一些技巧

1.  JS中CheckBox触发函数的几种方法

$(".cbSelect").click(function (ele) { onclick(ele.target); });

$(".cbSelect").click(function () { onclick(arguments[0].target); });

$(".cbSelect").click(function () { onclick(event.srcElement); });

$(".cbSelect").click(function () { onclick(this); });

 

arguments[0].target === event.srcElement === this， 类型为DOM元素 DispHTMLInputElement

 

// 设置触发函数加自动触发一次

 $(function(){ $check("cbSelect").click(function () { onclick(event.srcElement); }).each(function () { onclick(this); });  });

 

2. 根据checkbox设置同一容器中的元素的显示：

  function onclick(cb)

  {

    var result = cb.checked ? '' : 'none';

    var container = $(cb).parents("tr");

    if(container.length == 0) return;   // 没有父元素

    $(".tbWork", container[0]).css("display", result);

  }

或者

  function onclick(cb, speed)

  {

    var node = $($(cb).parents("tr")[0]);  // 查找节点元素

    var checked = cb.checked;

    DisplayControl(node.find('select.ddlPreType'), checked, speed);

    DisplayControl(node.find('input.tbDelay'), checked, speed);

  }

 

 

3.  返回客户端的可用的URL： Page.ResolveClientUrl。 WebRoot返回全路径

 

4. 将json字符串d转换为对象的三种方法：

var data1 = jQuery.parseJSON(d);  // jquery中定义

var data2 = eval('(' + d + ')');  // 原生方法，但安全性较差

var data3 = d.parseJSON();        // json.js中定义

对象转换为json字符串的方法：

var s = obj.toJSONString() 或者 s= JSON.Stringify(obj)  // json.js中定义

 

5.  JS中模拟按钮的回传：

    $("input.reset").trigger("click"); // 必须是Button. 对LinkButton好象不起作用

 

6.  触发checkbox的click时

不能用 $().click()，(原因不知)，应用triggerHandler(click)。用trigger时会自动选中。但triggerHandler只自动触发第一个对象。

 

7.  模拟超链接点击事件

$("a.hlDiff")[0].click(); 使用DOM元素，不能直接使用JQuery元素

自动弹出窗口则可以使用   $('.hlPackageView').trigger('click');

 

8.  设置Label的显示内容

$(".lbConsist").html(txt)， 或者 text(txt)

 

9. 设置checkbox与radio的值

$('#rb21%>').attr('checked', false);  // 取消选取

false为取消。 其余所有值为选中，但一般为true

使用 attr('checked', false)赋任何值都会导致其它的radiobutton被取消选中。

目前的解决方法有两种：1是只给选中的button赋true。

2.是使用 $('#rb21%>')[0].checked = true/false。，则无此问题

 

10. 设置disable属性：

 $('.ddlCmiv').attr('disabled', true);  // 目前看，赋任何值都会将控件disable

取消disable，只能用 $('.ddlCmiv')[0].disabled = !cb.checked。 以下三种方法都不起作用

ddl.removeAttr("disabled"); ddl.attr("disabled", !checked);  ddl.attr("disabled", "");

 

11. 将radio和checkbox的未选中项设置为只读

$("input[name='XXX']:not(:checked)").attr('disabled',true);

$('#XXX  option:not(:selected)').attr('disabled', true);

 

12. 根据下拉框的选项设置文本框的值

给ListItem的每一项加上属性 prop。 设置下拉框的 onchange 事件
li.Attributes.Add("prop", "xxx);
ddl.Attributes.Add("onchange", "onpropchange(this);");
本文框的下拉框在表格的同一行，文本框有属性tbvalue

function onpropchange(ddl)
{
    var ddl2 = $(ddl);
    var s = ddl2.find('option:selected').attr("prop");
    ddl2.parents("tr:first").find("input.tbvalue").attr("value", s);
}

 

 13.  自动切换MyCombo的内容

  var selectedIndex = 3;
  function ResetAuditResult()
  {
    selectedIndex++;
    if(selectedIndex >= 4) selectedIndex = 0;

    $("select.ddlAuditResult").each(function ()
    {
      this.selectedIndex = selectedIndex;
      var ddl = $(this);
      $("input", ddl.closest("div")).attr("value", ddl.find("option:selected").text());
    });
    return false;
  }