Jquery

基础选择器

先导入jQuery的核心文件

将jQuery 文件放在js文件夹下的导入:
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>

基础选择器 Basics

	ID选择器-----$("#ID属性值")   若有同名的只会获取第一个
    类选择器-----$(".class属性值")
    元素选择器---$("元素名/标签名")
    选择所有-----$("*")                  选择所有标签 ,包括HTML/CSS中的所有标签

层次选择器

1.后代选择器,ncestor descendant:
2.子代选择器,parent>child:
3.相邻选择器,prev +next,+号往下找,只找一个,找的该元素必须和选择器位置处于相邻的状态
4.同辈选择器,prev~sibling,波浪号往下找,找到 所有同辈的 指定元素
例:
<div>大伯</div>
		<div id="parent">老爹
			<div>大儿子
				<div>大孙子</div>
				<p>大孙女</p>
				<div>小孙子</div>
			</div>
			<p>大女儿<p>外孙女</p></p>
			<div>二儿子</div>
			<div>三儿子</div>
		</div>
		<div>大叔</div>
		<p>小姑</p>
		<div>二叔</div>
		<div>三叔</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
	<script type="text/javascript">
		// 后代选择器  	ncestor descendant 
		var houdai = $("#parent div");
		console.log(houdai);
		
		// 子代选择器 		parent>child
		var zidai = $("#parent>div");
		console.log(zidai);
		zidai.each(function(){
			console.log(this);
			
		});
		
		// 相邻选择器 		prev + next
		var xl = $("#parent + p");
		console.log(xl);
		
		// 同辈选择器 		prev ~ sibling
		var tb = $("#parent ~ p");
		console.log(tb);

其他选择器

<!--
			表单选择器
				$(":radio")  			选择所有单选框按钮
				$(":checkbox")			选择所有复选框按钮
				
			过滤选择器
				$(":checked")			选择所有选中状态的元素（单选框和复选框）
				$(":checkbox:checked")	选择所有复选框被选中的元素
				$(":checkbox:checked:eq(index)")	匹配被选中的选择的指定下标的元素	
				$(":checkbox:checked").eq(index)
				$(":checked:gt(index)")				选择下标大于指定值的元素
				$(":odd")				选择所有的奇数下标的元素
				$(":even")				选择所有的偶数下标的元素	
				
			属性选择器
				$("[属性名]")		$("[name]")	选择所有设置过name属性值的元素
				$("[属性名=属性值]")	$("[id='myId']")	选择所有属性名等于指定属性值的元素
			
		-->

样式

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 值
			---------------------------------------------------------------------------------
			remove() 	删除所选元素或指定的子元素，包括整个标签和内容一起删。
			empty() 	清空所选元素的内容

添加元素

				方法 								说明
			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)
			
			
			注：如果被追加对象是已存在的元素，则该元素会被直接剪切到指定位置

遍历元素

			each()
			$(selector).each(function(index,element)) :遍历元素
			参数 function 为遍历时的回调函数，
			index 为遍历元素的序列号，从 0 开始。
			element 是当前的元素，此时是 dom 元素。