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在语法上有哪些差异”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！