文章目录
简介
jQuery是一款跨主流浏览器的JavaScript库，封装了JavaScript相关方法调用，简化JavaScript对HTML DOM的操作。
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
基础
jQuery入门代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<!-- 引入库文件 -->
<script src="js/jquery-3.5.1.js"></script>
<script>
// 给button按钮绑定单击事件
$('button').click(function(){
console.log("Hello jQuery");
})
</script>
</body>
</html>
jQuery加载模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.5.1.js"></script>
<script>
// 类似于window.onload() = function() {} 等到整个DOM元素加载完成
/*
jQuery等待加载
$(document).ready(function(){
$('button').click(function(){
console.log('Hello jQuery.');
})
})
*/
$(function(){
$('button').click(function(){
console.log('Hello jQuery.');
})
})
</script>
</head>
<body>
<button>按钮</button>
</body>
</html>
DOM对象和jQuery对象的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
<script src="js/jquery-3.5.1.js"></script>
<script>
// 原生JS方式
var btn = document.getElementsByTagName('button')[0];
btn.style.backgroundColor = "red";
console.log(btn);
// jQuery方式
var obj = $('#btn');
obj.css('fontSize', '20px');
console.log(obj);
// 原生的DOM对象转换为jQuery对象
$(btn).css('color', 'white');
// jQuery对象转换为原生的DOM对象 get()方法
obj.get(0).style.fontFamily = "楷体";
// 从数组中获取第一个对象，使用[0]或者get(0)
</script>
</body>
</html>
选择器
选择器就是一个字符串，用来定位DOM对象，当你定位了DOM元素，就可以通过jQuery的函数操作DOM。
基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="d1">
id选择器
</div>
<div class="c1">
class选择器
</div>
<button>按钮</button>
<script src="js/jquery-3.5.1.js"></script>
<script>
// 1、id选择器 $('#id名')
$('#d1').css({width:'200px',height:'100px',backgroundColor:'red'});
// 当设置一组样式时可以使用js对象
// 2、类选择器 $('.class名')
$('.c1').css({width:'200px',height:'100px',backgroundColor:'yellow'});
// 3、标签选择器 $('标签名')
$('button').css({color:'red',fontSize:'20px',fontWeight:'400'});
</script>
</body>
</html>
进阶选择器
通配选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="js/jquery-3.5.1.js"></script>
<script>
// 1、通配选择器
console.log($('*').length);
// 8
</script>
</body>
</html>
分组选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="d1"></div>
<div class="c1"></div>
<span></span>
<script src="js/jquery-3.5.1.js"></script>
<script>
// 1、通配选择器
// console.log($('*').length);
// 2、分组选择器、组合选择器
$('#d1,.c1,span').css({width:'200px',height:'100px',backgroundColor:'orange',marginTop:'20px'});
$('span').css('display','block');
</script>
</body>
</html>
后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="d1"></div>
<div class="c1"></div>
<span></span>
<ul>
<li><a href="#">百度</a></li>
<li><a href="#">腾讯</a></li>
<li><a href="#">阿里</a></li>
</ul>
<script src="js/jquery-3.5.1.js"></script>
<script>
// 1、通配选择器
// console.log($('*').length);
// 2、分组选择器、组合选择器
$('#d1,.c1,span').css({width:'200px',height:'100px',backgroundColor:'orange',marginTop:'20px'});
$('span').css('display','block');
// 3、后代选择器
$('ul li a').css({textDecoration:'none',color:'blue'});
</script>
</body>
</html>
高级选择器
| 选择器 | CSS模式 | jQuery模式 |
|---|---|---|
| 子选择器 | div > p {} | $(‘div > p’) |
| next选择器 | div + p {} | $(‘div + p’) |
| nextAll选择器 | div ~ p {} | $(‘div ~ p’) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<p>子元素</p>
</div>
<p>p标签</p>
<p>p1</p>
<p>p2</p>
<span><p>p3</p></span>
<script src="js/jquery-3.5.1.js"></script>
<script>
// 1、子选择器
$('div > p').css('fontFamily','楷体');
// 2、next选择器
$('div + p').css('color', 'red');
// 3、nextAll选择器
$('div ~ p').css('fontSize', '20px');
</script>
</body>
</html>
属性选择器
| CSS模式 | jQuery模式 | 描述 |
|---|---|---|
| a[title] | $(‘a[title]’) | 获取具有这个属性的DOM对象 |
| a[title=num1] | $(‘a[title=num1]’) | 这个属性值等于num1的DOM对象 |
| a[title^=num] | $(‘a[title^=num]’) | 这个属性值的开头与num匹配 |
| a[title$=num] | =num]’) | 这个属性值的结尾与num匹配 |
| a[title*=num] | $(‘a[title*=num]’) | 这个属性值包含num时（class属性值有多个） |
| a[title!=num] | $(‘a[title!=num]’) | 获取具有这个属性，但是属性值不等于num的DOM对象 |
过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>语文</li>
<li>数学</li>
<li>外语</li>
</ul>
<script src="js/jquery-3.5.1.js"></script>
<script>
$('ul > li:first').css('color','orange');
$('ul li:last').css('color', 'blue');
$('ul li:eq(1)').css('color', 'green');
</script>
</body>
</html>
