【JavaScript】常用方法

Jquery选择器参考：http://www.w3school.com.cn/jquery/jquery_selectors.asp

模态框：http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

获取class="a"元素点击：

$(".a").click(function()
{
    var name1 = $(this).attr('name'); //$(this)是当前HTML元素，获取当前元素的name值
    var value1 = $(this).attr('value'); //获取当前元素的value值
    var n = name1.split(":")[0]; //按:分词
    $("#tablelist option").remove(); //去掉id为tablelist的select标签下面的所有option标签（初始化select标签）
    $.post("/django/",{n:name1,v:value1},function(result){
      var dict = eval("("+result+")"); //ajax返回的json数据需要通过eval方法被js使用
      for (x in dict){
        $("#db"+value1).append("<option>"+dict[x]+"</option>"); //在id为"db"+value1的元素中（示例假设是个select标签）添加<option>标签
      }
    });
});

获取id为tablelist的select标签的点击事件

<script>
$(document).ready(function()
{ 
    $("#privilegelist").children("li").remove();  //去除ul标签中所有的li标签
    $("#tablelist").change(function()
    {
      $(this).children('option:selected').attr('value');
      $(this).children('option:selected').text();  //获取选项值的文本
      alert();
    });
});
</script>

动态添加元素的事件，高版本live用on方法替换

$(".monitoritem").live('click',function()
{
    var monitoritemname = $(this).attr('name');
    $('#'+monitoritemname).remove();
});

遍历元素的子元素不含孙元素

$("#openmonitorpage").click(function()
{
      var a = $('#monitoritemlist').children().length;
      alert(a);
      $('#monitoritemlist').children().each(function(){
        alert($(this).attr("name"));
      });
});

 

使用jquery实现以post打开新窗口

function monitorpost(URL, PARAMS) { 
  var temp_form = document.createElement("form");
  temp_form.action = URL;
  temp_form.target = "_blank";
  temp_form.method = "post";
  temp_form.style.display = "none";
  for (var x in PARAMS) {
    var opt = document.createElement("textarea");
    opt.name = x;
    opt.value = PARAMS[x];
    temp_form.appendChild(opt);
  }
  document.body.appendChild(temp_form);
  temp_form.submit();
}

#调用
monitorpost('/mysqlmonitorlist/',{'a':'123'});

#鼠标浮动弹出层
   $(".mousenameserver").mouseenter(function()
    {
      var instancegroup = $(this).attr('name');
      var ps = $(this).position();  
      $("#"+instancegroup+"_nameserver").css("position", "absolute");  
      $("#"+instancegroup+"_nameserver").css("left", ps.left + 50); //距离左边距  
      $("#"+instancegroup+"_nameserver").css("top", ps.top + -20); //距离上边距
      $("#"+instancegroup+"_nameserver").css("background", "#fff"); //距离上边距
      $("#"+instancegroup+"_nameserver").show();
    });

    $(".mousenameserver").mouseleave(function()
    {
      var instancegroup = $(this).attr('name');
      $("#"+instancegroup+"_nameserver").hide();  
    });  

判断输入框ip合法性

转：http://blog.csdn.net/stpeace/article/details/26967713

<input id="xxx" onblur="fun();" />  

<script>  
function isValidIP(ip)     
{     
var reg =  /^(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$/     
    return reg.test(ip);     
}    

function fun()  
{  
    var ip = document.all.xxx.value;  
    if(isValidIP(ip))  
    {  
        alert("yes");  
    }  
    else  
    {  
        alert("no");  
    }  
}
</script>

注意：

1、选择器中若使用变量，变量不能有点.

CSS

距离控制

margin-top: 5px;

margin-right:10px;

区域限高

height: 450px;

max-height: 450px;

overflow:auto; 滚动条

背景颜色

background: #E4E3E3;

字体颜色

color:#363030;