jQuery基础

本文详细介绍jQuery库的基础使用,包括文档就绪事件、jQuery DOM与原生DOM的区别、丰富的选择器和筛选器,以及如何简化JavaScript编程。适用于初学者快速掌握jQuery核心功能。

jQuery

1 jQuery介绍

  • jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库
  • jQuery极大的简化了JavaScript 编程

2 jQuery的基本使用

2.1 文档就绪事件
$(document).ready(function(){
    code...  
})

//简写
$(function(){
    
})
2.2 jQueryDOM和原生DOM
jQuery 通过$(选择器)获取元素,该元素对象是jqueryDOM。与原生DOM不同
jQueryDOM 是在原生DOM基本上进行的封装,本质上是由原生DOM组成的类数组对象,可以[索引]得到原生DOM
$(原生DOM)转为jQuery DOM

3. jQuery选择器

3.1 基本选择器

同CSS3基本选择器

3.2 层级选择器

同CSS3的层级选择器

空格
>
+
~
3.3 过滤选择器
:first
:last
:eq()   从0开始
:odd    奇数
:even   偶数
:lt()   小于
:gt()   大于
:not(选择器)
3.4 内容选择器
:contains(text)     包含指定文字的元素
:has(选择器)        包含指定子元素的元素
:empty              没有子元素也没有内容的元素
:parent             有子元素或者有内容的元素
3.5 可见性选择器
:hidden
:visible
3.6 属性选择器
[attr]          .list img[title]
[attr=value]    img[title=hello]
[attr!=val]     不等于
[attr^=val]     
[attr$=val]
[attr*=val]     attr属性 包含 val
[][][]

注意
jQuery中没有 ~= 和 |=
3.7 子元素选择器
:first-child
:first-of-type
:last-chile
:last-of-type
:nth-child
:nth-last-child
:nth-last-of-type
:nth-of-type
:only-child
:only-of-type
3.8 表单选择器
:input      所有的表单控件
:text
:password
:radio
:checkbox
:submit
:reset
:button
:file
3.9 表单对象选择器
:disabled
:enabled
:checked
:selected

4 jQuery 筛选器

4.1 过滤
eq(index)   从0开始
first()
last()
filter(选择器)
not(选择器)
has(选择器)
slice(start,end)
4.2 查找
查找 子元素
children([selector])    子元素
find(selector)          后代元素

查找 父元素
parent([selector])
parents([selector])
parentsUntil([selector])
offsetParent()

兄弟元素
next([selector])        后面紧邻的兄弟元素
nextAll([selector])     后面所有的兄弟元素
nextUntil([selector])   后面兄弟元素 指定结束条件
prev([selector])        前面紧邻的兄弟元素
prevAll([selector])     
prevUntil([selector])
siblings([selector])    所有的兄弟元素(除了自己)

其他
closest(selector)       从自己开始往祖先元素找,返回第一个满足条件的
4.3 串联
add()
addBack()
end()

转载于:https://www.cnblogs.com/luck-L/p/9482213.html

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值