【2022.8.26】前端开发（5）

2022-08-29 23:05:04 阅读：233 来源： 互联网

标签：jQuery 26 对象标签元素选择器 2022.8 JS 前端开发

学习内容概要

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9