WEB前端之jQuery概念与常用过滤器

jQuery概念

前端js的框架写的代码少，更能更加强大

jQuery的优点

• 体积小
• 封装了DOM操作
• 兼容性强
• 完善了Ajax
• 链式编程
• 强大的选择器
• 丰富的插件

jQuery框架核心功能

1. 操作DOM对象
2. 动态操作样式css
3. 数据访问
4. 控制响应事件等

导入操作

1. 本地导入

  <script src="jQuery.js"></script>

2. 联网导入

<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>

基本使用

ready函数

//第一种方法
jQuery.ready(function (){
})


//第二种方法
$.ready(function(){

})
//第三种方法
$(function (){

})

onload函数

$.onload(function(){

})

区别

• 事件会在页面或图像加载完成后立即发生
• ready解析完html标签之后执行方法
• onload方法一个文件中只能有一个，有多个后面的会覆盖前面的 ready可以有多个

jQuery选择器

基本选择器

id选择器
语法：$(’#id Name’

标签选择器
语法：$(‘标签名’)

类选择器
语法：$(".Name")

组合选择器（并集）
语法：$(‘id|class|标签,id|class|标签’)

通配符选择器（遍历所有的元素）
语法： $(’*’)

标签加类选择器
语法：$(‘标签.类选择器’)

层级选择器

后代选择器
语法：$(‘div p’)

子类选择器
语法：$(‘div > p’)

相邻选择器
语法：$(‘div ~ p’)

.next() 下一个

.nextAll() 下面的全部

.prevAll() 上面的全部

.prev() 上一个

过滤选择器

基本过滤器

选择器	说明	返回
:first	匹配找到的第1个元素	单个元素
:last	匹配找到的最后一个元素	单个元素
:eq	匹配一个给定索引值的元素	单个元素
:even	匹配所有索引值为偶数的元素	集合元素
: odd	匹配所有索引值为奇数的元素	集合元素
:gt(index)	匹配所有大于给定索引值的元素	集合元素
:lt(index)	匹配所有小于给定索引值的元素	集合元素
:not	去除所有与给定选择器匹配的元素	集合元素
:animated	选取当前正在执行动画的所有元素	集合元素
focus	选取当前正在获取焦点的元素	集合元素

属性过滤器

选择器	说明	返回
[attribute]	选取拥有此属性的元素	集合元素
[attribute=value]	选取属性值为value值的元素	集合元素
[attribue^=value]	选取属性的值以value开始的元素	集合元素
[attribue$=value]	选取属性的值以value结束的元素	集合元素

表单选择器与过滤器

选择器	说明	返回
:enabled	选取所有可用元素	集合元素
:disabled	选取所有不可用元素	集合元素
:checked	选取所有被选中的元素（单选框、复选框）	集合元素
:selected	选取所有被选中的元素（下拉列表）	集合元素

可见过滤器

选择器	描述	返回
:hidden	选择所有不可见的元素	集合元素
:visible	选取所有可见的元素	集合元素

内容过滤器

选择器	描述	返回
:contains(text)	选取含有文本内容为text的元素	集合元素
:empty	选取不包含子元素获取文本的空元素	集合元素
:has(selector)	选择含有选择器所匹配的元素的元素	集合元素
:parent	选取含有子元素或者文本的元素	集合元素