javaScript与jQuery的比较（区别）

一：本质区别

javaScript是通过<script></script>标签插入到html页面中，支持当前所有主流浏览器的轻量级的编程语言。

jQuery是一个javaScript函数库（javaScript框架），使用jQuery，需要在html页面开始引入jQuery库。例：

二：语法上的差异

<body>
    <ul>
        <li >哈哈</li>
        <li class="cls" name ="na">啦啦</li>
        <li class="cls">呵呵</li>
        <li name ="na">嘿嘿</li>
    </ul>
    <div >
        <ul>
            <li class="cls">呵呵</li>
            <li>嘿嘿</li>
        </ul>
    </div>
</body>

1、操作元素节点

JavaScript使用：（getElement系列和query系列）

   var first = ('first');
   ('first', first);
   var cls = ('cls');
   ('cls', cls);
   var li = ('li');
   ('li', li);
   var naName = ('na');
   ('naName', naName);
   var queryContent = ('#a3');
   ('queryContent', queryContent);
   var queryContents = ('.cls');
   ('queryContents cls', queryContents);

jQuery的使用

('jQuery cls', $('.cls'));
('jQuery first', $('#first'));
('nameLi', $("li type[name='na']"));
('li', $('li'));

2.操作属性节点

JavaScript使用：

    var firstProp = ('first').getAttribute('id');
    ('firstProp', firstProp);
    ('first').setAttribute('name', 'one');
    ('first').removeAttribute('name');

jQuery的使用

('firstAttr', $('#first').attr('id'));
$('#first').attr('name' ,'one');
$('#first').removeAttr('name');
// prop获取操作属性节点
('propGet', $('#first').prop('id'));
$('#first').prop("id",'propSet');
$('#propSet').prop("id",'first');
('propClass', $('.cls')[0]);
// $('.cls')[0].removeProp('name');
('a3', $("#ab"));
$("#ab").removeProp("name");
$("#first").removeProp("name");
// 注：在使用prop设置时，只能设置已经存在于属相的属性值；使用removeProp删除时，现在使用暂时无法实 现；

jquery中attr和prop的区别：

1、对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

2、对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

prop和attr的使用，传入一个参数获取，传入两个参数设置；两者的不同在：读取checked，disabled等属性名=属性值的属性时，attr 返回属性值或者undefined，当读取checked属性时，不会根据是否选中而改变；prop返回true和false，当读取的 checked属性时，会根据是否选中而改变；

3.操作文本节点

JavaScript的使用

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

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

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

<body>
<ul>
    <li  ><span style="color: chartreuse">嘿嘿</span></li>
    <li  ><span style="color: chartreuse">嘿嘿</span> </li>
</ul>
姓名：<input type="text"  value="222333">
</body>
// JavaScript 方法
<script type="text/javascript">
    ('serven_times', ('serven_times').innerHTML);
    ('serven_times').innerHTML = "<span style='color: #ff3a29'>呵呵</span>";
    ('serven_times text', ('serven_times').innerText);
    ('serven_times').innerText = '123';
    ('sdfads',("input").value);
</script>

结果为：

JQuery使用

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

    ('serven',$('#serven_times'));
    ('servenHTML',$('#serven_times').html());
    ('servenText',$('#serven_times').text());
    $('#serven_times').html("<span style='color: #ff3a29'>呵呵</span>");
    $('#serven_times').text('123');
    $('input').val('3333')

结果为：

4.操作css样式

JavaScript使用

    // childNodes获取当前节点的所有子节点
    ('firstChildNodes',('first').childNodes);
    // children 获取当前节点的所有元素子节点
    ('divChildren', ('div').children);
    // parentNode:获取当前节点的父节点下的所有节点
    ('parentNode', ('ab').parentNode);
    // #text (文本节点的 nodeName 永远是 #text) [获取第一个元素节点，包括回车等文本节点]
    ('firstChild', ('div').firstChild);
    // 获取第一个元素节点，不包括回车节点
    ('firstElementChild', ('div').firstElementChild);
    // lastChild、lastElementChild 同理
    ('previousSibling', ('div').previousSibling);
    ('previousElementSibling', 
     ('div').previousElementSibling);
    // nextSibling、nextElementSibling同理

答案是：

jQuery的使用

('jQuery first-child',$('.cls:first-child'));

答案是：

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

:first-child :first-of-type1.9+ :last-child :nth-child :nth-last-child()1.9+ nth-last-of-type()1.9+

nth-of-type()1.9+ :only-child :only-of-type1.9+

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

　first()last()children()parents()parent()siblings()

6.给一个节点绑定事件

javaScript的使用：

('first').onclick = function (ev) {
   alert('123');
}

jQuery的使用：

　①.事件绑定的快捷方式

$('#first').click(function () {
    alert('456');
})

②：使用on进行事件绑定（可以使用on同时给同一对象绑定多个事件）

$('#ab').on('click', function () {
    alert('111');
})

/③使用on，给一个对象绑定多个事件
    $("button:eq(0)").on({
        "click":function () {
            ("click");
        },
        "mouseover":function () {
            ("mouseover");
        },
        "mouseover":function () {
            ("mouseover2");
        }
    });
    //④使用on给回调函数传参，要求是对象格式，传递的参数可以在中取到；jquery中的e只能通过参数传进去，不能用
    $("button:eq(0)").on("click",{"name":"zhangsan","age":15},function (e) {
        (e);
        ();
        ();
        ();
        ();//js中的事件因子

    });

的文档就绪函数和的区别

*①.必须等待网页资源（包括图片等）全部加载完成后，才能执行；
*      而文档就绪函数只需要等到网页DOM结构加载完成后，即可执行
*②.在一个页面中，只能写一次，写多次会被最后一次覆盖
*      而文档就绪函数在一个页面中可以有N个

三、JavaScript对象和JQuery对象的方法不能混用。

对象和JQuery对象

① 使用$("")取到的节点为JQuery对象，只能调用JQuery方法，不能调用JavaScript方法；
*      $("#div").click(function(){})√
*      $("#div").onclick = function(){}× 使用JQuery对象调用JavaScript方法
*
*      同理，使用、系列函数取到的对象为JavaScript对象，也不能调用JQery函数

对象和JQuery对象互转

*① JQuery --->  JavaScript :使用get(index)或者[index]选中的就是JavaScript对象
*  $("div").get(0).onclick = function(){}
*  $("div").[0].onclick = function(){}
* ② JavaScript ---> JQuery :使用$()包裹JavaScript对象        (我们发现JQuery不管获得几个对象都是一个数组，可以直接给整个数组都添加某一事件)
*  var div = ("div");
*  $(div).click(function(){});

秒客网