JQuery笔记

1、介绍

JQuery 是一个快速、简洁的JavaScript 框架，它提倡写更少的代码，做更多的事情。封装JavaScript 常用的功能代码，提供一种简便的JavaScript设计模式。用于优化HTML文档操作、事件处理、动画设计和Ajax交互。
作用：将页面的JS代码和HTML页面代码进行分离。

2、JQuery函数的三种写法

            /*  文档加载完成的事件 */
			jQuery(document).ready(function(){
			 	alert("jQuery(document).ready(function()");
			});
			/*	jQuery  简写成 $  */
			$(document).ready(function(){
			 	alert("$(document).ready(function()");
			});	
			/*  最简单的写法  */
			$(function(){
				alert("$(function(){");
			});

3、JS和JQ对象之间的转换

4、JQ中的动画效果

5、定时弹出广告

首先，需要导入JQ文件，然后编写JQ的文档加载事件，即启动定时器，编写显示广告的函数，在显示广告中再启动一个定时器，用来关闭广告。编写隐藏广告的函数。

6、JQ的基本选择器

ID选择器：#ID的名称

类选择器：以. 开头 .类名

元素选择器：标签的名称

通配符选择器：*

选择器,选择器：选择器1,选择器2

7、JQ的层级选择器

子元素选择器: 选择器1 > 选择器2
后代选择器: 选择器1 儿孙
相邻兄弟选择器 : 选择器1 + 选择器2：找出紧挨着的一个兄弟
找出所有弟弟: 选择器1~ 选择器2：找出所有的弟弟

siblings()，可以找出所有的同辈元素，即不止能找出弟弟，还能找出哥哥。

8、表单属性的过滤

基本过滤器

：first，获取第一个元素

：even/ ：odd，匹配所有索引值为偶数/奇数的元素，从0开始计数

：gt/：lt/：eq，匹配所有大于/小于/等于给定索引值的元素

属性选择器

表单选择器

过滤表单中所有有输入项，包括：input、textarea、select等

过滤密码框

过滤文本框

：selected，匹配所有选中的option元素

子元素过滤
：nth-child，匹配其父元素下的第N个子或奇偶元素。

9、表格隔行换色

10、表格全选、全不选

prop (name|properties|key，value|fn)，获取在匹配的元素集中的第一个元素的属性。

11、JQ的DOM操作

append()，向每个匹配的元素内部追加内容。类似于appendChild方法。追加的内容可以是：String、Element、jQuery
appendTo()，和append方法效果相同，只是颠倒了常规的$(A).append(B) 的操作，即不是把B追加到A中，而是把A追加到B中

prepend()，这是向所有匹配元素内部的开始插入内容
after()，在匹配的元素后面插入内容，即在后面添加一个兄弟
each()，替代JS中的for循环

empty()，清空所有子节点

12、案例：省级联动

13、商品左右移动

14、表单校验

trigger()和 triggerHandler

用法：

在进行表单校验的时候，对于提示信息样式的修改，其实也是通过css，可以引用外部的css定义样式。如下图，是一个资源css文件，引入后即可调用。

<script type="text/javascript" src="../js/jquery-1.11." ></script>
		<script>
			
			$(function(){  //默认做一些页面初始化
				//动态在必填项后面添加小红点
				$(".bitian").after("<font class='high'>*</font>");
				
				//给必填项绑定事件
				$(".bitian").blur(function(){
					//首先获取用户当前输入的值
					var value = ; //123
					//清空上一次提示的信息
					$(this).parent().find(".formtips").remove();
					
					//判断当前的值是哪一项输入的值
					if($(this).is("#username")){  //判断是否是用户名输入项
						if( < 6){
							$(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
						}else{
							$(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
						}
					}
					
					if($(this).is("#password")){  //判断是否是密码输入项
						if( < 6){
							$(this).parent().append("<span class='formtips onError'>,密码太短了</span>");
						}else{
							$(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
						}
					}
				}).focus(function(){
					$(this).triggerHandler("blur");
				}).keyup(function(){
					$(this).triggerHandler("blur");
				})    							
				
				//给表单提交绑定事件
				$("form").submit(function(){
					//触发所有必填项的校验
					$(".bitian").trigger("focus");
					//找到错误信息的个数
					if($(".onError").length > 0){
						return false;
					}
					return true;
				});
			});	
		</script>
	</head>
	<body>
		<form action="../">
			<div>
				用户名:<input type="text" class="bitian"  />
			</div>
			<div>
				密码:<input type="password"  class="bitian"  />
			</div>
			<div>
				手机号:<input type="tel" />
			</div>
			<div>
				<input type="submit" />
			</div>