其他分享
首页 > 其他分享> > 前端学习-5

前端学习-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网址
建议下载一份  网址留一份 双重保险

image

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