• 技术文章 >web前端 >前端问答

    jquery是javascript吗

    青灯夜游青灯夜游2021-11-26 16:07:27原创104

    jquery不是javascript。javascript是一种解释性脚本语言,而jquery是一个JavaScript函数库,是基于JavaScript语言写出来的一个框架;且两者在语法上有不少差异。

    本教程操作环境:windows7系统、javascript1.8.5&&jquery1.10.2版、Dell G3电脑。

    jquery不是javascript。

    javascript是一种解释性脚本语言,而jquery是一个JavaScript函数库,是基于JavaScript语言写出来的一个框架

    使用JQuery首先要在 HTML 代码最前面加上对 jQuery 库的引用,比如:

    <script src="js/jquery.min.js"></script>

    库文件既可以放在本地,也可以直接使用知名公司的 CDN,好处是这些大公司的 CDN 比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度。另外一个好处是显而易见的,节省了网站的流量带宽。例如:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>  //Google
    或者:
    <script src="http://code.jquery.com/jquery-1.6.min.js"></script>   //jQuery 官方 

    jquery和javascript在语法上有不少差异

    1.操作元素节点

    a.JavaScript使用

    getElement系列、query系列

    <body>
        <ul>
            <li id="first">哈哈</li>
            <li class="cls" name ="na">啦啦</li>
            <li class="cls">呵呵</li>
            <li name ="na">嘿嘿</li>
        </ul>
        <div id="div">
            <ul>
                <li class="cls">呵呵</li>
                <li>嘿嘿</li>
            </ul>
        </div>
    </body>
    <script>
      document.getElementById("first");        //是一个元素
      document.getElementsByClassName("cls");    //是一个数组,即使只有一个元素,使用时需要用[0]取到第一个再使用
      document.getElementsByName("na");       //是一个数组,即使只有一个元素,使用时需要用[0]取到第一个再使用
      document.getElementsByTagName("li");     //是一个数组,即使只有一个元素,使用时需要用[0]取到第一个再使用
      document.querySelector("#div");        //是一个元素 
      document.querySelectorAll("#div li");    //是一个数组,即使只有一个元素,使用时需要用[0]取到第一个再使用
    </script>

    b.JQuery使用

    大量的选择器同时使用$()包裹选择器

    <body>
        <ul>
            <li id="first">哈哈</li>
            <li class="cls" name ="na">啦啦</li>
            <li class="cls">呵呵</li>
            <li name ="na">嘿嘿</li>
        </ul>
        <div id="div">
            <ul>
                <li class="cls">呵呵</li>
                <li>嘿嘿</li>
            </ul>
        </div>
    </body>
    <script src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script>
      //使用JQuery取到的是jquery对象都是一个数组,即使只有一个元素被选中,但是在使用时候不一定需要使用:eq(0)来拿到这一个在使用可以直接使用
        $("#first");            
        $(".cls");
        $("li type[name='na']");
        $("li");
    
        $("#div");
        $("#div li");
    </script>

    2.操作属性节点

    a.JavaScript使用

    getAttribute("属性名") 、 setAttribute("属性名","属性值")

    <body>
        <ul>
            <li id=>哈哈</li>
        </ul>
    </body>
    <script>).getAttribute().setAttribute(,  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>

    3.操作文本节点

    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>

    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.提供了大量的选择器:

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

    6.给一个节点绑定事件

    JavaScript:

      使用了Dom0事件模型和Dom2事件模型,具体内容见我上一篇博客

    JQuery:

      ①.事件绑定的快捷方式

    <body>
        <button>按钮</button>
    </body>
    <script src="js/jquery-1.10.2.js"></script>
    <script>
         $("button:eq(0)").click(function () {
            alert(123);
         });
    </script>

      ②:使用on进行事件绑定

    <body>
        <button>按钮</button>
    </body>
    <script src="js/jquery-1.10.2.js"></script>
    <script>    //①使用on进行单事件的绑定
         $("button:eq(0)").on("click",function () {
            alert(456);
        });     //②使用on同时给同一对象绑定多个事件
        $("button:eq(0)").on("click dblclick mouseover",function () {
            console.log(123);
        });    //③使用on,给一个对象绑定多个事件
        $("button:eq(0)").on({        "click":function () {
                console.log("click");
            },        "mouseover":function () {
                console.log("mouseover");
            },        "mouseover":function () {
                console.log("mouseover2");
            }
        });    //④使用on给回调函数传参,要求是对象格式,传递的参数可以在e.data中取到;jquery中的e只能通过参数传进去,不能用window.event
        $("button:eq(0)").on("click",{"name":"zhangsan","age":15},function (e) {
            console.log(e);
            console.log(e.data);
            console.log(e.data.name);
            console.log(e.data.age);
            console.log(window.event);//js中的事件因子
        });    
    </script>

    【相关推荐:javascript学习教程

    以上就是jquery是javascript吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:jquery javascript
    上一篇:Javascript中什么是数组 下一篇:javascript主要应用在哪些方面
    php中文网线上培训班

    相关文章推荐

    • jquery怎样改变元素对象的值• jquery怎样获取有几个指定元素(数量)• jquery怎样去除ul里内容• javascript中什么是常量• javascript有哪些赋值运算符• jquery怎么判断是否存在指定类

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网