前端基础之jQuery
一、jQuery对象
一般我们在声明一个jQuery对象变量的时候在变量名前面加上$:
（用$匹配的值是数组，加上[i]以后就成了DOM不能用jQuery中的方法了）
var $variable = jQuery对象 var variable = DOM对象 $variable[0] // jQuery对象转成DOM对象 // jQuery和DOM对象的使用： $('#i1').html(); // jQuery对象可以使用jQuery的方法 $('#i1')[0].innerHTML; // DOM对象使用DOM方法
二、查找标签
1、选择器(一下得到的结果都是一个数组)
<1>id选择器：
$('#id');
<2>标签选择器：
$('div')
<3>class选择器：
$('.c1')
<4>配合使用：
$('div.c1') // 找到有c1 class类的div标签
<5>所有元素选择器：
$('*');
<6>组合选择器：
$('#d1,.c1,p')
<7>层级选择器：x和y可以为任意选择器
$('x y'); // x的所有后代y（子子孙孙）
$('x > y'); // x的所有儿子y（儿子）
$('x + y'); // 找到所有紧挨在x后面的y（毗邻）
$('x ~ y'); // x之后所有的兄弟y
<8>基本筛选器：
:first // 第一个 :last // 最后一个 :eq(index) // 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从0开始计数 :odd // 匹配所有索引值为奇数的元素，从0开始计数 :gt(index) // 匹配所有大于给定索引值的元素 :lt(index) // 匹配所有小于给定索引值的元素 :not(元素选择器) // 移除所有满足not条件的标签 :has(元素选择器) // 选取所有包含一个或多个标签在其内的标签（值得是从后代元素找）
例子：
$('div:has(h1)') // 找到所有后代中有h1标签的div标签
$('div:has(.c1)') // 找到所有后代中c1样式类的div标签
$('li:not(.c1)') // 找到所有不包含c1样式类的li标签
$('li:not(:has(a))') // 找到所有后代中不含a标签的li标签
自定义模态框，使用jQuery实现弹出和隐藏功能。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>自定义模态框</title> <style> .cover { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: darkgrey; z-index: 999; } .modal { width: 600px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -300px; margin-top: -200px; z-index: 1000; } .hide { display: none; } </style> </head> <body> <input type="button" value="弹" id="i0"> <div class="cover hide"></div> <div class="modal hide"> <label for="i1">姓名</label> <input id="i1" type="text"> <label for="i2">爱好</label> <input id="i2" type="text"> <input type="button" id="i3" value="关闭"> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> var tButton = $("#i0")[0]; tButton.onclick=function () { var coverEle = $(".cover")[0]; var modalEle = $(".modal")[0]; $(coverEle).removeClass("hide"); $(modalEle).removeClass("hide"); }; var cButton = $("#i3")[0]; cButton.onclick=function () { var coverEle = $(".cover")[0]; var modalEle = $(".modal")[0]; $(coverEle).addClass("hide"); $(modalEle).addClass("hide"); } </script> </body> </html>
<9>属性选择器：
[attribute] [attribute = value] // 属性等于 [attribute != value] // 属性不等于
例子：
// 示例 <input type='text'> <input type='password'> <input type='checkbox'> $('input[type='checkbox']'); // 取到checkbox类型的input标签 $('input[type!='text']'); // 取到类型不是text的input标签
<10>表单常用筛选：
:text :password :file :radio // 单选框 :checkbox // 复选框 :submit :reset :button
例子：
$(':checkbox'); // 找到所有的checkbox
<11>表单对象属性：
:enabled
:disabled
:checked
:selected
例子：
找到可用的input标签 <form> <input name='email' disabled='disabled' /> <input name='id' /> </form> $('input:enabled') // 找到可用的input标签
// 找到被选中的option： <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的option
2、筛选器
<1>下一个元素：
$('#id').next()
$('#id').nextAll()
$('#id').nextUntil('#i2')
<2>上一个元素：
$('#id').prev()
$('#id').preAll()
$('#id').preUntil('#i2')
<3>父亲元素：
$('#id').parent()
$('#id').parents() // 查找当前元素的所有的父辈元素
$('#id').parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
<4>儿子和兄弟元素：
$('#id').chidren(); // 儿子们
$('#id').siblings(); // 兄弟们
<5>查找
// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 $('div').find('p') // 等价于 $('div p') // 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。 $('div').filter('.c1') // 从结果集中过滤出有c1样式类的 // 等价于 $('div.c1')
<6>补充：
.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
<7>示例：左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>左侧菜单示例</title> <style> .left { position: fixed; left: 0; top: 0; width: 20%; height: 100%; background-color: rgb(47, 53, 61); } .right { width: 80%; height: 100%; } .menu { color: white; } .title { text-align: center; padding: 10px 15px; border-bottom: 1px solid #23282e; } .items { background-color: #181c20; } .item { padding: 5px 10px; border-bottom: 1px solid #23282e; } .hide { display: none; } </style> </head> <body> <div class="left"> <div class="menu"> <div class="title">菜单一</div> <div class="items"> <div class="item">111</div> <div class="item">222</div> <div class="item">333</div> </div> <div class="title">菜单二</div> <div class="items hide"> <div class="item">111</div> <div class="item">222</div> <div class="item">333</div> </div> <div class="title">菜单三</div> <div class="items hide"> <div class="item">111</div> <div class="item">222</div> <div class="item">333</div> </div> </div> </div> <div class="right"></div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $(".title").click(function (){ // jQuery绑定事件 // 隐藏所有class里有.items的标签 $(".items").addClass("hide"); //批量操作 $(this).next().removeClass("hide"); }); </script> 左侧菜单示例
三、操作标签
1、样式操作
<1>样式类
addClass(); // 添加指定的CSS类名 removeClass(); // 移除指定的CSS类名 hasClass(); // 判断样式存不存在 toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加 $('.c1').addClass('c2'); // 用法
<2>CSS
css('color','red'); // DOM操作：tag.style.color='red'
$('div').css('color','red'); // 将所有div标签的字体设置为红色
<3>位置
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置 position() // 获取匹配元素相对父元素的偏移 scrollTOP() // 获取匹配元素相对滚动条顶部的偏移 scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
width: 80px;
height: 50px;
right: 50px;
bottom: 50px;
background-color: #55a532;
position: fixed;
line-height: 50px;
text-align: center;
}
.c1{
width: 300px;
height: 200px;
text-align: center;
}
.hide{
display: none;
}
</style>
</head>
<body>
<button id="d1" class="hide">返回TOP</button>
<div>
<p class="c1"></p>
<p class="c1"></p>
<p class="c1"></p>
<p class="c1"></p>
<p class="c1"></p>
<p class="c1"></p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(window).scroll(function () {
if ($(window).scrollTop()>100){
$('#d1').removeClass('hide');
}else{
$('#d1').addClass('hide');
}
});
$('#d1').on('click',function () {
$(window).scrollTop(0);
})
</script>
</body>
</html>
<4>尺寸
height(); // 文本内容的高度 width(); // 文本内容的宽度 innerHeight(); // 文本内容的高度+内填充的高度 innerWidth(); // 文本内容的宽度+内填充的宽度 outerHeight(); // 文本内容的高度+内填充的高度+边框的高度 outerWidth(); // 文本内容的宽度+内填充的宽度+宽度
2、文本操作
<1>HTML代码
html() // 取得第一个匹配元素的html内容 html(val) // 设置所有匹配元素的html内容 // 把取到的标签中的内容替换成一个超链接，html()可以自动识别标签，而text()不可以 $('.c1').html("<a href='https://www.jd.com'>京东</a>");
<2>文本值
text(); // 取得所有匹配元素的内容 text(val); // 设置所有匹配元素的内容 $('#t1').text('哈哈');
<3>值
val(); // 取得第一个匹配元素的当前值 val(val); // 设置所有匹配元素的值 val([val1,val2]) // 设置checkbox、select的值 // 示例：获取被选中的checkbox或radio的值： <label for="c1">女</label> <input name="gender" id="c1" type="radio" value="0"> <label for="c2">男</label> <input name="gender" id="c2" type="radio" value="1"> // 可以使用： $("input[name='gender']:checked").val(); // 可能会被其他的选择框干扰所以要加上input
<4>自定义登录校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义登录校验</title>
<style>
#b1{
margin-top: 10px;
margin-left: 20px;
}
</style>
</head>
<body>
<div id="d1">
<label for="i1">用户名</label>
<input id="i1" type="text">
</div>
<div id="d2">
<label for="i2">密 码</label>
<input type="text" id="i2">
</div>
<button id="b1">提交</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
$('#b1').click(function () {
if (!$('#i1').val()){
if (!$('#d1').find('span').length){
$('#i1').after('<span style="color: red;">请输入用户名</span>');
}
}else{
$('#d1 span').remove();
}
if (!$('#i2').val()){
if (!$('#d2').find('span').length){
$('#i2').after('<span style="color: red">请输入密码</span>')
}
}else{
$('#d2 span').remove();
}
})
</script>
</body>
</html>
3、属性操作
<1>用于ID等或自定义属性：
attr(attrName) // 返回第一个匹配元素的属性值 attr(attrName,attrValue) // 为所有匹配元素设置一个属性 attr({k1:v1,k2:v2}) // 为所有匹配元素设置多个属性值 removeAttr() // 从每一个匹配的元素中删除一个属性
<2>用于checkbox和radio
prop() // 获取属性 返回bool值，看是否被选中 removeProp() // 移除属性
<3>注意：在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，
在3.x版本的jQuery中则没有这个问题。为了兼容性，
我们在处理checkbox和radio的时候尽量使用特定的prop()，
不要使用attr("checked", "checked")。
<input type="checkbox" value="1"> <input type="radio" value="2"> <script> $(":checkbox[value='1']").prop("checked", true); $(":radio[value='2']").prop("checked", true); </script>
<4>示例：全选、反选、取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选、反选、取消</title>
<style>
.t1{
border: 1px solid darkgray;
}
.t2{
border: 1px solid darkgray;
}
</style>
</head>
<body>
<table class="t1">
<thead>
<tr>
<th class="t2">序号</th>
<th class="t2">内容1</th>
<th class="t2">内容2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="t2"><input type="checkbox" id="i1" class="i1"></td>
<td class="t2">123</td>
<td class="t2">456</td>
</tr>
<tr>
<td class="t2"><input type="checkbox" id="i2" class="i1"></td>
<td class="t2">123</td>
<td class="t2">456</td>
</tr>
<tr>
<td class="t2"><input type="checkbox" id="i3" class="i1"></td>
<td class="t2">123</td>
<td class="t2">456</td>
</tr>
</tbody>
</table>
<button id="b1" class="b1">全选</button>
<button id="b2" class="b1">反选</button>
<button id="b3" class="b1">取消</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
$('#b1').click(function () {
$('.i1').prop('checked',true);
});
$('#b2').click(function () {
if ($('#i1').prop('checked')){
$('#i1').prop('checked',false);
}else{
$('#i1').prop('checked',true);
}
if ($('#i2').prop('checked')){
$('#i2').prop('checked',false);
}else {
$('#i2').prop('checked',true);
}
if ($('#i3').prop('checked')){
$('#i3').prop('checked',false);
}else{
$('#i3').prop('checked',true);
}
});
$('#b3').click(function () {
$('.i1').prop('checked',false);
})
</script>
</body>
</html>
