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);
};