jQuery基础知识笔记(六jQueryUI)

1.进入jQuery官网
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
百度云提取:链接:https://pan.baidu.com/s/1W3eKIWtfot_ZYw4fE_t0Tw
提取码:ksq1
2.使用方法:
打开压缩包中的index.html页面
F12查看要用到的div的id
在这里插入图片描述

  • 右键查看网页源代码
  • ctrl+v搜索想要找的这个id名
  • 将检索到的内容都贴到自建的html页面中
  • 注意jq代码要放入$(function(){})中
  • 还要引入如下文件
 <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.css"/>
<script src="jquery-1.12.2.js"></script>
<script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>

还可以自定义CSS样式
3.还可以自己做插件进行封装
目录结构如下
在这里插入图片描述
插件.html
直接调用.changeBackgrounColor方法
$(“input[type=button]”)只是查找<input type="button" />

...
    <link rel="stylesheet" href="style.css">
    <script src="jquery-1.12.2.js"></script>
    <script src="myjquery.js"></script>
    <script>
        $(function () {
            //点击每个按钮改变每个div的背景颜色
            $("input[type=button]").click(function () {
                $(".cls").changeBackgrounColor($(this).val());
            });
        });
    </script>
</head>
<body>
<input type="button" value="green"/>
<input type="button" value="red"/>
<input type="button" value="blue"/>
<div id="dv">
    <div class="cls"></div>
    <div class="cls"></div>
    ...
</div>
</body>
</html>

myjquery.js
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。
$.fn含义(点击查看详细解释)

changeBackgrounColor可以属于jquery中任何一个元素的对象来调用

$.fn.changeBackgrounColor=function (color) {
    $(".cls").css("backgroundColor",color);
};
发布了38 篇原创文章 · 获赞 1 · 访问量 5151

猜你喜欢

转载自blog.csdn.net/ShangMY97/article/details/104975061
今日推荐