js与jq小项目集锦
文章目录
- 一、两级联动
- 1、实现效果
- 2、js代码
- 3、jq代码---创建标签+append实战
- 二、全选反选取消
- 1、实现效果
- 2、js代码
- 3、jq代码---菜鸟版
- 4、jq代码---优化版（each循环+this指针实战）
- 三、模态对话框
- 1、实现效果
- 2、js代码
- 3、jq代码---类属性操作
- 4、踩坑实例---display优先级问题
- 四、复制样式条
- 1、实现效果
- 2、js代码
- 3、jq代码---clone实战
- 五、回到顶部---css操作（scrollTop）
- 1、实现效果
- 2、jq代码
一、两级联动
1、实现效果
2、js代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
select{
height: 25px;
margin: 10px;
}
style>
head>
<body>
<select name="heihei" id="province">
<option>请选择省份:option>
select>
<select name="haha" id="city">
<option>请选择市:option>
select>
body>
<script>
data={"四川省":["阆中市","成都市","南充市","绵阳市"],"陕西省":["延安市","西安市"],"上海市":["虹口区","嘉定区"]};
let province_obj = document.getElementById("province");
let city_obj = document.getElementById("city");
for (let i in data){
let option_obj = document.createElement("option");
option_obj.innerText=i;
province_obj.appendChild(option_obj);
}
// onchange：在用户改变该js对象的输入域的内容时执行JavaScript代码
province_obj.onchange=function(){
city_obj.length=1; // 每次省份的选择，都应该把市添加的option标签删除，length=1，代表只保留第一个option标签
// this.selectedIndex代表被选择的select标签的option标签的index是多少
let city_arr = data[this[this.selectedIndex].innerText];
for (let i = 0;i<city_arr.length;i++){
let option_obj = document.createElement("option");
option_obj.innerText=city_arr[i];
city_obj.appendChild(option_obj);
}
}
script>
html>
3、jq代码—创建标签+append实战
二、全选反选取消
1、实现效果
2、js代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
style>
head>
<body>
<button onclick="select('all')">全选button>
<button onclick="select('remove')">取消button>
<button onclick="select('reverse')">反选button>
<table border="1" id="table">
<tr>
<td><input type="checkbox">td>
<td>222td>
tr>
<tr>
<td><input type="checkbox">td>
<td>333td>
tr>
<tr>
<td><input type="checkbox">td>
<td>444td>
tr>
<tr>
<td><input type="checkbox">td>
<td>444td>
tr>
table>
body>
<script>
function select(option){
let inputs = document.getElementsByTagName('input');
for (let i = 0;i<inputs.length;i++){
let ele = inputs[i];
if (option === 'all'){
ele.checked=true;
}else if (option === 'remove'){
ele.checked=false;
}else{
if (ele.checked){
ele.checked=false;
}else{
ele.checked=true;
}
}
}
}
script>
html>
3、jq代码—菜鸟版
<script src="jquery-3.5.1.js">script>
<script>
function select(option){
if (option === 'all'){
$('input').prop('checked',true);
}else if (option === 'remove'){
$('input').prop('checked',false);
}else{
let index = 0;
while(true){
if (index === 4){
break;
}
let check = $('input')[index].checked
// 注意后面两个$('input')[index].checked不能用check替换了，因为替换了你也只是修改的check的值，和$('input')[index].checked无关。
check === true ? $('input')[index].checked=false:$('input')[index].checked=true;
index++;
}
}
}
script>
4、jq代码—优化版（each循环+this指针实战）
<script src="jquery-3.5.1.js">script>
<script>
function select(choice) {
$(':checkbox').each(function () { // 主要是用了each遍历
if (choice === 'all'){
$(this).prop('checked',true); // 这里的this,each循环遍历的谁就是谁
}
else if (choice === 'cancel'){
$(this).prop('checked',false);
}
else{
if($(this).prop('checked')){
$(this).prop('checked',false);
}
else {
$(this).prop('checked',true);
}
}
})
}
script>
三、模态对话框
1、实现效果
2、js代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.back{
background-color: white;
background-image: url("http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg");
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: #7f7f7f;
opacity: 0.5;
}
.hide{
display: none;
}
.models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
width: 200px;
background-color: skyblue;
}
style>
head>
<body>
<div class="back">
<input id="ID1" type="button" value="click" onclick="action('show')">
div>
<div class="shade hide">div>
<div class="models hide">
<input id="ID2" type="button" value="cancel" onclick="action('hide')">
div>
<script>
function action(act){
var ele=document.getElementsByClassName("shade")[0];
var ele2=document.getElementsByClassName("models")[0];
if(act=="show"){
ele.classList.remove("hide");
ele2.classList.remove("hide");
}else {
ele.classList.add("hide");
ele2.classList.add("hide");
}
}
script>
body>
html>
3、jq代码—类属性操作
这个实现方法很多，除了下面这个，你还可以直接attr操纵display属性。还可以使用show、hide方法！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
position: fixed;
}
.back{
height: 690px;
width: 1280px;
background-image: url("http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg");
}
.hidden{
display: none;
}
.shadow{
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background: #7f7f7f;
opacity: 0.4;
}
.model{
position: fixed;
top: 50%;
left: 50%;
height: 200px;
width: 200px;
margin-left: -100px;
margin-top: -100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="back">
<input id="open" type="button" alt="click me to open models!" value="click">
</div>
<div class="shadow hidden"></div>
<div class="model hidden">
<input id="close" type="button" alt="click me to close models!" value="cancel">
</div>
</body>
<script src="jquery-3.5.1.js"></script>
<script>
$('#open').click(function(){
$('.model').removeClass("hidden");
$('.shadow').removeClass("hidden");
});
$('#close').click(function(){
$('.model').addClass("hidden");
$('.shadow').addClass("hidden");
});
</script>
</html>
4、踩坑实例—display优先级问题
<head>
<style>
.active{
display: block;
}
.shadow{
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background: #7f7f7f;
opacity: 0.4;
display: none;
}
.model{
position: fixed;
top: 50%;
left: 50%;
height: 200px;
width: 200px;
margin-left: -100px;
margin-top: -100px;
background-color: skyblue;
display: none;
}
</style>
</head>
<body>
<div class="back">
<input id="open" type="button" alt="click me to open models!" value="click">
</div>
<div class="shadow"></div>
<div class="model">
<input id="close" type="button" alt="click me to close models!" value="cancel">
</div>
</body>
<script src="jquery-3.5.1.js"></script>
<script>
$('#open').click(function(){
$('.model').addClass("active");
$('.shadow').addClass("active");
});
$('#close').click(function(){
$('.model').removeClass("active");
$('.shadow').removeClass("active");
});
</script>
</html>
上面这个代码是无法实现点击click，实现模态框的。和上面的第3点唯一区别是一个是原本自带display: none，实现隐藏shadow、model，添加类active，实现display: block；一个是添加类hidden，实现隐藏shadow、model，移除类hidden，实现显示标签。这个究竟是为什么呢？
答：因为none的优先级大于block，你原本自带display: none，然后添加display: block，block干不过none，因此无法显示shadow、model。
怎么办？
.active{
display: block !important;
}
'加个!important，把优先级提到最高即可！'
四、复制样式条
1、实现效果
2、js代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div class="whole_area">
<div class="one_area">
<input type="button" value="+" onclick="copy()">
<input type="text">
div>
div>
body>
<script>
let whole = document.getElementsByClassName('whole_area')[0];
function copy(){
let area = document.getElementsByClassName('one_area')[0];
let copy_area = area.cloneNode(true);
copy_area.firstElementChild.value='-';
copy_area.firstElementChild.setAttribute('onclick','remove(this)');
copy_area.firstElementChild.style.width="24px";
whole.appendChild(copy_area);
}
function remove(self){
whole.removeChild(self.parentNode);
}
script>
html>
3、jq代码—clone实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="whole_area">
<div class="one_area">
<input type="button" value="+" onclick="copy(this)">
<input type="text">
</div>
</div>
</body>
<script src="jquery-3.5.1.js"></script>
<script>
function copy(self){
let $ele = $(self).parent().clone();
let $button = $ele.children().eq(0)
// 这个不能使用text、innerText，必须使用jq方法对input值进行操作的val方法
$button.val('-');
$button.css('width','24px'); //设置button按钮的大小，使其和+button大小保持一致
$button.attr('onclick','remove(this)'); //为-button绑定点击事件
$('.whole_area').append($ele);
}
function remove(self){
$(self).parent().remove();
}
</script>
</html>
五、回到顶部—css操作（scrollTop）
1、实现效果
2、jq代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动事件</title>
<script src="jquery-3.5.1.js"></script>
<style>
img{
width: 100%;
display: none;
cursor: pointer;
}
#box{
width:1000px;
height:1200px;
margin:0 auto;
border:1px solid red;
overflow:hidden;
}
#img_div{
width: 70px;
height: 70px;
position:fixed;
bottom: 20px;
right: 20px;
border-radius: 50%;
overflow: hidden;
}
</style>
<script>
$(function(){
$(window).scroll(function(){ //实时监控整个浏览器窗口的滚动事件
let value = $('html').scrollTop();
if(value>300){
$('img').fadeIn(300);
}else{
$('img').fadeOut(300);
}
});
$('img').click(function(){
// $('html').scrollTop(0); 瞬间回到顶部,没有一个平滑的过程，用户体验不好
$('html').animate({'scrollTop':0},'slow') //定时器，在一段时间内回到顶部
})
})
</script>
</head>
<body>
<div id="box"></div>
<div id="img_div">
<img src="a1.png" alt="回到顶部">
</div>
</body>