学习内容概要

• JS获取用户输入值
• JS事件绑定
• jQuery类库
• jQuery常见操作

内容详细

JS获取用户输入

普通数据(输入、选择)
	标签对象.value
文件数据(上传)
	标签对象.files
	标签对象.files[0]

JS类属性操作

标签对象.classList
标签对象.classList.contains()
标签对象.classList.add()
标签对象.classList.remove()
标签对象.classList.toggle()

JS样式操作

标签对象.style.标签样式属性名
	backgroundColor
 	backgroundImage
   ...

事件

1.事件可以简单的理解为是给html标签绑定了一些额外的功能(能够触发js代码的运行)
    onclick        当用户点击某个对象时调用的事件句柄。
    ondblclick     当用户双击某个对象时调用的事件句柄。

    onfocus        元素获得焦点。    // 练习：输入框
    onblur         元素失去焦点。    应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
    onchange       域的内容被改变。    应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

    onkeydown      某个键盘按键被按下。  应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
    onkeypress     某个键盘按键被按下并松开。
    onkeyup        某个键盘按键被松开。
    onl oad         一张页面或一幅图像完成加载。
    onm ousedown    鼠标按钮被按下。
    onm ousemove    鼠标被移动。
    onm ouseout     鼠标从某元素移开。
    onm ouseover    鼠标移到某元素之上。

    onselect      在文本框中的文本被选中时发生。
    onsubmit      确认按钮被点击，使用的对象是form。
  
2.绑定事件的两种方式
	<input type="button" value="点我" ondblclick="func1()">
    <button id="d1">按我</button>
    <script>
        // 绑定事件的方式1:提前写好函数 标签内部指定
        function func1(){
            alert(123)
        }
        // 绑定事件的方式2:先查找标签 然后批量绑定
        let btnEle = document.getElementById('d1')
        btnEle.onclick = function (){
            alert(321)
        }
    </script>
 
3.事件中的关键字this
	let btnEle = document.getElementById('d1')
    btnEle.onclick = function (){
        alert(321)
        console.log(this)
    }
 	this指代的是当前被操作的标签对象
    
4.等待文档加载完毕之后再执行一些代码
	window.onload = function () {
        页面js代码    
    }

JS事件案例

1.校验用户输入
	点击事件  onclick
2.省市联动
	文本域变化事件	 onchange

jQuery类库

兼容多浏览器的JavaScript库
极大地简化JavaScript编程。它的宗旨就是：Write less, do more

注意:使用jQuery必须要先导入(很容易忘)
    本质其实就是一个js文件
    
本地导入
	提前下载文件并导入
网络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

标签：jQuery,26,对象,标签,元素,选择器,2022.8,JS,前端开发
来源： https://www.cnblogs.com/55wym/p/16637681.html