每个页面中一定要先引入jQuery文件
使用this 在jQuery中在一定要使用$(this) 代表当前对象
1.jQuery获取元素对象
$('选择器')
选择器可以是：标签选择器、类选择器、ID选择器、后代选择器、子元素选择器、全局选择器
$('button')
2.绑定事件
$('选择器').事件类型( 事件处理函数 )
注意：事件类型不加on
$('button').click(function () {
? ? ? ? ?alert('你好')
?})
3.入口函数----页面加载
<script>
// 使用页面加载函数： 可以实现先写js代码 再写标签
// $(function(){ 所有js代码 })
$(function(){
? ? ?// 获取元素并绑定事件： $('选择器').click( 事件处理函数 )
? ? ? $('button').click(function () {
? ? ? ? ? ? ? ? alert('你好')
? ? ? })
})
</script>
<button>按钮</button>
4.DOM对象和jQuery对象互相转换
将DOM对象转换成jQuery对象 ：$(DOM对象)
将jQuery对象转换成DOM对象： jQuery对象[下标] 或 jQuery对象.get(下标)
一般常用：将DOM对象转换成jQuery对象，方便使用jQuery中的简单办法
<head>
<script src="../jquery-3.7.0.js"></script>? ? // jquery-3.7.0.js文件需要导入
</head>
<body>
<button>按钮</button>
<script>
// 原生js获取DOM对象 只能使用DOM对象的方法 元素.onclick = function(){ }
var btn1 = document.querySelector('button')
console.log(btn1);
// 使用jQuery获取jQuery对象 只能使用jQuery对象的方法 元素.click( function(){} )
var btn2 = $('button')
console.log(btn2);
</script>
5.隐式迭代
隐式迭代：根据选择器获取元素后，不需要循环遍历，直接绑定事件即可， 就会将所有元素都添加事件
<ul>
? ? ?<li>11</li>
? ? ?<li>12</li>
? ? ?<li>13</li>
? ? ?<li>14</li>
? ? ?<li>15</li>
</ul>
<script>
// 获取所有的li 都会添加上事件
$('li').click(function(){
? ? ? ? alert('你好')
})
</script>
6.jQuery显示、隐藏元素
jQuery 元素
?隐藏元素：元素.hide()
?显示元素：元素.show()
<head>
<script src="../jquery-3.7.0.js"></script>
<style>
div {
? ? ? width: 100px;
? ? ? height: 100px;
? ? ? background-color: pink;
}
</style>
</head>
<body>
<div></div>
<input class="b1" type="button" value="按钮1">
<input class="b2" type="button" value="按钮2">
<script>
// 盒子 100*100 pink 点击按钮1 隐藏盒子 点击按钮2 显示盒子
$('.b1').click(function () {
? ? ? $('div').hide()
})
$('.b2').click(function () {
? ? ? $('div').show()
})
</script>
7.jQuery元素样式相关
?获取元素的样式：元素.css('样式名') ------ 不使用驼峰命名法，跟css一样 颜色使rgb格式
?设置元素的样式：元素.css('样式名','值')
?设置多样式：元素.css( {'样式名1':'值1' , '样式名2':'值2' } )
<head>
<script src="../jquery-3.7.0.js"></script> ? // jquery-3.7.0.js文件需要导入
<style>
div{
? ? ?width: 100px;
? ? ?height: 100px;
? ? ?background-color: pink;
}
</style>
</head>
<body>
<div>盒子</div>
<input class="b1" type="button" value="按钮1">
<input class="b2" type="button" value="按钮2">
<script>
? ? ? ?// 100*100的盒子 在控制台输出盒子背景颜色
? ? ? ?console.log( $('div').css('background-color') );
? ? ? ?// 点击按钮1 将盒子的背景颜色设置成绿色 green
? ? ? ?$('.b1').click(function(){
? ? ? ? ? ? $('div').css('background-color','green')
? ? ? ?})
? ? ? ?// 点击按钮2 将盒子的背景颜色设置成黄色 、 字体变成红色 、字体大小30px
? ? ? ?$('.b2').click(function(){
? ? ? ? ? ? $('div').css({'background-color':'yellow', 'color':'red' , 'font-size':'30px'})
? ? ? ?})
</script>
8.jQuery类名相关
添加：元素.addClass('类名')
?删除：元素.removeClass('类名')
判断有没有指定类名：元素.hasClass('类名')? // true false
?切换类名: 元素.toggleClass('类名')? // 如果有就删掉 没有就加上
9.获取兄弟元素、链式编程
兄弟元素：元素.siblings()
链式编程：元素.操作.siblings().操作
?同时操作当前元素和兄弟元素
10.jQuery元素文字内容
?获取 元素.text()
?设置 元素.text('值')