一、原生js事件绑定

1 开关灯案例

<script>

    let divEle = document.getElementById('d1')

    let butEle = document.getElementById('d2')

    butEle.onclick = function () {

        divEle.classList.toggle('back_yellow')

    }

</script>

2 input框获取焦点，失去焦点案例

<script>

    let inpEle = document.getElementById('d1')

    // 获取input框焦点时

    inpEle.onfocus = function () {

            inpEle.value = ''

    }

    // 点其他地方失去input焦点时

    inpEle.onblur = function () {

            inpEle.value = '请吃屎'

    }

</script>

3 实现展示当前时间，定时功能

<script>

    let inpEle = document.getElementById('d1')

    let butEle_start = document.getElementById('start')

    let butEle_end = document.getElementById('end')

    let t = null

    function showTime() {

        let nowTime = new Date();

        inpEle.value = nowTime.toLocaleString()

    }

    butEle_start.onclick = function () {

            if (!t){

                // 设置定时器

                t = setInterval(showTime,1000)

            }

    }

    butEle_end.onclick = function () {

        // 清除定时器

        clearInterval(t)

        t = null

    }

</script>

4 省市联动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<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(let key in data){

        let opEle = document.createElement('option')

        opEle.innerText = key

        opEle.value = key

        proEle.appendChild(opEle)

    }

    proEle.onchange = function () {

        let currentPro = proEle.value

        let currentCityList = data[currentPro]

        let sa = "<option disabled selected>请选择</option>"

        cityEle.innerHTML = sa

        cityEle.innerText = ''

        for(let i=0;i<currentCityList.length;i++){

            let citys = currentCityList[i]

            let currcityEle = document.createElement('option')

            currcityEle.value = citys

            currcityEle.innerText = citys

            cityEle.appendChild(currcityEle)

        }

    }

</script>

</body>

</html>

二、jQuery入门

介绍：jQuery内部封装了原生的js代码，能让我们通过写更少的代码去完成更多的功能。

jQuery和js的关系就像python中的模块和python的关系相同，但在前端模块称为‘类库’

1 jQuery的两种导入方式

1.1 直接下载本地

如果觉得每个页面都要添加链接jQuery很麻烦，可以在pycharm自动初始化代码处修改

1.2 直接引入jQuery提供的CDN服务（基于网络直接请求加载）

国内免费的CDN：https://www.bootcdn.cn/

// 在有网的情况下

  <script 	src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js">

  </script>

1.3 jQuery基本语法

jQuery(选择器).action()

// jQuery === $

// jQuery与js代码对比

let pEle = document.getElementById('d1')

pEle.style.color = 'red'

// jQuery操作标签

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

2、查找标签

// id选择器

$('#d1')

S.fn.init [div#d1]

// 类选择器

$('.c1')

S.fn.init [p.c1, prevObject: S.fn.init(1)]

// 标签选择器

$('span')

S.fn.init(3) [div, div#d1, div, prevObject: S.fn.init(1)]

// jQuery选择到的是一个jQuery对象，可以直接使用也可以转化成标签对象再使用

// jQuery对象如何转化成标签对象

$('#d1')[0]

// 标签对象转化成jQuery对象

$(document.getElementById('d1')）

2 组合选择器/分组选择器

$('div') # 找到所有的div标签

$('div.c1') # 找到所有div中继承了c1类的div标签

$('div#d1') # 找到id=d1的div标签

$('#d1,.c1,span') # 并列，找到id=d1的标签，继承了c1类的标签，所有span标签

$('div span') # 后代

$('div>span') # 儿子

$('div+span') # 毗邻

$('div~span') # 弟弟

3 基本筛选器

$('ul li')

$('ul li:first') # 取第一个子标签

# 注意所有选择器内部：后面的方法都可以拿出来写

$('ul li').first() == $('ul li:first') 

$('ul li:last') # 最后一个子标签

$('ul li:eq(2)') # 取索引为2的标签（第三个！）

$('ul li:even') # 所有偶数索引标签 包括0

$('ul li:odd') # 所有奇数索引标签

$('ul li:lt(2)') # 索引小于索引为2的标签 不包括2

$('ul li:gt(2)') # 索引大于索引为2的标签 不包括2

$("ul li:not('#d1')") # 移除满足条件的标签

$('div:has("p")') #选择包含p标签的div标签

4 属性选择器

$('[username]') # 选择所有有username属性的标签

$('[username = "jason"]') # 选择所有username = jason 属性的标签

$('p[name = "hz"]') # 选择所有有name = hz的p标签

5 表单筛选器

# 表单选择器可以简写

$('input[type = "text"]') == $(':text')

:text

:password

:file

:radio

:checkbox

:submit

:reset

:button

...

# 以上都可以简写

"""特殊情况"""

$(':checked')  # 它会将含有checked的input标签，和selected的option标签都拿到

$(':selected')  # 它不会 只拿selected

$('input:checked')  # 自己加一个限制条件

6 筛选器方法

$('#d1').next() # id=d1标签的下一个

$('#d1').nextAll() # 下面全部

$('#d1').nextUntil('.c1') # 下面直到继承类c1的标签

$('.c1').prev() # 上面一个

$('.c1').prevAll() # 上面全部

$('.c1').prevUntil('#d2') #上面直到

$('#d3').parent() # 父标签

$('#d3').parent().parent() # 爷标签

$('#d3').parents() # 所有父标签

$('#d3').parentsUntil('body') # 取所有父标签直到body

$('#d2').children() # 所有的第一层子标签

$('#d2').siblings() # 所有同级别标签

day56 js收尾，jQuery前戏的更多相关文章

  1. 【前端性能】必须要掌握的原生JS实现JQuery

    很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...

  2. 移动端用js与jquery实时监听输入框值的改动

    背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...

  3. label用js，jquery取值赋值，以及怎么在后台取值

    label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 可以这样: JS: var label=document.getElementByIdx_x("id&qu ...

  4. JS与Jquery区别

    很多人对JS和JQuery很容易搞混淆,今天我们就相比学习下: 加载区别: var myfunction(){}; JS:1.window.onload=function(){} 2.<body ...

  5. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  6. JS和JQuery的总结

    JS部分 一,  词法结构 区分大小 注意://单行  /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...

  7. js和jquery获取当前对象的子元素

    开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...

  8. js+html+jquery 个人笔记

    js+html+jquery 笔记 1.获取HTML对象 var obj = document.getElementById(elementId) 对象的值: obj.value() 2.获取jQue ...

  9. prototype.js 和 jQuery.js中 ajax 的使用

    这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...

随机推荐

  1. 轻量级进度条 – Nprogress.js

    进度条库是前端中常见的库之一,bootstrap中提供了多种进度条样式.NProgress.js和nanobar.js是两款轻量级的进度条组件,使用简便. 官网: NProgress.js:http: ...

  2. PHP上传进度支持(Upload progress in sessions)

    文件上传进度反馈, 这个需求在当前是越来越普遍, 比如大附件邮件. 在PHP5.4以前, 我们可以通过APC提供的功能来实现. 或者使用PECL扩展uploadprogress来实现. 从PHP的角度 ...

  3. Quartz SpringBoot 简单整合一下

    一次简单的代码整合记录. 数据库准备 如果是MySQL可能出现一些小问题.比如联合主键长度超限制,已经记录解决办法了. CREATE TABLE QRTZ_JOB_DETAILS ( SCHED_NA ...

  4. css3中的@font-face你真的了解吗

    css3中的自定义字体方法@font-face @font-face属性可以让我们自定义网站字体属性,然后引用到想要应用该字体的元素上. 基本语法: @font-face { font-family: ...

  5. 代码点(code point)和代码单元(code units)

    1. 解释一 char:Java中,char类型为16个二进制位,原本用于表示一个字符.但后来发现,16位已经不够表示所有的字符,所以后来发展出了代码点表示字符的方法. 代码点(code point) ...

  6. [CF453D]Little Pony and Elements of Harmony

    题目   点这里看题目. 分析   设\(count(x)\)为\(x\)的二进制中\(1\)的个数.因此\(f(u,v)=count(u\oplus v)\)   看一看每次转移,我们发现最不友好的 ...

  7. 附024.Kubernetes_v1.18.3高可用部署架构二

    kubeadm介绍 kubeadm概述 参考<附003.Kubeadm部署Kubernetes>. kubeadm功能 参考<附003.Kubeadm部署Kubernetes> ...

  8. ADB命令 使用

    简介 ADB,即 Android Debug Bridge  ,它是 Android 开发/测试人员不可替代的强大工具 .安卓调试桥 (Android Debug Bridge, adb),是一种可以 ...

  9. Mysql事务 JAVAGC 面试

    忽略其他问题,直接上技术面试 你们公司服务器中配置Java GC是哪一种? Java GC 一共分为四种,分别是 -XX:+UseSerialGC 串行垃圾回收器 -XX:+UseParallelGC ...

  10. .Net Core微服务入门全纪录（六）——EventBus-事件总线

    前言 上一篇[.Net Core微服务入门全纪录(五)--Ocelot-API网关(下)]中已经完成了Ocelot + Consul的搭建,这一篇简单说一下EventBus. EventBus-事件总 ...