BOM DOM jQuery

    . BOM
        . location相关
            . location.href
            . location.href="http://www.sogo.com"
            . location.reload()

    . DOM
        . DOM树的概念

        . JS通过DOM操作HTML
            . 改标签(标签的内容)
            . 改标签的属性
            . 改样式
            . 事件相关

        . 操作标签
            . JS查找标签

                . 直接查找
                    . 通过ID       document.getElementById("ID值")
                    . 通过class找  document.getElementsByClassName("class名")
                    . 通过标签名找 document.getElementsByTagName("标签名")
                . 间接查找
                    . 找父标签
                    . 找字标签们
                    . 找第一个子标签
                    . 找最后一个子标签
                    . 找上一个兄弟标签
                    . 找下一个兄弟标签
            . 创建标签
                . 语法:
                    document.createElement("标签名")  *****
            . 添加标签
                . 在内部最后添加
                    父标签.appendChild(新创建的标签)
                . 在内部指定标签前面添加
                    父标签.insertBefore(新创建的标签,指定标签)
            . 删除标签
                . 从父标签里面删除指定的标签
                    父标签.removeChild(指定的标签)
            . 替换
                . 在父标签里面用新创建的标签替换指定标签
                    父标签.replaceChild(新创建的标签,指定的标签)
        . 操作标签的属性
            . 常用的属性 *****
                . innerHTML  --> 全部(子标签及子标签的文本内容)
                . innerText  --> 标签(子标签)的文本内容

            . 标签的属性
                . .setAttribute("age","")  --> 设置属性
                . .getAttribute("age")       --> 获取属性的值
                . .removeAttribute("age")    --> 删除指定的属性

                对于标签默认的属性
                    . a标签.href/img标签.src
                    . a标签.href="http://www.sogo.com"/img标签.src="..."

        . 获取值(input/select/textarea)
            input标签.value()
            select标签.value()
            textarea标签.value()
        . 操作标签的样式
            . 通过class名去改变样式
                . 获取标签所有样式类
                    . .className      --> 得到的是字符串
                    . .classList      --> 得到的是数组

                . 使用classList操作样式
                    . .classList.contains("样式类")  --> 判断包不包含指定的样式类
                    . .classList.add("样式类")       --> 添加指定的样式类
                    . .classList.remove("样式类")    --> 删除指定的样式类
                    . .classList.toggle("样式类")    --> 有就删除没有就添加

            . 通过.style直接修改CSS属性
                . CSS属性带中横线的
                    background-color: red;
                    .style.backgroundColor=green;
                . CSS属性中不带中横线的
                    .style.color=red;

        . 事件相关
            . 注意:
                涉及到DOM操作的JS代码要放在body标签内部的最下面!!!

            . 绑定事件的方式
                . 在标签内通过属性来设置(onclick=foo(this))
                    this指的是当前触发事件的标签!!!
                . 通过JS代码绑定事件

            . 常用的事件
                . onclick        当用户点击某个对象时调用的事件句柄。
                . ondblclick     当用户双击某个对象时调用的事件句柄。

                . onfocus        元素获得焦点。   // 练习：搜索框
                . onblur         元素失去焦点。   应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.

                . onchange       域的内容被改变。 (select联动示例)

. jQuery
        . 为什么要学jQuery?  MySQL Python
            做同样的事情 jQuery写起来极其简练 (write less, do more.)
        . jQuery是什么?
            jQuery相当于Python的第三方模块
            第三方模块其实就是别人写好(封装)的一些代码,我们拿过来用(按照别人定好的规则)

            原生的JS DOM操作是基础
        . jQuery学习的内容
            . 改变标签
            . 改变标签的属性
            . 改变标签的样式
            . 事件相关

        学习内容:(先导入再使用)
            . HTML对象和jQuery对象的区别
                . jQuery对象转换成DOM对象,用索引取出具体的标签
                . DOM对象转换成jQuery对象,$(DOM对象)

                注意:
                    jQuery对象保存到变量的时候,变量名要加$前缀

            . 找标签
                . 基本选择器
                    . $("ID值")
                    . $(".class名")
                    . $("标签名")

                    . $("*")  找所有
                    . $("条件1,条件2")  组合查找
                . 层级选择器
                    同CSS选择器
                    . $("x y");// x的所有后代y（子子孙孙）
                    . $("x > y");// x的所有儿子y（儿子）
                    . $("x + y")// 找到所有紧挨在x后面的y
                    . $("x ~ y")// x之后所有的兄弟y

                . 基本筛选器
                    . :first // 第一个
                    . :last // 最后一个
                    . :eq(index)// 索引等于index的那个元素
                    . :even // 匹配所有索引值为偶数的元素，从 0 开始计数
                    . :odd // 匹配所有索引值为奇数的元素，从 0 开始计数
                    . :gt(index)// 匹配所有大于给定索引值的元素
                    . :lt(index)// 匹配所有小于给定索引值的元素
                    . :not(元素选择器)// 移除所有满足not条件的标签
                    . :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
                . 属性选择器
                    . [attribute]
                    . [attribute=value]// 属性等于
                    . [attribute!=value]// 属性不等于
                . 表单选择器
                    :text
                    :password
                    :file
                    :radio
                    :checkbox

                    :submit
                    :reset
                    :button
                . 筛选器
                    . 上一个
                    . 下一个
                    . 父元素
                    . 儿子和兄弟
                . .find()
                    注意应用场景
            . 操作标签
                . 操作class类
                    . addClass()
                    . removeClass()
                    . hasClass()
                    . toggleClass()

    . jQuery
        . 选择器  $("")
            . 基本选择器
                . ID       --> $("#d1")
                . 标签名   --> $("p")
                . class名  --> $(".C1")
                . 通用的   --> $("*")
                . 组合     --> $(".c1,div,a")

            . 层级选择器
                . 子子孙孙   --> $("x y")
                . 儿子选择器 --> $("x>y")
                . 弟弟选择器 --> $("x~y")
                . 毗邻选择器 --> $("label+input")

        . 筛选器
            . 基本筛选器
                . :first
                . :last
                . :eq()   --> 从0开始
                . :even   --> 偶数
                . :odd    --> 奇数
                . :gt
                . :lt

                . :not    --> $("div:not(.c1)")
                . :has    --> $("div:has(.c1)")

            . 属性选择器
                . $("[title]")
                . $("[type='text']")
                . $("[type!='text']")

            . 表单选择器
                . $(":checkbox")   -->   $("input[type='checkbox']")
                . $(":text")

                ...
            . 表单对象
                . $(":disabled")   --> 找到不可用的标签

                ...
            . 筛选器方法(只是应用场景和上面的基本筛选器不同而已)
                . $("div").first()
                . ...
            . 常用的方法
                . .next()     --> 找到挨着我的下一个同级标签
                . .nextAll()  --> 下边同级的所有
                . .nextUntil()--> 往下找,直到找到终止条件为止

                . .prev()
                . .prevAll()
                . .prevUntil()

                . .siblings()  --> 找所有的兄弟(前面的后面的都能找到)
                . .children()

                . .parent()
                . .parents()
                . .parentsUntil()

                . .find(各种条件都可以写)

        . 样式操作
            . 操作class类
                . .addClass()
                . .removeClass()
                . .hasClass()
                . .toggleClass()

    . 问: 字符串格式化:%和format 有什么区别?

    Python新版本推荐使用format.
    Python2. 新加入的format语法支持.
    .6加入了一个 f-strings新特性

(http://www.bootcdn.cn/)  PyCon  meetingup (关注一下时事热点技术)

    . 修改样式
        . 操作class类
            自定义模态框弹出和隐藏

        . 直接修改样式
            . 原生DOM  .style.color="green"

            . $("div").css("color", "green")

            . 修改多个样式时,传入键值对!!!

        . 位置
            . offset
            . position   --> 获取相对父标签的偏移位置
            . scrollTop()// 获取匹配元素相对滚动条顶部的偏移
            . scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

            返回顶部示例

        . 大小
            . height()
            . width()
            . innerHeight()
            . innerWidth()
            . outerHeight()
            . outerWidth()

            注意:outerHeight()和outerWidth()取得是内容+padding+border

    . 文档操作
        . 操作HTML
            .html()    --> 类似于 innerHTML
        . 操作text
            .text()    --> 类似于 innerText

        . 值
            . val()// 取得第一个匹配元素的当前值
            . val(val)// 设置所有匹配元素的值

    . 属性操作
        . attr()
            . attr(attrName)// 返回第一个匹配元素的属性值
            . attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
            . attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
            . removeAttr()// 从每一个匹配的元素中删除一个属性
        . prop()   --> checkbox和radio用这个