【前端模块】第37天——Jquery

回顾:
js:
    组成部分:
        ECMAScript
        BOM
        DOM
变量声明 var 变量名=初始化值;
数据类型:
        原始类型
            Undefined Null
            String Number Boolean:伪对象
            通过typeof运算符可以判断出属于那种原始类型
                typeof 值|变量
        引用类型
            Boolean Number
            String 
                常用属性:length
                常用方法:
                    substring
                    split
                    replace
            Array
                常用属性:length
                注意:
                    array长度可以变化
                    array可以存放任意值
            Math
            Date
            RegExp  常用方法:test()
                直接量语法:
                    /正则表达式/
            全局
                decodeURI 解码
                eval 计算字符串,解析成js代码执行
运算符:
    关系运算符
    等性运算符 ==  ===
语句:
    选择 循环
////////////////////////////////
BOM(浏览器对象模型)
    window:窗口
        常用属性:
            获取其他的四个对象
                window.location....
        常用方法:
            消息框
                alert confirm prompt
            定时器
                setInterval 周期
                setTimeout 延迟
            打开关闭 
                open close
    location:定位
        location.href:设置或者获取url
    history:历史
        go()
///////////////////////////////
事件和函数
    掌握的事件:
        焦点:
            onfocus
            onblur
        表单事件
            onsubmit
            onchange 改变
        页面或者元素加载
            onload 
                最常用的方式:
                    window.onload=function(){};
        单击
            onclick
    函数:
        方式1:
            function 函数名(参数列表){
                函数体
            }
        方式2:
            匿名函数
            例如:window.onload=function(){};

事件绑定函数:
    方式1:通过元素的事件属性
        <xxx onxxx="函数名(参数)">  若参数为this:是将当前的dom对象传递给了函数
    方式2:派发事件
        dom对象.onxxx=function(){};
///////////////////////////////////////////
DOM(文档对象模型)
    就是我们的html代码加载到内存中会形成一棵document树
    节点:
        文档节点 document
        元素节点 element
        属性节点 attribute
        文本节点 text
    获取一个元素节点:通过document获取
        四个
    操作元素的属性
        dom对象.属性
    操作元素的标签体
        dom对象.innerHTML
////////////////////////
以前通过js获取对象的时候
    var obj=document.getElementById("id");

    funtion getId(id){
        return document.getElementById("id");
    }

    $("选择器")===>获取元素
//////////////////////////
js类库:
    对常用的方法和对象进行封装,方便我们使用.
jQuery:
案例1-弹出广告
技术:
    定时器
    jQuery
///////////////////////////
jquery和html的整合
    jquery是单独的js文件
        通过script标签的src属性导入即可
获取一个jquery对象
    $("选择器")  或者 jQuery("选择器")
dom对象和jquery对象之间的转换
    dom对象===>jquery对象   
        $(dom对象)
    jquery对象===>dom对象
        方式1:
            jquery对象[index]
        方式2:
            jquery对象.get(index)
页面加载:
    js:
        window.onload=function(){}//在一个页面中只能使用一次
    jquery 在一个页面中可以使用多次
        方式1:
            $(function(){...})
        方式2:
            $(document).ready(function(){});
派发事件:
    $("选择器").click(function(){...});
    等价于 原生js中
        dom对象.onclick=function(){....}
    掌握事件:
        focus
        blur
        submit
        change
        click
jquery中效果:
    隐藏或展示
        show(毫秒数) hide(毫秒数)
    滑入或滑出
        slideDown(毫秒数):向下滑入
        slideUp(毫秒数):向上滑出
    淡入或淡出
        fadeIn(int):淡入
        fadeOut(int):淡出
/////////////////////
案例1-步骤分析
    1.页面加载成功之后$(function(){...}) 开始一个定时器 setTimeout();
    2.编写展示广告方法 
        获取div,然后调用效果方法
        设置另一个定时器 隐藏
    3.编写隐藏广告的方法
        获取div,然后调用效果方法
////////////////////////////////////
选择器总结:
    基本选择器★
        $("#id值")  $(".class值")  $("标签名")  

        了解:$("*")
        理解:获取多个选择器 用逗号隔开
            $("#id值,.class值")
    层次选择器 ★
        a b:a的所有b后代
        a>b:a的所有b孩子
        a+b:a的下一个兄弟(大弟弟)
        a~b:a的所有弟弟
    基本过滤选择器:★
        :frist 第一个
        :last 最后一个
        :odd  索引奇数
        :even 索引偶数
        :eq(index) 指定索引
        :gt(index) >
        :lt(index) <
    内容过滤:
        :has("选择器"):包含指定选择器的元素
    可见过滤:
        :hidden   在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
        :visible 
    属性过滤器:★
        [属性名]
        [属性名="值"]
    表单过滤:
        :input  所有的表单子标签  input select textarea button
        //input
////////////////////////
案例2-隔行换色
技术分析:
    1.页面加载成功
    2.获取所有的奇数行 添加一个css
    3.获取所有的偶数行 添加一个css

属性和css操作总结:
    对属性的操作:
        attr():设置或者获取元素的属性
            方式1:获取
                attr("属性名称")
            方式2:设置一个属性
                attr("属性名称","值");
            方式3:设置多个属性  json
                attr({
                    "属性1":"值1",
                    "属性2":"值2"
                })
        removeAttr("属性名称"):移除指定属性
    //添加class属性的时候 
    //  attr("class","值");
    addClass("指定的样式值"); 相当于 attr("class","指定的样式值");
    removeClass("指定的样式值");

    对css操作:操作元素的style属性
        css():获取或者设置css样式
            方式1:获取  
                css("属性名")
            方式2:设置一个属性
                css("属性名","值")
            方式3:设置多个
                css({
                    "属性1":"值1",
                    "属性2":"值2"
                });
    获取元素的尺寸:
        width()
        height()
/////////////////////////////
案例3-全选或者全不选
需求:
    就是将内容中复选框的选中状态和最上面的复选框状态保持一致
步骤分析:
    1.确定事件 复选框的单击事件
    2.函数中
        a.获取该复选框的选中状态  attr(获取不了checked属性)|prop
        b.获取所有的复选框修改他们的状态
注意:
    若jquery版本>1.6 统一使用 prop操作元素的属性
/////////////////////////
/////////////////////////
/////////////////////////
/////////////////////////
案例4-省市联动
步骤分析:
    1.确定事件 省份的下拉选变化的时候  change
    2.编写函数
        a.获取当前省份的value值
        b.通过数组获取该省下的所有市 返回值:数组
        c.遍历数组,拼装成option元素 追加到市下拉选即可
        注意:每次改变的时候初始化市的值.
///////////////////////////
技术:
    遍历数组
        数组.each(function(){});
        $.each(遍历数组,function(){});

    注意:
        each的function中可以加两个参数 index和dom
            index是当前遍历的索引值
            dom指代的是当前遍历的dom对象(开发中一般使用this即可)
    //////////////////////////////
    设置或者获取value属性
        jquery对象.val():获取
        jquery对象.val("...."):设置
    /////////////////////////////////////////
    设置获取获取标签体的内容 
        html()
        text()

        xxxxx():获取标签体的内容
        xxxxx("....."):设置标签体的内容

            设置的区别:
                html:会把字符串解析
                text:只做为普通的字符串
            获取的区别:
                html:获取的html源码
                text:获取只是页面展示的内容
    //////////////////////////////////////////////
创建一个元素: $("<标签></标签>")
///////////////////////
文档操作:
    内部插入
        a.append(c):将c插入到a的内部(标签体)后面
        a.prepend(c):将c插入到a的内部的前面

        appendTo
        prependTo
    外部插入
        a.after(c):将c放到a的后面
        a.before(c):将c放到a的前面

        a.insertAfter(c)
        a.insertBefore(c)
    删除
        empty() 清空元素
        remove() 删除元素
/////////////////////////////////
/////////////////////////////////
/////////////////////////////////
案例5-左右移动
步骤分析:
    1.确定事件 单击事件
    2.编写函数:
        移动一个:
            右边的下拉选追加一个 左边的选中的第一个
        移动多个:
            左边选中的 追加到右边的下拉选中
        移动全部:
            将左边的所有option追加到右边的下拉选中

技术分析:
    表单对象属性过滤选择器
        :enabled   可用的
        :disabled  不可用
        :checked    选中的(针对于单选框和复选框的)
        :selected   选中的(针对于下拉选)














///////////////////////////////////////////////////

///////////////////////////////////////////////////
///////////////////////////////////////////////////
上午回顾:
js类库:
    对常见的方法和对象进行了封装,方便开发.
jquery和html的整合
    script标签的src属性导入即可
获取jquery对象
    $("选择器")  jQuery("选择器")
dom对象和jquery对象之间的转换
    dom>>>jquery    
        $(dom对象)
    jquery>>>dom
        方式1:
            jquery对象[index]
        方式2:
            jquery对象.get(index)
jquery中的选择器:
    基本选择器★
        $("#id值") $(".class值") $("标签名")  $("#one,#two,.mini")
    层次选择器★
        a b:后代
        a>b:孩子
        a+b:大弟弟
        a~b:弟弟们

    基本过滤选择器
        :frist :last
        :odd :even
        :eq(index) :gt|lt..
    内容过滤
        :has(选择器)
    可见性过滤
        :visible
        :hidden 指代是 input type=hidden  和 display:none
    表单的过滤
        :input
    属性选择器:
        [属性]
        [属性=值]
    表单对象属性过滤选择器
        :enabled   可用的
        :disabled  不可用
        :checked    选中的(针对于单选框和复选框的)
        ★:selected  选中的(针对于下拉选)

///////////////////////////
派发事件:
        jquery对象.事件(function(){.....});
        例如:
            $("#btn1").click(function(){.....});
/////////////////////////
页面加载成功
    $(function(){
        ......
    })

    $(document).ready(function(){
        ////
    });
///////////////////////////
属性和css
    attr():设置或者获取属性(1.6版本之前)
        attr("属性名"):获取
        attr("属性名","值"):设置一个        
        attr({
            "属性名":"值",
            "属性名":"值" 
        })

    prop():和attr用法一致(1.6版本之后)

    (了解)addClass("存在的样式")

    removeAttr()
    (了解)removeClass()

    css():设置获取获取元素的样式
        css("属性"):获取
        css("属性","值"):设置
        css({
            "":"",
            "":"",
            "":""
        }):设置多个

    width()
    height()
/////////////////////////////////////
    文档处理:
        内部插入(2组方法 任意掌握一组)
        外部插入(2组方法 任意掌握一组)
        删除(empty remove)
//////////////
val html text
        val :设置或者获取values属性
        html:获取或者设置标签体内容
////////////////////
遍历数组
    方式1:
        jquery对象.each(function(){});
    方式1:
        $.each(jquery对象,function(){});
/////////////////////////
在jquery中创建元素
    $("<标签名>").prop(属性).html(内容)
////////////////////////////