学习python-Day48

今日学习内容

JS获取用户输入

有两种方式：

普通数据（输入、选择）

标签对象.value
文件数据（上传）

标签对象.files

标签对象.files[0]

JS类属性操作

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

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事件案例

用户输入

点击事件 onclick

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

部分代码：

<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>

省市联动

文本域变化事件 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类库

兼容多浏览器的JavaScript库

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

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

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

提前下载该文件并导入。
```
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
```
网络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)]

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(标签)对象相互不能彼此使用里的方法。除了先做转换。

选择器

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)]

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/282396.html

学习python-Day48

今日学习内容

JS获取用户输入

JS类属性操作

JS样式操作

事件

绑定事件的两种方式

将js执行代码放在head标签内

JS事件案例

用户输入

省市联动

jQuery类库

jQuery基本使用

JS与jQuery语法对比

选择器

基本筛选器（了解）

表单筛选器

相关推荐

发表回复