初识jquery（一）

最新推荐文章于 2022-05-02 11:15:12 发布

张哲and哲哥

最新推荐文章于 2022-05-02 11:15:12 发布

阅读量374

点赞数 1

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/BuZiShuoquoto/article/details/52233221

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jquery的基本知识

（1）写少代码,做多事情【write less do more】
（2）免费，开源且轻量级的js库，容量很小
注意：项目中，提倡引用min版的js库
（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome
注意：jQuery不是将所有JS全部封装，只是有选择的封装
（4）能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
（5）文档手册很全，很详细
（6）成熟的插件可供选择
（7）提倡对主要的html标签提供一个id属性，但不是必须的
（8）出错后，有一定的提示信息
（9）不用再在html里面通过 script 标签插入一大堆js来调用命令了

使用jquery前首先需要引进引用第三方js库文件 <script type="text/javascript" src="js/jquery-1.8.2.js"></script> 代码。

<body>

    <input id="inputID" type="button" value="这就是jQuery库,写少代码，做多事情"/>

    <div id="divID">哈哈哈</div>

    <script type="text/javascript">

        //取得<input>标签中的value属性的内容

        //js方式
        var inputElement = document.getElementById("inputID");
        var input = inputElement.value;
        alert(input);

        /*jquery方式*/
        var $input = $("#inputID");
        var input = $input.val();
        alert(input);

        //取得<div>标签中的文本内容

        /*js方式*/
        var divElement = document.getElementById("divID");
        var div = divElement.innerHTML;
        alert(div);

        //jquery方式
        var $div = $("#divID");
        var div = $div.html();
        alert(div);

    </script>

  </body>

jquery与js互相转换

<input id="inputID" type="button" value="这就是jQuery库,写少代码，做多事情"/>

    <div id="divID">哈哈</div>

    <script type="text/javascript">

        /*取得<input>标签中的value属性的内容[js对象->jquery对象]
        var inputElement = document.getElementById("inputID");//js对象
        var $input = $( inputElement );//jquery对象
        var input = $input.val();
        alert(input);*/


        //取得<div>标签中的文本内容[jquery对象->js对象]
        var $div = $("#divID");//jquery对象

        //var divElement = $div.get(0);//js对象
        var divElement = $div[0];//js对象

        var div = divElement.innerHTML;
        alert(div);

    </script>

jquery和js对错误的处理方式。

<head>
        <title>js操作与jQuery操作对错误的处理方式的比较</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style type="text/css">
            .oneClass {
                font-size: 44px;
                color: red
            }
        </style>
        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    </head>
    <body>

        <input type="text" id="usernameID" value="这就是jQuery库" />

        <div id="divID" class="oneClass">这是div标签中的内容</div>

        <script type="text/javascript">

            //通过"#id"定位<input>
            //alert( $("#usernameID").val() );

            //通过"标签名"定位<input><div>
            //alert( $("input").val() );
            //alert( $("div").html() );

            //通过"样式名"定位<div>
            //alert( $(".oneClass").html() );

            //js错误处理和jquery错误处理
            //alert( document.getElementById("usernameTD").value );
            alert( $("#usernameID").val() );

        </script>

    </body>