JQuery-学习笔记
引入jquery：
<!-- 引入jquery -->
<script type="text/javascript" src="js/jquery-3.5.1.js"> </script>
使用jquery：
<!-- 使用jquery -->
<script type="text/javascript">
//alert("hello");
$(document).ready(function(){ //加载函数
alert("hello jquery");
});
</script>
初始化函数：也叫加载函数，当页面加载完毕时自动执行（当网页中的dom元素（指结构，不包含结构里的东西）全部加载完毕后立刻执行，表单、div、标签等都是dom元素）。一个页面可以有多个
$(document).ready( function(){ ... } );
简化写法：$( function(){ ... } );
onload：javascript，初始化函数，当网页中的dom元素（包括结构内的图片、视频等各种资源）全部加载完毕后立刻执行，表单、div、标签等都是dom元素。一个页面只有一个
window.onload
当页面加载时，加载函数和onload都会执行
语句中$等价于jQuery
dom模型
将html、xml等文档结构的标签语言看成dom模型（可以将网页结构看成一棵树状结构）
dom节点有三种：
元素节点：<head>、<body>、<ul>、<p> 等...
属性节点：元素节点所带属性（如 <h1 align="..."> 中的 align）title、src、alt等...
文本节点：标签内容（如 <p>啦啦啦</p> 中的啦啦啦）
dom对象：通过javascript获取的对象（javascript对象）
以上三种节点类型的具体对象就是dom对象
使用层面：凡是JavaScript能够直接操作的对象，就是dom对象
如：
var color = document.getElementById("myColor");
alert(color.innerHTML);
通过js获取到的color对象就是一个dom对象
jQuery对象：
凡是jQuery能够直接操作的对象，就是jQuery对象
如：
$(document).ready(function(){ //加载函数
//alert("hello jquery");
var $color = $("#myColor"); //通过jQuery获取到的color对象就是一个jQuery对象
alert($color.html()+"--jquery...");
});
同一个元素，可以成为一个dom对象（javascript对象），也可以成为一个jquery对象
注：dom对象只适用于javascript的各种语法，jquery对象只适用于jquery的各种语法。两种对象各自独立
如color是dom对象，所以可以使用javascript属性或方法：color.innerHTML
$color是jquery对象，所以可以使用jquery属性或方法：$color.html() （html()方法可以获取网页元素内容；jquery对象.length可以获取对象个数[jquery对象默认是数组或集合]）
建议：
js对象：直接写名字，如color
jquery对象：加上$，如$color
dom对象和jquery对象的转换：
dom对象-->jquery对象：jquery工厂，$（dom对象）
jquery对象-->dom对象：
基础：jquery对象默认是一个数组或集合；dom对象默认是一个单独的对象
所以将jquery对象-->dom对象实质上就是将数组或集合中的元素取出（对于数组：数组[0]、对于集合：get(0)）
jquery选择器
jquery选择器：jquery根基
1.基本选择器
①标签选择器：$("标签名")：获取标签元素对象，是jquery对象形式
如： $("p").html()
$("p").length
②类选择器：$（".class值"）
③id选择器：$（"#id值"）
④并集选择器：并集有或的含义，多个类别以逗号间隔
如：$（".class值，#id值"）
⑤交集选择器：必须同时存在，多个符号连续直接写
如：$("标签名.class值") （既是该标签又包含该class值）
注：不能出现歧义（如先写class值再接着写标签名）
交集选择器在交接处只能是以.或#开头的选择器
⑥全局选择器：选中全部的元素，$（"*"）
2.层次选择器（只取后面的）
①相邻选择器：$（"选择器1 + 选择器2"） 紧邻选择器1后面的选择器
②同辈选择器：$（"选择器1 ~ 选择器2"）
③后代选择器（所有后代）：$（"选择器1 选择器2"） （中间有空格）
④子代选择器（第一层后代）：$（"选择器1 > 选择器2"）
3.属性选择器 [ ... ]
①$（ "[属性名]" ）：选中全部元素中有指定属性的元素
②$（ "[属性名=属性值]" ）：属性值可以加单引号也可以不加
③$（ "[属性名^=属性值]" ）：class以该属性值开头
④$（ "[属性名$=属性值]" ）：class以该属性值结尾
⑤$（ "[属性名*=属性值]" ）：class包含该属性值的
⑥$（ "[属性名!=属性值]" ）：class不等于该值的
4.过滤选择器 ：
过滤选择器的一些方法和一些函数类似
①基本过滤选择器 （jquery选择器从0开始）
：first：最开头那一个
：last：最后那一个
：even：偶数 （最开头的那一个是0，为偶数）
：odd：奇数
：eq（index）：第index个
：gt（index）：> index的全部元素
：lt（index）：< index的全部元素
：not（选择器）：除了选中的选择器以外的
少用：
：header：选中所有的标题元素（如h1、h2...）
：focus：获取当前焦点的元素
$（ ... ）.css（ "key" , "value" ）：设置css样式
5.可见性选择器
：visible：选中所有可见的元素
：hidden：选中所有隐藏的元素
事件
js：onxxx（）
如：onclick（）、onload（）
写在<script>内，写在ready（）外
jquery：xxx（）
如：click（）、ready（）
写在ready（）的内部
ready（function（）{
$（选择器）.事件类型（function（）{
......
}）；
}）；
jquery执行完返回jquery对象本身
windows事件：ready（）；
鼠标事件：
click（）：单击事件、
mouseover（）：鼠标悬浮、
mouseout（）：鼠标离开、
mouseenter（）、
mouseleave（）......
键盘事件：
keydown（）：按下按键时触发（按下的过程）、
keypress（）：敲击时触发（按到最下面）、
浙公网安备 33010602011771号