jquery基础知识

1.jquery(JavaScript query:js 查询)就是一个别人用原生js封装好的js类库. do more , write less

2.jquery使用:

	1.下载 
	2.导入jquery.js文件
	3.使用方法:
		选择器语法:
			$("选择器")
		获取的是jquery对象,不是原生dom对象
	4.jquery对象和dom对象的转换
		1.dom对象---->jquery对象
			jquery对象=$(dom对象)
		2.jquery对象---->dom对象
			dom对象=jquery对象[索引]
			dom对象=jquery对象.get(索引)
	4.jquery对象绑定事件
		jquery对象.事件名(function(){
			js代码
		})
		
		页面加载事件
		$(function(){
			代码
		})
	5.jquery封装好的效果:
		1.显示与隐藏:
			show(毫秒值); 	显示
			hide(毫秒值); 	隐藏
			toggle(毫秒值); 自动切换
		2.滑入滑出:
			slideDown(毫秒值);	滑入
			slideUp(毫秒值);	滑出
			slideToggle(毫秒值) 自动切换
		3.淡入淡出:
			fadeIn(毫秒值);		淡入
			fadeOut(毫秒值);	淡出
			fadeToggle(毫秒值);	自动切换
			fadeTo(毫秒值,透明度)
			
	6.回调函数:
		就是将一个函数作为另一个函数的参数传入,具体执行逻辑由另一个函数决定

3.jquery的选择器:

	1.基本选择器(必须掌握):
		id选择器:		$("#id")
		calss选择器:	$(".class")
		属性选择器:		$("[属性名='属性值']")
		元素选择器:		$("元素名") 例如$("div")
		所有选择器:		$("*")
		分组选择器:  	选择器1,选择器2,选择器3...
	2.层次选择器:	
		必须掌握:
			$("a b"):在满足a的情况下 去a的内部寻找符合b选择器的后代元素
			$("a>b"):在满足a的情况下 去a的内部寻找符合b选择器的子代元素
		
		a+b:在满足a的情况下 找到它的大弟弟看看是否符合b选择器 符合则返回 不符合则返回空
		a~b:在满足a的情况下 找到它的弟弟们看看是否符合b选择器 符合则返回 不符合则返回空
	3.过滤选择器:
		1.基本过滤选择器(必须掌握):
			1.$("选择器:first")		第一个
			2.$("选择器:last")		最后一个
			3.$("选择器:eq(index)")	选择器第几个
			4.$("选择器:lt(index)")	小于
			5.$("选择器:gt(index)")	大于
			6.$("选择器:odd")		索引奇数
			7.$("选择器:even")		索引偶数
		2.可见性选择器:
			:visible  可见
			:hidden	  不可见
		3.内容过滤选择器(基本不用):
			$("选择器:has(选择器)")
	4.属性选择器:
		1.$("[属性名='属性值']")(常用)
		2.$("[属性名^='属性值']")	首字母
		3.$("[属性名$='属性值']")	最后一个字母
		4.$("[属性名*='属性值']")	包含有这个字母
		5.$("[属性名]")
	5.表单选择器(用处不大):
		input:标签选择器
			:text 选中文本框
			:password 选中密码框
			:input表单选择器 表示获取所有form字标签

4.css方法:

	1.操作选中元素的样式 底层实际就是操作标签style属性
	2.使用方法:
		1.css("属性名");			获取这个属性的值
		2.css("属性名","属性值");	设置css样式
		3.设置多个:
			css({
				属性名:"属性值",
				属性名:"属性值"
			})
		
		addClass("样式")
		removeClass("样式名")

5.attr方法:

	1.attribute属性 操作元素的属性
	2.使用方法:
		1.attr("属性名"); 			获取这个属性的值
		2.attr("属性名","属性值")	设置属性的值
		3.设置多个:
			attr({
				属性名:"属性值",
				属性名:"属性值"
			})
		
	上述方法:
	设置操作 全部应用
	获取操作 只获取第一个元素的值

6.遍历操作:

	1. 参数可以不写
		jquery对象.each(function(index,ele){
			index代表索引
			ele代表元素 (原生dom)
			this 代表元素 (原生dom)
		})
	2. 参数可以不写
		$.each(jquery对象,function(index,ele){
			
		})

7.操作内容

	val();	操作value属性
	html(); 操作innerhtml
	text(); 操作innertext
	以上三个方法不穿参数代表获取,传参数代表设置操作

8.追加内容:

	1.内部追加 追加子元素
		a.append(b);  把b追加在a的内部的后面
		a.prepend(b); 把b追加在a的内部的前面
		
		b.appendTo(a);把b追加在a的内部的后面
		b.prependTo(a);把b追加在a的内部的前面
	2.外部追加 追加兄弟节点
		a.after(b) 在a的后面添加b
		a.before(b) 在a的前面添加b

		b.insertAfter(a);在a的后面添加b
		b.insertBefore(a);在a的前面添加b
	3.其他操作:
		清空子元素 	empty();
		删除 自杀	remove();

9.表单对象过滤选择器:

	:enabled	可用的
	:disabled	不可用
	:checked	选中的 针对单选框,多选框,下拉选择框
	:selected	选中的	只针对下拉选择框

10.validator插件(了解):

	1.下载
	2.导入页面
	3.使用步骤:
		1.现在页面导入jquery
		2.导入自己的js文件
		3.要求你在页面加载完成以后
			使用选择器(不管啥选择器)选中你想要校验的form表单 调用方法
			validate(....)
		4.validate方法的参数:
			validate({
				rules:{},
				messages:{}
			})
		5.rule是规则:
			必填项:required true|false
			maxLength:最大长度
			minLength:最小长度
			rangeLength:[最小长度,最大长度]区间范围
			digst:整数
			number:数值
			max:最大值
			min:最小值
			range:[最小值,最大值]
			email:必须是邮箱格式
			equalTo:和哪个必须一样
		6.规则的书写格式:
			validate({
				/**
					书写格式:
						格式一:
							需要校验的字段名:规则名
							例子:
								username:required,

						格式二:
							需要校验的字段名:{
								规则名:规则值,
								规则名:规则值
								.....
							}


				*/
				rules:{},
				messages:{}
			})
		7.自定义提示信息:
			validate({
				rules:{},
				/**
					书写格式:
						格式一:
							需要校验的字段名:"提示信息"
							例子:
								username:required,

						格式二:
							需要校验的字段名:{
								规则名:"提示信息",
								规则名:"提示信息"
								.....
							}


				*/
				messages:{}
			})
		8.自定义规则:
			$.validator.addMethod(传入规则名,规则的验证逻辑,默认提示信息);

				传入规则名:唯一不重复
				规则的验证逻辑:function(value,ele,params){
							value代表是正在被校验输入框的值
							ele代表的是这能在被校验的输入框对象
							params代表使用此规则的时候传入参数

							这个函数 必须有一个boolean的返回值
						}