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

浅谈 -- ♡ ‧₊˚ 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",
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       　　});