JavaScript-jQuery1-笔记

每个页面中一定要先引入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>