一、原生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. 源码分析（5）-ArrayList、Vector和LinkedList（JDK1.8）

    一.概述 1.线程安全:ArrayList和LinkedList非线程安全的.Vector线程安全的. 2.底层数据结构:ArrayList和Vector底层数据结构是数组:LinkedList双向链 ...

  2. ElasticSearch系列（二）：ElasticSearch Head、Kibana、Elasticsearch-Analysis-Ik安装、使用

    1.ElasticSearch Head使用 扩展程序安装插件:ElasticSearch github地址:https://github.com/mobz/elasticsearch-head/ 运 ...

  3. 如何从Debian 9 Stretch升级到Debian10 Buster

    Let's first fully upgrade our current Debian Stretch system: # apt-get update # apt-get upgrade # ap ...

  4. 【Spring Cloud 系列】 二、Spring Cloud Eureka 的第一印象

    Eureka : 翻译翻译,找到了!(惊讶语气) Spring CLoud 中的 Spring Cloud Eureka,用于 分布式项目中的服务治理.是对Netflix 套件中的Eureka 的二次 ...

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

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

  6. @codeforces - 668E@ Little Artem and 2-SAT

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定两个 2-sat 问题,询问两个问题的解集是否相同. 如果不 ...

  7. 自己动手实现深度学习框架-8 RNN文本分类和文本生成模型

    代码仓库: https://github.com/brandonlyg/cute-dl 目标         上阶段cute-dl已经可以构建基础的RNN模型.但对文本相模型的支持不够友好, 这个阶段 ...

  8. excel如何快速计算日期对应的生肖？

      是否可以根据日期统计出生肖? 牛闪闪想应该可以吧!结果搜到了一个巨牛无比的公式. =MID("猴鸡狗猪鼠牛虎兔龙蛇马羊",MOD(YEAR(B2),12)+1,1), 利用年份 ...

  9. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（七）

    系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...

  10. Spring IOC原理补充（循环依赖、Bean作用域等）

    文章目录 前言 正文 循环依赖 什么是循环依赖? Spring是如何解决循环依赖的? 作用域实现原理以及如何自定义作用域 作用域实现原理 自定义Scope BeanPostProcessor的执行时机 ...