简介和使用
- 简介
jQuery: 目前最广泛使用的一个js库,极大的简化了js编程
官方文档:https://jquery.com/
在线手册:https://www.runoob.com/manual/jquery/
- 引用:下载到本地
下载地址:https://code.jquery.com/,点击对应版本的压缩文件(minified)并将弹框代码中的url粘贴到网页打开,在网页保存后放在js目录位置即可被引用
<script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
- 引用:网络引用
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous">
</script>
jQuery选择器
- 基本选择器
// id选择器
$("#a")
// 类选择器
$(".box1")
// 属性选择器
$("div[name=test]")
// 层级选择器
$("body div")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
window.onload = function(){
// id选择器
$("#a").css({background:'blue', height: '200px'})
// 类选择器
$(".box1").css({background:'blue', height: '400px', fontSize: '50px'})
// 属性选择器
$("div[name=test]").css({background:'blue', height: '800px', fontSize: '50px'})
// 层级选择器
$("body div").css({background:'blue', width: '800px', fontSize: '50px'})
}
</script>
</head>
<body>
<div id="a" class="box1" name="test", style="width: 100%; height: 100px; background-color:red;">jquery-1</div>
</body>
</html>
- 选择同胞和父辈元素
// 选择div元素前紧挨的同辈元素
$("div").prev();
// 选择div元素之前所有的同辈元素
$("div").prevAll();
// 选择div元素后面紧挨的同辈元素
$("div").next();
// 选择div元素后面所有的同辈元素
$("div").nextAll();
- 选择过滤
// 选择div元素后代中所有的p标签
$("div").has('p');
// 选择div元素后代中class不等于p的元素
$("div").not('.p');
// 选择div元素后代中class等于p的元素
$("div").filter('.p');
// 选择第3个div
$("div").eq(2);
// 选择div的所有同辈节点
$("div")..siblings();
- 获取元素的索引
index()方法获取元素的索引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($('li').index(document.getElementById('baz'))); // 2, 传递一个DOM对象
alert($('li').index($('#baz'))); // 2, 传递一个jQuery对象
alert($('li').index($('li:gt(0)'))); // 1, 传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
alert($('#baz').index('li')); // 2, 传递一个选择器,返回#baz在所有li中的索引位置
alert($('#baz').index()); // 2, 不传递参数,返回这个元素在同辈中的索引位置
});
</script>
</head>
<body>
<ul id="u">
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
</body>
</html>
- 等待元素加载完成
<script type="text/javascript">
// js中window.onload
window.onload = function(){
};
// jQuery中等待页面加载完成
$(document).ready(function(){
});
</script>
jQuery操作样式
- 获取元素样式
$('#box').css('width')
$('#box').css('color')
- 修改元素样式
$('#box').css('width', '100%');
$('#box').css('height', '300px');
$('#box').css({'width': '100px', 'background': 'red'});
- 添加或移除元素样式
// 添加hide属性
$('#box').addClass('hide'); // 添加hide属性
$('#box').removeClass('box1'); // 移除box1属性
$('#box').toggleClass('box5'); // 重复切换样式
jQuery事件
click(): // 鼠标点击
change(): // 元素改变
mouseover(): // 鼠标进入子元素触发
mouseout() : // 鼠标离开子元素触发
mouseenter(): // 鼠标进入子元素不触发
mouseleave(): // 鼠标离开子元素不触发
hover(): // 同时为mouseenter()和mouseleave()指定处理事件
ready() : // 等待DOM加载完成
resize(): // 浏览器窗口大小改变触发
scroll(): // 滚动条位置发生改变触发
submit(): // 提交表单触发
- 绑定click事件
<script type="text/javascript">
$(document).ready(function(){
$('.box').click(function(){
$(this).removeClass('m')
$(this).addClass('n')
})
});
</script>
jQuery操作属性
// 设置或返回被选元素的属性值
$('.box').attr('class') // 设置或返回被选元素的属性值
$('.box').removeAttr('id') // 删除属性
<script type="text/javascript">
$(document).ready(function(){
var res = $('.box').attr('class') // 设置被选元素class属性对应的属性值
$('.box').attr({ name: "box", id: "box1" }) // 返回被选元素的属性和属性值
$('.box').removeAttr('id') // 删除属性名为id的属性
});
</script>
jQuery操作元素
- 获取文本内容
.text(): 设置或返回所选元素的文本内容
.html(): 设置或返回所选元素的内容(包括html标签)
.val(): 设置或返回表单字段的值
<div class="box m" name='qwe'>
<span>测试</span>
<input value="pwd">
</div>
<script type="text/javascript">
$(document).ready(function(){
var res = $('.box').text() // 测试
var res = $('.box').html() // <span>测试</span>
var res = $('input').val() // pwd
console.log(res)
});
</script>
<!---判断字段长度并弹出提示-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/demo.css">
<script type="text/javascript">
$(document).ready(function(){
$('#btn').click(function(){
var name = $('#username').val();
console.log(name);
if (name.length < 8 || name.length > 12) {
alert('长度仅支持6-12位!')
}
})
});
</script>
</head>
<body>
<div class="box1 m">
<input type='text' id='username' class="input1 n" value="">
<input type='button' id='btn'class="button1 n" value="">
</div>
</body>
- 添加新的HTML内容
.after(): 在被选元素之后插入内容
.before(): 在被选元素之前插入内容
.append(): 在被选元素内部末尾插入内容
.prepend(): 在在被选元素内部开头插入内容
// 添加砸input标签的外部之后和之前
var input1 = $('.input1')
input1.after('<span>添加在标签外部之后</span>')
input1.before('<span>添加在标签外部开头</span>')
// 添加砸div标签的内部的开头和结尾
var box2 = $('.box2')
box2.append('<span>添加在标签内部末尾</span>')
box2.prepend('<span>添加在标签内部开头</span>')
- 删除元素/内容
.remove(): 删除被选元素及其子元素
.empty(): 置空被选元素
// 递归删除box1标签
var box1 = $('.box1')
box1.remove()
// 删除box1标签内部元素
var box2 = $('.box2')
box2.empty()
jQuery效果函数
.hide(): 隐藏被选元素
.show(): 显示被选元素
.stop(): 停止在被选元素上运行动画
.toggle(): 对被选元素进行显示和隐藏的切换