网站建设资讯

NEWS

网站建设资讯

jquery和javascript在语法上有哪些差异

这篇文章主要介绍“jquery和javascript在语法上有哪些差异”,在日常操作中,相信很多人在jquery和javascript在语法上有哪些差异问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jquery和javascript在语法上有哪些差异”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

公司主营业务:成都网站制作、网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出崇阳免费做网站回馈大家。

jquery不是javascript。javascript是一种解释性脚本语言,而jquery是一个JavaScript函数库,是基于JavaScript语言写出来的一个框架;且两者在语法上有不少差异。

本教程操作环境:windows7系统、javascript1.8.5&&jquery1.10.2版、Dell G3电脑。

jquery不是javascript。

javascript是一种解释性脚本语言,而jquery是一个JavaScript函数库,是基于JavaScript语言写出来的一个框架

使用JQuery首先要在 HTML 代码最前面加上对 jQuery 库的引用,比如:

库文件既可以放在本地,也可以直接使用知名公司的 cdn,好处是这些大公司的 CDN 比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度。另外一个好处是显而易见的,节省了网站的流量带宽。例如:

  //Google
或者:
   //jQuery 官方 

jquery和javascript在语法上有不少差异

1.操作元素节点

a.JavaScript使用

getElement系列、query系列


    
            哈哈         啦啦         呵呵         嘿嘿     
             
                呵呵             
  • 嘿嘿
  •         
    

b.JQuery使用

大量的选择器同时使用$()包裹选择器


    
            哈哈         啦啦         呵呵         嘿嘿     
             
                呵呵             
  • 嘿嘿
  •         
    

2.操作属性节点

a.JavaScript使用

getAttribute("属性名") 、 setAttribute("属性名","属性值")


    
            哈哈     

b.JQuery使用

.attr()传入一个参数获取,传入两个参数设置

.prop()

prop和attr一样都可以对文本的属性进行读取和设置;

两者的不同 在读取checked,disabled,等属性名=属性值的属性时

attr返回属性值或者undefined,当读取的checked属性时不会根据是否选中而改变

prop返回true和false 当读取的checked属性时会根据是否选中而改变

也就是说attr要取到的属性必须是在标签上写明的属性,否则不能取到


    
            哈哈     

3.操作文本节点

a.JavaScript使用

innerHTML:取到或设置一个节点的HTML代码,可以取到css,以文本的形式返回

innerText:取到或设置一个节点的HTML代码,不能取到css

value:取到input[type='text']输入的文本


    
            嘿嘿         嘿嘿      
     姓名:

b.JQuery使用

.html()取到或设置节点中的html代码
.text()取到或设置节点中的文本
.val()取到或设置input的value属性值


    
            嘿嘿         嘿嘿      
     姓名:

4.操作css样式的时候

JavaScript:

1、使用setAttribute设置class和style

document.getElementById("first").setAttribute("style","color:red");

2、使用.className添加一个class选择器

document.getElementById("third").className = "san";

3、使用.style.样式直接修改单个样式。注意样式名必须使用驼峰命名法

document.getElementById("four_times").style.fontWeight = "900";

4、使用.style或.style.cssText添加一串行级样式:

document.getElementById("five_times").style = "color: blue;";//IE不兼容
document.getElementById("six_times").style.cssText = "color: yellow;font-size : 60px;";

JQuery:

$("#p2").css("color","yellow");

$("#p2").css({
    "color" : "white",
    "font-weight" : "bold",
    "font-size" : "50px",
});

5.操作层次节点

JavaScript:

*1.childNodes:获取当前节点的所有子节点(包括元素节点和文本节点)
*  children:获取当前节点的所有元素子节点(不包括文本节点)
*2.parentNode:获取当前节点的父节点
*3.firstChild:获取第一个元素节点,包括回车等文本节点
*  firstElementChild:获取第一个元素节点,不包括回车节点
*  lastChild、lastElementChild 同理
*4.previousSibling:获取当前元素的前一个兄弟节点
*  previousElementSibling::获取当前元素的前一个兄弟节点
*  nextSibling、nextElementSibling

JQuery:

1.提供了大量的选择器:

  • :first-child

  • :first-of-type1.9+

  • :last-child

  • :last-of-type1.9+

  • :nth-child

  • :nth-last-child()1.9+

  • :nth-last-of-type()1.9+

  • :nth-of-type()1.9+

  • :only-child

  • :only-of-type

2.除此之外也提供了对应的函数:

  • first()

  • last()

  • children()

  • parents()

  • parent()

  • siblings()

6.给一个节点绑定事件

JavaScript:

使用了Dom0事件模型和Dom2事件模型,具体内容见我上一篇博客

JQuery:

①.事件绑定的快捷方式


    


②:使用on进行事件绑定


    


到此,关于“jquery和javascript在语法上有哪些差异”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


网站栏目:jquery和javascript在语法上有哪些差异
标题来源:http://cdweb.net/article/ghccdj.html

其他资讯