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')
鲁公网安备37020202000738号