一、原生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. k8s学习-存储

    4.6.存储 4.6.1.ConfigMap 创建方式 文件夹/文件创建 mkdir dir cd dir cat > c1.properties <<EOF c1.name=c1 ...

  2. 宇宙第一IDE是谁？

    更多精彩文章,尽在码农翻身 微服务把我坑了 如何降低程序员的工资? 程序员,你得选准跑路的时间! 两年,我学会了所有的编程语言! 一直CRUD,一直996,我烦透了,我要转型 字节码万岁! 上帝托梦给 ...

  3. HashMap(三)之源码分析

    通过分析HashMap来学习源码,那么通过此过程我们要带着这几个问题去一起探索 为什么要学习源码 怎么去学习 0.1 为什么要学习源码 这个问题,直接给出结论,学习源码肯定是有好处的,比如: 学习优秀 ...

  4. Astah类图中使用list<>

    如何在类图中表示如下的属性,这个问题困扰了我好久.之前百度找不着任何相关的内容,今天终于在其官方论坛找着了答案. class cMeterRecord { protected: cMeterStatu ...

  5. Jupyter的搭建

    在家实在无聊,伏案沉思良久,忽然灵机一动,何不写写Python?然而电脑上的软件早已人是物非,Pycharm已然不复存在.但是又不想装软件找激活码,于是,只好建个Jupyter先凑合一下. 1. 安装 ...

  6. [noi.ac省选模拟赛]第11场题解集合

    题目   比赛界面. T1   比较简单.容易想到是求鱼竿的最大独立集.由于题目的鱼竿可以被分割为二分图,就可以想到最大匹配.   尝试建边之后会发现边的数量不小,但联系题目性质会发现对于一条鱼竿,它 ...

  7. Charles抓包1-Charles安装汉化(附正版注册码)

    目录 1.下载&&安装 2.汉化 1.下载&&安装 charles官网 charles下载 下载后直接安装即可. 2.汉化 下载提供的汉化包charles.jar(加群 ...

  8. Pytorch中的自动求梯度机制和Variable类

    自动求导机制是每一个深度学习框架中重要的性质,免去了手动计算导数,下面用代码介绍并举例说明Pytorch的自动求导机制. 首先介绍Variable,Variable是对Tensor的一个封装,操作和T ...

  9. css3动画的实例讲解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. 'ipconfig' 不是内部或外部命令，也不是可运行的程序 或批处理文件

    今天在学习的时候需要找本地ip地址,可是在命令行窗口却显示 百度之后发现原来是环境变量没配置的问题(其实之前是ok的,但应该是anconda安装的时候点了那个一键设置环境变量搞得本地的path里的数据 ...