jquery笔记整理
这是我前段时间学习jquery的时候整理的课堂笔记，在这里分享给大家，课程原地址在这里。边听课边看笔记效果更佳！
1.初始化函数
$(document).ready(function(){ })
简化模式
$(function () { })
2.dom模型
将html,xml等翁当结构的标签语言称为dom模型
三种类型
a.元素节点 <div> <body>
b.属性节点 title,src
c.文本节点 text
dom对象：
以上三种节点类型具体对象就是dom对象
使用层面：凡是javascript能操作的对象就是dom对象
jQuery对象：
凡是jquery能直接操作的对象就是jQuery对象
dom对象只适用于js的各种语法（函数，属性），jquery对象只用于jquery的各种语法
对象各自独立
dom对象直接写，jquery对象加上$
//通过js拿文本节点值
var title = document.getElementById("myTitle")
title.innerHTML();
var $title = $("#myTitle");
alert($title.html());
3.dom对象和jquery对象的转换
dom对象 -> jQuery对象：jquery工厂 $(dom对象) $(title)
jQuery对象 -> dom对象
基础：jquery对象默认是一个数组或者集合，dom对象默认是一个单独的对象
数组：jquery对象[0] $title[0]
集合：jquery.get(0) $title.get(0)
4.jquery选择器：根基*********************
a.基本选择器
i. 标签选择器 直接写标签 $("标签名")
i. 类选择器 . $(".类名")
i. ID选择器 # $("#ID名")
i. 并集选择器 逗号 $(".类名,#ID名")
i. 交集选择器 啥也不写 $(".类名 #ID名") 注意避免歧义
i. 全局选择器 * $("*")
b.层次选择器 ---只取后面的那个元素
i. 相邻选择器 + $("#id名字+标签名字")
i. 同辈选择器 ~ $("#id名字~标签名字")
i. 后代 空格
i. 子代 >
c.属性选择器 [...] $("[属性名]") 选中全部元素中，有此属性名的元素
i. $("[class]")
i. 等于此属性值 $("[class = xxx]") $("[class = 'xxx']")
i. 不等于 $("[class != xxx]")
i. 以此属性开头 $("[class ^= xxx]")
i. 以此属性结尾 $("[class $= xxx]")
i. 包含此属性值 $("[class *= xxx]")
d.过滤选择器 ：
基本过滤选择器(从0开始)
:first ----最开头那个
:last ----最后哪一个
:even ----偶数
:odd ----奇数
:eq(index) ----第index个
:gt(index) ----大于index的全部元素
:lt(index) ----小于index的全部元素
:not(选择器) ----除了...以外
:header ----选中所有标题元素 h1,h2,h3
:focus ----获取当前焦点的元素
e.可见性选择器
:visible ----选中所有可见元素
:hidden ----选中所有隐藏元素
5.jquery事件
js:onXXX
onClick()
写在<script>内，写在ready()外面
jquery:没有on
click()
写在ready()内
a.示例：
$(function(){
//选中元素，设置事件
$("#hhh").click(function(){
alert("单击事件");
});
})
b.事件类型
i. ready() windows事件
i. 鼠标事件----w3c官网搜一下就行
click(): 单击事件
mouseover():
mouseenter():
mouseleave():
mouseout():
i. 键盘事件
keydown(): 从上往下压的过程
keypress(): 压到底
keyup(): 从下往上抬的过程
keycode用法，具体的keycode可以百度
$("body").keydown(function(e){
if(e.keyCode==13){
alert("按压了回车");
}
});
i. 表单事件
focus(): 获取焦点,有些元素好像没有焦点
$("input").focus(function() {
//this是当前元素，是一个dom对象，再转换为jquery对象
$(this).css("color","red");
});
blur(): 失去焦点
i. 绑定事件与移出事件 好处: 通用
$(...).bind("事件名",[数据],函数);
$("input").bind("focus",function (params) {
alert("hello")
})
批量绑定：$(...).bind({"事件1":[数据1]:函数1,"事件2":[数据2]:函数2});
取消绑定:$(...).unbind("事件")
i.复合事件
hover(): mouseover()和mouseout()组合方法
$(".aaa").hover(function (params) {
//进入
alert("悬浮")
},function (params) {
//移出
alert("移出")
});
toggle():版本问题 多个click()事件，轮循 不支持，不用就ok
i. 显示效果
ii. 隐藏与显示
hide([速度],[回调函数]); 隐藏 速度可以试数字，也可以是单词(fast normal slow,加双引号)
show([速度],[回调函数]); 显示
toggle(方法1，方法2); 切换隐藏与显示
回调函数：回调函数一般作为函数的参数体现
$(".aaa").click(function (params) {
$(this).hide(3000,myCallBack);
})
function myCallBack(params) {
alert("隐藏完毕！")
}
ii. 淡入淡出,改变透明度
fadeIn([速度],[回调函数]): 同理 显示
fadeOut([速度],[回调函数]): 同理 消失
ii. 控制高度
slideDown([速度],[回调函数]) 下拉，显示
slideUp[速度],[回调函数]() 上推，消失
6.操作DOM
a. 样式操作
i. 设置css css()
jQuery对象.css("属性名","属性值") 单个
jQuery对象.css({"属性名1":"属性值1","属性名2":"属性值2",....}) 多个
i. 追加或移除样式class
addClass("x x x"); addClass("x");
removeClass("x x x"); removeClass("x"); 啥也不写移除全部
i. 切换样式,移除或添加全部
toggleClass("x x x")
b.内容操作
i. html(): 获取值，获取的是元素的内容，包含了元素内部的各种标签
html("xxxxxx") 赋值，可以添加标签的文本，并渲染
i. text(): 获取值，获取文本值
text("xxxxxxx") 赋值，纯文本，不渲染
i. val() 获取，例如<input>标签
val("xxxxxxx") 赋值
c.节点与属性操作
i.节点操作
* 查询节点 (jquery选择器)
* 创建节点: $()
* 插入节点: 内部插入(插入子女)，外部插入(插入兄弟)
！内部插入(插入子女)
append(),appendTo(),prepend(),prependTo() 内部插入
//创建
var $myElement = $("xxx ")
$("ul").append($myElement);//内部插入
$myElement.appendTo($("ul"));
！外部插入(插入兄弟)
after(),insertAfter(),before(),insertBefore()
* 替换节点
$A.replaceWith("xxxx") xxxx为节点内容
$("xxxxxx").replaceAll("xxxxxx")
* 删除节点
remove(): 彻底删除
detach(): 将节点删除，但是关联的事件，数据不会删除，不推荐使用
empty(): 只删除内容
* 克隆节点
clone(true|false): true---连着事件一块克隆
i. 属性操作
* attr("属性名") ----获取属性值
* attr("属性名","属性值") ----设置属性值
* attr({"属性名1":"属性值1","属性名2":"属性值2"}) ----批量操作
* removeAttr("属性值") ----删除属性值
d.获取集合与遍历集合
i. 子节点集合
$(..).children("li")
i. 后代集合
$(..).find("li")
i. 同辈集合
next(): 后一个 +
next("li") 后一个li
prev(): 前一个
同理
siblings(): 同辈，左边右边
同理
i. 前辈集合
parent(): 父辈
parents(): 所有祖先
parents("li"): 祖先的li
i. 过滤器
如上，() 也是一个过滤器
filter("...") 过滤器方法
i. 遍历集合
$(...).each(function(index,element){
$(element).text();
//等价于
$(this).text();
});
7.CSS-dom操作
height()
width()
offset() 偏移量，元素左上角 返回对象属性：left,top
offset(function(index,oldOffset){
var newOffset = new Object();
newOffset.left = oldOffset.left + 100;
newOffset.top = oldOffset.top + 100;
return newOffset;
})
offsetParent() 获取已经定位的父元素 ：元素position属性(默认为static)被设置称为了relative absolute 或者fixed
scrollLet()
scrollTop()
8.表单校验，可万一减轻服务端的访问次数
a.步骤
i. 获取要校验的元素值(选择器) 用户名，密码
i. 通过字符串处理方法或者正则表达式等手段进行校验
i. 触发校验的方法或事件(校验时机)
blur(): 失去焦点
submit(): 当点击表单的提交按钮时触发
submit()返回值会决定表单是否跳转,true,false
b.正则表达式进行校验：用于定义规则
正则表达式.test(email);
手机号码规则：第一位 是 1,其余10个是数字
/^1\d{10}$/
/^1[0-9]{10}$/
邮箱校验: /^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/
搜索一下