标签：__ jQuery 对象 标签 前端 JS 学习 选择器
目录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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。