[TOC]

字符文本参考

HTML中 &emsp等空格的区别

勾选框的几种常用方法

1.单个勾选

<p>
     <input type="checkbox">
     阅读并接受<a href="#">《百度用户协议》</a>及<a href="#">《百度隐私权保护声明》</a>
</p>

2.多选框

<input type="checkbox" name="vehicle" value="Car">睡觉 
<input type="checkbox" name="vehicle" value="Car">打豆豆 
<input type="checkbox" name="vehicle" value="Car">旅游

注：多选框 name必须相同

使用 label 元素提高表单的可访问性

有两种方法来优雅地扩展表单控件的点击区域。其一是使用label标签包裹控件元素，另外的方法就是使用label标签的for属性与控件元素的id相关联。
建议使用for + id方法

<p>
  <label>标签 <input name="input" type="text" /></label>
</p>

建议使用
<p>
  <label for="test">标签</label> <input name="input" type="text" id="test" />
</p>

清除浮动的办法

1) 固定高度
可以把浮动的盒子装在一个父元素中，给父元素设置固定高度，不会对后面的内容造成影响

2) overflow
在父元素上设置overflow:hidden; 重新计算父元素的高度，不会对后面的内容造成影响

3) 空div清除浮动
在浮动盒子的后面添加一个空的div块元素，设置clear:both; 即可清除
//css
.clearfix{clear:both;}

    //html<br />        <div class="clearfix"></div>

4) after清除浮动【推荐使用】
在父元素上添加伪元素 class=”cf”，并且设置为块元素，实现清除浮动 

.cf::after {
    content: '';
    display: block;
    clear: both;
}

css 文本和div垂直居中

参考
1.对于单行文本，我们只需要将文本行高(line-height)和所在区域高度(height)设为一致即可

height: 100px;
text-align: center;
line-height: 100px;

2.多行文本垂直居中分为两种情况，一个是父级元素高度不固定，随着内容变化；另一个是父级元素高度固定。
父级元素高度不固定

1）父级高度不固定的时，高度只能通过内部文本来撑开。这样，我们可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：
2）父级元素高度固定
本文一开始就提到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，结合display: table;，可以使得div模拟table属性。因此我们可以设置父级div的display属性：display: table;；然后再添加一个div包含文本内容，设置其display:table-cell;和vertical-align:middle;

not(:last-child)的用法

参考连接

<style>
    ul{
        list-style: none;
    }
    li{
        display: inline;
    }
    li:not(:last-child)::after{
        content: "|";
    }
</style>
<nav>
    <ul>
        <li>HTML 5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
</nav>

实现效果：
image.png

行内块(非常常用)

display:inline-block; /* 行内块 */

以行内块显示，具备行内元素和块显示的特性
浮动起来的元素是行内块

1) 清除列表标识

    list-style:none;

2) 表格细边框

    在td上设置边框，然后在table上设置合并边线：<br />        border-collapse:collapse;

3) 鼠标手形

    cursor:pointer;<br />**hand（手型，IE8及以下，新版浏览器要使用pointer表示点击的手型）、crosshair（“十”型）、text （“I”型）、wait（等待）、default（默认）、help（帮助）、e-resize（东箭头）、ne-resize（东北箭头）、n-resize（北箭头）、nw-resize（西北箭头）、w-resize（西箭头）、sw-resize（西南箭头）、s-resize（南箭头）、se-resize（东南箭头）和auto（自动）**

伪类

link 未访问的链接
visited 已访问链接
hover 鼠标移动到链接上
active 鼠标点击时

定位属性

    position:relative | absolute | fixed;<br />        relative    相对定位：**相对原位置进行偏移，原位置保留**<br />        absolute    绝对定位：**脱离文本流，默认以浏览器边缘为基准进行偏移**，**如果父元素有定位**（三种定位中的任意一种），则**以父元素的边缘为基础进行偏移**<br />        fixed       固定定位：效果与绝对定位一样<br />                      区别：绝对定位【会】跟着内容滚动，**固定定位【不会】跟着内容滚动**

3) 位置控制
left:长度;
right:长度;
top:长度;
bottom:长度;
注意：必须与position定位属性配合使用，进行偏移

4) 层次<br />        z-index:数字;<br />        默认值是0<br />** 注意：必须与绝对定位或固定定位配合使用**

定位技巧——子绝父相

子元素设置为绝对定位，父元素设置为相对定位<br />    效果：子元素的绝对定位以父元素的边缘为基准进行位置控制

怪异盒子

/ 怪异盒子 /
box-sizing:border-box;

结构伪类选择器first-child ulli:nth-child(3n)

section :first-child{
    background:#f00;
}

/* 解决误区的示例 */
section p:first-child{
    background:#f00;
}

section p:last-child{
    background:#f00;
}

<section>
    <div>第一个样式找到这里</div>
    <p>第二个样式不能找到这里，选择器的含义是：找到section的第一个标签，并且第一个标签为p才行</p>
    <h1>789</h1>
    <p>找到这里</p>   
</section>

1) 结构伪类选择器<br /> :first-child    第一个子元素<br />        :last-child     最后一个子元素<br />        :nth-child(n)   查找第n个子元素<br />                        n可以是一个数字，也可以是公式：偶数2n、奇数2n-1

注意：伪类前如果加标签名，是并且关系
如： div:first-child 查找第一个元素并且是div标签

2) 伪元素 理解为假的元素，可以看见，但在HTML中不存在该元素，可以设置样式
::placeholder 匹配到输入框的提示文字
::before 在内容之前添加伪元素
::after 在内容之后添加伪元素

  1. 阴影与圆角
    1) 盒子阴影
    box-shadow:inset x轴 y轴 模糊值 阴影大小 颜色;

    2) 圆角边框
    border-radius:半径;

  2. 过渡
    1) 实现过渡动画的步骤
    第一步：在标签上设置过渡属性 transition
    第二步：移上去hover让某些元素产生变化

    2) 过渡属性
    transition:过渡的属性 动画执行时间 动画类型 延迟时间;

输入内容 prompt

<html>
<head>
<script type="text/javascript">
function disp_prompt()
  {
  var name=prompt("请输入您的名字","Bill Gates")
  if (name!=null && name!="")
    {
    document.write("你好，" + name + "！今天过得好吗？")
    }
  }
</script>
</head>
<body>

<input type="button" onclick="disp_prompt()" value="显示一个提示框" />

</body>
</html>

确认执行 confirm

需求: 网页中有一个a标签,点击a标签时,让用户确认是否跳转
执行结果: 跳转: return true 不跳转: return false
onclick=”return confirm(‘你确认跳转吗?’)”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 简写：<a href="http://www.jd.com" onclick="return confirm('你确认跳转吗?')">跳转到京东</a> -->

    <!-- 项目使用 -->
    <a href="http://www.jd.com" onclick="return fn()">跳转到京东</a>
        <script>
                function fn(){
                    let result=confirm('你确认跳转吗?');
                    //正常判定
                    if(result){
                        return true;
                    }else{
                        return false;
                    }
                }
        </script>
</body>
</html>

周期、超时 定时器

let beating = self.setInterval(‘heartbeats()’, 500)
let timeId=setTimeout(‘heartbeats()’,5000);
注意函数要加引号

把一个文本输入框设置为只读模式；

txt.readOnly=true;

遍历 批量实现换背景色

for (leti = 0; i < dom.length; i++) {
//修改背景
dom[i].style=<br /> background:yellow;<br />
}

让页面中所有的按钮都设置为禁用；

//获取button
letbtn=document.getElementsByTagName(‘button’);
for (letj = 0; j < btn.length; j++) {
btn[j].disabled=true;

        }

DOM操作一个性别选项，默认选中男性

document.getElementsByClassName(‘sex’)[1].checked=true;

一个下拉菜单列表有5个选项，DOM操作选中第三项。

// bigbox.getElementsByTagName(‘option’)[2].selected=true;
document.querySelectorAll(‘option’)[2].selected=true;

节点增删查改

操作DOM节点----重点
    学习方法: 学习操作DOM节点,就是学习节点的  增 删 改 查
        专业术语:  CRUD  ==>增加(Create)、检索(Retrieve)、更新(Update)和删除(Delete)

    2.1查找节点:----了解
        document.getElementById()
        document.getElementsByTagName()
        document.getElementsByClassName()

        document.querySelector()
        document.querySelectorAll()

    重点
        子节点.parentNode;  通过子元素找父元素


    了解: 有BUG 
        父节点.firstChild    列表中的第一个节点
        父节点.lastChild    列表中的最后一个节点
        父节点.childNodes    所有子节点的列表


        同级兄弟节点.previousSibling    上一个兄弟节点
        同级兄弟节点.nextSibling    下一个兄弟节点
----------------------------------------------------------------------
    2.2 创建节点----重点中的重点
            作用: 使用原生js的方式,创建一个完整的标签
            如: 
                <div id="box" class="tt">这是一个盒子</div>

            语法:
                1)创建标签(元素对象)
                    let dom=document.createElement('div');

                2)给标签添加属性
                    方式一:
                        dom.setAttribute('属性名','属性的值');每一次只能添加一个属性
                    方式二:---推荐
                        dom.属性名=值;

                3)给标签加文本内容
                    dom.innerHTML=值;

----------------------------------------------------------------------
    2.3 增加节点---掌握
        1)在父级内容之后添加新节点---使用最多
            语法:
                父节点.appendChild(新节点);

        2)在指定兄弟节点之前添加新节点
            语法:
                父节点.insertBefore(新节点,兄弟节点)

----------------------------------------------------------------------
    2.4 修改节点:---掌握

        语法:
            父节点.replaceChild(新节点,旧节点);  表示使用新节点换旧节点

----------------------------------------------------------------------
    2.5 删除节点----重点

        语法: 
            父节点.removeChild(删除的子元素);

删除所有子节点

<script>
    let pDom=document.getElementsByTagName('p');
        //正着删除) 不能全删除
    //倒着删除
    for (let i = pDom.length-1; i >= 0; i--) {
        box.removeChild(pDom[i]);
    }    
</script>

事件注册


```html 

<a name="qM5og"></a>
### 事件
```html
4.事件----重点

    概念:  用户和计算机交互的方式或方法
    常用事件:
        鼠标事件 键盘事件 声控 窗口 触摸 表单.... 


    事件的四要素:----重点
        1)事件源: 事件发生在谁身上,谁就是事件源
        2)事件类型: 发生了哪类事件 
        3)事件处理函数(事件句柄): 发生事件时,所有执行的函数
        4)事件对象: 表示事件的旁观者,包含了事件所有的相关信息

    如:
        点击盒子box,让box背景变成绿的

        分析:
            事件源:  box对象
            事件类型: 点击事件  onclick
            事件处理函数:   让box背景变成绿的

-----------------------------------------------------------------------------
    2.2.常用事件
        鼠标事件 on: 当....发生时
            onclick     点击事件    点击鼠标左键触发
            ondblclick     双击事件    双击鼠标左键触发
            onmouseover    移入事件    鼠标指针移到一个元素上触发
            onmouseout     移出事件    鼠标指针移出一个元素上触发
            onmousemove     移动事件    鼠标在一个元素上移动持续触发
            onmousedown    鼠标按下    单击鼠标任何一个按键触发
            onmouseup    鼠标抬起    松开鼠标任何一个按键触发
        键盘事件
            onkeydown    键按下    用户按下一个键盘按键时触发
            onkeyup    键弹起    用户在键盘按键被松开时触发
            onkeypress    按键一次    事件会在键盘按键被按下并释放一个键时发生
        表单事件
            onsubmit    表单提交    　在提交数据之前触发该事件
            onreset    表单重置    　
            onblur    元素失去焦点    　
            onfocus    元素获取焦点    　
            onchange    用户改变域的内容    　
        窗口事件：两种书写方式

            第一种    <body onload = “函数名()”>    　
            第二种    window.onload = 函数名;    注意，这里没有*引号*和*小括号*


-----------------------------------------------------------------------------
5.注册事件的三种方式-----重点中的重点

    1)通过标签上的事件属性来注册事件----淘汰了
       语法:
        <标签名 事件属性="js代码"></标签名>

        缺点: 
            1.html和JS没有分离开,不方便后期的维护及更新
            2.同类型的事件,只能注册一次

    2)通过元素对象来注册事件---初级使用
        语法:
            方式一:
                元素对象.事件类型=函数名;

                function 函数名(){

                }

            注意: 使用时,函数名后不要加(),否则会条件执行一次 

            方式二: 
                元素对象.事件类型=function(){

                }

            优点:
                1.HTML代码和js分离了

            缺点: 同类型的事件只能注册一次

    3)通过事件侦听来注册事件----重点,项目中使用最多(后面讲)
            优点:
                1.html代码和js分离了
                2.同类型事件可以多次注册

表单验证

表单验证的分类:<br />        前端验证: 主要验证用户输入的数据是否符合指定规则(正则)<br />        后端验证: 主要验证获取到的数据是否在数据库中存在

有哪些验证方式:<br />        1.边输入边验证:  边输入一边验证数据  onchange  oninput<br />        2.输入后再验证:  输入完成后,再进行验证(提交时验证)  onsubmit<br />        3.失焦验证:  当光标离开input标签时,才进行验证  onblur

正则表达式

exec()是RegExp类的方法
match()是String类的方法

/hello/.exec('hello world');

'hello world'.match(/'hello'/);

result=reg.exec(str) = true

while(result=reg.exec(str)){   //result=reg.exec(str)  = true
    arr.push(result[0]);
}

let reg=/\d/g 带g的时候：
exec每次迭代一个，match会直接返回一个数组

JQuery

选择器

$(‘选择器’) / jQuery(‘选择器’)
通过ID来获取jq对象: $(‘#Id的值’)—-获取的是唯一的标签
通过类名来获取jq对象: $(‘.类名’)—-匹配为多个标签
通过标签名来获取jq对象: $(‘标签名’)—-匹配为多个标签

层级选择器——重点
父 后代选择器 表示选中指定父级中所有指定选择器的后代
父>子选择器 表示选中指定父级中所有指定选择器的子元素(只选中父子关系中的子元素)
同级兄弟 + 下一个同级兄弟 表示选中指定同级兄弟后面紧贴着的兄弟元素(选中一个)
同级兄弟 ~ 后面的同级兄弟选择器 表示选中指定同级兄弟后面所有的指定兄弟选择的元素

扩展: 选中前面,后面所有同级兄弟
同级兄弟.siblings() 表示选中指定同级兄弟前面后面所有的同级兄弟元素
同级兄弟.siblings(‘选择器1,选择器2’) 表示选中指定同级兄弟前面后面所有的指定选择器的同级兄弟元素

        // 父 后代
        $('#father div').css('background','pink');

        //父>子
        $('#father>div').css('background','red');

        //兄弟+下一个同级兄弟(紧贴着的兄弟)
        $('.box+p').css('background','yellow');

        //兄弟~后面所有的同级兄弟
        $('.box~div').css('background','blue');


        //扩展:  前后同级兄弟
        // $('.first').siblings().css('background','green');
        //选中当前.first 标签前面和后面 同级兄弟 h1 span
        $('.first').siblings('h1,span').css('background','green');

1)基本过滤:

        :first         获取第一个元素----重点<br />            :not(排除的选择器)  排除选中的,没有选中的才生效----理解<br />            :even         获取索引为偶数的元素(选中实际中第1 3 5 7 9的元素)<br />            :odd          获取索引为奇数的元素(选中实际中第2 4 6 8 0的元素)<br />            :eq(索引值)   选中指定索引值的元素----重点<br />            :gt(索引值)   选中大于指定索引的元素<br />            :last         获取最后一个元素 ----理解<br />            :lt(索引值)   选中小于指定索引的元素<br />            :header       获取所有h1~h6(标题标签)<br />            :animated     选中正在执行动画的元素

/* 
            :first         获取第一个元素----重点
            :not(排除的选择器)  排除选中的,没有选中的才生效----理解
            :even         获取索引为偶数的元素(选中实际中第1 3 5 7 9的元素)
            :odd          获取索引为奇数的元素(选中实际中第2 4 6 8 0的元素)
            :eq(索引值)   选中指定索引值的元素----重点
            :gt(索引值)   选中大于指定索引的元素
            :last         获取最后一个元素 ----理解
            :lt(索引值)   选中小于指定索引的元素
            :header       获取所有h1~h6(标题标签)
            :animated     选中正在执行动画的元素

        */

        //:even         获取索引为偶数的元素(选中实际中第1 3 5 7 9的元素)
        $('#father li:even').css('background','blue');
        //:odd          获取索引为奇数的元素(选中实际中第2 4 6 8 0的元素)
        $('#father li:odd').css('background','yellowgreen');

        //:first         获取第一个元素----重点
        $('#father li:first').css('background','gray');
        //  :last         获取最后一个元素 ----理解
        $('#father li:last').css('background','black');


        //:eq(索引值)   选中指定索引值的元素----重点

        //索引值小于6
        $('#father li:lt(6)').css('color','#bbb');

        //索引值大于6
        $('#father li:gt(6)').css('color','pink');

        //选中索引值为6
        $('#father li:eq(6)').css('color','gold');

        //:animated
        $("#run").click(function(){
            //div:not(:animated) 给没有动画的元素添加动画
            $("div:not(:animated)").animate({ left: "+=20" }, 1000);
        });

2)内容过滤

        :contains('文本内容')  匹配包含给定文本内容的元素 <br />            :has(选择器)  匹配含有选择器所匹配的元素的元素

            //contains()
      $("div:contains('小')").css('background','red');
      $("div:contains('子')").css('background','yellow');

      //has()
      $("div:has(p)").addClass("test");

操作样式

: 用于设置或获取指定jq对象上的样式
获取: jq对象.css(‘样式名’);
设置:
单个样式属性: jq对象.css(‘样式名’,’样式的值’); 一次只能设置一个样式属性
多个样式属性: 形式: key:value 键值对 

        jq对象.css({<br />                '样式名1':'样式的值',<br />                '样式名2':'样式的值',<br />                '样式名3':'样式的值'<br />            })

        //单个属性
        $('div').css('background','green');

        //多个属性
        // $('div').css({'width':'400px','height':'400px'});
        // $('div').css({width:'400px',height:'400px'});
        $('div').css({
            width:400,
            height:400,
            backgroundColor:'red'
        });//---推荐使用

1)自定义属性 .attr()

: jq对象.attr()
获取: jq对象.attr(‘属性名’); 获取到指定属性的对应的值
设置:
单个属性: jq对象.attr(‘属性名’,’属性的值’);
多个属性:
jq对象.attr({
‘属性名1’:’属性的值’,
‘属性名2’:’属性的值’,
‘属性名3’:’属性的值’
…
});

2)标准属性 .prop()

: jq对象.prop()
获取: jq对象.prop(‘属性名’); 获取到指定属性的对应的值
设置:
单个属性: jq对象.prop(‘属性名’,’属性的值’);
多个属性:
jq对象.prop({
‘属性名1’:’属性的值’,
‘属性名2’:’属性的值’,
‘属性名3’:’属性的值’
…
});

    注意:<br />            1.**一般需要添加或获取,一般推荐使用attr()**<br />            2.**prop()主要用于获取或设置 布尔属性时使用 **<br />                布尔属性:  属性名=值   如: checked="checked"

                实际如果选中 返回值为 true<br />                    实际如果没选中 返回值为 false

                jq对象.prop('checked')

        //自定义属性
        //获取
            console.log($('div').attr('id'));//标准属性
            console.log($('div').attr('title'));//标准属性
            console.log($('div').attr('ii'));//自定义属性

        //设置
        // $('div').attr('iiii','tttt');
        $('div').attr({
            'id':'bigbang',
            'aaa':'123123'
        });


        //标准属性:
        console.log($('div').prop('id'));//标准属性
        console.log($('div').prop('aaa'));//自定义属性


        console.log($('input').prop('checked'))
        //选中
        $('input').prop('checked',true)

操作类名:——-重点

语法:<br />        添加类名:   jq对象.addClass('类名');<br />        删除所有类名:  jq对象.removeClass();<br />        删除指定类名:  jq对象.removeClass('类名');<br />        添加或删除类名的切换:  jq对象.toggleClass('类名');

    jq对象.hasClass('类名') === 判断元素对象中是否含有指定类名 ： true/false

$('div').click(function(){
            //添加类名
            // $(this).addClass('red test');

            //删除所有类名
            // $(this).removeClass();

            //删除ttt类名
            // $(this).removeClass('ttt news');

            //切换类名
            // $(this).toggleClass('box');

            console.log($(this).hasClass('box'));

        })

原生对象和jq对象的区别:

定义的区别:
通过原生js的方法获取到的元素对象,就是原生对象
如:
document.getElementById(‘id的值’);
document.getElementsByTagName(‘标签名’);
document.getElementsByClassName(‘类名’);
document.querySelector()
document.querySelectorAll()

    通过jq的方法获取到的元素对象,就是jq对象<br />            如:<br />                $('选择器') 或 jQuery('选择器')

注意:
1.原生js对象只能使用原生对象上的属性和方法,不能使用jq对象的属性和方法
1.jq对象只能使用jq对象上的属性和方法,不能使用原生js对象的属性和方法

原生 jq 的相互转换

//获取原生对象
        let divDom=document.getElementById('box');

        console.log(divDom);//原生对象

        //有BUG
        // divDom.innerHTML='你吃了吗';
        // divDom.html('你吃了吗');//原生对象不能使用jq对象上的属性和方法

        //获取jq对象  (一般jq对象取名时,先加$ 主要用于区别原生和jq对象)
        let $dd=$('#box');

        console.log($dd);//jQuery.fn.init开头就是jq对象


        //转换
        //原生转jq
        console.log($(divDom))

        //jq转原生
        console.log($dd[0])
        console.log($dd.get(0))

操作DOM——重点

作用:进行DOM的 增 删 改 查 复制 替换 包裹

重点:  创建节点 添加节点 删除节点 复制节点

创建节点:—-重点

   语法:<br />            $("html代码")<br />        如:<br />            <div id="box" class="test">内容</div>

    细节:---了解<br />            创建标签节点<br />                $("<div></div>")<br />            添加属性:<br />                $("<div id="box" class="test"></div>") <br />            添加文本<br />                $("<div id="box" class="test">内容</div>")

增加节点—-重点

    分类:<br />            1)在父级内容之后或之前添加新节点<br />            2)在指定兄弟节点之后或之前添加新节点

    语法:<br />            1)在父级内容之后或之前添加新节点<br />            //之后---重点<br />                父节点.append(新节点)  表示在指定父节点内容之后,添加新节点---重点<br />                新节点.appendTo(父节点) 表示把新节点添加到父节点内容之后---掌握<br />            //之前<br />                父节点.prepend(新节点)  表示在指定父节点内容之前,添加新节点<br />                新节点.prependTo(父节点) 表示把新节点添加到父节点内容之前

       2)在指定兄弟节点之后或之前添加新节点<br />            //之后<br />                兄弟节点.after(添加的兄弟节点);   在指定的兄弟节点之后添加新的兄弟节点<br />                添加的兄弟节点.insertAfter(兄弟节点);把新的兄弟节点添加到指定兄弟节点之后 <br />            //之前<br />                兄弟节点.before(添加的兄弟节点);   在指定的兄弟节点之前添加新的兄弟节点<br />                添加的兄弟节点.insertBefore(兄弟节点);把新的兄弟节点添加到指定兄弟节点之前 

                        //1.创建一个节点
             let newLi=$("<li>我是新来的1</li>");

            //在父内容之后添加节点
            $('#father').append(newLi);
            $('#father').append("<li>我是新来的2</li>");

            //在父内容之后添加节点
            let newLi3=$("<li>我是新来的3</li>");
            newLi3.appendTo('#father');

            //在父内容之前添加节点
            let newLi4=$("<li>我是新来的4</li>");
            $('#father').prepend(newLi4);
            newLi4.prependTo('#father');  //jq对象只能用一次

            let newLi5=$("<li>我是新来的5</li>");
            newLi5.prependTo('#father');

//在指定兄弟节点之后或之前添加新节点
            //1.创建一个节点
             let newLi=$("<li>我是新来的</li>");

             //之后
            //  $('#two').after(newLi);
            //  newLi.insertAfter('#two');

            //之前
            $('#two').before(newLi);

删除节点—-重点

    语法:<br />            jq对象.empty()  删除所有元素,不包括自身(清空jq对象的内容)<br />            jq对象.remove() 删除所有元素,包括自身,不保留事件(行为),会返回删除后的元素<br />            jq对象.detach() 删除所有元素,包括自身,会保留事件(行为),会返回删除后的元素

复制节点—-掌握

   语法:<br />            jq对象.clone(false)  表示复制节点,不复制节点上的事件(行为)<br />            jq对象.clone(true)  表示复制节点,又复制节点上的事件(行为)

筛选节点—-掌握

语法:<br />        父获取子<br />            父节点.children(); 获取当前父级中所有的子节点<br />            父节点.children('选择器1,选择器2,...'); 获取当前父级中所有指定选择器的子节点

    兄弟中找下一个节点:<br />            兄弟节点.next()  获取当前兄弟节点后一个节点<br />            兄弟节点.nextAll()  获取当前兄弟节点后面所有的兄弟节点<br />            兄弟节点.nextUntil('选择器')  获取当前兄弟节点到后面指定兄弟节点之间所有的节点

    兄弟中找上一个节点:<br />            兄弟节点.prev()  获取当前兄弟节点前一个节点<br />            兄弟节点.prevAll()  获取当前兄弟节点前面所有的兄弟节点<br />            兄弟节点.prevUntil('选择器')  获取当前兄弟节点到前面指定兄弟节点之间所有的节点

jq遍历对象

<body>
    <ul id="list">
        <li>标题1</li>
        <li>标题2</li>
        <li>标题3</li>
        <li>标题4</li>
        <li>标题5</li>
        <li>标题6</li>
        <li>标题7</li>
        <li>标题8</li>
        <li>标题9</li>
        <li>标题10</li>
    </ul>
    <script>
        //方式一
        $('#list li').each(function(index,dom){
            console.log(`索引值为:${index}对应的值为:====>${dom}`);
            console.log(dom);  
        }) 

        //方式二:
        $.each($('#list li'),function(index,dom){
            console.log(index);  
            console.log(dom);  
        })        
    </script>
</body>
</html>

1)偏移

        概念: 获取当前元素距离浏览器窗口的距离(left,top)<br />            语法:   <br />                jq对象.offset();<br />            值: 是一个对象{left:值,top:值}

2)定位

        概念: 获取当前元素距离已经定位元素的距离(left,top)<br />            语法:<br />                jq对象.position();<br />            值: 是一个对象{left:值,top:值}

    注意:<br />            1.以上两个方法一般都用于获取值,需要设置值时,请使用其它方法<br />            2.使用其它方法设置值:  jq对象.css()  或 jq对象.animate()

使用JS监听键盘按下事件（keydown event）

$(document).keydown(function(event){ 
    if(event.keyCode == 13){
        目标方法名();
    } 
});

原生和jq的文档加载事件——掌握

原生窗口加载事件:<br />        作用: 当网页中所有资源加载完成后,才执行指定代码<br />            说明:所有资源: html CSS imgs 视频 音频....

    语法:<br />            window.onload=function(){<br />                需要执行的js代码...

        }

jq文档加载事件:<br />        作用: 当网页中HTMLDom加载完成后,就可以执行代码了

    语法:<br />            方式一:<br />                $(document).ready(function(){<br />                   需要执行的js代码...  <br />                })<br />             方式二:<br />                $().ready(function(){<br />                   需要执行的js代码...  <br />                })<br />            方式三: 推荐使用<br />                $(function(){<br />                   需要执行的js代码...  <br />                }

jq的事件绑定——重点

说明: 在jq中,常用以下四个方法来绑定(注册)事件 <br />        .bind()<br />        .live()<br />        .delegate()<br />        .on()----推荐使用<br />_自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。1.9废弃_

普通事件注册:

    语法:<br />            jq对象.on('不带on的事件类型',事件处理函数);

1)一对一 ——掌握 语法:
事件源.on(‘不带on的事件类型’,事件处理函数);
如:
jq对象.on(‘click’,function(){})
简写:jq对象.click(function(){})

2)一对多:—-理解
语法:
事件源.on(‘事件类型1 事件类型2 …’,事件处理函数);

                如: <br />                        jq对象.on('click mouseover mouseout',function(){})

                相当于: <br />                        jq对象.click().mouseover().mouseout()

3)多对一: —-理解(也可以不使用)
语法:
事件源.on({
‘事件类型1’:事件处理函数1,
‘事件类型2’:事件处理函数2,
‘事件类型3’:事件处理函数3,
….
})

相当于:
jq对象.click().mouseover().mouseout()

on() 和 click() 的区别:

二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。

事件委派——重点

又称: 事件代理－事件派发－事件委托

概念: 注册事件时,把事件注册到父级上,由父级来分配(分发)事件任务,这样就可以给后来的元素添加上事件

语法:<br />        $('已经存在的父选择器').on('不带on的事件类型','新增的后代选择器',事件处理函数);

$('#box').on('click','p',function(){
    alert(1111);
})
//点击 p标签 弹出1111

运用场景:  购物车中删除 添加...功能

注销事件——掌握

作用:对已经注册的事件进行取消操作

语法:<br />        jq对象.off();  //注销当前jq对象上所有事件类型<br />        jq对象.off('事件类型1 事件类型2 ...');  //注销当前jq对象上所有指定的事件类型

注意:<br />        如果使用bind绑定事件,需要使用unbind()来取消<br />        如果使用on绑定事件,需要使用off()来取消<br />        操作语法都一样,只是关键字不一样

//点击btn给div注销指定事件
$('#btn').click(function(){
    //$('div').off();//注销所有事件类型 
    // $('div').off('mouseover');//注销所有指定事件类型 
    $('div').off('mouseover click.two');//注销所有指定事件类型
})

合成事件—-了解

 作用:相当于css中的hover效果<br />    语法:<br />        jq对象.hover(移入效果,移出效果);

    jq对象.hover(function(){<br />            //移入 相当于  mouseenter<br />        },function(){<br />            //移出  相当于 mouseleave<br />        })

$('div').hover(function(){
            //移入
            $(this).css('background','yellow');
        },function(){
            //移出
            $(this).css('background','pink');
        })

事件对象—-掌握

概念: 事件对象作为事件处理函数的第一个参数的形式进行传入

语法:<br />        jq对象.on('不带on事件类型',function(event/e){<br />            //可以通过event对象获取到以下东西 <br />            事件源:  event.target<br />            事件类型:  event.type<br />            获取鼠标坐标:  <br />                event.pageX;<br />                event.pageY;

        阻止浏览器默认行为: event.preEventDefault();<br />            阻止事件传播顺序: event.stopPropagation();<br />        })

//绑定send的点击事件
$('#send').click(fnSend);

//事件对象 ----回车发送信息
$('input').keyup(function(e){
     if(e.keyCode==13){
        fnSend();
     }
     console.log(e.keyCode);
})

//事件处理函数
function fnSend(){
    // alert(111)
    //获取input标签的值
    let val=$('input').val();

    //把值做成li标签的方式,添加到msg中
    $('#msg').append("<li>"+val+"</li>");
}

插件:——了解

推荐网址：
http://plugins.jquery.com/ —-官网(全英文)
http://www.jq22.com/ ——中文插件网

百度:   jq+需要搜索的内容

使用步骤: 1.下插件(网上自己搜索下载)
2.引插件(引入jquery库 引jq插件 引样式 引HTML结构)
3.配插件(初始化插件,配置相关参数)
4.看效果

修改插件:----理解<br />        两种方式:<br />            1)修改源码:---有点难,一般不建议使用此方法<br />            2)修改样式:----使用最多,最常用的方法<br />                注意:<br />                    插件可能后期还会复用,一般修改样式都在自己的样式表中修改,不要去改插件的样式表, 主要是使用选择器的优先级覆盖样式表中的需要修改的内容

JQuery表单验证控件jquery.validate.js使用说明+中文API

参考连接

ui框架

HTML5新特性

Input里的type

参考连接

input标签新加的type属性:

        email    电子邮件
        url    URL地址
        number    数值的输入域
        range    区间选择器
        search    搜索框
        color    颜色选择器
        tel    电话号码
        date    选取日,月,年
        month    选取月,年
        week    选取周和年
        time    选取时间(小时和分钟)
        datetime    选取 时间,日,月,年(UTC时间)
        datetime-local    选取 时间,日,月,年(本地是时间)

input标签重点属性:—-理解

[参考链接](https://www.w3school.com.cn/tags/tag_input.asp)<br />        autofocus:  自动获取焦点 <br />        multiple    文件选择框为多选；<br />        placeholder   输入框提示信息<br />        required      必填项

datalist 输入域的选项列表(输入联想提示内容)

        注意: 一般input标签不需要类型  标签上通过list属性的值和datalist进行绑定<br />                datalist中放所有需要提示的选项 option 但必需给value

html5中的自定义属性:—-重点

概念: h5中把原生属性 和 自定义属性进行区分  使用data-* 表示自己添加的属性<br />    注意:<br />        * 表示自定义的名字    如:  data-zs="张三"

js操作方式:----重点<br />        设置:   元素对象.dataset.键名=键值   或 元素对象.dataset['键名']=键值;

    获取:  元素对象.dataset.键名  或  元素对象.dataset['键名']

jq操作方式:---了解

    设置:  jq对象.data('键名','键值');

    获取:  jq对象.data('键名');

    注意: 在标签本身是看不到指定自定义属性的,但可以获取到

web存储技术——重点中的重点

目前web存储使用最多的以下三种方式:<br />        cookies:---了解<br />        sessionStorage---重点 会话级存储  当打开网页窗口时,就有了,关闭窗口,就没有了<br />        localStorage---重点  本地级存储   只要不主动删除,一直存在 


区别:---面试题<br />        1) cookie存储---了解,一般后端使用最多<br />            存储大小:  4KB<br />            存储的数据类型: 一般用于保存字符串类型, 不安全,一般不使用保存帐号密码,只能保存登录状态 <br />        2) sessionStorage 会话级存储---重点<br />            概念: 主要用于窗口级的对话,关闭窗口,数据就消失了<br />            存储大小: 5M <br />            生命周期: <br />                开始: 打开窗口 <br />                结束: 关闭窗口

        语法:<br />               sessionStorage.setItem('键名','键值');  保存的数据(字符串类型 ) <br />               sessionStorage.getItem('键名');  获取指定键名的数据(字符串类型 )  <br />               sessionStorage.removeItem('键名');  删除指定键名的数据<br />               sessionStorage.clear();  清除所有会话级存储数据

    3) localStorage 本地级存储----掌握<br />            概念: 主要把数据存储在本地(本机中),数据如果不主动删除,一直存在<br />            存储大小: 5M 

        语法:<br />               localStorage.setItem('键名','键值');  保存的数据(字符串类型 ) <br />               localStorage.getItem('键名');  获取指定键名的数据(字符串类型 )  <br />               localStorage.removeItem('键名');  删除指定键名的数据<br />               localStorage.clear();  清除所有会话级存储数据