jquery下载教程，Juery3.0框架使用案例以及基础语法；

登录juery官网， https://jquery.com/

1;点击下载;

2;点开，右键保存；

;

juery相比js优点：

①jquery的onload加载事件速度更快，并且多个加载并行【jq绑定事件都是使用的事件函数，不需要加on】；

②js的onload加载事件，后面的覆盖前面的；

③在jQuery中，$( )是其运行环境；

④jQuery的模块可以分为3部分：入口模块、底层支持模块和功能模块。

扫描二维码关注公众号，回复： 3399913 查看本文章

juery和js可以相互转换：

①通过$()[0]或者$()get(0)------>js对象

②通过$(document.getElementById("标签id")) ------>jq对象

    <script type="text/javascript">
        $(function () {
            var but3=document.getElementById("but3");
            $(but3).click(function () {
                alert("js----jq");
            });
        });
        $(function () {
            $("#but4")[0].onclick=function () {//get(0)获取索引为0的数组元素
                alert("jq---->js");
            }
        });
    </script>

jq修改标签属性；

<body>
<div id="div" class="div" name="div" title="ss"></div>
</body>

   <script src="../../../config/jquery-3.3.1.js" type="text/javascript"></script>
    <!--  jq对象.attr({'class':'myClass','id':'myId'});// 可一次修改多个attr属性-->
    <script type="text/javascript">
        $(function () {
            $("#div").attr({
                "class": "类名已经调用",
                "name": "div2",
                "title": "已经更改了title"
            });
        })
    </script>

查看；

js jq 对css样式的书写；

js需要指定style样式，jq不需要，并且jquery调用css（）；样式若有符号连接需要遵循驼峰命名，例如font-size需要写成fontSize；

 <script src="../../../config/jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
        $(function () {
            $("#div2").css({
                "width":"150px",
                "height":"150px",
                "background":"pink"
            })
        });
    </script>

搜索框案例；

用户点击提示消失，离开若没有输入提示继续显示，若输入内容就不再恢复提示【主要使用jquery的focus()和blur()焦点事件函数来对 input 的 text 的 value 来判断是否是 "" 】；

效果如下：

 <script src="../../../config/jquery-3.3.1.js" type="text/javascript"></script>
    <!--主要使用聚焦，失去焦点事件，focus ，blur //val()修改value  -->
    <script type="text/javascript">
        $(function () {
            var input = $("input");
            input.focus(function () {
                if ($(this).val()=="请输入文字..."){
                    $(this).val("");
                }
            }).blur(function () {
                if ($(this).val()==""){
                    $(this).val("请输入文字...");
                }
            });
        });
    </script>

使用innerHTML设置div值；

<body>
<div id="box"></div>
</body>

变为如下效果；

    <script src="../../../config/jquery-3.3.1.js" type="text/javascript"></script>
    <!--html()函数的使用，有参修改值-->
    <script type="text/javascript">
        $(function () {
            $("#box").html("通过jq来修改div的值");
            $("#box").css({
                "width":"150px",
                "height":"150px",
                "background":"pink"
            });
        });
    </script>

jquery下载教程，Juery3.0框架使用案例以及基础语法；

猜你喜欢