JQuery基础

jQuery基础

jQuery内部封装了很多原生的js代码，通过使用类库，能够让我们更加方便的完成js操作。

JQuery的宗旨就是：with less do more.

JQuery能够实现很多的功能：

1. 选择器

2. 筛选器

3. 样式操作

4. 文本操作

5. 属性操作

6. 文档处理

7. 事件

8. 动画效果

9. 插件

10. each、data、Ajax(重点 django部分学)

在使用它之前，要确保它已经被导入了。导入的方式有两种：

1. 文件下载到本地，通过语句导入

2. 直接引入jQuery提供的CDN服务（基于网络直接请求加载）

// jQuery基本语法
jQuery(选择器).action()  
// 可以简写为$(选择器).action()

// jQuery与js代码对比
// js代码操作标签
let pEle = document.getElementById('d1');
pEle.color = 'red';

// jQuery操作标签
$('#d1').css('color','red')

如何查找标签

// 基本选择器
$('#id')		// id选择器
$('.类名')	   // 类选择器
$('标签')		   // 标签选择器

// 返回的的是数组，其内部是jQuery对象而不是JS对象。
$('#id')[0]							// jQuery对象转为js对象
$(document.getElementById('id'))    // JS对象转为JQuery对象

组合选择器/分组与嵌套

$('div')  		// 标签
$('div.c1') 	// 带有c1类的div
$('div#d1')  	// ID为d1的div
$('*')  		// 全部的标签

$('#d1,.c1,p')  // 用逗号表并列关系 

$('div span')	// 后代选择器：所有内部的span标签
$('div>span')	// 子代选择器：子代（第一层）的span标签
$('div+span')	// 毗邻选择器：挨着自己的下一个同级标签  
$('div~span')	// 弟弟选择器：同级别的所有下方的标签  

基本筛选器

$('ul li')

$('ul li:first')  		# 大儿子 
$('ul li:last')  		# 小儿子
$('ul li:eq(2)')		# 放索引
$('ul li:even')  		# 偶数索引 0包含在内
$('ul li:odd')  		# 奇数索引
$('ul li:gt(2)')  		# 大于索引
$('ul li:lt(2)')  		# 小于索引
$('ul li:not("#d1")')  	# 移除满足条件的标签
$('div:has("p")')  		# 选取出包含一个或多个标签在内的标签

表单选择器

$('input[type="text"]')
$(':text')  # 等价于上面

$('input[type="password"]')
$(':password')  # 等价于上面

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...

表单对象属性
:enabled
:disabled
:checked
:selected

"""特殊情况"""
$(':checked')  # 它会将checked和selected都拿到
$(':selected')  # 它只拿selected

$('input:checked')  # 自己加一个限制条件

筛选器方法

$('#d1').next()  # 同级别下一个
$('#d1').nextUntil('.c1')  # 不包括最后一个
$('#d1').nextAll()  # 接下来的全部

$('.c1').prev()  # 上一个
$('.c1').prevUntil('#d2')
$('.c1').prevAll()

$('#d3').parent()  # 第一级父标签
$('#d3').parentsUntil('body')

$('#d2').children()  # 儿子
              
$('#d2').siblings()  # 同级别上下所有
              
$('div p')  # 等价下面           
$('div').find('p')  # find从某个区域内筛选出想要的标签 
              
"""下述两两等价"""
$('div span:first')
$('div span').first()
     
$('div span:last')
$('div span').last()

$('div span:not("#d3")')
$('div span').not('#d3')