初学jquery

1、下载Jquery的js文件
2、在需要使用jquery的文件中引入js文件
"$"符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象。
通过该对象可以获取 jQuery 对象，调用 jQuery 提供的方法等。
注：只有 jQuery 对象才能调用 jQuery 提供的方法。

DOM对象与Jquery包装集包装集

<!--
	Uncaught ReferenceError: $ is not defined 报错原因：
		1、没有引入jquery文件
		2、引入的jquery文件顺序不对
	
	
-->
<!--引入jquery的js文件-->
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 得到DOM对象
	var mydivDom = document.getElementById("mydiv");
	console.log(mydivDom);
	//console.log(document.getElementById("mydiv1"));
	
	// 得到Jquery包装集对象
	var mydivJquery = $("#mydiv");
	console.log(mydivJquery);
	//console.log($("#mydiv1"));
	
	/**
	 * DOM对象转 Jqyery包装集对象
	 * 		将DOM对象放到$()括号中
	 * Jqyery包装集对象转DOM对象
	 * 	Jqyery包装集取下标  Jqyery包装集[0]
	 * /
	/*DOM对象转 Jqyery包装集对象*/
	var dtoj = jQuery(mydivDom);
	var dtoj2 = $(mydivDom);
	console.log(dtoj);
	console.log(dtoj2);
	
	/*Jqyery包装集对象转DOM对象*/
	var jtod = mydivJquery[0];
	console.log(jtod);
	
	
	/*通过each()方法遍历 jQuery 对象数组得到的对象是 Dom 对象，可以通过$()转为 jQuery 对象*/
	mydivJquery.each(function(index,element){
		console.log(index);
		console.log(element);
		console.log($(element));
		console.log(this);
		console.log($(this));
	});
	
</script>

层次选择器 Hierarchy 选择器 名称 举例 后代选择器 ancestor descendant $("#parent div")选择 id 为 parent 的元素的所有 div 元素 子代选择器 parent > child $("#parent>div")选择 id 为 parent 的直接 div 子元素 相邻选择器 prev + next $(".blue + img")选择 css 类为 blue 的下一个 img 元素 同辈选择器 prev ~ sibling $(".blue ~ img")选择 css 类为 blue 的之后的 img 元素 基础选择器 Basics 选择器 名称 举例 id 选择器 #id $("#testDiv")选择 id 为 testDiv 的元素（id属性值） 元素名称选择器 element $("div")选择所有 div 元素 （元素名称） 类选择器 .class $(".blue")选择所有 class=blue 的元素 （class属性值） 选择所有元素 * $("*")选择页面所有元素 组合选择器 selector1, $("#testDiv,span,.blue")同时选中这几个选择器匹配的元素 selector2, selectorN 过滤选择器 :checked:得到所有checked为true的元素 :eq(index):匹配指定下标的元素 :gt(index):大于指定下标的

	 		:odd  获取所有的奇数位置的元素
	 		:even 获取所有的偶数位置的元素

操作元素的内容
方法 说明
html() 获取元素的 html 内容
html(“html 内容”) 设定元素的 html 内容
text() 获取元素的文本内容，不包含 html
text(“text 内容”) 设置元素的文本内容，不包含 html
val() 获取元素 value 值
val(‘值’) 设定元素的 value 值

			html()和text()
				html()可以识别数据中的html标签并 显示出来；
				text()不识别html标签，会当做纯文本显示
				取值时，html()能够获取到元素中的html代码，text()只会获取纯文本
			
		表单元素：取值赋值使用 val()
			文本框、密码框、单选框、复选框、下拉框、文本域、文件域、隐藏域、（按钮）等
		非表单元素：取值赋值使用  html()和text()
			div、span、p、a、h1-h6、table、tr、td、ul、li、ol、font、lable等

操作元素的样式
方法 说明
attr(“class”) 获取 class 属性的值，即样式名称
attr(“class”,”样式名”) 修改 class 属性的值，修改样式
addClass(“样式名”) 添加样式名称
css() 添加具体的样式
removeClass(class) 移除样式名称

		增加元素的具体样式，格式：
			1）css({‘样式名’:’样式值’,’样式名 2’:’样式值 2’})
				例：css({"background-color":"red","color":"#fff"})2）css(“样式名”,”样式值”)
				例：css('color','white')
			2）css(“样式名”,”样式值”)
				例：css('color','white')
				
		attr():设置样式时，会重新设置class的属性值，所以会将原来的样式覆盖
		addClass():添加样式，原来的样式依然保留，如果出现了相同样式，以后定义的样式为准
		css():设置具体的样式（设置行内样式，写在style属性中的样式）

操作元素的属性
获取属性
方法 说明 举例
attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回checked，没有选中返回 undefined。 attr(‘checked’)attr(‘name’)
prop(属性名称) 获取具有 true 和 false 两个属性的属性值 prop(‘checked’)

		设置属性
			attr("属性名","属性值")
			prop("属性名","属性值")
			
		移除属性
			removeAttr("属性名")
		
		
	attr()与prop()的区别：
		共同点：都可以获取元素的属性
		不同点：
			1、attr()可以获取自定义属性和固有属性的值，而prop()只能获取固有属性的值 （固有属性：元素本身就有的属性）
			2、操作返回值是boolean类型的属性时，attr()返回的是对应的值，而prop()返回的是true和false
			
		如何选择：
			如果属性的返回值是boolean类型时，用prop()方法；  （checked、selected、disabled）
			如果是非boolean类型，则使用attr()方法