前端学习-5
作者：互联网
目录
JS获取用户输入值
普通数据(输入、选择)
标签对象.value
文件数据(上传)
标签对象.files
标签对象.files[0]
JS类属性操作
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true 否则返回false
classList.toggie(cls) 存在就删除 否则添加
JS样式操作
通过JS来操作标签样式 并不常见(了解项)
obj.style.backgroudColoe='blue'
JS操作CSS属性的规律:
1.对于没有中横线的CSS属性一般直接使用style.属性名即可 例
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.对含有中横线的CSS属性,将中横线后面的第一个字母换成大写即可 例
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
事件
HTML4.0的新特性之一是有能力使HTML事件触发浏览器中的动作(action),比如当用户点击某个HTML元素时启动一段JavaScript。下面是一个属性列表,这些属性可插入HTML标签来定义事件动作。
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="点我看看" ondblclick="func1()">
<button id="d1">按我试试</button>
<script>
// 绑定事件的方式1:提前写好函数 标签内部指定
function func1() {
alert('弹弹弹')
console.log(this)
}
// 绑定事件的方式2:先查找标签 然后批量绑定
let btnEle = document.getElementById('d1')
btnEle.onclick = function () {
alert('铛铛铛')
console.log(this)
}
</script>
</body>
</html>
JS事件案例
<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="bin">提交</button>
<script>
// 1.查看按钮标签
let btnRle = documen.getElementById('bin')
// 2.绑定单击事件
btnEle.onclick = function (){
// 3.获取用户输入的用户名和密码
let userNameVal = document.getElementById('username').valueOf();
let passWordVal = document.getElementById('password').valueOf();
// 4.判断用户名和密码是否合理
if (userNameVal === 'curry'){
// 5.查找获取用户的input框里面的span标签 注：span标签不调用时候不占内存
let span1Ele = document.getElementsByClassName('errors')[0];
// 6.给span标签内添加文本
span1Ele.innerText = '用户名不能为curry'
}
// 7.判断密码是否为空
if (passWordVal.length === 0){
// 8.朝招获取用户名的input框下的span标签
let span1Ele = document.getElementsByClassName('errors');
// 9.给span标签添加内部文本
span1Ele.innerText = '小呆呆 你是不知道密码为空吗？'
}
}
</script>
</body>
</html>
1.校验用户输入
点击事件 onclick
2.省市联动
文本域变化事件 onchange
jQuery类库
jQuery是一个轻量级的、兼容多浏览器的JavaScript库
极大地简化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必须是先导入(这一步很容易忘)！！！
本地导入
提前下载文件并导入
网络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(元素选择器) 选取所有包含一个或多个标签在其内的标签(指的是从后代元素中查找)
表单筛选器
可以看成是属性选择器优化而来
注意:$(':checked')
$('input:checked')
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
表单对象属性
:enabled
:disabled
:checked
:selected
8.26日小练习
1.列举字符串,列表，元组，字典每个常用的五个方法
字符串：repleace,strip,split,reverse,upper,lower,join
列表：append,pop,insert,remove,sort,count,index
元组：index,count,len(),dir(),cmp(tuple1, tuple2)：max,min
字典：get,keys,values,pop,popitems,clear,update,items
2.描述下列常见内置函数的作用可用代码说map,zip,filter,sorted,reduce
map()是 Python 内置的高阶函数，它接收一个函数 f 和一个 list，并通过把函数 f 依次作用在 list 的每个元素上，得到一个新的 list 并返回。
def f(x):
return x*x
print map(f, [1, 2, 3, 4, 5, 6, 7, 8, 9])
输出结果：
[1, 4, 9, 10, 25, 36, 49, 64, 81]
注意：map()函数不改变原有的 list，而是返回一个新的 list。
zip()是Python的一个内建函数，它接受一系列可迭代的对象作为参数，将对象中对应的元素打包成一个个tuple（元组），然后返回由这些tuples组成的list（列表）。
若传入参数的长度不等，则返回list的长度和参数中长度最短的对象相同。利用*号操作符，可以将list unzip（解压）。
list1 = [1,2,3,4]
list2 = [5,6,7,8]
print zip(list1,list2)
输出结果是 [(1, 5), (2, 6), (3, 7), (4, 8)]
str1 = "abcd"
str2 = "123456"
print zip(str1,str2)
输出结果是：[('a', '1'), ('b', '2'), ('c', '3'), ('d', '4')]
filter
1、循环帮你调用函数
2、帮你过滤你传入的参数，函数的结果返回的是true那就保存，返回false就不要，且返回的也是迭代器
sort()与sorted()的不同在于，sort是在原位重新排列列表，而sorted()是产生一个新的列表。
>>> print sorted([5, 2, 3, 1, 4])
[1, 2, 3, 4, 5]
>>> L = [5, 2, 3, 1, 4]
>>> L.sort()
>>> print L
[1, 2, 3, 4, 5]
3.列举你所知道的面相对象中的__开头__结尾的方法及作用，越多越好
__str__
定义__str__方法的时候，返回值必须是字符串格式的数据类型，否则报错。
__repr__
调用__repr__的返回值必须是字符串的数据(str)类型,且repr()实际就是调用__repr__方法，格式化输出%r实际也是调用__repr__方法.
__del__
析构方法：当对象在内存中被释放时，自动触发执行的__call__
当类中使用了__call__方法后，实例化后的对象，加上括号 object() 就会调用__call__方法item系列
__getitem__ __setitem__ __delitem__主要作用就是操作类，可以像操作字典一样，相当于给类里的属性加上了索引。
__new__是一个构造方法：创建一个对象。
__eq__
作用：当判断对象属性是否相同的时候会使用__eq__方法，即使用' == '做判断的时候会调用__eq__方法。
__hash__
作用：让对象里属性相同的对象指向同一个哈希值。
4.列举你所知道的css选择器
基本选择器
组合选择器
属性选择器
分组与嵌套
伪类选择器
伪元素选择器
5.JS有哪些数据类型
数值类型
字符串类型
布尔值类型
对象及自定义对象
标签：__,jQuery,对象,标签,前端,JS,学习,选择器 来源： https://www.cnblogs.com/zzjjpp/p/16632832.html