jQuery学习笔记：Day56

发表时间: 2023-10-13 05:29

原生JS事件绑定例题

1、开关灯示例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #d1{            height: 400px;            width: 400px;            border-radius: 50%;        }        .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')   //有则删除，无则添加    }</script></body></html>

2、input框获取焦点示例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><input type="text" value="hello world" id="d1"><script>    let iEle=document.getElementById('d1')  // 点击了后执行的操作（获取焦点）    iEle.onfocus = function (){        iEle.value =''  // 重新赋值为空    }    iEle.onblur = function (){  // 鼠标点击了其他地方执行的操作（移除焦点）        iEle.value ='goodbye'    }</script></body></html>

3、input框实时刷新时间实例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><input type="text" id="d1" style="display: block;height: 50px;width:200px"><button id="d2">开始</button><button id="d3">结束</button><script>    //4、创建一个变量t，用来存储定时器    let t = null    //1、 把要操作的标签生成对象    let inputEle = document.getElementById('d1')    let starEle = document.getElementById('d2')    let endEle = document.getElementById('d3')    //2、定义一个函数用于展示实时时间    function showTime(){        let time = new Date();  //  生成一个时间对象        inputEle.value = time.toLocaleString()  //获取当前时间，并赋值给input标签    }    //3、给页面上的按钮绑定功能，一个开始，一个结束    starEle.onclick = function (){        if (!t){            t=setInterval(showTime,1000)    //每点击一下就会生成一个定时器        }    }    endEle.onclick = function (){        clearInterval(t)    //只能清除一个定时器        t = null    }</script></body></html>

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')    //1、先模拟省市数据    data={        '江西':['南昌','九江','赣州','上饶'],        '浙江':['杭州','义乌','绍兴','嘉兴'],        '江苏':['南京','苏州','泰州','南通'],        '广东':['广州','深圳','惠州','清远']    };    //2、for循获取到省    for (let key in data){        //2.1 将省信息做成一个个option标签，并添加到第一个select框中        //1 创建option框        let opEle = document.createElement('option')        //2 设置value        opEle.value = key        //3 设置文本        opEle.innerText = key        //4 添加到第一个select中        proEle.appendChild(opEle)    }    //3、设置文本域变化事件，使得再更换省的时候可以更新市    proEle.onchange = function (){        //先清空市select中所有的option        cityEle.innerHTML = ''        //先获取到用户选择的省        let getPro = proEle.value        //获取对应的市信息        let getCity = data[getPro]        //添加默认选择标签        let oppEle = document.createElement('option')        oppEle.innerText = '-请选择-'        oppEle.setAttribute('selected','selected')        oppEle.setAttribute('disabled','disabled')        cityEle.appendChild(oppEle)        //for循环所有的市，渲染到第二个select中        for(let i=0;i<getCity.length;i++){            //拿到市名            let city = getCity[i]            //创建标签            let opEle = document.createElement('option')            //设置文本            opEle.innerText = city            //设置值            opEle.value = city            //添加到第二个select中            cityEle.appendChild(opEle)        }    }</script></body></html>

jQuery

jQuery 是一个快速、小巧且功能强大的 JavaScript 库。它通过简化 JavaScript 编程，使开发人员能够更轻松地操作 HTML 文档、处理事件、执行动画效果以及处理 AJAX 请求等。

jQuery基本语法：

jQuery（选择器）.action（）可以简写：jQuery() ===$()

基本选择器：

1. 元素选择器：使用元素名称选择 HTML 元素。例如：`$("p")` 会选择所有的 `<p>` 元素。

2. ID 选择器：使用元素的 ID 属性选择指定的元素。例如：`$("#myElement")` 会选择具有 ID 属性为 "myElement" 的元素。

3. 类选择器：使用元素的类名选择指定的元素。例如：`$(".myClass")` 会选择具有类名为 "myClass" 的元素。

4.属性选择器：使用元素的属性选择指定的元素。例如：$("[name='myName']") 会选择具有 name 属性值为 "myName" 的元素。

通过jQuery选择器获取到的对象都是jQuery对象，如需使用JavaScript代码对其进行操作的话，则需要转换成标签对象。

$("#myElement")[0]	//转成标签对象

同样，标签对象也可转成jQuery对象：

$(document.getElementByid('#myElement')) //转成jQuery对象

组合分组嵌套选择器：

jQuery也支持组合选择器：

$('div#d1')	//选择具有 id 属性为 "d1" 的 <div> 元素。$('div.c1')	//选择具有 class 属性为 "c1" 的 <div> 元素。... ...$('div span')	//后代选择器，用于选择 <div> 元素内的所有 <span> 元素。$('div>span')	//子元素选择器，用于选择 <div> 元素的直接子元素中的 <span> 元素。$('div+span')	//相邻元素选择器，用于选择紧接在 <div> 元素后面的第一个 <span> 元素。$('div~span')	//兄弟元素选择器，用于选择所有在 <div> 元素后出现的同级别的 <span> 元素。

基本筛选器：

在jQuery中，筛选器可以根据不同的条件来选择匹配的元素，从而实现对元素的精确控制和操作。

jQuery提供了许多基本筛选器，用于选择匹配指定条件的元素。以下是一些常用的基本筛选器：

- `:first`：选择第一个匹配的元素。
- `:last`：选择最后一个匹配的元素。
- `:even`：选择索引为偶数的元素（从0开始计数）。
- `:odd`：选择索引为奇数的元素（从0开始计数）。
- `:eq(index)`：选择索引为指定值的元素。
- `:gt(index)`：选择索引大于指定值的元素。
- `:lt(index)`：选择索引小于指定值的元素。
- `:header`：选择所有标题元素（如`<h1>`、`<h2>`等）。
- `:not(selector)`：选择不匹配给定选择器的元素。
- `:has(selector)`：选择包含匹配给定选择器的元素。
- `:contains(text)`：选择包含指定文本内容的元素。

$('ul li') #ul下面的所有li子标签$('ul li:first') #ul下面的第一个li子标签 $('ul li').first()$('ul li:last') #ul下面的最后一个li子标签 $('ul li').last()$('ul li:eq(2)') #放索引，根据索引取值$('ul li:even') #偶数索引，0包含在内$('ul li:odd') #奇数索引$('ul li:gt(2)') #大于索引$('ul li:lt(2)') #小于索引$('div:has("p")') #选举出包含一个标签，或多个标签在内的标签（父级）$('ul li:not("#d1")') # 移除所有满足条件的标签

这些基本筛选器可以与其他选择器和方法组合使用，以便更精确地选择和操作网页中的元素。

表单筛选器：

特殊情况

筛选器方法：

$('#d1').next() 	#同级别下一个$('').nextAll() 	#下一个取完$('').nextUntil('.c1') 	#直到c1为止，不包括c1$('').prev() 	#上一个$('').prevAll()	 #上一个所有$('').prevtUntil('')	 #上一个直到..为止$('').parent() 	#第一级父标签$('').parents()	 #所有父标签$('').children()	 #后代$('').siblings 	#同级别上下所有$('div p') 等价于 $('div').find('p')

jQuery学习笔记：Day56

原生JS事件绑定例题

jQuery

热门阅读

推荐阅读