JS操作补充与jQuery的基本使用

目录

• JS获取用户输入
• JS类属性操作
• JS样式操作
• 事件
• JS事件案件
• jQuery类库
• jQuery基本使用
• 基本筛选器(了解)
• 表单筛选器

 

---

JS操作补充与jQuery的基本使用

Top

JS获取用户输入

• 首先我们获取用户输入的时候会面临一个问题，就是我们其实如果将接受用户输入的放在上方的话那么就会因为是解释性语言从上至下执行而接受不到用户的输入那么我们就需要将接受放到body的最下方，用来接受用户的输入
• 普通数据（输入、选择）
  • 标签对象.value（接受用户输入）
• 文件数据上传
  • 标签对象.files
  • 标签对象.files[0]

Top

JS类属性操作

• 使用一个类的标签获取兄弟标签的所有标签
  • 标签对象.classList
• 使用一个类的标签获取所有的兄弟标签并增加某个标签
  • 标签对象.classList.add(标签)
• 使用一个类的标签获取所有的兄弟标签并查看某个标签
  • 标签对象.classList.remove(标签)
• 使用一个类的标签获取所有兄弟标签查看该兄弟标签是否存在
  • 标签对象.classList.contains(标签)
• 使用一个类的标签获取所有的兄弟标签指定一个标签如果该标签存在就删除，那不存在就增加
  • 标签对象.classList.toggle（标签）

Top

JS样式操作

• 其实JS本质上是不应该去使用人家CSS的功能的毕竟人家也要吃饭，各司其职最好了所以我们这边不推荐使用这些样式了解即可
• 由于JS眼里容不下“-”来连接所以他们两个使用这个并不兼容
• 样式标签
  • CSS
    • background-color # 颜色
    • background-image # 图片
    • backgroun-position # 位置
  • JS
    • backgroundColor # 颜色
    • backgroundImage # 图片
    • backgroundPosition # 位置

Top

事件

• 事件可以简单的理解为HTML标签绑定了一些额外的功能（能够触发JS代码的运行）
• 常见事件

代码	功能	练习
conlick	当用户点击某个对象时调用的事件句柄
condblclick	当用户双击某个对象时调用的事件句柄
onfocus	元素获得焦点
onblur	元素失去焦点	用于表单验证，用户离开某个输入框时,代表已经输入完成,我们可以对它进行验证
onchange	城的内容被改变	通常用于表单元素，当元素内容被改变时触发（select联动）
onkrydown	某个键盘按键被按下	当用户在最后一个输入框按下回车键时，表单提交
onkeypress	某个键盘按键被按下并松开
onkeyup	某个键盘按键被松开
onload	一张页面或一幅图像完成加载
onmousedown	鼠标按钮被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标移动到某元素上
onselect	在文本框中的文本被选中时发生
onsubmit	确认按钮被点击，使用的对象是form

• 绑定事件的两种方式

<input type="button" value="点我" ondblclick="func1()">
<button id="d1">按我</button>
<script>
绑定事件的方式一：提前写好函数 标签内部指定
function func1() {
    alert(520)
}
绑定事件方式二：先查找标签然后批量绑定
let btnEle = document.getElementById('d1')
btnEle.onclick = function () {
    alert(8520)
}
</script>

• 事件中的关键字this（相当于我们的类里面的self也就是会将自己传入）

let btnEle = document.getElementBy1id('id')
	btnEle.onlick = function() {
        alert(520)
        console.log(this)
    }
this指点的是当前被操作的标签对象

• 等待文档加载完毕之后在执行一些代码

window.onload = function(){
    页面JS代码
}

Top

JS事件案件

1.定时器示例 
2.搜索框示例
3.select示例

Top

jQuery类库

• jQuery是一个快速、简介的JavaScript的框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。

• jQuery设计的总之是“write Less， Do More”，即倡导写更少的代码做更多的事情。他封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式、优化HTML文档操作、事件处理、动画设计和Ajax交互。

• 在我们使用jQuery必须要先导入（很容易忘）

  • jQuery本质上就是一个JS文件，我们就是需要导入一下这个文件，只是一个相对来说较小的文件

• 文本导入

  • 本地导入

    • 提前下载文件并导入

  • 网络CDN服务

    • 只要计算机能够联网就可以直接导入 https://jquery.com/download/

    • bootcdn网址 https://www.bootcdn.cn/

Top

jQuery基本使用

• jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象那么他就可以使用jQuery里的方法。
• jQuery对象是保护组昂DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。
• jQuery语法

let $variable = jQuery对象
let variable = DOM对象
jQuery()  >>>   $() 
$(selector).action()
$("#il").html();  jQuery对象可以使用jQuery的方法
$("#il")[0].innerHTML;  DOM对象使用DOM方法

• 选择器(我们要入乡随俗，使用驼峰体的命名方式)

id选择器:
	$("#id")
标签选择器:
	$("atgName")
class选择器:
 	$("className")
配合使用:
	$("div.c1")  找到有c1 class类的div标签.
所有元素选择器
	$("*")
组合选择器:
	$("#od,className,tagName")
层级选择器:
	x和y可以为任意选择器
	$("x y");  s的所有后代y（子子孙孙）
	$("x > y");  x的所有儿子y（儿子）
	$("x + y");  找到所有紧跟在x后面的y
	$("x ~ y");  x知乎所有的兄弟y

• jQuery选择器查找标签后的结果与JS有何区别（结果集都是数组但是功能是有区别的）

1.如果使用索引取值，那么都是标签对象，比群殴前对象没办法使用jQuery提供的方法
2.标签对象如果想转换成jQuery对象需要使用$()，转换成jQuery对象的目的是为了使用jQuery提供的更多方法
$('p')[0].css('color','red');
VM142:1 Uncaught TypeError: $(...)[0].css is not a function
    at <anonymous>:1:11
(anonymous) @ VM142:1
$($('p')[0]).css('color','red');
jQuery.fn.init [p]
$($('p')[1]).css('color','orange');
jQuery.fn.init [p]
$('p').first().css('color','blue');
jQuery.fn.init [p, prevObject: jQuery.fn.init(2)]0: plength: 1prevObject: jQuery.fn.init(2) [p, p, prevObject: jQuery.fn.init(1)][[Prototype]]: Object(0)
$('p').last().css('color','black');
jQuery.fn.init [p, prevObject: jQuery.fn.init(2)]

Top

基本筛选器(了解)

筛选器	功能
;first	第一个
:last	最后一个
:eq(index)	索引等于index
:even	匹配所有索引值为偶数的元素，从0开始计数
:odd	匹配所有索引值为技术的元素，从0开始计数
:gt(index)	匹配所有大于给定索引值的元素
:lt(index)	匹配所有小于给定索引值的元素
:not(元素选择器)	移除所有满足not条件的标签
:has(元素选择器)	选取所有包含一个或多个标签在内的标签（指的是从后代元素找）

Top

表单筛选器

• 可以看成是属性选择器优化而来的，无论是提交还是传递数据，表单元素在动态交互页面的通是非常重要的。jQuery中专门加入了表单选择器，从而能够极其方便地获取某个类型的表单元素
• 表单元素的具体方法描述

筛选器	功能
$(":input")	选择所有input、textarea、select和button元素
$(":text")	匹配所有文本框
$(":password")	匹配所有密码框
$(":radio")	匹配所有单选按钮
$(":checkbox")	匹配所有复选框
$(":submit")	匹配所有提交按钮
$(":image")	匹配所有图像域
$(":reset")	匹配所有重置按钮
$(":button")	匹配所有按钮
$(":file")	匹配所有文件域