第三十二天

jQuery"的核心
$ 符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象

		DOM对象
			根据id属性获取DOM对象    document.getElementById("id属性值");
			如果元素存在那么直接获取dom对象，如果元素不存在，值为null
			
		Jquery包装集对象
			根据id属性获取DOM对象    $("#id属性值");
			如果元素存在那么直接获取jquery对象，如果元素不存在，值为空包装集对象 (不会是null)
			
			注意：
				dom对象判断对象是否获取到，判断值是否为null
				Jquery包装集对象判断对象是否获取到，判断jquery对象的长度length 
				
		Dom转换成jquery对象
		$(dom对象)
		
		jquery对象转换成Dom

• 基础选择器
  id选择器 #idKaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲testDiv")选择id为t…(“div”)选择所有div元素
  类选择器 .class$(".blue")选择所有class=blue的元素
  选择所有元素 $("\ast ")选择页面所有元素组合选择器selector1,selector2,selectorN$("#testDiv,span,.blue")同时选中多个选择器匹配的元素

层次选择器
后代选择器 ancestor descendantKaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲parent div") …("#parent>div") 选择id为parent的直接div子元素
相邻选择器 prev + next$(".blue+img")选择css类为blue的下一个img元素同辈选择器prevsibling$(".blue ~ img") 选择css类为blue的之后的img元素

属性选择器
$("[属性]"); 选中页面中具备某样属性的元素
$("[属性 = 值]"); 选中页面中具备属性等于某个特定值的元素

表单选择器
表单元素选择器 :input 查找所有的input元素：$(":input")；<br/>注意：会匹配所有的input、textarea、select和button元素。文本框选择器:text查找所有文本框：$(":text")
密码框选择器 :password 查找所有密码框：$(":password")单选按钮选择器:radio查找所有单选按钮：$(":radio")
复选框选择器 :checkbox 查找所有复选框：$(":checkbox")提交按钮选择器:submit查找所有提交按钮：$(":submit")
图像域选择器 :image 查找所有图像域：$(":image")重置按钮选择器:reset查找所有重置按钮：$(":reset")
按钮选择器 :button 查找所有按钮：$(":button")文件域选择器:file查找所有文件域：$(":file")

过滤选择器
$(":eq(index)") 匹配元素的指定下标的元素 （下标从0开始） .eq(index)
$(":gt(index)") 匹配元素下标大于指定值元素 （下标从0开始）.gt(index)
$(":odd") 匹配奇数下标
$(":even") 匹配偶数下标
$(":checked") 匹配元素被选中

属性的分类
固有的属性
src align method
自定义的属性
abc=‘123’
返回值是boolean类型的属性
checked disabled selected

		操作属性
			attr
				获取已存在的属性，可以直接获取到具体的值，如果属性是boolean类型的也是一样 具体的值
			prop  （不能操作自定义属性）
				获取已存在的属性，可以直接获取到具体的值，如果属性是boolean类型 返回的是true/false
				
		获取属性
			attr('属性名');
			prop('属性名');
			
		设置属性
			attr('属性名','属性值');
			prop('属性名','属性值');
			
		
		移除属性
			removeAttr(属性名)移除指定的属性

操作样式
attr(“class”) 获取class属性的值，即样式名称
attr(“class”,”样式名”) 修改class属性的值，修改样式 直接覆盖原有的样式
addClass(“样式名”) 添加样式名称
css(“样式名”,“样式值”) 添加具体的样式 相当于在元素上添加style属性
removeClass(class) 移除样式名称

非表单元素/表单元素的内容/值

			html()            获取元素的html内容
			html("html,内容") 设定元素的html内容
			text()            获取元素的文本内容，不包含html
			text("text 内容") 设置元素的文本内容，不包含html
			val()            获取元素value值
			val(‘值’)         设定元素的value值

创建元素
$(‘元素内容’)

		添加元素
			prepend(content)                 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
			$(content).prependTo(selector)   把 content 元素或内容加入 selector 元素开头
			append(content)                  在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
			$(content).appendTo(selector)    把 content元素或内容插入selector 元素内，默认是在尾部
			before()                         在元素前插入指定的元素或内容:$(selector).before(content)
			after()                          在元素后插入指定的元素或内容:$(selector).after(content)

remove()删除所选元素或指定的子元素，包括整个标签和内容一起删。
			empty()清空所选元素的内容

遍历元素
​each()
​ $(selector).each(function(index,element)) :遍历元素
​ 参数 function 为遍历时的回调函数，
​ index 为遍历元素的序列号，从 0 开始。
​ element是当前的元素，此时是dom元素。
<script src=“js/jquery-3.5.1.min.js”

type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var spans = $("span");
			spans.each(function(index,element){
				console.log(index,element);
				console.log($(element));
			});
		</script>

ready加载事件
​ ready()类似于 onLoad()事件
​ ready()可以写多个，按顺序执行
​ $(document).ready(function(){})
等价于
$(function(){})

			ready加载事件和load加载事件的区别
				load：等待加载页面中DOM结构(元素)和引入的资源后，执行对应代码
				ready：等待加载页面中DOM结构(元素)，执行对应代码
		
		绑定事件		
			$(selector).bind( eventType [, eventData], handler(eventObject));