js和jq的不同方法

js的显示和隐藏

msg.style.display="block";

label.style.display="none";

jq的显示和隐藏

$("#msgBox").show();

$(obj).siblings().hide();

js'的编辑内容

document.getElementById("infot").innerHTML=info;

jq的编辑内容

$("#infot").html(info);

js的同胞兄弟

obj.parentNode.getElementsByTagName("label")[0];

jq的同胞兄弟

$(obj).siblings().eq(1);

js的查找元素

document.getElementById("");

jq的查找元素

find("");

js的添加属性和移除属性

添加:document.getElementById("down").setAttribute("disabled",true);

移除:document.getElementById("up").removeAttribute('disabled');

jq的添加属性和移除属性

添加:$("#up").attr("disabled",true);

移除:$("#down").removeAttr("disabled");

js控制css的单个和多个样式

document.getElementById("down").style.borderColor="#61AED0";

document.getElementById("down").style.backgroundColor="#61AED0";

jq控制css单个和多个样式

单个:$("#down").css("backgroundColor","#61AED0");

多个:$("#down").css({background:"#61AED0",borderColor:"#61AED0"});

jq查找元素

$(":input[name='search']").val();

$(obj).parent().find("[name='search']").val();

js&&jq的div的创建

js的div创建

document.createElement("div")

jq的div创建

$('<div></div>').appendTo($("body"));

js的获取焦点和失去焦点

onfocus()和onBlur()

jq的获取焦点和失去焦点

blur()和focus()

js&&jq的获取宽高

js获取当前页面的宽度&&高度

document.documentElement.clientWidth

document.documentElement.clientHeight

jq获取当前页面的宽度&&高度

$(window).width()

$(window).height()

js获取div宽度&&高度

showBox.offsetWidth

showBox.offsetHeight

jq获取div宽度&&高度

$(showBox).outerHeight()

$(showBox).outerWidth()

js获取文档的宽度&&高度

document.body.scrollHeight

 document.body.scrollWidth

jq获取文档的宽度&&高度

$(document).height()

$(document).width()

outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度,如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来

innerWidth()方法用于获得包括内边界(padding)的元素宽度


table的js&&jq控制

js获取table的行数

 行数:var table=document.getElementById("toptable");
    var len=table.rows.length;

列数:table.rows[0].cells.length

jq获取table的行数和列数

行数:var len=$("#toptable tr").length;

列数:var td=$("#toptable tr").eq(1).find("td").length;    ps:当第一列是th的时候可以选择find("th")然后就是弟0行,如果第一列不是th那么可以直接eq(0)

js添加&&删除一行tr

var tr=table.insertRow(len);

 tr.className="h30";

 tr.insertCell(0).innerHTML=td1;
 tr.insertCell(1).innerHTML=td2;

删除:var tr=obj.parentNode.parentNode;
  tr.parentNode.removeChild(tr);

jq添加&&删除一行tr

$("<tr><td></td><td></td><td>"</td></tr>").insertAfter($("#toptable tr").eq(len));

删除:$(obj).parent().parent().remove();

select的js&&jq控制

js的获取selct的索引和选中的值

索引:obj.selectedIndex; 

选中的值:obj.options[index].text; 

jq的获取selct的索引和选中的值

索引:$(obj).get(0).selectedIndex;

选中的值:$(obj).val();

你可能感兴趣的:(jsjq控制table)