浅谈 -- ♡ ‧₊˚ JS 与JQ的区别 ‧₊˚ ♡

jQuery是一个Javascript库，是对于ECMAScript、dom、bom的一个浅封装，让用户更方便操作。

让我们简单谈谈JS与JQ的区别吧！

♡ ‧₊˚  定义  ‧₊˚ ♡

js是网页的脚本语言，js是语言.

jQuery是用js语言写出来的一个框架.

♡ ‧₊˚  入口函数  ‧₊˚ ♡

JS：等到所有内容，以及我们的外部图片之类的文件加载完了之后，才会去执行。只能写一个入口函数。

jQUery：是在 html所有标签都加载之后，就回去执行。可以写多个。

        // 原生JS与JQ入口函数的区别
        // 原生JS入口函数
        window.onload = function(){
            alert('我是入口函数1')
        }
        // 后面的会覆盖前面的
        window.onload = function(){
            alert('我是入口函数2')
        }
        jQuery的入口函数
        $(function(){
            alert('我是入口函数1')
        });
        // 两个都会执行，依次弹出
        $(function(){
            alert('我是入口函数2')
        });

 

♡ ‧₊˚  创建DOM元素  ‧₊˚ ♡

JS：利用DOM方法创建元素节点，通常要将document.createElement()、document.createTextNode()、appendChild()配合使用，十分麻烦。 　　

jQuery：使用$就可以直接创建DOM元素。

        // 原生JS使用DOM去操作文本中的节点
        var container = document.getElementById('container')
        console.log(container);
        // 创建一个节点
        var newP= document.createElement('p')
        console.log(newP);
        // 给节点设置内容
        newP.innerHTML = '我是一个大帅哥'
        // 将节点添加到页面对应的结构中
        container.appendChild(newP)
        

        // 使用JQ
        $(function(){     
            // 创建一个div到body尾部
            $('<div>我是一个div标签</div>').appendTo('body')            
          })

♡ ‧₊˚ 获取DOM元素  ‧₊˚ ♡

   // js：
　　document.getElementById("elementId");//返回一个元素，按元素的ID名称来访问
　　document.getElementsByName("elementName"); // 返回一组元素，按元素的name名称来访问
　　document.getElementsByTagName("tagName"); // 返回一组元素，按标签来访问
　　document.getElementsByClassName("classname"); // 返回一组元素，按class来访问
   
    // jquery：
　　// 通过id获取
    $("#id").event;
　　// 通过class获取，
    $(.“css”).event();
　　// 通过属性html标签获取
    $(“p”).event();  // 是选中所有的p标签元素　　
　　// 通过属性值获取，
    $(“div[pig]”).event() // 是选中div的属性为pig的元素
    $('div:first') // 选中第一个div
    $('div:last') // 选中最后一个div
　　// event是对选中的元素的操作。

　　// $(“div.p1”)和 $(“div .p1”)的区别。
　　$(“div.p1”) // 是对所有div进行筛选，选出class="p1"的div。
　　$(“div .p1”)  // 是选中div下面的class="p1"的元素，不是这个div

♡ ‧₊˚ 操作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").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:
　　$("#div2").css("color","yellow");
　　$("#div2").css({
　　"color" : "white",
　　"font-weight" : "bold",
　　"font-size" : "50px",
　　});