一 初始化
js: window.onload = function(){ }
jq: (document).ready(function(){ })
二 监听事件和绑定事件(如点击事件)
js: dom.addEventListener(xx,function(){ }) / dom.onclick = function( ){ }
jq: $(' ').on(xx,function(){ }) / 绑定和解绑事件 $(' ' ).bind(xx,function(){}) / unbind
/一次事件 $(' ').one(xx,function(){ }) / 交替事件 $(' ').toggle(function(){ }, function(){ })
三 控制显示/隐藏效果
js: dom.style.display = 'none/block'隐藏不占位 dom.style.visibility = 'hidden/visible'隐藏占位
jq: $(' ').hide() $(' ').show()
四 定位元素
js: document.getElementById / Name/ClassName/TagName
jq: $('#id') $('.class') $('标签名') 选择器相关
五 获取和修改HTML text 和值
js: dom.innerHTML / dom.innerText / dom.value 加等号和值则为赋值,不加则为取值
jq: $(' ').html() / $(' ').text() / $(' ').val() 括号为空则为取值,加入参数则为赋值
六 获取焦点
相同 abc.focus()
七 设置元素不可用
js: abc.disabled = true
jq: abc.attr('disabled',true)
八 修改样式
js: dom.style.background = 'blue';
jq: $(' ').css('background','blue')
九 修改类名
js: dom.className = 'a'
jq: abc.removeClass() abc.addClass('a')
十 获取父子节点操作
js: //全部父节点dom.parentNode;
//全部子节点dom.childNode;
//下一个兄弟节点dom.nextSilbing;
//前一个兄弟节点dom.prevSilbing;
//第一个子节点dom.firstChild;
//最后一个子节点dom.lastChild;
jq: 筛选器形式 => 选择器
//获得子节点(不是子孙节点，只一层)$("XX").children(expr);
//获得使用祖先节点$("XX").parents(expr);
//获得上一个兄弟节点$("XX").prev(expr);
//获得之前所有兄弟节点$("XX").prevAll(expr);
//获得下一个兄弟节点$("XX").next(expr);
//获得下面所有兄弟节点$("XX").nextAll(expr);
//获得所有兄弟姐妹节点$("XX").siblings(expr);
十一 复选框的状态和值
js: if(obj[i].checked){ alert( obj[i].value )}
jq: $('input:checked').val() if(abc.attr(cheked) == 'checked')
十二 下拉框
js: //1:拿到select对象： var myselect=document.getElementById("XX");
//2：拿到选中项的索引：selectedIndex代表的是你所选中项的index
var index=myselect.selectedIndex ;
//3:拿到选中项options的value： myselect.options[index].value;
//4:拿到选中项options的text： myselect.options[index].text;
//2、3综合简写myselect.options[myselect.selectedIndex].value;
jq: var options=$("#XXX option:selected");//获取选中的项
alert(options.val()); //拿到选中项的值
alert(options.text()); //拿到选中项的文本
