• jQuery 和原生JS写法 区别


    jQuery代码具体的写法和原生的Javascript写法在执行常见操作时的区别如下:

    1 定位元素 
    JS 
    document.getElementById("abc") 

    jQuery 
    $("#abc") 通过id定位 
    $(".abc") 通过class定位 
    $("div") 通过标签定位 

    需要注意的是JS返回的结果是这个元素,jQuery返回的结果是一个JS的对象。以下例子中假设已经定位了元素abc。 

    2 改变元素的内容 
    JS 
    abc.innerHTML = "test";                //现在的项目中有用到
    jQuery 
    abc.html("test"); 

    3 显示隐藏元素 
    JS 
    abc.style.display = "none";              //现在的项目中有用到
    abc.style.display = "block"; 

    jQuery 
    abc.hide(); 
    abc.show();

    abc.toggle();         //在显示和隐藏之间切换、
     


    4 获得焦点 

    JS和jQuery是一样的,都是abc.focus(); 

    5 为表单赋值 
    JS 
    abc.value = "test"; 
    jQuery 
    abc.val("test"); 

    6 获得表单的值 
    JS 
    alert(abc.value); 
    jQuery 
    alert(abc.val()); 

    7 设置元素不可用 
    JS 
    abc.disabled = true; 
    jQuery 
    abc.attr("disabled", true);

    8 修改元素样式
    JS
    abc.style.fontSize=size;
    jQuery
    abc.css('font-size', 20);

    JS
    abc.className="test";
    JQuery
    abc.removeClass(); 
    abc.addClass("test");

    9 判断复选框是否选中

    jQuery
    if(abc.attr("checked") == "checked")
    注意:网上说的.attr("checked") == true实际上不能用,上面这个测试过能用

    ①.根据ID取元素

    {

    JS:取到的是一个DOM对象。

      例:var div = document.getElementByID("one");

    JQUERY:取到的是一个JQUERY对象。

      例:var div = $("#one");——括号里面是根据某个东西来找,相当于一个选择,如果我们要根据ID来找,在样式表里的ID是用#来表示的,所以在这里我们直接带入井号,整句的意思就是根据ID为one的来查找。

    }

    ②.根据class取元素,在数组里面如果要取DOM对象使用索引的方式,如果要取JQUERY对象使用eq()

    {

    JS:取到的是一个数组

      例:var div = document.ElementsByClassName("test");

    JQUERY:

      例:var div = $(".test");

    }

    ③.根据name取元素

    {

    JS:返回的是一个数组

      例:var bd = document.getElementsByName(uid);

    JQUERY:的方式是用 方括号,属性=一个值,不限制非要根据name来取值,JQUERY是根据属性来取元素

      例:$("[name='uid']");

    }

    ④.根据标签名取元素

    {

    JS:返回的也是一个数组

      例:var div = document.getElementsByTagName("div");

    JQUERY:和样式表里面给所有div加样式的方法一样,在双引号内直接写标签名

      例:$("div");

    }

    附:JQUERY的其他取值方式

    组合选取:var div = $("div span");——有很多组合方式

    *******************************************************************

    操作内容

      ①.非表单元素(如果是文本就用text方法,如果是html代码就用html方法)

        {

          例:div.text();——无参数的情况下是取值

          div.text("aaaa");——有参数的情况下是赋值

          div.html();——无参数的情况下是取值

          div.html("aaaa");——有参数的情况下是赋值

        }

      ②.表单元素

        {

          JS:div.value;——取值;div.value = xxx;——赋值

          JUQERY:div.val();——无参数是取值,有参数是赋值。

        }

    *******************************************************************

    操作属性

    JS里面用来操作属性的方法是

    div.setAttribute("","");——设置属性、修改属性

    div.removeAttribute("");——移除属性,引号里面写一个属性名

    div.getAttribute();——获取属性

    JQUERY里面用来操作属性的方法

    添加属性:div.attr("test","aa");——给这个attr方法加入参数,属性名叫做test,属性的值是aa

    移除属性:div.removeAttr("test");——移除test这条属性

    获取属性:div.attr("test");——在attr方法里面直接写入一个属性的名就可以了

    *******************************************************************

    操作样式

    JS里面操作样式的关键字是style

    例:div.style.backgroundColor = "red";——把这个div的背景色设置成为了红色

    JQUERY里面操作样式的关键字是css

    例:div.css("background-color","yellow");——把这个div的背景色变为黄色,在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化

      JS操作样式的方法只能获取内联样式,不能取内嵌的和外部的!!!!!

      JQUERY操作样式的方法可以是内联的也可以是内嵌的

    js和jquery的区别


    1.入口函数不同
      js:window.onload = function(){内部放js}   
      实质就是一个事件,拥有事件的三要素,事件源,事件,事件处理程序。等到所有内容,以及我们的外部图片之类的文件加载完了之后,才会去执行。只能写一个入口函数。
      jQuery:$(function(){})或者$(document).ready(function(){})
      是在 html所有标签都加载之后,就回去执行。可以写多个。
      window.onload=function(){
      //js代码
      }
      等同于
      $(window).load(function(){
      //jquery代码
      });
    2.创建DOM元素
      利用DOM方法创建元素节点,通常要将document.createElement()、document.createTextNode()、appendChild()配合使用,十分麻烦。
      而jQuery使用$就可以直接创建DOM元素
      var oNewP = $("<p>使用jQuery创建的内容</p>");
      以上代码等同于javascript
      var oNewP2 = document.createElement("p");
      var oText = document.createTextNode("这是使用javascript方法创建的内容");
      oNewP2.appendChild(oText);
      例:使用jQuery创建DOM
      <script type="text/javascript">
      $(function(){
      var oNewP = $("<p>使用jQuery创建的内容</p>");
      oNewP.insertAfter("#display"); //insertAfter方法
      })
      </script>
      <div id="display"></div>
    3.获取元素
    jquery:
      通过id获取,jquery的语法更为简练$("#id").event;
      通过class获取,$(.“css”).event()
      通过属性html标签获取,$(“p”).event()是选中所有的p标签元素  
      通过属性值获取,$(“div[csdn]”).event()是选中div的属性为csdn的元素
      event是对选中的元素的操作。
      $(“div.p1”)和 $(“div .p1”)的区别。
      $(“div.p1”)是对所有div进行筛选,选出class="p1"的div。
      $(“div .p1”)是选中div下面的class="p1"的元素,不是这个div
    js:
      document.getElementById("elementId");//返回一个元素,按元素的ID名称来访问
      document.getElementsByName("elementName");返回一组元素,按元素的name名称来访问
      document.getElementsByTagName("tagName");返回一组元素,按标签来访问
      document.getElementsByClassName("classname");返回一组元素,按class来访问
    4.操作属性节点
    a.JavaScript使用
      object.getAttribute(attribute)  获取元素属性
      object.setAttrbute(attribute,value)  设置元素属性
        <body>
      <ul>
      <li id="first">哈哈</li>
      </ul>
      </body>
      <script>
        document.getElementById("first").getAttribute("id");
        document.getElementById("first").setAttribute("name","nafirst");
        document.getElementById("first").removeAttribute("name");
      </script>
    b.JQuery使用
      .attr()传入一个参数获取,传入两个参数设置
      .prop()
      prop和attr一样都可以对文本的属性进行读取和设置;
      两者的不同 在读取checked,disabled,等属性名=属性值的属性时
      attr返回属性值或者undefined,当读取的checked属性时不会根据是否选中而改变
      prop返回true和false 当读取的checked属性时会根据是否选中而改变
      也就是说attr要取到的属性必须是在标签上写明的属性,否则不能取到
      <body>
      <ul>
      <li id="first">哈哈</li>
      </ul>
      </body>
      <script src="js/jquery.js"></script>
      <script>
        $("#first").attr("id");
        $("#first").attr("name","nafirst");
        $("#first").removeAttr("name");
        $("#first").prop("id");
        $("#first").prop("name","nafirst");
        $("#first").removeProp("name");
      </script>
    5.操作文本节点
    a.JavaScript使用
      innerHTML:取到或设置一个节点的HTML代码,可以取到css,以文本的形式返回
      innerText:取到或设置一个节点的HTML代码,不能取到css
      value:取到input[type='text']输入的文本
      <body>
      <ul>
      <li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
      <li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
      </ul>
      姓名:<input type="text" id="input">
      </body>
      <script>
      document.getElementById("serven_times").innerHTML;
      document.getElementById("serven_times").innerHTML = "<span style='color: #ff3a29'>呵呵</span>";
      document.getElementById("eight_times").innerText;
      document.getElementById("eight_times").innerText = "啦啦";
      document.getElementById("input").value;
      </script>
    b.JQuery使用
      .html()取到或设置节点中的html代码
    .  text()取到或设置节点中的文本
      .val()取到或设置input的value属性值
      <body>
      <ul>
      <li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
      <li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
      </ul>
      姓名:<input type="text" id="input">
      </body>
      <script src="/js/jquery.min.js"></script>
      <script>
      $("#serven_times").html();
      $("#serven_times").html("<span style='color: #ff3a29'>呵呵</span>");
      $("#eight_times").text();
      $("#eight_times").text("啦啦");
      $("#input").val();
      $("#input").val("哈哈");
      </script>

    6.操作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:
      $("#div2").css("color","yellow");
      $("#div2").css({
      "color" : "white",
      "font-weight" : "bold",
      "font-size" : "50px",
      });
    7.操作层次节点
    JavaScript:
      1.childNodes:获取当前节点的所有子节点(包括元素节点和文本节点)
      children:获取当前节点的所有元素子节点(不包括文本节点)
      2.parentNode:获取当前节点的父节点
      3.firstChild:获取第一个元素节点,包括回车等文本节点
      firstElementChild:获取第一个元素节点,不包括回车节点
      lastChild、lastElementChild 同理
      4.previousSibling:获取当前元素的前一个兄弟节点
      previousElementSibling::获取当前元素的前一个兄弟节点
      nextSibling、nextElementSibling
    8.js和jquery转换
      两种转换方式将一个jQuery对象转换成js对象:[index]和.get(index);
      (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的js对象。
      如:var $v =$("#v") ; //jQuery对象
      var v=$v[0]; //js对象
      alert(v.checked) //检测这个checkbox是否被选中
      (2)jQuery本身提供,通过.get(index)方法,得到相应的js对象
      如:var $v=$("#v"); //jQuery对象
      var v=$v.get(0); //js对象
      alert(v.checked) //检测这个checkbox是否被选中
      js对象转成jQuery对象:
      对于已经是一个js对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(js对象)
      如:var v=document.getElementById("v"); //js对象
      var $v=$(v); //jQuery对象
      转换后,就可以任意使用jQuery的方法了。

  • 相关阅读:
    python数据库小脚本
    替换debug
    监听属性变化
    ast binding
    还原未修改的常量
    数据库中常用查询
    职业生涯四个阶段
    如何控制需求
    如何将VS Code 切换成中文
    当同时使用bootstrapdatepicker.js和jquery.validate.js这两款插件,至少要选择两次时间,才能验证成功的问题
  • 原文地址:https://www.cnblogs.com/ndh074512/p/14757645.html
Copyright © 2020-2023  润新知