Python教程

学习python-Day48

本文主要是介绍学习python-Day48,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

今日学习内容

JS获取用户输入

有两种方式:

  1. 普通数据(输入、选择)

    标签对象.value

  2. 文件数据(上传)

    标签对象.files

    标签对象.files[0]

image

JS类属性操作

let 标签对象 = document.getElementsByClassName('类名')  #获取所有样式类名
标签对象.classList	#以列表的形式存在
标签对象.classList.contains() # 判断该类名是否存在
标签对象.classList.add()  # 添加类
标签对象.classList.remove()  # 删除指定类
标签对象.classList.toggle()   # 类存在就删除,不存在就增加。

image

JS样式操作

JS是驼峰命名法,就是html样式中有-,则在这里就将-后面第一个字母大写。

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
eg:
	obj.style.backgroundColor="red"
    
    
>>let cEle = document.getElementsByTagName('p')
>>cEle[0]
>>cEle[0].style.color='red'
>>cEle[0].style.backgroundColor='green'

事件

给html标签绑定了一些额外的功能(能够触发js代码的运行)

事件 说明
onclick 当用户点击某个对象时调用的事件句柄
ondbclick 当用户双击某个对象时调用的事件句柄
onfocus 元素获得焦点 (鼠标点击输入框)
onblur 元素失去焦点。
应用场景:通常表单验证,用户离开某个输入框时
代表已经输入完后做验证。
onchange 域的内容被改变。
应用场景:通常用于表单元素,当元素内容被改变时触发。
(select联动)
onkeydown 某个键盘按键被按下。
应用场景:当用户在最后一个输入框按下回车键时,表单提交。
onkeypress 某个键盘按键被按下并松开
onkeyup 某个键盘按键被松开
onload 一张页面或一副图像完成加载
事件 说明
onmousedown 鼠标按钮被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标移到某元素之上
onselect 在文本框中的文本被选中时发生
onsubmit 确认按钮被点击,使用的对象是form
绑定事件的两种方式
<input type="button" value="点我" ondbclick=“func1()>
<button id="d1">点击有惊喜!</button>
<script>
	//绑定事件的方式1:提前写好函数,标签内容指定
    function func1(){
        alter(123)
    }
    //绑定事件方式2:先查找标签,然后批量绑定
    let btnEle = document.getElementById('d1')
    btnEle.onclick = function(){
        alter(321)
    }
</script>

事件中的关键字this

    let btnEle = document.getElementById('d1')
    btnEle.onclick = function (){
        alter(222)
		console.log(this)
    }
# this指代的是当前被操作的标签对象

将js执行代码放在head标签内
window.onload = function(){
    页面的js代码
}
# 等待文档加载完毕之后再执行一些js代码
JS事件案例
  1. 用户输入

    点击事件 onclick

    先判断该方法带不带功能,带功能是否存在或者去掉。
    

    image

    部分代码:
    
    <form action="">
        <p>username:
          <input id="username" type="text" name="username" placeholder="请输入你的用户名" >
        </p>
          <div id="r1"><span class="errors" style="color: red"></span></div>
    
        <p>password:
          <input id="password" type="text" name="password" placeholder="请输入你的密码">
          <div id="r2"><span class="errors" style="color: red"></span></div>
        </p>
        </form>
        <div class="c8">
    
            <input id="btn" type="submit" value="用户登录">
            <input type="reset" value="重置密码">
    	</div>
    
    <script>
          //1.查找用户提交的id
          let btn1Ele = document.getElementById('btn');
          //2.绑定单击事件
          btn1Ele.onclick = function (){
            //3.获取用户输入的用户名和密码
            let usernameVal = document.getElementById('username');
            let passwordVal = document.getElementById('password').value;
            // alert(usernameVal.value)
            // alert(passwordVal)
            //4.判断用户名和密码是否合法
            if(usernameVal.value === 'cg'){
              //5.查找获取用户名的input框下面的span标签
              let span1Ele = document.getElementsByClassName('errors')[0];
              span1Ele.innerText = '用户名不能是cg!'
    
            }
            if(passwordVal.length === 0){
              //5.查找获取密码的input框下面的span标签
              let span2Ele = document.getElementsByClassName('errors')[1];
              span2Ele.innerText = '密码不能为空!'
            }
          }
    </script>
    

    image

  2. 省市联动

    文本域变化事件 onchange

    注意:for(){}  针对字典可以传一个参数也行,但是对于数组必须要三个参数。
    
    部分代码:
     	省份:<select name="" id="province"></select>
      	市区:<select name="" id="city"></select>
    
    <script>
        let data = {
            "河北": ["廊坊", "邯郸"],
            "北京": ["朝阳区", "海淀区"],
            "山东": ["威海市", "烟台市"],
            "安徽": ["芜湖", "合肥"],
            "上海": ["浦东新区", "青浦区"],
            "深圳": ["宝安", "龙华"]
        }
        //提前查找select标签
        let proEle = document.getElementById('province');
        let cityEle = document.getElementById('city');
    
        //获取所有省份信息
        for(let pro in data){
          //创建option标签
          let opEle = document.createElement('option');
          opEle.innerText = pro
          //添加value属性
          opEle.setAttribute('value', pro);
          //将上述的option标签添加到第一个select标签内
          proEle.append(opEle);
        }
        //给省份下拉框绑定文本域的变化事件
        proEle.onchange = function (){
          cityEle.innerText = '';
          // 获取用户选择的省份
          let currentPro = this.value;
          //根据省份获取对应的市区列表信息
          let citylist = data[currentPro];
          //循环获取市信息
          for(let i=0; i<citylist.length;i++){
            //创建option标签
             let opEle = document.createElement('option');
            opEle.innerText = citylist[i]
            //添加value属性
            opEle.setAttribute('value', citylist[i]);
            //将上述的option标签添加到第二个select标签内
            cityEle.append(opEle);
          }
        }
      </script>
    

jQuery类库

  1. 兼容多浏览器的JavaScript

    极大简化JavaScript编程。它的宗旨就是:Write less, do more

  2. 优势

    JQuery的选择器用起来很方便、链式表达式(将多行变为一行,简化代码)、支持事件,样式,动画、Ajax操作、插件扩展开发。

  3. 本地导入

    使用jQuery必须要先导入,这个本质就是js文件。

    提前下载该文件并导入。

     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    

    image

  4. 网络CDN服务

    只要计算机能够联网就可以直接导入。

    远距离的数据交互通过海底光缆略慢,可以用CDN服务体验就近的服务器(就是将资源储存各地服务器中),快速访问资源。但是收费。

    免费CND服务>>>Bootch

jQuery基本使用

jQuery()  >>>  $()  #简写
JS与jQuery语法对比
eg:
$("#i1").html()  相当于js语法 document.getElementById("i1").innerHTML; #获取id值为i1的元素的html代码

1.js操作
>>let p1Ele = document.getElementsByTagName('p')[0]
undefined
>>p1Ele.style.color='red'
'red'
>>let p2Ele = document.getElementsByTagName('p')[1]
undefined
>>p2Ele.style.color='green'
'green'

2.jQuery操作
>>$('p').first().css('color', 'yellow')
jQuery.fn.init [p, prevObject: jQuery.fn.init(2)]
>>$('p').first().css('color', 'blue').next().css('color','yellow')
jQuery.fn.init [p, prevObject: jQuery.fn.init(1)]

image

image

jQuery选择器查找标签之后的结果与js有何区别

1.jQuery查找标签的结果是其产生对象的数组
>>$('p') 
jQuery.fn.init(2) [p, p, prevObject: jQuery.fn.init(1)]

2.js查找标签只是单独的数组
>>document.getElementsByTagName('p')
HTMLCollection(2) [p, p]

3.两者可相互转换。
	jQuery对象转标签对象用索引:
        >>$('p')[0]
        >>document.getElementsByTagName('p')[0]
    
    标签转jQuery对象要使用 $(),目的是为了使用jQuery里的方法。
        >>$(document.getElementsByTagName('p')[0])
          jQuery.fn.init [p]
        
4.jQuery对象和Dom(标签)对象相互不能彼此使用里的方法。除了先做转换。

image

选择器
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

基本筛选器(了解)

:first  // 相当于索引[0] 第一个数值
:last   // 最后一个
:eq(index)  // 索引等于index的那个元素
:even   //匹配所有索引值为偶数的元素,从0开始计数
:odd	//匹配所有索引为奇数的元素,从0开始计数
:gt(index)	//匹配所有大于指定索引值的元素
:lt(index)	//匹配所有小于指定索引值的元素
:not(元素选择器)	//移除所有满足not条件的标签
:has(元素选择器)	//选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
>>$('ul li')
jQuery.fn.init(5) [li, li#d1, li, li, li, prevObject: jQuery.fn.init(1)]
>>$('ul li:first')  //找第一个li
jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
>>$('ul li:last')  //找最后一个li
jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
>>$('ul li:eq(1)')  //找索引值为1的li
>>$('ul:hash(".d1")')  //找ul类标签名不是d1的ul

表单筛选器

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button
    
:enabled
:disabled  #禁用
:checked
:selected

eg:
    >>$('input'[type="text"])
    jQuery.fn.init {}
    >>$(':text')
    jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]
    >>$(':password')
    jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]
#注意:
	>>$(':checked')
    jQuery.fn.init(4) [input.c, input.c, input.c, option, prevObject: jQuery.fn.init(1)]
    >>$(':selected')
    jQuery.fn.init [option, prevObject: jQuery.fn.init(1)]
    
   ''' checked 可以找到 option中有selected的,但是selected不能找到input里面的checked
	'''但是可以用下面这种方式改变checked查找。
	>>$('input:checked')
	jQuery.fn.init(3) [input.c, input.c, input.c, prevObject: jQuery.fn.init(1)]
这篇关于学习python-Day48的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!