今日学习内容

JS获取用户输入

有两种方式：

1. 普通数据（输入、选择）

   ​ 标签对象.value

2. 文件数据（上传）

   ​ 标签对象.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代码的运行）

绑定事件的两种方式

<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

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

   

   部分代码：
   
   <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>
   

   

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>
   

   

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

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