JQ笔记基础

$(document).ready()与windows.onload 异同
$(document).ready():
         DOM文档结构绘制完成即即刻执行,可能某些静态
         资源(图片,视频)还没加载完
         同一个页面,可以写多个
window.onload():
         必须等待网页中所有静态资源(图片,视频)都
         加载完毕后才执行
         同一个页面,不可以写
$("li:even").chilk() :
$() : 工厂函数 将DOM对象变为jQuery对象
"li:even" : 选择器,获取需要操作的DOM元素
                    通常用#ID名调用
                    even : 偶数
                    odd : 奇数
chick() : 方法 绑定事件处理的方法
addClass() : 添加样式(以类名添加样式)
css() : 直接设置元素样式
show() : 元素的显示
hide() : 元素的隐藏
链式操作:
      对一个对象进行多重操作,并经操作结构返回给对象
当选择器种的元素和要修改样式的元素一致时
可以用(this)代替!
隐式迭代:
       js会循环代选中的元素,进行元素样式的改变
$('#first'):
       可以由JQ对象直接通过id找到对应的元素节点
$v.html():
        html() -> 获取该元素的html值
DOM对象 转化成JQ 对象
        通过JQ对象包裹住DOM对象达到转换的需求
JQ对象转换为DOM对象
        JQ对象是一个数组对象,可以通过[index]下标
        获取相应的DOM对象
对象是包含相关属性和方法的集合体
对象分为:
       自定义对象
       内置对象
自定义对象
     基于Object对象的方式创建对象
构造函数:
     使用一个构造函数,来创建多个对象
     减少冗余代码
        步骤:
        第一步:
        创建特定的类型的对象
        第二步:
        this变量  赋值
        第三步:
        New操作符 创建
jQuery选择器类似于我们的css选择器
功能强大,种类繁多
1.通过css选择器选取元素
        1)基本选择器
        2)层次选择器
        3)属性选择器
2.通过过滤选择器选取元素
        1)基本过滤选择器
        2)可见性过滤选择器
JQ标签选择器
        根据给定的标签匹配元素
        例如当前是 选中所有的dt标签
类选择器
        根据给定的class名匹配元素
ID选择
        根据给定的id名匹配元素
并集选择器
        将每一个选择器匹配的元素合并一起返回
        每一个选择器用 '  ,  '隔开
全局选择器
        匹配所有的元素
后代选择器 A B
        选中前一个元素的所有后代元素
子选择器 A>B
        选取父元素下的子元素
相邻元素选择器 A+B
        选取第一个元素之后的下一个同辈元素
同辈选择器 A~B
        选中A之后的所有元素B的元素
属性选择器：
        1):根据是否包含某属性来选取元素
        a[class]  :  a标签是否包含class属性
        2):根据属性的值来选取元素
        a[href='hot'] : 选取class值等于hot的元素
        3):选取指定不等于class值的元素
        a[href!='hot'] : 选中href值不等于hot的元素
        4):选取属性值以自定值开头的元素
        a[href^='sale'] : 选中href值以sale开头的元素
        5):选取属性值以指定结尾的元素
        a[href$='com'] : 选中href值以com结尾的元素
        6):选取属性值包含指定值的元素
        a[href*='id'] : 选中href值包含id的元素
过滤选择器
        1):li:first
         选取第一个li元素
        2):li:last
         选取最后一个li元素
        3):li:not(.first)
         选取去除所有于给定选择器匹配的元素
        4):li:even
         选取指定元素下标为偶数的元素
        5):li:add
         选取指定元素下标为奇数的元素
         他们都是按照下标开始排序的(index从0开始)
        6):li:eq(index)
         选取下标为index的元素   eq:等于
        7):li:lt(2)
         选取下标小于2的元素
        8):li:gt(2)
         选取下标小于2的元素
        9):$("header")
         选取所有的标题元素
        10):$("focus")
         选取当前获取焦点的元素 可以当方法使用于blur一起使用
        11):$(animated)
         选取当前所有的动画元素
        12):blur //方法
         选取当前失去的鼠标焦点的元素,于focus搭配使用
可见性过滤选择器
         1)$(p:hidden)
         选取p标签内所有隐藏的元素
         2)$(p:visible)
         选取p标签内所有显示的元素
         3)find()
         获取当前元素集合中的每一个元素的后代
         然后通过选择器来筛选
事件与动画
         鼠标事件
         chick()  单机鼠标时执行
         mouseover() 鼠标指针移过时
         mouseout() 鼠标指针移出时
         mouseenter() 鼠标指针进入时
         mouseleave() 鼠标指针离开时
         键盘事件
         keydown() 按下键盘时
         keyup() 释放键盘时
         keypress() 产生可打印的字符时
         浏览器事件
         resize 调整窗口大小时,完成页面特效 
绑定事件
         bind():
         为被选元素添加一个或多个事件处理程序
         eg:
         键盘点击事件登录
         键盘回车登录
         bind(type,[data],fun)
         type : 事件类型 包括了click,mouseover等
                     必须项
         [data] : 可选函数 非必填项
         fun : 处理函数 必填项
         事件绑定 多个函数
         bind({type:fun,type:fun,....})
移除事件
         unbind([type]):
         type: click mouseout等
         当unbind不携带任何参数
         时表示移除了所绑定的全部事件
复合事件
         toggle() : 模拟鼠标连续点击事件
         在jq1.2版本废弃,改用了jq1.8版本
         toggle(fun1,fun2,fun3):
                  按顺序执行点击事件fun
         toggle()  无参
                与我们 show() 和hide() 方法作用一样
         toggleClass()
                 对所选元素进行的切换
         show(speed)
         hide(speed)
                 控制元素的显隐,  speed代表了速度
                 number : 单位时 ms 毫秒
                 slow : 缓慢的
                 normal : 正常的
                 fast : 快速的
          fadeIn(speed) 通过改变元素的透明度实现淡入
          fadeOut(speed) 通过改变元素的透明度实现淡出
                  speed :
                           number : 单位是 ms 毫秒
                           slow : 缓慢的
                           normal : 正常
           slideDown(speed)  可以使元素逐步延申显示
           slideUp(speed) 是元素逐步缩短直至隐藏
                   speed :
                            number : 单位是 ms 毫秒
                            slow : 缓慢的
                            normal : 正常的
                            fast : 快速的
           hover : 符合事件
                   相当于mouseover与mouseout事件的组合
           hover(
                   function(){//移入
                 
                   },
                   function(){//移出

                   },
                  )
DOM操作分类
          DOM  Core:
                       任何一种坚持DOM的编程语言都可以使用它
          HTML-DOM:
                       用于处理HTML文档
          CSS-DOM:
                       用于操作CSS
设置样式
          css()
          addClass()  ---添加样式
          removeClass() ---移除样式
          toggleClass()
          hasClass() ---判断是否包含指定样式
                  一般和移除样式(removeClass)一起
                  使用
关于内容操作分为3类
           操作HTML代码
                    用于 html()
                    对HTML代码进行操作
                    类似与JS中的innerHTML
                    html()分为有参和无参两种形式
                    无参数:
                             用于获取第一个匹配元素的
                             HTML内容
                    有参数:
                             用于设置所有匹配元素的
                             HTML内容
           操作标签内容
                     text()
                           获取或设置元素的文本内容
                     无参数:
                            用于获取所有匹配元素的文本
                     有参数:
                            用于设置所有匹配的文本
           操作属性
                     val():
                          获取或设置元素的value属性值
                          一般作用于input框中的value
                          属性的值的获取
           A.append(B) 将B追加到A中(最高的)Last
           $("ul").append($newNode1) 将$newNode1追加到ul中(最高的)Last
           A.appendTo(B) 将A追加到B中
           A.prepend(B) 将B前置插入到A中(最矮的)first
           $("ul").prepend($newNode2) 将$newNode2追加到ul中(最矮的)first
           A.prepend(B) 将A插入到B中
           A.after(B)   将B插入到A之后(同辈的形式)
           A.insetAfter(B)   将A插入到B之后(同辈的形式)
           $("ul").after($newNode3)  将$newNode3插入ul之后(同辈的形式)
           A.before(B) 将B插入到A之前(同辈的形式)
           A.insetBefore(B) 将A插入到B之前(同辈的形式)
           $("ul").before($newNode4) 将$newNode4插入到ul之前(同辈的形式)
           remove() : 删除整个节点
           $(".gameList li:eq(1)").remove;删除.gameList中下标为1的li节点
           emty() : 删除节点中的文本内容
           $(".gameList li:eq(1)").emty;删除.gamneList中下标为1的li中的文本内容
           A.replaceAll(B);表示将B替换成A
           A.replaceWith(B);表示将A替换成B
           复制节点:clone(boolean)
           boolean : true
                     不仅复制节点  而且复制节点所绑定的事件
           boolean : false
                     只复制节点,不复制绑定事件
           attr("属性名");获取元素属性
           根据属性名获取对应的属性值
           设置元素属性
           attr({样式名:样式值,样式名:样式值,...})
           删除属性
           removeAttr("属性名")
           删除指定属性
           remove和detach的区别
                  remove删除整个节点  并包含绑定事件
                  detach删除整个节点  但是保留绑定事件
                                 和附加数据
           children() : 遍历子元素--获取所有的子元素
           next() : 用于获取紧邻匹配元素之后的元素
           prev() : 用于获取紧邻匹配元素之前的元素
           siblings() : 用于获取位于匹配元素前后所有的同辈元素
           parent() : 获取匹配元素的父级元素
           parents() : 获取匹配元素的祖先元素
           each() : 为每一个匹配的元素循环遍历要执行的函数
           end() : 结束当前最近的筛选条件,并将匹配的元素还
           原之前的状态
           input:focus::placeholder{
                    opacity: 0;   
           }该方法用于将input框中的提示信息点击后变为透明,离开点击后再恢复其之前状态用于css中使用。
CSS-DOM:
           css():
                  当具有固定的属性值和属性名时,表示的
                  是设置匹配元素的样式
                  css("width","200")  设置一个200高度
                  而当只有属性名时,会返回匹配元素的
                  样式值
           height():
                  设置并返回匹配元素的高度
                  height() : 返回高度值
                  hieght("1000") : 设置高度值
           width():
                  设置并返回匹配元素的高度
                  width() : 返回宽度值
                  width(1000) : 设置宽度值
           scroll():
                  当用户滚动指定元素时,会执行
                  该方法
           offset():
                  返回以像素为单位的top和left坐标
                  (返回匹配元素的外边距的偏移量)
                  position():
                        返回当前元素在没有定位的元素时
                        以浏览器窗口为标准
                        而有定位的父元素时,则以对父元素为标准
            offsetParent:
                   返回最近的以经定位的祖先元素
                   定位元素指的是,元素css position设置
                   相对,绝对和定位的元素
                   而如果没有定位元素,则会直接找到HTML标签
表单选择器
           1.为什么要表单验证
                   减轻服务压力
                   保证输入的数据符合要求
           2.表单的选择器
                   1) :input匹配所有input、textarea
                        select和button元素
                   2) :text匹配所有单行文本框(type='text')
                   3) :password匹配所有的密码框(type='password')
                   4) :radio匹配所有的单选按钮(type='radio')
                   5) :checkbox匹配所有多选按钮(type='checkbox')
                   6) :submit匹配所有的提交按钮
                   7) :reset匹配所有的重置按钮
                   8) :image匹配所有的图像域
                   9) :file匹配有的文件域
                   10) :button匹配所有的普通按钮
                   11) :hidden匹配所有的不可见元素 和type类型为hidden的元素
           3.属性过滤选择器
                   1) :disabled 匹配所有的禁用元素
                   2) :enabled 匹配所有的未禁用元素
                   3) :selected 匹配所有选中的option
                   4) :chexked 匹配被选中的元素
           4.表单的提交事件
                   1) :retrun false 不提交表单
                   2) :retrun true 提交表单
                   3) :String对象的indexOf方法
                             返回某字符首次出现的位置
                             如果没有该字符则返回 -1
                             一般用indexOf进行字符
                             是否存在判断
           5.鼠标获取与失去光标
                   focus(): 从文本域中设置焦点
                                即获取鼠标光标
                   blur(): 从文本域中设置焦点
                               即失去鼠标光标
                   两者皆属于方法
           6.正则表达式符号
                    1)/.../ : 表示一个表达式的开始和结束
                                一般包裹表达式
                    2) ^ :匹配字符串的开始
                    3) $ :匹配字符串的结束
                    4) [n-m] :区间范围  最小是n  最大是m
                        4.1)
                               [0-9] : 纯数字
                               [a-z] : 小写字母
                               [A-Z] : 大写字母
                               可以拼接不需要任何字符
                               [0-9a-zA-Z]
                    5) \d : 匹配一个数字字符 等同于[0-9]
                    6) {n} : 匹配前一项n次
                    7) ? : 匹配前一项0次或者1次 等价于{0,1}
                    8) \D : 匹配除了数字、下划线或字符字母等价于[^0-9]
                    9) \w(小) : 匹配一个数字、下划线或字符字母等价于[A-Za-z0-9_]
                    10) \W(大) : 匹配任何非单子符  等价于[^a-zA-Z0-9]
                    11) \s(小) : 匹配任何空白字符
                    12) \S(大) : 匹配任何非空白字符
                    13) {n,m} : 匹配前一项至少n次,但不能超过m次
                    14) {n,} : 匹配前一项n次,或者多次
                    15)  * : 匹配前一项0次或多次 等价于{0,}
                    16) + : 匹配前一项1次或多次 等价于{1,}
                    17) .(点) : 匹配除了换行符之外的任意字符
验证属性 
                    1):required : 规定当前输入域不能为空
                    2):placeholder:提示一种提示,输入域为空时显示
                                                获取焦点输入内容消失后
                    3):pattern:规定验证input域的模式(正则表达式)
                                        如果直接写到input中,无需加上/^$/
                                         等开头结尾
                    4):valueMissing:判断required特性,返回true和false
                    5):typeMismatch:判断输入值和type类型是否符合(将type换成pattern时判断的将是正则表达式),返回true和false
                    6):patternMismatch:判断输入值是否符合正则效验,返回true和false
                    7):setCustomValidity:设置自定义提示信息
                    8):validity:验证函数,格式:validity.type(pattern)Mismatch
动画改变方法 
                     animate() 方法  执行CSS属性的自定义动画
                     该方法通过改变css样式的属性值才可以创建动画
                     margin之类的可以创建动画的
                     关于背景之类的无法创建动画