事件

# 以后用的地方非常多，需要大家掌握，事件很多，但是不是每个都需要掌握的
'''达到某个条件，自动触发的动作就是事件'''
常用事件
1. onclick        当用户点击某个对象时调用的事件句柄。
2. onfocus        元素获得焦点。
3. onblur         元素失去焦点。  
4. onchange       域的内容被改变。
5. onload         一张页面或一幅图像完成加载。
6. onmouseout     鼠标从某元素移开。
7. onmouseover    鼠标移到某元素之上。

绑定方式：

方式一：
<div id="d1" onclick="changeColor(this);">点我</div>
<script>function changeColor(ths) {ths.style.backgroundColor="green";}
</script>方式二：
<div id="d2">点我</div>
<script>var divEle2 = document.getElementById("d2");divEle2.onclick=function () {this.innerText="呵呵";}
</script>

jQuery

# jQuery它的内部封装了很多的js代码，并且额外增加了很多功能----->它就是js 的一个类库
'''在python中，我们有模块这个概念，js中没有模块的概念，与类库的概念，类库就相当于是我们的模块'''
# 使用了jquery我们能够写更少的js代码了，所以，以后我们也大多时候都会写jquery代码，而很少写js代码了
jquery是对js 的一个高度封装，我们直接学习封装之后的代码

# jquery介绍：
1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。------->使用jquery不能担心兼容性问题
2. 它的宗旨就是：“Write less, do more.“ #
3. 要想使用jquery，必须下载使用它，然后引入都我们的html文档中
4. 下载的这个jquery文件大小只要即是KB，很小，几乎不影响加载速度

# 学习jQuery内容：
1. 选择器
2. 筛选器
3. 样式操作
4. 文本操作
5. 属性操作
6. 文档处理
7. 事件
8. 动画效果
9. 插件
10. each、data、Ajax(放在Django中学---》重要)
# jQuery版本
1.x
2.x
3.x # 直接学习最新版本

# jQuery文件去哪里下载？
1. 去官网：https://jquery.com/
2. 第三方：https://jquery.cuishifeng.cn/index.html
3. bootcdn网站下载：https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js
4. 使用jquery文件有两种方式：
    1、 把文件下载下来，离线使用
    2、 不下载，直接通过cdn链接使用(你的电脑必须有网)
5. 下载。

# jquery基本使用
jQuery("selector").action()
jQuery("#d1").css('color', 'red');
# jQuery === $
jQuery("#d1").css('color', 'red');=============>$("#d1").css('color', 'red')

# 学习jQuery的步骤：
1. 先学会如何查找标签
2. 找到标签之后在进行操作标签
 

先学会如何查找标签

基本选择器

1. id			$("#id")
2. class		$(".className")
3. 标签选择器     $("tagName")

补充：标签对象和jQuery对象

var h1 = $("#h1");  // S.fn.init(1) =================> 它是jquery对象，标签对象'''两个对象之间可以进行互相转换'''
jquery对象转为标签对象:# 直接通过下标取值
标签对象如何转为jquery对象：document.getElementById('id')================>$(document.getElementById('id'));
'''如果是jquery对象的话，可以使用jquery给你封装的好多好多的方法'''

其他选择器

$(".c1")-------------->具有class=c1的所有标签
$("div.c1")-------------->具有class=c1的div标签

基本筛选器：

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

属性选择器

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

表单筛选器

:text
:password
:file
:radio
:checkbox:submit
:reset
:button<select id="s1"><option value="beijing">北京市</option><option value="shanghai">上海市</option><option selected value="guangzhou">广州市</option><option value="shenzhen">深圳市</option>
</select>$(":selected")  // 找到所有被选中的option$(':checked')  # 它会将checked和selected都拿到
$(':selected')  # 它不会 只拿selected
$('input:checked')  # 自己加一个限制条件

筛选器方法

# 下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")# 上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")# 父亲元素：
$("#id").parent()# 儿子元素
$("#id").children();// 儿子们
var div = $('#d1').children()[0];
console.log(div);# 查找
$("div").find("p")----------------->等价于$("div p")
$(".c1").find("a")----------------->等价于$(".c1 a")# 补充：
.first() // 获取匹配的第一个元素$('div span:first')-------------->$('div span').first()
.last() // 获取匹配的最后一个元素$('div span:last')----------------->$('div span').last()
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素$('div span:not("#d3")') --------------->$('div span').not('#d3')
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

样式操作

classList.add()------------------>addClass();// 添加指定的CSS类名。
classList.reomve()----------------->removeClass();// 移除指定的CSS类名。
classList.containes()------------------>hasClass();// 判断样式存不存在
classList.toggle()--------------->toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

CSS操作

$("p").css("color", "red"); 
$("p").css("color", "red").css('','').css('',''); 

文本操作(掌握)

innerHTML--------------->html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值