jQuery的自我学习（一）

jQuery是对DOM的一种封装，可以更加快捷的修改添加js样式。首先我们需要下载相关版本的jQuery的脚本。这里使用的是jquery-3.4.1.js。用使用jQuery时要先引入所下载的东西。()

jQuery选择器

jQuery有许多简洁的选择器现在介绍其中常用的一些：

		$('#id')
		$(".c1")
		$('a')
		$('#10 a')         //子子孙孙
		$('#10>a')        //儿子
					//:first
					//:last
					//:eq()
		$('[alex]')
		$('[alex="123"]')
		$("input[type='text']")==$(':text')

直接利用$符号搜索标签的id和class名称，可以把他和css的选择器归为一类记忆，有很多相似之处。（切记字符串要用引号包括）

jQuery的事件触发

1. 基础的绑定还是在标签的后面添加“οnclick="xxx();”然后利用选择器寻找到后对其内部进行操作
2. 更高级层次的应该是：直接在选择器$('..')后面添加上事件如：“click”，“hover”等
   如：

		
		
		
			$('#i1').click(function(){
				$(this).xxx        //这里的this指的是本标签
			})
			
		

对于表单的选项设置：

	   $(this).prop('checked') 获取值
//     $(this).prop('checked'，true) 设置值
//	   $(this).each(function(k){
			(k代表当前索引)；
			（this代表DOM对象）

利用jQuery事件做一个多下拉框菜单案例

	
	
	


	

		

			
1
			

				
2
				
3
			
		
		

			
1
			

				
2
				
3
			
		
		

			
1
			

				
2
				
3
			
		
		

			
1
			

				
2
				
3
			
		
		

			
1
			

				
2
				
3
			
		
	
	
	

从这个小案例中，我们应该掌握许多小的知识点：

$(’#i1’).next()——>//寻找i1标签的下一个标签
$(’#i1’).nextAll() ——> //寻找i1标签下的所有标签
$(’#i1’).nextUntil(’#ii1’)——> //寻找i1标签下的所有标签，直到找到ii1标签为止

$(’#i1’).prev() ——> //寻找i1标签的上一个标签
$(’#i1’).prevAll() ——> //寻找i1标签上的所有标签
$(’#i1’).prevUntil(’#ii1’) ——> //寻找i1标签上的所有标签，直到找到ii1标签为止

$(’#i1’).parent()——> //寻找i1标签的父级标签
$(’#i1’).children() ——>//寻找i1标签的子级标签
$(’#i1’).siblings() ——>//寻找i1标签的兄弟标签
$(’#i1’).find() ——> //寻找i1标签中的某一元素标签

$(…).text()——>获取标签文本
$(…).text(“1”)
$(…).html()
$(…).html(“1”)
$(…).val()——>获取input文本
$(…).val(…)