【JavaScript、JQuery、JQueryUI】新手入门简单粗暴讲解法

最新推荐文章于 2024-05-15 23:10:21 发布

两水先木示

最新推荐文章于 2024-05-15 23:10:21 发布

阅读量718

点赞数 1

分类专栏：语言学习

本文链接：https://blog.csdn.net/qq_39574690/article/details/84144626

版权

语言学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

学习资料：http://www.w3school.com.cn/ （放心绝对不会是奇怪的网址）

一、引入JQuery、JQueryUI方法：

1.进入JQuery官网：https://jquery.com/

2.依据此图流程下载JQuery库:

3.进入JQueryUI官网:https://jqueryui.com/

4.依据下图下载JQueryUI库:

5. 将JQuery库压缩包里的jquery-x.x.x.min.js拖入工程中，将JQueryUI库压缩包里的jquery-ui.min.js和jquery-ui.min.css拖入工程中

注意：因为JQueryUI库是依赖于JQuery库的，所以引入的时候必须先引入JQuery库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="JQUI/jquery-ui.min.js"></script>
    <link href="JQUI/jquery-ui.min.css" type="text/css" rel="stylesheet"/>
</head>
<body>

</body>
</html>

完毕！

注意：JQueryUI库有些方法必须是要求在某个版本JQuery库下才可以使用，例如：你使用最新版本的JQuery库，但是JQueryUI还不支持最新版本，而导致JQueryUI某些方法使用不了，出现报错等问题，你需要去下载低版本的JQuery库，引入方式一样，把原本的JQuery库删除即可，并且修改上面的那一行<script src="jquery-3.3.1.min.js></script>

二、正式开始讲解学习我觉得比较难的地方

1.事件冒泡：即事件会抵达目标地响应后，会传送给父容器们继续触发一次，注意是全部父容器都会触发它捆绑的任何事件，但是你必须满足条件才会触发，例如：

<div id="div1">
    <div id="div2">
        <button id="btn">按钮</button>
    </div>
</div>

$(document).ready(function(){
    $("#div1").dblclick(div1Click);
    $("#div2").click(div2Click);
    $("#btn").click(btnClick);
});

function div1Click(){
    console.log("div1");
}

function div2Click(){
    console.log("div2");
}

function btnClick(){
    console.log("btn按钮");
}

当点击按钮时，会发生（单击）冒泡，所有上级控件捆绑的（单击函数都会触发一次），从而div2的函数也会被执行，而div1的事件是双击事件故不会执行，亲测!

所以，事件冒泡准确地说是必须得同种类型的事件才会发生。

如果想阻止冒泡的发生可以这样写：

$(document).ready(function(){
    $("#div1").dblclick(div1click);
    $("#div2").click(div2click);
    $("#div1").click(btnclick);
});

function div1Click(event){
    console.log("div1");
    event.stopPropagation();//阻止冒泡事件
}

function div2Click(event){
    console.log("div2");
    event.stopPropagation();//阻止冒泡事件
}

function btnClick(event){
    console.log("btn按钮");
    event.stopPropagation();//阻止冒泡事件
}

2. 与冒泡很相似的一个，阻止触发默认事件，即类似于 a标签，如果给a标签捆绑了点击事件，它还会触发默认的href事件跳转页面，如果想不跳转的话就在点击事件里面加入：

event.stopImmediatePropagation();//阻止之后同一时刻发生的事件 且 事件冒泡也阻止了

3. 关于Js的对象写法：（很懵。）

function Person(name) {
    var n = "nnnn";//内部变量
    var _this = {}
    _this.name = name;
    _this.sayHello = function () {
        alert("Hello world," + _this.name + "|" + n);
    }
    window.Person = Person;//提供给window调用，不然Person类无法被调用
    return _this;
}

function Teacher(name) {
    var _this = Person(name);//继承Person
    var superSay = _this.sayHello;//父类的sayHello方法
    var superName = _this.name;
    _this.sayHello = function () {
        superSay.call(this);//调用父类的sayHello方法
        alert("T_hello,"+ superName);
    }
    return _this;
}

var t = Teacher("fake");
t.sayHello();

4. setTimeout 和 setInterval :

//延迟调用函数setTimeout,延迟1000 ms
var timeout = setTimeout(function(){
    ...
}, 1000);

//销毁延时器
clearTimeout(timeout);

//循环执行器 1000 ms执行一次
var interval = setInterval(function(){
    ...
}, 1000);

//销毁循环执行器
clearInterval(interval);

5、与PHP服务器进行交互，也就是Ajax异步响应页面请求

以例子形式说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AjaxHtml</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="AjaxHtml.js"></script>
    <!--header("Access-Control-Allow-Origin: http://www.ttlsa.com");-->
</head>
<body>
<form>
        <input type="text" id="namevalue"/>
        <br/>
        <!--<button id="btn">Send</button>--><!-- button标签会自动刷新页面 而input就不会! -->
        <input type="button" onclick="sendInputName()" value="发送" />
        结果:<span id="result"></span>
</form>
</body>
</html>

实现一个发送输入框id=namevalue的数据给PHP服务器，然后服务器的内容传回来后设置到span标签上.

注意：有HTML文件必须要和PHP文件在同一个目录下，而且是要在Apache服务器的apached.config文件中的DocumentRoot="xxx"这个xxx目录上，不然嘿嘿，找不到服务器404错误就来了。

PHP服务器代码如下：

文件为:"AjaxService.php"

<?
if(isset($_GET['name'])){
    echo "hello:".$_GET['name'];
}else{
    echo "Args error";
}

JS代码如下（AjaxHtml.js）：

$(document).ready(function () {
   $("#btn").click(function () {
       //由于不能跨域传输数据，所以要求html和php文件在一个目录下
       // console.log("发送给服务器name" + $("#namevalue").val());
       $.get("http://localhost/AjaxTest.php",{name:$("#namevalue").val()},function (data) {
          $("#result").text(data);
       });
   })
});

服务器的配置如下：

我的是用idea编辑软件，挺好用的。

file - settings 然后一直选到下图，然后点"+"号添加一个服务器，设置的内容如下图，其他默认就好了。

接着就可以运行你的PHP文件了，如果不出错就说明成功运行。

前提是你要启动这2个玩意：（变绿就说明正常了）

这个软件是叫XAMPP，可以百度下载后就可以了。

在我另一篇文章有说明比较坑爹的地方：https://blog.csdn.net/qq_39574690/article/details/83997934

启动Apache会有些坑，mysql如果原本有安装的话，也会出问题，这个可以百度，就是要你去删除mysql服务，才可以用它来启动mysql.

三、JQueryUI说明：

自己看文档吧，没什么可以说的，只能提醒你，JQueryUI的版本必须匹配上正确的JQuery版本库，不然有的坑你，当测试的时候出现不如意的情况，一定要按F12查看console 是否出错，有很多原因都是因为方法找不到，没有这个方法，之类的坑爹错误。JQueryUI很强大，大大地好！

进入JQueryUI官网:https://jqueryui.com/

学习使我快乐！

老子又回来了！接下来简单说明一下JQueryUI的玩法：

1、According效果如下：

2、AutoComplete:

$(document).ready(function () {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
    $("#tags").autocomplete({
        source: availableTags
    });
});

3、DatePicker:

4、Dialog:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <script src="../jquery-ui.min.js"></script>
    <link href="../jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function(){
            $("#btn").button().on("click",function () {
                $("#div").dialog({
                    resizable: false
                });
            });
        })
    </script>
</head>
<body>
    <div style="display: none;" id="div">
        <p>这是一个对话框Dialog</p>
    </div>
    <a href="#" id="btn">按钮</a>
</body>
</html>

5、Menu

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Menu</title>
    <!--<script src="../jquery-3.3.1.min.js"></script>-->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="../jquery-ui.min.js"></script>
    <script src="Menu.js"></script>
    <link href="../jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <style>
        .ui-menu:after{
            content:".";
            display:block;
            clear:both;
            visibility: hidden;
            line-height: 0;
            height: 0;
        }
        .ui-menu .ui-menu-item{
            display:inline-block;
            float:left;
            margin:0;
            padding:10px;
            width:100px;
        }
    </style>
</head>
<body>
    <ul id="uid">
        <li>
            <a href="#">Java</a>
            <ul>
                <li><a href="#">Jave EE</a></li>
                <li><a href="#">Jave SE</a></li>
                <li><a href="#">Jave ME</a></li>
            </ul>
        </li>
        <li>C#</li>
        <li>Java</li>
        <li>HTML</li>
    </ul>
</body>
</html>

6、progressbar

var pb;
var max = 100;
var current = 0;
$(document).ready(function () {
    pb = $("#pb");
    pb.progressbar({max:100});
    //设置时钟间隔100毫秒执行一次changepb
    setInterval(changepb, 100);
});

function changepb() {
    current++;
    if(current >= 100){
        current = 0
    }
    //将pb进度条的值设置为current
    pb.progressbar("option", "value", current);
}

7、Slider


var valueSpan,slider;
$(document).ready(function () {
    // $("#slider").slider();
    slider = $("#slider");
    valueSpan = $("#span");
    // slider.slider({
    //     //滑动条改变后
    //     change:function (event, ui) {
    //      //可通过直接从slider控件的option中的value取的当前滑动进度
    //         valueSpan.text(slider.slider("option","value"));
    //     }
    // });
    slider.slider({
        //滑动条改变中
        slide:function (event, ui) {
            valueSpan.text(ui.value);
        }
    });
});

8、spine

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spinner</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="../jquery-ui.min.js"></script>
    <!--<script src="Slider.js"></script>-->
    <link href="../jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <script>
        $(function () {
            $("#ip").spinner();
            $("#ip").spinner("value","10");//设置默认值为10
            $("#btn").click(function () {
                alert($("#ip").spinner("value"));
            })
        });
    </script>
</head>
<body>
    <input id="ip" />
    <button id="btn">get value</button>
</body>
</html>

9、Table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Widgets的Tabs使用方法</title>
    <!--效果是点击菜单换页面的效果-->
    <!--<script src="../jquery-3.3.1.min.js"></script>-->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="../jquery-ui.min.js"></script>
    <link href="../jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <script>
        $(function () {
            $("#tabs").tabs();
        });
    </script>
</head>
<body>
    <div id="tabs">
        <ul>
            <li><a href="#hello1">hello1</a></li>
            <li><a href="#hello2">hello2</a></li>
            <li><a href="#hello3">hello3</a></li>
        </ul>
        <!--//注意下面的这些id必须与上面href指定的一样，一一对应-->
        <!--//而且div必须放在 <div id="tabs">下-->
        <p id="hello1">
            hello1
            hello
            hello
            hello
            hello
            hello
        </p>
        <div id="hello2">
            hello2
            hello
            hello
            hello
            hello
            hello
        </div>
        <div id="hello3">
            hello3
            hello
            hello
            hello
            hello
            hello
        </div>
    </div>
</body>
</html>

10、Button

完事。

两水先木示

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript、JQuery、JQueryUI】新手入门简单粗暴讲解法

学习资料：http://www.w3school.com.cn/ （放心绝对不会是奇怪的网址）一、引入JQuery、JQueryUI方法：1.进入JQuery官网：https://jquery.com/2.依据此图流程下载JQuery库:3.进入JQueryUI官网:https://jqueryui.com/4.依据下图下载JQueryUI库:5. 将JQu...
复制链接

扫一扫