Article Directory
Introduction and use
- Introduction
jQuery: Currently the most widely used js library, which greatly simplifies js programming
Official document: https://jquery.com/Online
manual: https://www.runoob.com/manual/jquery/
- Reference: Download to local
Download address: https://code.jquery.com/, click the corresponding version of the compressed file (minified) and paste the url in the pop-up code to the web page to open it, and after the web page is saved, place it in the js directory to be quoted
<script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
- Reference: Web Reference
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous">
</script>
jQuery selector
- Basic selector
// 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>
- Select sibling and parent elements
// 选择div元素前紧挨的同辈元素
$("div").prev();
// 选择div元素之前所有的同辈元素
$("div").prevAll();
// 选择div元素后面紧挨的同辈元素
$("div").next();
// 选择div元素后面所有的同辈元素
$("div").nextAll();
- Select filter
// 选择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();
- Get the index of the element
index() method to get the index of the element
<!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>
- Wait for the element to load
<script type="text/javascript">
// js中window.onload
window.onload = function(){
};
// jQuery中等待页面加载完成
$(document).ready(function(){
});
</script>
jQuery operation style
- Get element style
$('#box').css('width')
$('#box').css('color')
- Modify element style
$('#box').css('width', '100%');
$('#box').css('height', '300px');
$('#box').css({
'width': '100px', 'background': 'red'});
- Add or remove element styles
// 添加hide属性
$('#box').addClass('hide'); // 添加hide属性
$('#box').removeClass('box1'); // 移除box1属性
$('#box').toggleClass('box5'); // 重复切换样式
jQuery events
click(): // mouse click
change(): // element change
mouseover(): // mouse enters the child element to trigger
mouseout(): // mouse leaves the child element to trigger
mouseenter(): // the mouse enters the child element does not trigger
mouseleave(): // The mouse leaves the child element without triggering
hover(): // Specify the processing event
ready() for mouseenter() and mouseleave() at the same time : // Wait for DOM loading to complete
resize(): // Browser window size Change trigger
scroll(): // The scroll bar position changes trigger
submit(): // Trigger form submission
- Bind the click event
<script type="text/javascript">
$(document).ready(function(){
$('.box').click(function(){
$(this).removeClass('m')
$(this).addClass('n')
})
});
</script>
jQuery operation attributes
// 设置或返回被选元素的属性值
$('.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 operation element
- Get text content
.text(): Set or return the text content of the selected element.
html(): Set or return the content of the selected element (including html tags)
.val(): Set or return the value of the form field
<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>
- Add new HTML content
.after(): Insert content after the selected
element.before(): Insert content before the
selected element.
append(): Insert content at the end of the selected element.prepend(): Insert at the beginning of the selected element content
// 添加砸input标签的外部之后和之前
var input1 = $('.input1')
input1.after('<span>添加在标签外部之后</span>')
input1.before('<span>添加在标签外部开头</span>')
// 添加砸div标签的内部的开头和结尾
var box2 = $('.box2')
box2.append('<span>添加在标签内部末尾</span>')
box2.prepend('<span>添加在标签内部开头</span>')
- Delete element/content
.remove(): remove the selected element and its
subelements.empty(): empty the selected element
// 递归删除box1标签
var box1 = $('.box1')
box1.remove()
// 删除box1标签内部元素
var box2 = $('.box2')
box2.empty()
jQuery effect function
.hide(): hide the selected element.
show(): display the selected element
. stop(): stop the animation on the selected element.
toggle(): switch the selected element between display and hide