是一个模块 一个库 js封装的一个库
导入jq
<script src="jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
$ == Jquery
dom对象 _> jq对象
$(dom对象)
jq对象 _> dom对象
jq对象[0]
选择器
基本选择器
通用选择器 $('*')
标签选择器 $('div')
id选择器 $('#id')
类选择器 $('.class')
组合选择器 $('div.class1') 并集
$('div,p') 交集
层级选择器
后代选择器 $('div span')
子代选择器 $('#li>span')
毗邻选择器 $('#li+span')
弟弟选择器 $('#li~span')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul href="" id="ul">
<li> 1
<ul>
<li>11</li>
</ul>
</li>
<li id="l2">2</li>
<li> 3<a class="c1" href="www.baidu.com">百度</a></li>
<li> 4</li>
</ul>
<button id="b1">点击</button>
<script src="jquery.js"></script>
<script>
console.log($("#ul li"));
$("button").click(function () {
alert(123)
});
var b1 = document.getElementById("b1");
b1.onclick = function () {
alert(456)
}
</script>
</body>
</html>
属性选择器
$('[属性]')
$('[属性="值')
$('[属性!="值')
$('[属性^="值')
$('[属性$="值')
$('[属性*="值')
筛选器
$('选择器:筛选器')
:first 第一个
:last 最后一个
:eq(index) 按照索引
:has(选择器) 包含某个子代的父标签
:not(选择器) 排除
筛选方法
.first() last
.eq(index)
.siblings() 兄弟
.parent()
.children()
.next() .nextAll() .nextUntil('#l2')
.prev() .prevAll() .prevUntil()
.has() 包含某个子代的父标签
.filter('#l2') 当前标签包含选择器
.not(选择器) 不包含
值的操作
.text() 文本
.html() HTML标签
绑定事件
$('button').click(function () {
alert(123)
})
标签的操作
父标签.append(子标签) // 子标签添加到父标签的子代的最后
子标签.appendTo(父标签)
父标签.prepend(子标签) // 子标签添加到父标签的子代前面
子标签.prependTo(父标签)
a.after(b) // 在a标签后面添加b标签
a.before(b) // 在a标签前面添加b标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<button id="b1">添加</button>
<button id="b2">添加2</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
var li = $('<li>')
li.text('3')
$('#b2').click(function () {
var li = $('<li>')
li.text('3')
// $('li:eq(1)').after(li)
$('li:eq(2)').before(li)
})
//
// $('#b1').click(function () {
//
// var li = $(document.createElement('li'))
// // li.innerText = '5'
// var num = $('li:last').text()
// // console.log(typeof (num))
// num++;
// li.text(num)
// // console.log(li)
// // $('ul').append("<li>5</li>")
// // $('ul').append(li)
// // li.appendTo($('ul'))
//
// // $('ul').prepend(li)
// li.prependTo($('ul'))
//
//
// })
$('#b1').click(function () {
$('ul').prepend(li)
})
$('#b2').click(function () {
$('ul').append(li)
})
</script>
</body>
</html>
删除
.remove() 删除标签和事件
.detach() 删除标签 保留事件
.empty() 清空标签中的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<button id="b1">删除</button>
<button id="b2">恢复</button>
<button id="b3">清空</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
var last;
$('#b3').click(function () {
// $('li').remove()
$('ul').empty()
});
$('#b1').click(function () {
last = $('li:last').detach()
});
$('#b2').click(function () {
$('ul').append(last)
});
$('li').click(function () {
alert($(this).text())
})
</script>
</body>
</html>
克隆 复制
.clone() 复制标签
.clone(true) 复制标签 也有事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<button id="b1">添加</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#b1').click(function () {
var li = $('li:last').clone(true)
li.text(Number(li.text()) + 1)
$('ul').append(li)
})
$('li').click(function () {
alert($(this).text())
})
</script>
</body>
</html>
替换
a.replaceWith(b) // 用b替换a
b.replaceAll(a) // 用b替换a a可以是标签 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<button id="b1">替换</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#b1').click(function () {
var l2 = $('li:last')
var li = l2.clone()
li.text(Number(li.text()) + 1)
// l2.replaceWith(li)
li.replaceAll('li:eq(1)')
})
$('li').click(function () {
alert($(this).text())
})
</script>
</body>
</html>
属性的操作
.attr('属性') // 获取属性的值
.attr('属性','值') // 设置属性的值
.removeAttr('属性') // 删除某个属性
.prop('checked') // radio checkbox select(option)
.prop('checked',true)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://www.baidu.com" id="a1" class="c1">百度</a>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>
值的操作
val()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<input type="text">
<input type="radio" name="sex" value="1">
<input type="radio" name="sex" value="2">
<input type="checkbox" name="hobby" value="唱">
<input type="checkbox" name="hobby" value="跳">
<input type="checkbox" name="hobby" value="rap">
<input type="checkbox" name="hobby" value="篮球">
<select name="hobby2" id="" multiple>
<option value="1" selected>唱</option>
<option value="2">跳</option>
<option value="2">跳</option>
<option value="2">跳</option>
<option value="2">跳</option>
<option value="2">跳</option>
<option value="2">跳</option>
<option value="3">rap</option>
<option value="4">篮球</option>
</select>
</form>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>
$('button').bind('click',function () {
})
$('button').click(function () {
})
$('button').unbind('click')
各种事件
click 点击
hover 悬浮
blur 失去焦点
focus 获取焦点
change 内容变化
keyup 按键启动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p><input type="text" id="i1"></p>
<p>
<select name="" id="s1">
<option value="">北京</option>
<option value="">上海</option>
</select>
</p>
<button>点击</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
// $('button').click(function () {
// alert(123)
// })
$('button').bind('click', function () {
alert(123);
$('button').unbind('click')
})
$('#i1').focus(function () {
console.log('聚焦了')
$(this).val('')
$(this).next().remove()
})
$('#i1').blur(function () {
console.log('失去焦点了')
if ($(this).val() === '') {
var sp = $('<span>')
sp.text('不能为空')
$(this).after(sp)
}
})
$('#i1').change(function () {
console.log('内容变化了')
})
$('#i1').keyup(function (e) {
// console.log(e.keyCode)
if (e.keyCode === 27) {
alert(123)
}
})
$('#s1').change(function () {
console.log('内容变化了')
})
</script>
</body>
</html>
模态框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.mask{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(144,144,144,0.5);
}
.motai{
position: fixed;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
400px;
height: 400%;
background-color: rgba(245,73,229,0.55);
}
</style>
</head>
<body>
<button id="b1">登录</button>
<div class="c1 hide">
<div class="mask"></div>
<div class="motai">
<p><input type="text"></p>
<p><input type="text"></p>
<button>提交</button>
<button>取消</button>
</div>
</div>
<script src="jquery.js"></script>
<script>
$("#b1").click(function () {
$(".c1").removeClass("hide")
// $(".c1").addClass("hide")
// $(".c1").toggleClass("hide")
});
$(".motai button").click(function () {
$(".c1").addClass("hide")
});
$(window).keyup(function (e) {
if (e.keyCode === 27){
$(".c1").addClass("hide")
}
})
</script>
</body>
</html>
表格的操作包含全选取消反选：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide {
display: none;
}
.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(144, 144, 144, 0.5);
}
.motai {
position: fixed;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
400px;
height: 400px;
background-color: rgba(245, 73, 229, 0.55);
}
</style>
</head>
<body>
<button id="b1">新增</button>
<button onclick="selectAll()">全选</button>
<button onclick="Cancel()">取消</button>
<button onclick="reverse()">反选</button>
<table border="1">
<thead>
<tr>
<th>选择</th>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>宝元</td>
<td>不详</td>
<td>钻</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>和尚</td>
<td>男</td>
<td>合气道</td>
<td>
<button>删除</button>
</td>
</tr>
<tr class="hide">
<td><input type="checkbox"></td>
<td>2</td>
<td>和尚</td>
<td>男</td>
<td>合气道</td>
<td>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
<div class="c1 hide">
<div class="mask"></div>
<div class="motai">
<p>
<label for="name">姓名</label>
<input type="text" id="name">
</p>
<p>
<label for="sex">性别</label>
<select name="sex" id="sex">
<option value="男">男</option>
<option value="女">女</option>
<option value="不详">不详</option>
</select>
</p>
<p>
<label for="hobby">爱好</label>
<input type="text" id="hobby">
</p>
<button id="submit">提交</button>
<button>取消</button>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#b1').click(function () {
$('.c1').removeClass('hide');
// $('.c1').addClass('hide');
// $('.c1').toggleClass('hide');
});
$('.motai button').click(function () {
$('.c1').addClass('hide')
});
$(window).keyup(function (e) {
if (e.keyCode === 27) {
$('.c1').addClass('hide')
}
});
// $('#submit').click(function () {
// var name = $('#name')
// var sex = $('#sex')
// var hobby = $('#hobby')
// var hide_tr = $('tr:last')
// var tr = hide_tr.clone(true)
// tr.removeClass('hide')
//
// var td = tr.find('td');
//
//
// td.eq(1).text($('tr:not(.hide)').length)
// td.eq(2).text(name.val())
// td.eq(3).text(sex.val())
// td.eq(4).text(hobby.val())
// name.val('')
// sex.val('男')
// hobby.val('')
//
// hide_tr.before(tr)
//
//
// })
$('tr button').click(function () {
$(this).parents('tr').remove()
});
$('#submit').click(function () {
var name = $('#name');
var sex = $('#sex');
var hobby = $('#hobby');
var num = $('tr').length;
var string = `<tr><td><input type="checkbox"></td><td>${num}</td><td>${name.val()}</td><td>${sex.val()}
</td><td>${hobby.val()}</td><td><button>删除</button></td></tr>`;
// $('tbody').append('<tr> ' +
// ' <td><input type="checkbox"></td> ' +
// ' <td>' + num + '</td> ' +
// ' <td>' + name.val() + '</td> ' +
// ' <td>' + sex.val() + '</td> ' +
// ' <td>' + hobby.val() + '</td> ' +
// ' <td> ' +
// ' <button>删除</button> ' +
// ' </td> ' +
// ' ' +
// ' </tr>')
$('tbody').append(string)
});
function selectAll() {
var inputs=document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i++){
var input=inputs[i];
input.checked=true;
}
}
function Cancel() {
var inputs=document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i++){
var input=inputs[i];
input.checked=false;
}
}
function reverse() {
var inputs=document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i++){
var input=inputs[i];
if(input.checked){
input.checked=false;
}else{
input.checked=true;
}
}
}
</script>
</body>
</html>