一、原生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. JSP+Structs+JDBC+mysql实现的诚欣电子商城

    项目简介 项目来源于:https://github.com/SuperiorNature/Java-Enterprise-electronic-mall 本系统是基于JSP+Structs+JDBC+ ...

  2. pc端网站如何自动跳转到移动wap端网站

    <script type="text/javascript"> var uaTest = /Android|webOS|Windows Phone|iPhone|ucw ...

  3. dbca oracle 12 c 遇到ora27125

    网上大部分方法是把dba组放在内核的,没有效果,可以尝试 google找到一位大神的方案,成功解决 https://oracle-admin.com/2014/01/22/ora-27125-unab ...

  4. Spark读取Hbase中的数据

    大家可能都知道很熟悉Spark的两种常见的数据读取方式(存放到RDD中):(1).调用parallelize函数直接从集合中获取数据,并存入RDD中:Java版本如下: JavaRDD<Inte ...

  5. 深度学习中损失函数之RMS和MES

    学校给我们一人赞助了100美元购买英文原版图书,几方打听后选择了PRML 即Pattern Recognition and Machine Learning.自从拆封这本书开始慢慢的品读,经常会有相见 ...

  6. SpringMVC整合mybaitis

    目录 一.新建一个基于Maven的Web项目 二.创建数据库与表 三.添加依赖包 四.新建POJO实体层 五.新建MyBatis SQL映射层 六.完成Spring整合MyBatis配置 七.创建服务 ...

  7. 前端笔记（关于解决打包时报node-sass错误的问题）

    这个问题之前反复出现,试过重新从其他同事将node_modules拿过来用,但是过了几天又出同样的问题 去网上百度了好久,大多数都说是node-sass重装一下就行.可是我这边卸载都无法卸载,何谈重装 ...

  8. Python3-paramiko模块-基于SSH的远程连接模块

    Python3中的paramiko模块,基于SSH用于连接远程服务器并执行相关操作 http://docs.paramiko.org/en/2.1/ SSHClient 用于连接远程服务器并执行基本命 ...

  9. DNS篇（详解DNS）

    *文章来源:https://blog.egsec.cn/archives/601 *本文将主要说明:本文主要叙述什么是DNS.域名的层级.DNS 解析过程.DNS的缓存时间.DNS 的记录类型.DNS ...

  10. 安全测试中session和cookie

    很多朋友做过安全测试应该都知道session和cookies他们的不同点: 1.存取方式不同.----cookie不支持中文,需要编码,仅支持ascll值.session能够存取任何类型的数据,包括j ...