day56——原生js绑定事件、jQuery简介及各个选择器、筛选器

原生js绑定事件

开关灯案例

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            width: 400px;
            height:400px;
            border-radius: 50%;
        }
        .bg_wheat {
            background-color: wheat;
        }
        .bg_black {
            background-color: black;
        }
    </style>
</head>
<body>
<div class="c1 bg_wheat bg_black"></div>
<button>开关</button>
<script>
    let divEle = document.getElementsByClassName('c1')[0]
    let bntEle = document.getElementsByTagName('button')[0]
    bntEle.onclick = function () {   // 绑定点击事件
        divEle.classList.toggle('bg_black')   // 动态的修改div标签的类属性
    }

</script>
</body>

.toggle('bg_black')有'bg_black'则删除该属性，显示原来的颜色，无则增加该属性，对原来的颜色进行覆盖，到达变色的效果。

input框获取/失去焦点案例

<body>
<input type="text" id="d1" value="给我整点内容可好！">
<script>
    let inputEle = document.getElementById('d1')
     // 获取焦点事件
    inputEle.onfocus= function () {
        inputEle.value=''   //  点value就是获取,等号赋值就是设置
    }
     // 失去焦点事件
    inputEle.onblur= function () {
        inputEle.value='Hello world！'   // 给input标签重写赋值
    }
</script>

为便签设置默认值value='...',先查找到标签；给标签绑定获取焦点事件和失去焦点事件；鼠标点击input框，触发获取焦点事件，将文本清空；鼠标移开触发失去焦点事件，给value赋值一个文本，鼠标移开后显示该文本。

实时展示当前事件

<body>
<input type="text" id="d1" style="display: block;height:50px;width:251px">
<button id="d2">开始</button>
<button id="d3">结束</button>
<script>
    // 定义一个存储计时器的全局变量
    let t = null
    let inputEle = document.getElementById('d1')
    let startEle = document.getElementById('d2')
    let endEle = document.getElementById('d3')
    // 1 访问页面之后，将访问的时间展示到input框中
    // 2 动态的展示当前时间
    // 3 页面上加两个按钮 一个开始 一个结束
    function showTime(){
        let currentTime = new Date()
    inputEle.value=currentTime.toLocaleString();
    }
    startEle.onclick = function(){
         // 限制定时器只能开一个
        if(!t){
            t = setInterval(showTime,1000)  // 如果不判断t是否为空就进行赋值的话，每点击一次就会开设一个定时器 而t只指代最后一个
        }
    }
    endEle.onclick = function(){
        clearInterval(t)  // 如果开设很多个计时器，那么只能清除一个计时器
        t=null   // 还应该将t重置为空
    }
</script>
</body>

省市联动

<body>
<select name="" id="d1">
    <option value="" selected disabled>--请点击--</option>
</select>
<select name="" id="d2">
</select>
<script>
    let proEle = document.getElementById('d1')
    let cityEle = document.getElementById('d2')
    // 先模拟省市数据
    data = {
        "河北": ["廊坊", "邯郸",'唐山'],
        "北京": ["朝阳区", "海淀区",'昌平区'],
        "山东": ["威海市", "烟台市",'临沂市'],
        '上海':['浦东新区','静安区','黄浦区'],
        '深圳':['南山区','宝安区','福田区']
    };
     // 选for循环获取省
    for (let key in data){
        // 将省信息做成一个个option标签,添加到第一个select框中
        // 1 创建option标签
        let optEle = document.createElement('option')
        // 2 设置文本
        optEle.innerText= key
        // 3 设置值value
        optEle.value=key
        // 4 将创建的option标签添加到第一个select标签内
        proEle.append(optEle)
    }
    // 文本域变化事件，change事件
    proEle.onchange = function(){
        // 1 在每次选择省份后清空之前省份的市标签
        cityEle.innerHTML=''
        // 2 添加一个默认选中且不能操作的提示标签
        let sss = "<option disabled selected>请选择</option>"
        cityEle.innerHTML=sss
        // 3 获取当前选择的省份用一个变量接收
        let currentPro = proEle.value
        // 4 获取当前省份的市列表
        let currentCityList = data[currentPro]
        // 5 for循环所有的市，渲染到第二个select标签中
        for (let i=0;i<currentCityList.length;i++){
            // 5.1 创建市标签
            let optEle = document.createElement('option')
            // 5.2 为市标签设置文本
            optEle.innerText= currentCityList[i]
            // 5.3 为市标签设置值value
            optEle.value= currentCityList[i]
            // 5.4 将创建的市option标签添加到第二个select标签内
            cityEle.append(optEle)
        }
    }
</script>
</body>

JQuery

1）jQuery是一个轻量级（几十kb）的、兼容多浏览器的JavaScript库。

2）jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

版本介绍

1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

注意：jQuery在使用前一定要确认jQuery文件被导了。

jQuery导入问题

文件下载到本地，如何解决多个文件反复书写引入语句的代码

可以借助pycharm自动初始化代码功能帮我们在创建HTML文件是自动添加引入代码

步骤：

点击File、点击Flie下面的settings打开设置窗口，在点击Editor编辑、找到file and code template、第一个就是HTML文件，将导入代码添加到自动初始化代码中

不想下载文件，可以直接引入jQuery提供的CDN服务（基于网络直接请求加载）

"""
CDN:内容分发网络
CDN:有免费的也有收费的
前端免费的cdn网站:	bootcdn"""

# 导入代码
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
"""不下载文件，用这样方式导入的前提是你的计算机必须要有网络""""""

jQuery内容

选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件

jQuery基本语法

jQuery(选择器).action()
# 简写，将jQuery用$符代替
$(选择器).action()

jQuery与js代码对比

用原生的js代码改变p标签的文本颜色和用jQuery修改看谁跟简洁明了

# 1 原生的js代码
let pEle = document.getElementById('d1')  # 先要查找到标签
pEle.stye.color = 'red'  # 再改样式，设置颜色

# 2 用jQuery
$('p').css('color','bule')  # 查找和设置在一行就能完成

jQuery如何查找标签

1.基本选择器

基本选择器获得都是jQuery对象，本质也是数组

# 1 id选择器
$('#d1');
# w.fn.init [div#d1]

# 2 类选择器
$('.c1');
# w.fn.init [p.c1, prevObject: w.fn.init(1)]

# 3 标签选择器
$('span');
"""w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]0: span1: span2: spanlength: 3prevObject: w.fn.init [document]__proto__: Object(0)"""
# 4 通用选择器(基本不用)
$('*');
"""w.fn.init(15) [html, head, meta, title, meta, link, script, script, body, div#d1, span, p, span, p.c1, span, prevObject: w.fn.init(1)]"""

jQuery对象与便签对象互相转换

1）jQuery对象转标签对象

加上索引取值，取到的就是标签对象，跟js查找标签获得的结果相同

$('#d1')[0]
# <div id="d1">…</div>

document.getElementById('d1')
# <div id="d1">…</div>

标签对象转jQuery对象

参照python数据类型转换来记忆，int('111'),在标签对象外面套一层jQuery类：$(标签对象)

let divEle = document.getElementById('d1');
$(divEle);
# w.fn.init [div#d1]

注意：一定不要将两者弄混了，一起jQuery对象的属性标签对象无法使用，同样标签对象的属性jQuery对象无法使用。

组合选择器/分组与嵌套

$('div')  # 拿所有的div标签
# w.fn.init(2) [div#d1, div.c1, prevObject: w.fn.init(1)]
$('div.c1')  # 拿class类中有c1的div标签
"""w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)"""
$('div#d1')  # 拿id为d1的div标签
w.fn.init [div#d1, prevObject: w.fn.init(1)]

           
$('#d1,.c1,p')  # 并列+混用
w.fn.init(3) [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]
              
# 嵌套                  
$('div span')  # 后代
# w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
$('div>span')  # 儿子
# w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div+span')  # 毗邻
#w.fn.init [span, prevObject: w.fn.init(1)]
$('div~span')  # 弟弟
#w.fn.init(2) [span, span, prevObject: w.fn.init(1)]

基本筛选器

$('ul li') # 拿到所有的li
"""w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]"""
               
$('ul li:first')  # 拿第一个li(长子) 
"""w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)"""
               
$('ul li:last')  # 拿最后一个(幼子)
"""w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)"""
               
$('ul li:eq(2)')  # 放索引，拿索引为2的li
"""w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)"""
               
$('ul li:even')  # 拿索引为偶数的li，0包含在内：0,2,4...
"""w.fn.init(5) [li, li, li, li.c1, li#d1, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li#d1length: 5prevObject: w.fn.init [document]__proto__: Object(0)"""
              
$('ul li:odd')  # 拿奇数索引:1,3,5...
"""w.fn.init(5) [li, li, li, li, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li4: lilength: 5prevObject: w.fn.init [document]__proto__: Object(0)"""
              
$('ul li:gt(2)')  # 拿大于索引值的li，>2: 3,4,5...
"""w.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li5: li#d16: lilength: 7prevObject: w.fn.init [document]__proto__: Object(0)"""
              
$('ul li:lt(2)')  # 拿小于索引值的li，<2: 0,1,2
"""w.fn.init(2) [li, li, prevObject: w.fn.init(1)]0: li1: lilength: 2prevObject: w.fn.init [document]__proto__: Object(0)
              """
$('ul li:not("#d1")')  # 移除满足条件的标签，除了id为d1的li全拿到
"""w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)]"""
         
$('div:has("p")')  # 选取出包含一个或多个标签在内的标签,必须满足嵌套关系
# w.fn.init [div, prevObject: w.fn.init(1)]

除了拿所有的li，其他筛选的格式可归纳为：$('ul li:限制条件')；冒号后面跟不同的限制条件查询到不同的结果；

first：第一个、last：最后一个、eq(索引)：拿索引、even：拿偶数、odd：拿奇数、gt(2)：拿大于、lt(2)：拿小于、not()：除了这个都拿、has()：包含这个的都拿。

属性选择器

$('[username]')  # 具有username属性的
# w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)]

$('[username="jason"]')  # 具有username属性并且等于jason的
# w.fn.init [input, prevObject: w.fn.init(1)]

$('p[username="egon"]')  #　p标签具有username属性并且等于jason 的
w.fn.init [p, prevObject: w.fn.init(1)]

$('[type]')
# w.fn.init(2) [input, input, prevObject: w.fn.init(1)]

$('[type="text"]')
#w.fn.init(2) [input, input, prevObject: w.fn.init(1)]

表单选择器

$('input[type="text"]')
$(':text') # 简写，会自动匹配到input[type=""],和上面的 
"""w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)"""

$('input[type="password"]')
$(':password')  # 简写
# w.fn.init [input, prevObject: w.fn.init(1)]

# 下面其他的操作方法相同
"""
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...
"""

#　表单对象属性
"""
:enabled
:disabled
:checked
:selected"""

# 特殊情况
$(':checked')  # 它会将checked和selected都拿到
w.fn.init(2) [input, option, prevObject: w.fn.init(1)]0: input1: optionlength: 2prevObject: w.fn.init [document]__proto__: Object(0)
$(':selected')  # 它不会 只拿selected
w.fn.init [option, prevObject: w.fn.init(1)]
$('input:checked')  # 自己加一个限制条件
w.fn.init [input, prevObject: w.fn.init(1)]

筛选器方法

# 标签的上方
$('#d1').next()  # 同级别下一个

$('#d1').nextAll()  # 同级下面所有

$('#d1').nextUntil('.c1')  # 同级别下面取到'.c1'为止，不包括'.c1'

 
# 标签的下方
$('.c1').prev()   # 同级别上一个

$('.c1').prevAll()  # 同级上面所有

$('.c1').prevUntil('#d2')  # 同级别上面取到'#d2'为止，不包括'#d2''

 
# 父标签
$('#d3').parent()  # 标签外第一层父标签,p标签
"""
w.fn.init [p, prevObject: w.fn.init(1)]0: plength: 1prevObject: w.fn.init [span#d3]__proto__: Object(0)
"""

$('#d3').parent().parent()  # 标签外第二层父标签,div标签
# w.fn.init [div#d2, prevObject: w.fn.init(1)]

$('#d3').parent().parent().parent()  # 标签外第三层父标签,body标签
# w.fn.init [body, prevObject: w.fn.init(1)]

$('#d3').parent().parent().parent().parent()  # 标签外第四层父标签,html
# w.fn.init [html, prevObject: w.fn.init(1)]

$('#d3').parent().parent().parent().parent().parent() # html外再取父标签没有语言，标签外第五层,document
# w.fn.init [document, prevObject: w.fn.init(1)]

$('#d3').parent().parent().parent().parent().parent().parent() # 第五层,prevObject
# w.fn.init [prevObject: w.fn.init(1)]


# 一步到位直接获取所有的父级及以上的所有标签
$('#d3').parents()
w.fn.init(4) [p, div#d2, body, html, prevObject: w.fn.init(1)]
              
$('#d3').parentsUntil('body') 
w.fn.init(2) [p, div#d2, prevObject: w.fn.init(1)]
              
             
$('#d2').children()  # 儿子
      
              
$('#d2').siblings()  # 同级别上下所有
              
              
              
$('div p')          
$('div').find('p')  # 两者等价，find从某个区域内筛选出想要的标签 
              
              
$('div span:first')
$('div span').first()  # 两者等价，从div中筛选出的第一个span                      
              
$('div span:last')
$('div span').last()   # 两者等价，从div中筛选出的最后一个span  
                                                                                    
$('div span:not("#d3")')  
$('div span').not('#d3')  # 两者等价，从div中筛选出id不是d3的span

ps：引号使用规则，遵循外单内双或者外双内单。