一、原生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. 【个人博客 hexo】一个小时就搭好属于自己的博客

    对于经常需要发博客的小伙伴来说,拥有一个属于自己的博客网站,听起来是不是很酷. 今天我就来告诉大家,怎么搭建一个属于自己的博客网站,我们需要的就是使用hexo+github来搭建我们自己博客系统. 你 ...

  2. 【代理】内网穿透工具 frp&frps

    frp 是一个高性能的反向代理应用,可以帮助您轻松地进行内网穿透,对外网提供服务,支持 tcp, http, https 等协议类型,并且 web 服务支持根据域名进行路由转发. ### frp 的作 ...

  3. Springboot拦截器实现IP黑名单

    Springboot拦截器实现IP黑名单 一·业务场景和需要实现的功能 以redis作为IP存储地址实现. 业务场景:针对秒杀活动或者常规电商业务场景等,防止恶意脚本不停的刷接口. 实现功能:写一个拦 ...

  4. STL sort的comp函数注意事项

    今天写了个题,结果碰巧re了,我眉头一皱发现事情并不简单. 原来我之前的comp写的都是错的. bool cmp(milkman a,milkman b) { return a.price<=b ...

  5. Mybatis源码手记-从缓存体系看责任链派发模式与循环依赖企业级实践

    一.缓存总览 Mybatis在设计上处处都有用到的缓存,而且Mybatis的缓存体系设计上遵循单一职责.开闭原则.高度解耦.及其精巧,充分的将缓存分层,其独到之处可以套用到很多类似的业务上.这里将主要 ...

  6. （九）maven-surefire-plugin常用配置

    原文链接:https://www.cnblogs.com/pixy/p/4718176.html 对maven-surefire-plugin有想了解的,看这篇:https://www.cnblogs ...

  7. JVM面试题总结

    1.介绍下 Java 内存区域(运行时数据区) Java 虚拟机在执行 Java 程序的过程中会把它管理的内存划分成若干个不同的数据区域. JDK 1.8之前主要分为:堆.方法区.虚拟机栈.本地方法栈 ...

  8. 2020 最新 Kubernetes实战指南

    1.Kubernetes带来的变革   对于开发人员 由于公司业务多,开发环境.测试环境.预生产环境和生产环境都是隔离的,而且除了生产环境,为了节省成本,其他环境可能是没有日志收集的,在没有用k8s的 ...

  9. 多语言工作者の十日冲刺<5/10>

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺--第五天(05.04) 作业正文 ...

  10. QT槽函数获取信号发送对象

    Qt 在槽函数中获取信号发送对象 Qt中提供了一个函数 qobject_cast(QObject *object),可以通过这个函数判断信号发出对象 Qt 帮助文档的解释: Returns the g ...