1事件冒泡和捕获

1.1.事件冒泡：在子标签中产生的事件会传递给父标签

    <div id="box1">
        <div id="box2">
            <div id="box3">
                
            </div>
        </div>
    </div>

    <script type="text/javascript">
        window.onload=function(){
            //获取节点
            var box1Node=document.getElementById('box1')
            var box2Node=document.getElementById('box2')
            var box3Node=document.getElementById('box3')
            //绑定事件
            //1.事件冒泡：在子标签中产生的事件会传递给父标签
            box1Node.onclick=function(){
                console.log('box1被点击')
                alert('box1被点击')
            }
            box2Node.onclick=function(){
                console.log('box2被点击')
                alert('box2被点击')
            }
            box3Node.onclick=function(evt){
                console.log('box3被点击')
                alert('box3被点击')
                //2.捕获事件-阻止事件从子标签传递给父标签
                evt.stopPropagation()
            }
        }
    </script>

1.2事件捕获

捕获事件-阻止事件从子标签传递给父标签

            box3Node.onclick=function(evt){
                console.log('box3被点击')
                alert('box3被点击')
                //2.捕获事件-阻止事件从子标签传递给父标签
                evt.stopPropagation()
            }

2限行查询

设置垂直方向的对齐方式

vertical-align: middle;

2.1获取当前时间

        var now=new Date()//创建时间对象
        var year=now.getFullYear()//年
        var month=now.getMonth()//月
        var day=now.getDate() //天
        var week=now.getDay()//星期
    获取输入框中的内容
var carNumNode=document.getElementsByTagName('input')[0]
var carNum=carNumNode.value

            //创建新的节点
            var newNode=document.createElement('p')
正则对象.test(字符串) - 匹配-返回值是布尔值

var reObj=/^[京津沪渝辽吉黑冀鲁豫晋陕甘闽粤桂川云贵苏浙皖湘鄂赣青新宁蒙藏琼][A-Z]\s+[A-Z\d]{5}$/
reObj.test(carNum)

            c.添加节点
            resultBoxNode.appendChild(newNode)  
                    清除函数
        clearBtnNode.onclick=function(){
            resultBoxNode.innerText=''
        }

3修改标签层次关系

z-index：默认都是0，当有多个标签重叠时，这个值大的在上面，小的在下面

        #div2{
            background-color: lightgreen;
            position: absolute;
            top: 150px;
            left: 150px;
            z-index: 2;
        }

4jQuery基础

4.1什么是jQuery

jQuery就是JavaScript的一个第三方库，主要针对标签进行封装（包括节点操作，属性操作，样式操作，事件操作等）

4.2怎么写jQuery代码

1通过script标签导入jQuery文件
2在jQuery中所有的内容都是封装到jQuery对象中的，jQuery对象可以用"$"代替

4.3节点操作

window.onload - 当网页中的内容全部加载成功后触发的事件（如果有网络图片，会等图片加载成功）（用的较少）
$(函数) - 函数中的函数体会等标签全部添加成功后执行（用的较多）
导入jQuery的两种方式

    --1.导入jQuery本地文件--
    <script type="text/javascript" src="js/jquery.min.js"></script>

    --2.企业开发的时候，通过cdn加速，去服务器直接导入jQuery文件--      
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

写jQuery的两种方式

        ===完整版===
        $(document).ready(function(){
            console.log(document.getElementsByTagName('p')[0])
        })
        =========简写版==========
        $(function(){
            console.log(document.getElementsByTagName('p')[0])
        })

4.3.1获取节点操作（选择器）

('标签选择器') - 选择网页中所有的指定标签，返回jQuery对象不是数组
注意：如果选择器同时选中了多个，返回值和选中一个的时候的类型是一样的。可以通过结果直接对选中的所有标签一起操作。

var divNodes=$('div')
divNodes.css('color','red')
var div11Node=$('#div11')
console.log($('.cdiv1'))
console.log($('a,p'))
console.log($('#div1 #div11 a'))

4.3.2父子选择器

console.log($('div1>p')) //通过父标签拿子标签（类似后代选择器）
console.log($('#h1+a'))//获取紧跟着h1标签的a标签
console.log($('#p1~*')) //获取id是p1的标签后面的所有的同级标签（*（通配符）可变，.（class选择器）和#（id选择器）都可以）
console.log($('div:first')) //第一个div标签
console.log($('p:last')) // 最后一个p标签
console.log($('div *:first-child')) // 找到所有div标签中的第一个子标签
console.log($('#div1 a:first-child')) // 找到div1标签中的第一个a标签

4.3.3创建标签

('<div style="color:red">div标签</div>')

var divNode=$('<div style="background-color: red;width: 200px;height: 200px;">我是div</div>')

4.3.4添加标签

父标签.append(子标签) - 在父标签的最后添加子标签
父标签.prepend(子标签) - 在父标签的最前面添加子标签
兄弟标签.before（兄弟标签）-在指定标签前添加指定标签
兄弟标签.after（兄弟标签）-在指定标签后添加指定标签

$('body').append(divNode) //在标签最后添加
$('body').prepend(divNode)//在标签最开始添加
$('h1').before($('<h1 style="color: yellowgreen;">我是标题0</h1>')) //在所有h1标签前添加一个h1标签
$('h1').after($('<h2 style="color: greenyellow;">我是标题2</h2>')) //在所有h1标签后添加一个h2标签

4.3.5删除标签

标签.empty（） - 清空指定标签
标签.remove() - 删除指定标签

$('#div2').empty()
$('h1').remove()

4.3.6拷贝和替换（见手册）

5jQuery属性和样式操作

5.1普通属性的获取和修改

除了innerHTML,innerText及value之外的普通属性的获取
标签.attr（属性名） - 获取指定的属性值
标签.attr(属性名，值)-修改/添加属性

var text1=$('img').attr('src') //获取属性的值的时候只获取被选中标签中的第一个标签
$('img').attr('title','图片1') //修改和添加会针对所有选中的标签

5.2获取标签的内容属性

双标签.html（）
双标签.text（）
单标签.val（）
注意：上面的函数不传参就是获取值，传参就是修改值

console.log($('p').html()) //取完整代码
console.log($('p').text()) //只取文字部分
console.log($('input').val()) //单标签中的val属性
$('p').html('新段落')//修改值

5.3class属性

html中一个标签可以有多个class值，多个值用空格隔开
标签.addClass(class值) - 给标签添加class值
标签.removeClass(class值) - 移除标签中指定的class值

$('div').addClass('w')
$('#div1').removeClass('c')

5.4样式属性

a.获取属性值
标签.css(样式属性名) - 获取样式属性值

var height=$('p').css('height')

b.修改和添加
标签.css（样式属性名，值） - 修改属性值

$('p').css('background-color','blue')

标签.css（{属性名：值，属性名2：值2}） - 同时设置多个属性

$('p').css({
    "color":"yellow",
    "font-size":"30px"
})

5.5 事件

a.标签.on(事件名，[标签2]，回调函数) - 给标签绑定指定的事件，再调用指定函数（和js中的addEventLisenner一样）；事件名不需要on。
(js对象) - 将js对象转换成jQuery对象

$('button:first').on('mouseover',function(){
    console.log(this)//this是js中的对象，可以直接调用js对象的属性和方法
    $(this).text('进入！！！')//$(this)是jQuery对象
})

b.标签.on(事件名，选择器，回调函数)
选择器-前面标签中的后代标签

$('#v01').on('click','.v011 .v0111',function(){
    console.log(this)
})

6jQuery的动态添加和删除

              =========添加=========
    <div id="top">
    </div>
    <!--默认显示的水果-->
    <script type="text/javascript">
        var fruitArray=['苹果','香蕉','荔枝']
        for(var x in fruitArray){
            //取水果名
            var fruitName=fruitArray[x];
            //创建标签对象
            var fruitNode=$("<div class='fruit'>"+fruitName+"</div>")
            fruitNode.append($("<font style='cursor:pointer;'>x</font>"))
            //添加标签
            $('#top').append(fruitNode)
        }
    </script>
    =========删除==========
<script type="text/javascript">
    $('#bottom button').on('click',function(){
        //获取输入框中的内容
        var newName=$('#bottom input').val()
        //创建新标签
        var newNode=$("<div class='fruit'></div>").text(newName)
        newNode.append($("<font style='cursor:pointer;'>x</font>"))
        //添加
        $('#top').prepend(newNode)
    })

    //删除水果
    $('#top').on('click','font',function(){
        $(this).parent().remove()
    })
</script>

7Ajax的使用

Ajax(由jQuery封装的) - asynchronous JavaScript + xml（异步js+xml）
一般用来作网络数据请求，类似python中requests库（http请求）
语法：

7.1get请求

$.get(url,data,回调函数，返回的数据类型)
-url：请求地址（字符串）
-data:参数列表（对象）
-回调函数：请求成功后自动调用的函数（函数名或者匿名函数）
返回数据类型：请求到的数据的数据格式（字符串，例如：’json‘）

7.2post请求

$.post(url,data,回调函数，返回的数据类型)
-url：请求地址（字符串）
-data:参数列表（对象）
-回调函数：请求成功后自动调用的函数（函数名或者匿名函数）
返回数据类型：请求到的数据的数据格式（字符串，例如：’json‘）

7.3 ajax

$.ajax({
'url':请求地址
'data':{参数名1：值1，参数名2：值2}
'type':'get'/'post'
'dataType':返回数据类型
'success':function(结果){
请求成功后要做的事情}
})

<body>
    <div id="box1">
        <input type="text" name="" value="" id="inp1" placeholder="请输入梦象"/>
        <button id="but1">查询</button>
    </div>
    <div id="box2">
        
    </div>
</body>

<script type="text/javascript"> 
    //请求数据
    function getData(){
        //获取输入的值
        var message=$('#inp1').val()
        var url='http://api.tianapi.com/txapi/dream/'
        $.get(url,{'key':'772a81a51ae5c780251b1f98ea431b84','word':message},function(re){
            //从请求的数据中提取数据
            var data=re.newslist
            //提取有效信息
            var result=data[0].result
            //将信息添加到标签中
            $('#box2').text(result)
        })
    }   
    //绑定事件
    $('#but1').on('click',getData)
</script>

7.4删除标签

节点.fadeOut()

var cityNode=$("<font class='city'></font>");//创建标签
cityNode.text(cityName) //添加内容
cityBoxNode.append(cityNode) //添加
cityBoxNode.fadeOut() //让标签消失

7.5判断复选框按钮是否被选中的方法

<body>
    <input type='checkbox' id='cb'/> 
</body>
<script> 
   ===== 获取是否选中 =====
    var isChecked = $('#cb').prop('checked'); 
    =======或 =========
    var isChecked = $('#cb').is(":checked"); 
    ========设置选中 ===========
    $('#cb').prop('checked',true); 
</script>