前端-(5)

内容概览

• JavaScript
  • DOM
    • JS获取用户输入
    • JS类属性操作
    • JS样式操作
    • 事件
  • jQuery类库
    • jQuery基本使用
    • 基本筛选器
    • 表单筛选器

JavaScript

DOM

JS获取用户输入

//先获取标签对象
let iEle = document.getElementById('d1')
console.log(iEle.value)  // 获取value属性的值
// value只适用于普通数据,文件数据需要使用files
console.log(iEle.files)  // 结果是一个自定义对象
console.log(iEle.files[0])  // 具体数据
1
2
3
4
5
6

JS类属性操作

let divEle = document.getElementByClassName('c1')
divEle.classList  // 获取标签所有类名
divEle.classList.contains('cls')  // 判断标签对象是包含指定类,有返回true,没有返回false
divEle.classList.add('cls')  // 添加指定类
divEle.classList.remove('cls')  // 删除指定类
divEle.classList.toggle('cls')  // 如果指定类存在就删除,反之则添加
1
2
3
4
5
6

JS样式操作

let divEle = document.getElementById('d1')
// 语法结构
标签对象.style.标签样式属性名 = '属性值'
divEle.style.height = '200px'
divEle.style.width = '200px'
// 需要注意,对于有横杠的属性名,需要删掉横杠并将其后边的第一个字符大写
divEle.style.backgroundColor = 'red'  // 将背景色改为红色
1
2
3
4
5
6
7

事件

可以理解为让HTML标签绑定了一些新的功能，让用户操作了就会触发js代码
常用事件：

绑定事件的两种方式：

// 方式一:提前写好函数，在标签内绑定
<input type="buttom" value="一个普通的按键" onclick="func1()">
<buttom id="d1">又一个普通的按钮</buttom>
<script>
function func1(){alert(111)}
</script>

// 方式二:先查找标签,然后给标签对象绑定
let btnEle = document.getElementById('d1')
btnEle.onclick = function(){alert(222)}

// 关键字this
let btnEle = document.getElementById('d1')
btnEle.onclick = functon(){console.log(this)}
// this代表的是当前被操作的标签对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

jQuery类库

jQuery是一个轻量级的、兼容多个浏览器的JavaScript库
能够极大的简化JavaScript编程；它的宗旨就是：write less，do more
使用jQuery前需要先导入文件

jQuery基本使用

// JS与jQuery选择器语法对比
// id选择器
$('#d1')	|	document.getElementById('d1')
// 类选择器
$('.c1')	|	document.getElementsByClassName('c1')
// 标签选择器
$('div')	|	document.getElementsByTagName('div')
// 所有元素选择器
$('*')
// 组合选择器
$('#d1, .c1, div')
// 层级选择器
$('#d1 p')  // 后代
$('#d1 > p')  // 儿子
$('#d1 + p')  // 毗邻
$('#d1 ~ p')  // 弟弟
// 选择器除了语法有一些区别,整体和css选择器差别不大
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

jQuery查找到的结果与js查找的的结果可以使用的方法是不同的
如果使用索引取值，那么结果都是标签对象
想要转换为jQuery对象需要使用$()包一下

$('p')[0].css('color','red')  // 使用索引取值后是一个标签对象,又要使用jQuery的方法,那么就会报错
$('p')[0].style.color = 'red'  // 能够使用标签对象的方法

$($('p')[0]).css('color','red')  // 再套一层,就可以使用jQuery的方法了
// 在编写代码时,需要注意当前使用的是什么对象
1
2
3
4
5

基本筛选器

/*

    
1
    
2
    
3
    
4
    
5
        111
        111
        222
        222
    
*/
$('div:first')  //jQuery.fn.init [div#id1, prevObject: jQuery.fn.init(1)]
$('div:last')  // jQuery.fn.init [div#id5, prevObject: jQuery.fn.init(1)]
$('div:eq(3)')  // jQuery.fn.init [div#id4, prevObject: jQuery.fn.init(1)]
$('div:even')  // jQuery.fn.init(3) [div#id1, div#id3, div#id5, prevObject: jQuery.fn.init(1)] 索引为偶数
$('div:odd')  // jQuery.fn.init(2) [div#id2, div#id4, prevObject: jQuery.fn.init(1)] 索引为奇数
$('div:gt(2)')  // jQuery.fn.init(2) [div#id4, div#id5, prevObject: jQuery.fn.init(1)]
$('div:lt(2)')  // jQuery.fn.init(2) [div#id1, div#id2, prevObject: jQuery.fn.init(1)]
$('.c1:not(#id7)')  // jQuery.fn.init [span#id6.c1, prevObject: jQuery.fn.init(1)]
$('div:has(.c2)')  // jQuery.fn.init [div#id8, prevObject: jQuery.fn.init(1)]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

表单筛选器

可以看做是属性选择器优化而来
只能够在表单中使用

// 找到对应类型的标签
:text
:password
:file
:radio
:checkbox
:submit
:reset
:buttom
1
2
3
4
5
6
7
8
9

表单对象属性

/*

    
    
    d3
    d4
    d5
    d6
    
        111
        222
    

*/
$('input:enabled')  // jQuery.fn.init(5) [input#d2, input#d3, input#d4, input#d5, input#d6, prevObject: jQuery.fn.init(1)]
$('input:disabled')  // jQuery.fn.init [input#d1, prevObject: jQuery.fn.init(1)]
$(':checked')  // jQuery.fn.init(2) [input#d3, option, prevObject: jQuery.fn.init(1)]
$(':selected')  // jQuery.fn.init [option, prevObject: jQuery.fn.init(1)]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18