原生js与jq代码的不同写法

一 初始化

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()); //拿到选中项的文本