标签：jQuery 26 python 标签 08 value let c1 document
python前端开发(五)
JS获取值操作
普通数据(输入、选择)
标签对象.value
文件数据(上传)
标签对象.files
标签对象.files[0]
let i1Ele = document.getElementById('d1')
undefined
i1Ele.value
''
i1Ele.value
'tony'
let i2Ele = document.getElementById('d2')
undefined
i2Ele.value
'basketball'
i2Ele.value
'basketball'
let i5Ele = document.getElementById('d5')
undefined
i5Ele.value
''
i5Ele.value
'C:\\fakepath\\mysql实现登录.png'
i5Ele.files
FileList {0: File, length: 1}0: FilelastModified: 1660826486846lastModifiedDate: Thu Aug 18 2022 20:41:26 GMT+0800 (中国标准时间) {}name: "mysql实现登录.png"size: 257049type: "image/png"webkitRelativePath: ""[[Prototype]]: Filelength: 1[[Prototype]]: FileList
i5Ele.files[0]
File {name: 'mysql实现登录.png', lastModified: 1660826486846, lastModifiedDate: Thu Aug 18 2022 20:41:26 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 257049, …}lastModified: 1660826486846lastModifiedDate: Thu Aug 18 2022 20:41:26 GMT+0800 (中国标准时间) {}name: "mysql实现登录.png"size: 257049type: "image/png"webkitRelativePath: ""[[Prototype]]: File
JS类属性操作
classlist 获取所有样式类名(字符串)
classList.remove() 删除指定类
classList.add() 添加类
classList.contains() 存在返回true，否则返回false
classList.toggle() 存在就删除，否则添加
let divEle = document.getElementsByClassName('c1')
undefined
divEle
HTMLCollection [div.c1.c2.c3]0: div.c1.c2.c3accessKey: ""align: ""ariaAtomic: nullariaAutoComplete: nullariaBusy: nullariaChecked: nullariaColCount: nullariaColIndex: nullariaColSpan: nullariaCurrent: nullariaDescription: nullariaDisabled: nullariaExpanded: nullariaHasPopup: nullariaHidden: nullariaInvalid: nullariaKeyShortcuts: nullariaLabel: nullariaLevel: nullariaLive: nullariaModal: nullariaMultiLine: nullariaMultiSelectable: nullariaOrientation: nullariaPlaceholder: nullariaPosInSet: nullariaPressed: nullariaReadOnly: nullariaRelevant: nullariaRequired: nullariaRoleDescription: nullariaRowCount: nullariaRowIndex: nullariaRowSpan: nullariaSelected: nullariaSetSize: nullariaSort: nullariaValueMax: nullariaValueMin: nullariaValueNow: nullariaValueText: nullassignedSlot: nullattributeStyleMap: StylePropertyMap {size: 0}attributes: NamedNodeMap {0: class, class: class, length: 1}autocapitalize: ""autofocus: falsebaseURI: "http://localhost:63342/day53/02%20%E7%B1%BB%E5%B1%9E%E6%80%A7%E6%93%8D%E4%BD%9C.html?_ijt=3npb29oag57amevn53cdmjmlbp"childElementCount: 0childNodes: NodeList []children: HTMLCollection []classList: DOMTokenList(3) ['c1', 'c2', 'c3', value: 'c1 c2 c3']className: "c1 c2 c3"clientHeight: 400clientLeft: 3clientTop: 3clientWidth: 400contentEditable: "inherit"dataset: DOMStringMap {}dir: ""draggable: falseelementTiming: ""enterKeyHint: ""firstChild: nullfirstElementChild: nullhidden: falseid: ""inert: falseinnerHTML: ""innerText: ""inputMode: ""isConnected: trueisContentEditable: falselang: ""lastChild: nulllastElementChild: nulllocalName: "div"namespaceURI: "http://www.w3.org/1999/xhtml"nextElementSibling: nullnextSibling: textnodeName: "DIV"nodeType: 1nodeValue: nullnonce: ""offsetHeight: 406offsetLeft: 8offsetParent: bodyoffsetTop: 8offsetWidth: 406onabort: nullonanimationend: nullonanimationiteration: nullonanimationstart: nullonauxclick: nullonbeforecopy: nullonbeforecut: nullonbeforematch: nullonbeforepaste: nullonbeforexrselect: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextlost: nulloncontextmenu: nulloncontextrestored: nulloncopy: nulloncuechange: nulloncut: nullondblclick: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonended: nullonerror: nullonfocus: nullonformdata: nullonfullscreenchange: nullonfullscreenerror: nullongotpointercapture: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonlostpointercapture: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonpaste: nullonpause: nullonplay: nullonplaying: nullonpointercancel: nullonpointerdown: nullonpointerenter: nullonpointerleave: nullonpointermove: nullonpointerout: nullonpointerover: nullonpointerrawupdate: nullonpointerup: nullonprogress: nullonratechange: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonsecuritypolicyviolation: nullonseeked: nullonseeking: nullonselect: nullonselectionchange: nullonselectstart: nullonslotchange: nullonstalled: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullontransitioncancel: nullontransitionend: nullontransitionrun: nullontransitionstart: nullonvolumechange: nullonwaiting: nullonwebkitanimationend: nullonwebkitanimationiteration: nullonwebkitanimationstart: nullonwebkitfullscreenchange: nullonwebkitfullscreenerror: nullonwebkittransitionend: nullonwheel: nullouterHTML: "<div class=\"c1 c2 c3\"></div>"outerText: ""ownerDocument: documentparentElement: bodyparentNode: bodypart: DOMTokenList [value: '']prefix: nullpreviousElementSibling: nullpreviousSibling: textrole: nullscrollHeight: 400scrollLeft: 0scrollTop: 0scrollWidth: 400shadowRoot: nullslot: ""spellcheck: truestyle: CSSStyleDeclaration {accentColor: '', additiveSymbols: '', alignContent: '', alignItems: '', alignSelf: '', …}tabIndex: -1tagName: "DIV"textContent: ""textprediction: truetitle: ""translate: truevirtualKeyboardPolicy: ""[[Prototype]]: HTMLDivElement(...)length: 1[[Prototype]]: HTMLCollectionitem: ƒ item()length: (...)namedItem: ƒ namedItem()constructor: ƒ HTMLCollection()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.toStringTag): "HTMLCollection"get length: ƒ length()[[Prototype]]: Object
let divEle = document.getElementsByClassName('c1')[0]
undefined
let divEle = document.getElementsByClassName('c1')[0]
undefined
divEle
<div class="c1 c2 c3"></div>
divEle.classList
DOMTokenList(3) ['c1', 'c2', 'c3', value: 'c1 c2 c3']0: "c1"1: "c2"2: "c3"length: 3value: "c1 c2 c3"[[Prototype]]: DOMTokenList
divEle.classList.add('c4')
undefined
divEle.classList.contains('c4')
true
divEle.classList.contains('c5')
false
divEle.classList.remove('c3')
undefined
divEle.classList
DOMTokenList(3) ['c1', 'c2', 'c4', value: 'c1 c2 c4']0: "c1"1: "c2"2: "c4"length: 3value: "c1 c2 c4"[[Prototype]]: DOMTokenListadd: ƒ add()contains: ƒ contains()entries: ƒ entries()forEach: ƒ forEach()item: ƒ item()keys: ƒ keys()length: (...)remove: ƒ remove()replace: ƒ replace()supports: ƒ supports()toString: ƒ toString()toggle: ƒ toggle()value: (...)values: ƒ values()constructor: ƒ DOMTokenList()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.toStringTag): "DOMTokenList"get length: ƒ length()get value: ƒ value()set value: ƒ value()[[Prototype]]: Object
divEle.classList.toggle('c3')
true
divEle.classList.toggle('c3')
false
style样式操作
标签对象.style.标签样式属性名
backgroundColor
backgroundImage
...
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.backgroundColor = 'red'
'red'
pEle.style.backgroundColor = 'blue'
'blue'
事件
- HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
- 事件可以简单的理解为是给html标签绑定了一些额外的功能(能够触发js代码的运行)
常用事件(重要)
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
绑定事件的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点击此处访问百度" onclick="func1()">
<button id="d1">点击此处访问搜狗</button>
<script>
//绑定事件的方式一：提前写好函数，标签内部指定
function func1(){
alert(12138)
}
//绑定事件的方式二：先查找标签，然后批量进行绑定
let btnEle = document.getElementById('d1')
btnEle.onclick = function (){
alert(666)
}
</script>
</body>
</html>
事件关键字this
事件中的关键字this
let btnEle = document.getElementById('d1')
btnEle.onclick = function (){
alert(321)
console.log(this)
}
this指代的是当前被操作的标签对象
JS事件案例之校验用户数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>
<input type="text" id="username">
<span class="errors" style="color: red"></span>
</p>
<p>
<input type="text" id="password">
<span class="errors" style="color: red"></span>
</p>
<button id="btn">点击提交</button>
<script>
// 1.查找按钮标签
let btnEle = document.getElementById('btn');
// 2.绑定单击事件
btnEle.onclick = function () {
// 3.获取用户输入的用户名和密码
let usernameVal = document.getElementById('username').value
let passwordVal = document.getElementById('password').value
// 4.判断用户名和密码是否正确
if(usernameVal === 'tony') {
// 4.1.查找获取用户名的input框下面的span标签
let span1Ele = document.getElementsByClassName('errors')[0];
// 4.2.给span标签添加内部文本
span1Ele.innerText = '用户名不能是tony'
}
// 5.判断密码是否为空
if(passwordVal.length === 0){
// 5.1.查找获取用户名的input框下面的span标签
let span1Ele = document.getElementsByClassName('errors')[1];
// 5.2.给span标签添加内部文本
span1Ele.innerText = '密码不能为空'
}
}
</script>
</body>
</html>
JS事件案例之省市联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
</head>
<body>
省份：<select name="" id="province">
</select>
城市：<select name="" id="city">
</select>
<script>
let data = {
'山西': ["太原","吕梁","忻州","运城","大同","晋中","长治","朔州","晋城","阳泉","临汾"],
"北京": ["朝阳区","海淀区","东城区","西城区","丰台区","通州区","顺义区","昌平区","怀柔区","平谷区"],
"上海": ["宝山区","普陀区","静安区","杨浦区","虹口区","青浦区","黄浦区","金山区","奉贤区","浦东新区","徐汇区","长宁区","嘉定区","松江区","崇明区"],
"广东": ["深圳",'宝安','龙华','广州',"珠海","汕头","江门","东莞",'佛山',"韶关"]
};
// 提前定义好select标签
let proEle = document.getElementById('province');
let cityEle = document.getElementById('city');
// 1.循环获取所有的省份信息
for (let province in data){
// 2.创建option标签
let opEle = document.createElement('option') // <option></option>>
// 3.添加内部文本
opEle.innerText = province // <option>省份信息</option>
// 4.添加value属性
opEle.setAttribute('value',province) // <option value='省份信息'>省份信息</option>
// 5.将上述的option标签添加到第一个select标签内
proEle.append(opEle)
// 6.给省份的下拉框绑定文本域变化事件
proEle.onchange = function () {
// 每次给市区下拉框添加市区信息之前，应该先情空上一次的数据
cityEle.innerHTML = '';
// 7.获取用户选择的省份信息
// console.log(this.value)
let currentPro = this.value;
// 8.根据省份获取对应的市列表
let targetCityList = data[currentPro];
// console.log(targetCityList)
// 9.循环获取所有的市信息
for(let i=0;i<targetCityList.length;i++){
// 10.创建option标签
let opEle = document.createElement('option') // <option></option>>
// 11.添加内部文本
opEle.innerText = targetCityList[i] // <option>省份信息</option>
// 12.添加value属性
opEle.setAttribute('value',targetCityList[i]) // <option value='省份信息'>省份信息</option>
// 13.将上述的option标签添加到第二个select标签内
cityEle.append(opEle)
}
}
}
</script>
</body>
</html>
window.onload
当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。
window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。
注意：.onload()函数存在覆盖现象。
等待文档加载完毕之后再执行一些代码
<script>
window.onload = function () {
//绑定事件的方式一：提前写好函数，标签内部指定
function func1(){
alert(12138)
}
//绑定事件的方式二：先查找标签，然后批量进行绑定
let btnEle = document.getElementById('d1')
btnEle.onclick = function (){
alert(666)
}
}
</script>
jQuery简介
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
jQuery的优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
- 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
jQuery的内容
- 选择器
- 筛选器
- 样式操作
- 文本操作
- 属性操作
- 文档处理
- 事件
- 动画效果
- 插件
- each、data、Ajax
jQUery的版本
- 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
- 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
- 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。
注意:使用jQuery必须要先导入(很容易忘)
本质其实就是一个js文件
本地导入
提前下载文件并导入
网络CDN服务
只要计算机能够联网就可以直接导入
bootcdn
jQuery基本使用
"""
jQuery() >>> $()
"""
1.JS与jQuery语法对比
2.选择器
id选择器：
$("#id")
标签选择器：
$("tagName")
class选择器：
$(".className")
配合使用：
$("div.c1") // 找到有c1 class类的div标签
组合选择器：
$("#id, .className, tagName")
层级选择器：
x和y可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
3.jQuery选择器查找标签之后的结果与js有何区别
结果集都是数组但是功能有区别
1.如果使用索引取值 那么都是标签对象
标签对象是无法调用jQuery提供的方法的
2.标签对象如果想转换成jQuery对象需要使用 $()
转换成jQuery对象的目的是为了使用jQuery提供的更多方法
$('p')[0].css('color','red')
VM1235:1 Uncaught TypeError: $(...)[0].css is not a function
at <anonymous>:1:11
(anonymous) @ VM1235:1
$('p')[0].style.color = 'red'
'red'
$('p').first().css('color','red')
jQuery.fn.init [p, prevObject: jQuery.fn.init(2)]
$('p').first().style.color = 'green'
VM1626:1 Uncaught TypeError: Cannot set properties of undefined (setting 'color')
at <anonymous>:1:28
(anonymous) @ VM1626:1
$($('p')[0]).css('color','orange')
jQuery.fn.init [p]
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
举例
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
举例
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
表单筛选器
:text
:password:file
:radio
:checkbox
:submit
:reset
:button
举例
$(":checkbox") // 找到所有的checkbox
表单对象属性
:enabled
:disabled
:checked
:selected
举例
找到可用的input标签:
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input标签
找到被选中的option：
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被选中的option
标签：jQuery,
26,
python,
标签,
08,
value,
let,
c1,
document
From： https://www.cnblogs.com/dy12138/p/16629347.html