jQuery-UI-3
2017-11-16 本文已影响15人
charlotte2018
01-jquery属性 操作.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.aaa {
border: 1px solid red;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//获取元素，绑定属性
var jqinp = $("input").eq(0);
var jqinp2 = $("input:checkbox");
var jqbtn = $("button");
jqbtn.click(function () {
//绑定到jquery的衣服上，标签上没有
// jqinp.title = 111;
// console.log(jqinp.title);
//绑定到标签上
// jqinp.attr("title",111);
// console.log(jqinp.attr("title"));
jqinp.attr("aaa",111);
console.log(jqinp.attr("aaa"));
//两个参数是给属性赋值，单个参数是获取属性值。
jqinp.attr("class","aaa");
console.log(jqinp.attr("class"));
jqinp.removeAttr("class");
console.log(jqinp.attr("class"));
//form中的特殊属性，用prop
jqinp2.prop("checked",true);
// jqinp2.attr("checked",true);//一次性的
});
})
</script>
</head>
<body>
<button>绑定</button>
<input type="text"/>
<input type="checkbox"/>
</body>
</html>
02-表格全选反选（prop+checkbox选择器+checked选择器）.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//需求1：点击上面的多选按钮，下面的所有多选按钮都和上面的一致
//需求2：点击下面的多选按钮，判断下面的所有多选按钮都是否全部被选定只有全部被选定上面的才被选定
//需求1：点击上面的多选按钮，下面的所有多选按钮都和上面的一致
//步骤：绑定事件，直接让下面的所有按钮和上面的按钮属性值一模一样
$("#j_cbAll").click(function () {
//直接让下面的所有按钮和上面的按钮属性值一模一样
$("#j_tb input:checkbox").prop("checked",$(this).prop("checked"));
});
//需求2：点击下面的多选按钮，判断下面的所有多选按钮都是否全部被选定只有全部被选定上面的才被选定//需求2：点击下面的多选按钮，判断下面的所有多选按钮都是否全部被选定只有全部被选定上面的才被选定
$("#j_tb input:checkbox").click(function () {
//判断，只有所有都背选定，上面的才被选定
//技术点：带有checked属性的标签和checkbox个数一样多的时候
if($("#j_tb input:checkbox").length === $("#j_tb input:checked").length){
//只有所有的都有checked属性，上面的才被选定
$("#j_cbAll").prop("checked",true);
}else{
$("#j_cbAll").prop("checked",false);
}
});
})
</script>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>课程名称</th>
<th>所属学院</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>JavaScript</td>
<td>前端与移动开发学院</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>css</td>
<td>前端与移动开发学院</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>html</td>
<td>前端与移动开发学院</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>jQuery</td>
<td>前端与移动开发学院</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
03-val()和text()和html().html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(document).ready(function () {
//val(); 获取标签中的value属性的值。带有参数是赋值(类比js中的value属性)
alert($("input").val());
$("input").val("我是刚刚赋值的input内容")
//text(); 获取双闭合标签中的文本值。（不识别标签）(类比innerText)
alert($("div").text());
$("div").text("<li>我是text赋值的</li>")
//html(); 获取双闭合标签中的文本值。（识别标签）(类比innerHTML)
alert($("div").html());
$("div").html("<li>我是html赋值的</li>")
})
</script>
</head>
<body>
<input type="text" value="我是input"/>
<div>
<li>你好</li>
</div>
</body>
</html>
05-height()和width().html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 100px;
height: 100px;
padding-left: 10px;
border: 10px solid #000;
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//获取宽度
$("button").eq(0).click(function () {
//换个offsetHeiht不一样。只获取高度
alert($(".box").width());
})
//获取宽度
$("button").eq(1).click(function () {
//设置宽度
$(".box").width(200);
})
//获取高度
$("button").eq(2).click(function () {
//换个offsetHeiht不一样。只获取高度
alert($(".box").height());
})
//获取高度
$("button").eq(3).click(function () {
//设置高度
$(".box").height(200);
})
})
</script>
</head>
<body>
<button>获取宽度</button>
<button>设置宽度</button>
<button>获取高度</button>
<button>设置高度</button>
<div class="box"></div>
</body>
</html>
06-坐标值操作.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 5000px;
}
.box1 {
width: 300px;
height: 300px;
position: relative;
margin: 10px;
overflow: auto;
background-color: pink;
}
.box2 {
width: 200px;
height: 400px;
position: absolute;
top: 50px;
left: 50px;
background-color: yellow;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//距离页面最顶端或者最左侧的距离和有没有定位没有关系
$("button").eq(0).click(function () {
alert($(".box2").offset().top);
})
//距离页面最顶端或者最左侧的距离和有没有定位没有关系
$("button").eq(1).click(function () {
$(".box2").offset({"left":1000,"top":1000});
})
//距离父系盒子中带有定位的盒子的距离(获取的就是定位值，和margin/padding无关)
$("button").eq(2).click(function () {
alert($(".box2").position().top);
})
//距离父系盒子中带有定位的盒子的距离(获取的就是定位值，和margin/padding无关)
$("button").eq(3).click(function () {
$(".box2").position().top = "100px";
})
//获取被选取的头部
$("button").eq(4).click(function () {
alert($(window).scrollTop());
})
//获取被选取的头部
$("button").eq(5).click(function () {
$(window).scrollTop(100);
})
})
</script>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<button>offset().top获取</button>
<button>offset().top设置</button>
<button>position().top获取</button>
<button>position().top设置</button>
<button>scrollTop()</button>
<button>scrollTop()</button>
</body>
</html>
07-事件绑定.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.js"></script>
<script>
//这种绑定事件的方法是不会层叠的。
// $(document).click(function () {
// alert(1);
// });
// $(document).click(function () {
// alert(2);
// });
//第二种绑定：bind
// $(document).bind("click mouseenter", function () {
// alert(1);
// })
// $(document).bind("click mouseenter", function () {
// alert(2);
// })
//第三种
// $(document).delegate(".box","click mouseenter", function () {
// alert(1);
// })
//第四种(重点)
// $(document).on("click mouseenter",".box",{"name":111}, function (event) {
// alert(event.data.name);
// });
// $(document).on("click",".box", function () {
// alert(1);
// });
</script>
</head>
<body>
<div class="box" style="width: 100px;height: 100px;background-color: pink;"></div>
</body>
</html>
08-事件解绑.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.js"></script>
<script>
//这种绑定事件的方法是不会层叠的。
// $(document).click(function () {
// alert(1);
// });
// $(document).mouseenter(function () {
// alert(2);
// });
// 解绑
// $(document).unbind("mouseenter");
//第二种绑定：bind
// $(document).bind("click mouseenter", function () {
// alert(1);
// })
// $(document).bind("click mouseenter", function () {
// alert(2);
// })
//第三种
// $(document).delegate(".box","click mouseenter", fn)
// $(document).delegate(".box","click mouseenter", fn2)
//
// function fn(){
// alert(1);
// }
// function fn2(){
// alert(2);
// }
//
// $(document).undelegate(".box","mouseenter",fn)
//第四种(重点)
// $(document).on("click mouseenter",".box",{"name":111}, function (event) {
// alert(event.data.name);
// });
// $(document).on("click mouseenter",".box", function () {
// alert(1);
// });
//
// $(document).off("mouseenter",".box");
// $(function () {
// $(".box").on("click", function () {
// alert(5);
// })
// })
</script>
</head>
<body>
<div class="box" style="width: 100px;height: 100px;background-color: pink;"></div>
</body>
</html>
09-事件触发.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
// $(document).on("click mouseenter", function () {
// alert("页面被点击了");
// });
//事件触发(1)(触发浏览器行为)
// $(document).click();
// $(document).mouseenter();
//事件触发(2)(触发浏览器行为)
// $(document).trigger("mouseenter");
// $(document).trigger("click");
//事件触发(3)(不触发浏览器行为)
// $(document).triggerHandler("mouseenter");
// $(document).triggerHandler("click");
$("input").on("focus", function () {
alert("我获取了焦点！");
});
//事件触发(2)(触发浏览器行为)(执行程序，触动事件)
// $(document).click(function () {
// $("input").trigger("focus");
// });
//事件触发(3)(不触发浏览器行为)(只执行程序，不触动事件)
$(document).click(function () {
$("input").triggerHandler("focus");
});
})
</script>
</head>
<body>
<input type="text"/>
</body>
</html>
10-事件对象.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
$(document).on("click", {},function (e) {
console.log(e.data);
console.log(e.currentTarget );
console.log(e.target );
console.log(e.pageX );
console.log(e.type );
console.log(e.which );
console.log(e.keyCode);
});
})
</script>
</head>
<body>
</body>
</html>
11-回车换行.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//需求：在input中安回车，插入条光标跳转到下一个input
$("input").on("keyup", function (e) {
if(e.keyCode === 13){
// alert("您按了，回车键！");
//跳转到下一行：下一个input获取插入条光标。
// focus();//js和jq中一模一样的方法
$(this).next().next().focus();
// $(this).next().next()[0].focus();
}
});
$("input").on("mouseenter", function (e) {
//选定所有内容(能够输入内容的标签)
$(this).select();
});
})
</script>
</head>
<body>
<input type="text" value="我是中国人！"/><br>
<input type="text" value="我是中国人！"/><br>
<input type="text" value="我是中国人！"/><br>
<input type="text" value="我是中国人！"/><br>
<input type="text" value="我是中国人！"/><br>
<input type="text" value="我是中国人！"/><br>
<input type="text" value="我是中国人！"/><br>
<div>nihao </div>
</body>
</html>
12-按键变色（event）.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.wrap {
width: 400px;
height: 400px;
margin: 100px auto 0;
}
.wrap h1 {
text-align: center;
}
.wrap div {
width: 400px;
height: 300px;
background: pink;
font-size: 30px;
text-align: center;
line-height: 300px;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//需求：在页面上，按键.是哪个颜色的首写字母div就改变为该颜色，然后span内容赋值。
//步骤：
//1.给document绑定keyup事件
//2.获取值，根据此值，给div和span上色和内容
var div = $("#bgChange");
var span = $("#keyCodeSpan");
//绑定事件
$(document).keyup(function (e) {
//调用方法
setColor(e.keyCode);
});
function setColor(aaa){
//alert(e.keyCode);
//2.获取值，根据此值，给div和span上色和内容
switch (aaa){
case 80:
//修改内容pink
setEle("pink",aaa);
break;
case 66:
//修改内容blue
setEle("blue",aaa);
break;
case 79:
//修改内容orange
setEle("orange",aaa);
break;
case 82:
//修改内容red
setEle("red",aaa);
break;
case 89:
//修改内容yellow
setEle("yellow",aaa);
break;
default :
alert("系统没有设置该颜色！");
}
function setEle(a,b){
div.css("background-color",a);
span.text(b);
}
}
//1.给document绑定keyup事件
// $(document).keyup(function (e) {
// //alert(e.keyCode);
// //2.获取值，根据此值，给div和span上色和内容
// switch (e.keyCode){
// case 80:
// //修改内容pink
// div.css("background-color","pink");
// span.text(e.keyCode);
// break;
// case 66:
// //修改内容blue
// div.css("background-color","blue");
// span.text(e.keyCode);
// break;
// case 79:
// //修改内容orange
// div.css("background-color","orange");
// span.text(e.keyCode);
// break;
// case 82:
// //修改内容red
// div.css("background-color","red");
// span.text(e.keyCode);
// break;
// case 89:
// //修改内容yellow
// div.css("background-color","yellow");
// span.text(e.keyCode);
// break;
// default :
// alert("系统没有设置该颜色！");
// }
// });
})
</script>
</head>
<body>
<div class="wrap">
<h1>按键改变颜色</h1>
<div id="bgChange">
keyCode为：
<span id="keyCodeSpan">80</span>
</div>
</div>
</body>
</html>
14-五角星案例.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: #ff3100;
}
.comment li {
float: left;
cursor: pointer;
}
ul {
list-style: none;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
var wjx_none = '☆'; // 空心五角星
var wjx_sel = '★'; // 实心五角星
//需求1：鼠标放上去当前的li和之前所有的li内容全部变为实心五角星，移开变为空心。
$(".comment li").on("mouseenter", function () {
//当前五角星，和之前的所有五角星，全部是实心的，其他的为空心
// $(this).text(wjx_sel).prevAll("li").text(wjx_sel);
// $(this).nextAll("li").text(wjx_none);
$(this).text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
});
$(".comment li").on("mouseleave", function () {
//bug：如果没有点击过li，那么会出现无法清除的现象，处理办法就是先判断，看看是否有current类
if($("li.current").length === 0){
$(".comment li").text(wjx_none);
}else{
//当鼠标移开的时候，谁有current类名，那么当前和之前所有的li前部是实心五角星，后面的所有li都是空心
$("li.current").text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
}
});
//需求2：鼠标点击那个li，当你前li和之前所有的li都变成实心五角星，其他变为空心。
$(".comment li").on("click", function () {
//点击哪个li给他加一个类名。清空其他所有的li的类名
$(this).attr("class","current").siblings("li").removeAttr("class");
});
});
</script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
15-each修改透明度.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li {
width: 200px;
height: 200px;
margin: 20px;
float: left;
list-style: none;
text-align: center;
font: 50px/200px "simsun";
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(function () {
//设置不一样的盒子透明度逐渐递增
$("ul li").each(function (index,element) {
//console.log(index+"---"+element.tagName);
$(element).css("opacity",(index+1)/10);
});
});
</script>
</head>
<body>
<ul>
<li class="aaa1">1</li>
<li class="aaa2">2</li>
<li class="aaa3">3</li>
<li class="aaa4">4</li>
<li class="aaa5">5</li>
<li class="aaa6">6</li>
<li class="aaa7">7</li>
<li class="aaa8">8</li>
<li class="aaa9">9</li>
<li class="aaa10">10</li>
</ul>
</body>
</html>
16-多库共存.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(function () {
//打印版本号。
// console.log($.fn.jquery);
//让1.11.1放弃$的使用权
$.noConflict();
console.log($.fn.jquery);
console.log(jQuery.fn.jquery);
//放弃两个符号的使用权，同时定义一个新的使用权
// var MrLv = $.noConflict(true);
// console.log($.fn.jquery);
// console.log(jQuery.fn.jquery);
// console.log(MrLv.fn.jquery);
})
</script>
</head>
<body>
</body>
</html>
17-插件之改变背景色.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: black;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script src="jquery.color.js"></script>
<script>
$(function () {
//获取按钮，改变盒子的背景色；
$("button").on("click", function () {
$("div").animate({"width":200,"background-color":"red"},2000, function () {
alert("动画结束");
});
});
})
</script>
</head>
<body>
<button>变色</button>
<div></div>
</body>
</html>
18-插件之懒加载.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
height: 3000px;
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
$(function () {
//懒加载调用
//使用插件：1.引包。(必须在jquery之下) 2.通过调用方法实现功能，而参数的不同，功能也可能不同。
$("img.lazy").lazyload();
})
</script>
</head>
<body>
<div></div>
<!--<img src="images/02.jpg" alt=""/>-->
<img class="lazy" data-original="images/02.jpg" width="640" height="480">
</body>
</html>
19-自定义插件.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.js"></script>
<script src="jquery-MrLv-1.11.1-min.js"></script>
<script>
$(function () {
//调用插件中的方法
//第一种制作方法
// $("button").on("click", function () {
// $("button").setColorRed();
// })
//第二种绑定方法
$("button").on("click", function () {
$.setColorRed($(this));
})
})
</script>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
</body>
</html>
//绑定到原型上,调用者是jquery对象
$.fn.setColorRed = function () {
this.css({"color":"red"});
}
//绑定到$上，调用者是$
$.setColorRed = function (e) {
e.css({"color":"red"});
}
