Js与Jquery 常用方法区别

      

一、DOM查询——选择器的使用


1、获取页面所有div


         jQuery $("div")


         js  document.getElementsByTagName("div")


 2、根据名称获取页面DOM


         jQuery */ $("div[name='值']")


        jsdocument.getElementsByName(name)


 3、根据Id获取DOM节点


         jQuery */ $("#idName")


         js document.getElementById("idName") document.querySelectorAll("idName")


 4、根据类名获取DOM节点


         jQuery */ $(".className")


         js  document.querySelectorAll(".className") document.getElementsByClassName(className) 


 5、根据选择器返回第一个匹配的节点(selectors为CSS选择器)


        jQuery $("selectors:first")


         js document.querySelector("selectors")


二、操作class


1、为DOM元素添加类


         jQuery $(selector).addClass(className); 


         js el.classList.add(className); 


 2、删除类


         jQuery $el.removeClass(className); 


         js el.classList.remove(className); 


 3、判断是否有该类


          jQuery if($(el).hasClass(classNames)) 


         js  if(el.classList.contains(classNames))


三、DOM更改


1、尾部追加DOM元素 


         jQuery $(parent).append($(child));  


        js parent.appendChild(child) 


 2、头部追加DOM元素


         jQuery $(parent).prepend($(child)); 


        js parent.insertBefore(child, parent.childNodes[0])


 3、删除DOM元素 


         jQuery $(child).remove(); 


        js child.parentNode.removeChild(child)


四、添加样式或属性


1、添加css // jQuery $el.css("propertyname","value");  


        设置单个属性值 $el.css({"propertyname":"value","propertyname":"value",...});


        js el.style.propertyname="propertyValue"; 


2、获取css值


         jQuery $el.css("propertyname");  


         js el.style.propertyname="propertyValue";


3、$el.css("propertyname","value"); 


        $el.css({"propertyname":"value","propertyname":"value",...});


        js el.style.propertyname="propertyValue"; 


4、添加属性 


        jQuery $(selector).attr(attribute,value); 


        设置单个属性值 $(selector).attr({attribute:value, attribute:value ...});  


        设置多个属性值 $(selector).attr(attribute,function(index,oldvalue));


         el.setAttribute(attributename,attributevalue); 


 5、获取节点属性 


        jQuery $(selector).attr(attribute);  //获取节点属性值 //js el.getAttribute(attributename); //获取节点属性值 


6、移除节点属性  


        jQuery $(selector).removeAttr(attribute); //js element.removeAttribute(attributename);


五、Event事件


1、事件绑定 


         jQuery $(selector).on(eventName, eventHandler); 


        js el.addEventListener(eventName, eventHandler); 


 2、解绑事件


         jQuery $(selector).on(eventName, eventHandler);


        js el.removeEventListener(eventName, eventHandler);


六、显示与隐藏


显示与隐藏 




         jQuery $(el).show(); $(el).hide(); 


        js el.style.display = ''; el.style.display = 'none';


七、页面加载初始化


页面加载完成三种写法:


原生:window.onload = function(){}


Jquery:$(documont).ready(function(){})


$(function(){})(简写)


所属分类: UI设计
评论:
    暂无任何评论
作者介绍

作者:吴光辉

QQ:

曾就职于某知名互联网公司,担任产品和项目负责人,专注于产品、数据运营方向。

重庆小当家互联网信息技术有限公司  重庆市南岸区南坪西路23号金台大厦23-1(招商银行旁) 联系电话:023-62619743
工信部备案号: 渝ICP备15003473-1   增值电信业务经营许可证:渝B2-15003473 安全联盟认证 安全联盟认证
友情链接: 小当家点餐收银系统 重庆直销软件开发 重庆微信营销 重庆红岭医院 重庆智能家居 重庆中小型企业局