其他分享
首页 > 其他分享> > 前端 day 07 5.19 jQuery

前端 day 07 5.19 jQuery

作者：互联网

5.19

昨日回顾

BOM与DOM操作

今日内容

  1. 原生Javascript事件
  2. jQuery

原生JS事件绑定

直接写几个案例

开关灯示例

<head>
	<style>
        .c1{
            width: 200px;
            height: 200px;
        }
        .bg_green {
            background-color: green;
        }
        .bg_red {
            background-color: red;
        }
    </style>
</head>
<body><div id="d1" class="c1 bg_red bg_green"></div>
<button id="d2">变色</button>

<script>
    let btnEle = document.getElementById('d2')
    let divEle = document.getElementById('d1')
    btnEle.onclick = function () {  // 绑定点击事件
        divEle.classList.toggle('bg_red')
        //有这个class，就删除，显示绿色，没有就添加，显示红色
    }
</script>
</body>

焦点框案例

搜索框，自带文字，得到焦点之后文字消失

<!--onfocus事件，改变input标签的value为空-->
<!--onblur失去焦点事件，将input的value改回原样-->
<body>
<input type="text" value="没有焦点" id="d1">

<script>
    let iptEle = document.querySelector('#d1');
    iptEle.onfocus = function () {
        iptEle.value = '';
    }
    iptEle.onblur = function () {
        iptEle.value = '失去焦点';
    }
</script>
</body>

实时显示时间

//访问页面之后，将访问的时间展示到input框中
//动态展示当前时间，设置一个循环计时器，循环改变时间

//问题：按多次开始按钮，会开启多个定时器，按结束，只能结束一个定时器
//解决：设置一个变量，有值的时候不开启计时器，没有值的时候才能开启。在清除计时器的时候重置计时器为null

<body>
<div id="d1">Time</div>
<div>
    <button id="st">Start</button>
    <button id="ed">Stop</button>
</div>
<script>
    let t = null
    let divEle = document.querySelector('#d1');
    let stEle = document.querySelector('#st');
    let edEle = document.querySelector('#ed');
    //展示时间函数。获得一个时间对象，改变div中的字
    function showTime() {
        let currentTime = new Date();
        divEle.innerText = currentTime.toLocaleString()
    }
    //start按钮的点击事件，检查是否已经有计时器，如果没有，开启一个计时器，每一秒调用一次展示时间
    stEle.onclick = function () {
        if(!t){
            t = setInterval(showTime,1000)
        }
    }
    //停止显示按钮，清除计时器
    edEle.onclick = function () {
        clearInterval(t)
        t = null
    }
</script>
</body>

省市联动

两个select框，选择了省，在第二个select框显示对应的市：仅模拟

<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循环获取省
    for (let key in data) {
        // 将省信息做成一个个option标签 添加到第一个select框中
        // 1 创建option标签
        let opEle = document.createElement('option')
        // 2 设置文本
        opEle.innerText = key
        // 3 设置value
        opEle.value = key  // <option value="省">省</option>
        // 4 将创建好的option标签添加到第一个select中
        proEle.appendChild(opEle)
    }
    // 文本域变化事件  change事件
    proEle.onchange = function () {
        // 先获取到用户选择的省
        let currentPro = proEle.value
        // 获取对应的市信息
        let currentCityList = data[currentPro]
        // 清空市select中所有的option
        cityEle.innerHTML = ''
        // 自己加一个请选择
        let ss = "<option disabled selected>请选择</option>"
        // let oppEle = document.createElement('option')
        // oppEle.innerText = '请选择'
        // oppEle.setAttribute('selected','selected')
        cityEle.innerHTML = ss

        // for循环所有的市 渲染到第二个select中
        for (let i = 0; i < currentCityList.length; i++) {
            let currentCity = currentCityList[i]
            // 1 创建option标签
            let opEle = document.createElement('option')
            // 2 设置文本
            opEle.innerText = currentCity
            // 3 设置value
            opEle.value = currentCity  // <option value="省">省</option>
            // 4 将创建好的option标签添加到第一个select中
            cityEle.appendChild(opEle)
        }
    }
</script>
</body>

jQuery

内部封装了原生的js代码，能够书写更少的代码完成js操作，还添加了一些功能

前端，模块不叫模块，叫类库

jQuery使用的时候也需要导入，但是文件非常小，基本不影响网络速度

jQuery版本：使用3版本

下载：用第一个，压缩之后的，内容更小

新建一个js文件

导入jQuery

<script src="jQuery-3.4.1"></script>

为了不让多个html都手动输入引入jQuery的语句代码，可以借助webstorm代码初始化功能，自动添加

也可以直接引入jQuery提供的cdn服务，基于网络直接请求加载

cdn：内容分发网络，用于加速访问。有收费也有免费：bootcdn，复制对应的script标签就行

jQuery基本语法

jQuery(选择器).action，也可以简写成 $(选择器).action

jQuery与原生代码对比

例，将p标签内部颜色改为红色

<p id='d1'>ppp</p>
<script>
	//原生
	let pEle = getElementById('d1');
	pEle.style.color = 'red';
	//jQuery
	$('p').css('color','blue')
</script>

jQuery查找标签

基本筛选器

$('ul li:fist') //ul标签下的第一个li标签
$('ul li:last') //ul标签下的最后一个li标签
$('ul li:eq(2)') //eq对应索引，拿到li表中索引是2的li
$('ul li:even') //拿到偶数位的li，odd：奇数位的
$('ul li:gt(2)') //拿到索引大于2的所有元素
$('ul li:lt(2)') //拿到索引小于2的所有元素
//同html的特殊符号，大于小于

其他：has，not

$('ul li:not("#d1")') //移除满足条件的标签，不要id为d1的
$('div:has("p")') //内部含有p标签的div，选出包含一个或多个标签在内的标签

属性查找器

$('[username]') //查找所有包含username属性的标签
$('[type='text']') //拿到type类型为text的所有标签
$('input[type='text']') //所有type为text的input框

表单筛选器

只用于表单里

$(':text') //只适用于form表单里的标签，等价于上面第二个 $('input[type='text']')
/*一类的方法包括
:text
:password
:file
:checked等等*/
//checked会将checked和selected都拿到，而selected不会，所以在用checked的时候，自己加一个限制条件：input:checked

筛选器方法

next，nextAll，nextUntil，prev，prevAll，prevUntil，parent，

$('#d1').next() //jQuery对象的方法，拿到d1标签的下一个标签
$('#d1').nextAll() //拿到同级别下面所有的标签
$('#d1').nextUntil('.c1') //拿d1下面的标签，直到类为c1的标签

$('.c1').prev() //拿到c1类的上一个标签
//同样有All，Until

$('#d1').parents() //一层层拿，得到一个数组，一直拿到html
$('#d1').parentsUntil('body')

$('#d2').children() //拿到所有的子标签
$('#d1').siblings() //同级别上下所有

//找div下的p标签
$('div p')
//也可以
$('div').find('p')

//拿第一个标签，处理用冒号:first，也可以用.first()
$('div').find('p').first() //拿到div下的第一个p标签

标签：jQuery,document,标签,let,div,5.19,day,d1
来源： https://www.cnblogs.com/telecasterfanclub/p/12918007.html