jQuery的学习

阳光男孩

已于 2023-09-22 21:31:59 修改

阅读量109

点赞数

文章标签： jquery 学习前端

于 2023-09-22 21:13:45 首次发布

本文链接：https://blog.csdn.net/qq_58907762/article/details/133185102

版权

jQuery引入

<head>
    <script src="jquery-1.9.1.min.js"></script>
</head>

jQuery对象与DOM对象

区别

转换

DOM对象转换成jQuery对象

$(DOM对象);

jQuery对象转换成DOM对象

jQuery对象[index];

jQuery对象.get(index);

jQuery对象的选择器

基本选择器

1、标签选择器

$("a") 获得标签名为a的标签

2、ID选择器

$("#a") 获得id名为a的标签

$("p#id") 获得p标签中 id名为a的标签

3、类选择器

$(".a") 获得class名为a的标签

$("h2.a") 获得p标签中 class名为a的标签

4、通配选择器

$("*") 获得所有标签

5、并集选择器

$("类型1，类型2，类型3") 获得三种类型的标签

6、后代选择器

$(ul li) 获得所有ul标签中的所有li标签

7、父子选择器

$(ul > li) 获得所有ul标签中的直接子元素为li的标签

8、后面第一个兄弟元素节点

prev + next 获得prev 标签后面第一个兄弟元素节点

9、后面所有的兄弟元素节点

prev ~ next 获得prev 标签后面所有的兄弟元素节点

属性选择器

[属性] 匹配包含给定属性的元素
[属性][属性] 复合属性选择器，匹配同时满足多个属性的元素
[属性=值] 匹配给定的属性是某个特定值的元素
[属性!=值] 匹配所有属性不等于特定值的元素
[属性^=值] 匹配给定的属性是以某些值开始的元素
[属性$=值] 匹配给定的属性是以某些值结尾的元素
[属性*=值] 匹配给定的属性是包含某些值的元素

位置选择器

对于整个页面而言的位置选择器

:first 获取整个页面的第一个元素
:last 获取整个页面的最后一个元素
:odd 匹配所有索引值为奇数的元素，0 为偶数
:even匹配所有索引值为偶数的元素
:eq(n) 匹配一个给定索引值的元素，n从零开始
:gt(n) 匹配所有大于给定索引值的元素
:lt(n) 匹配所有小于给定索引值的元素

对于上级标签而言的位置选择器

:first-child 匹配第一个子元素
:last-child 匹配最后一个子元素
:nth-child(n) 匹配其父元素下的第n个子元素
:nth-child(odd|even) 匹配其父元素下的奇偶元素

表单选择器

对于表单项的选择器

:text :password :radio :checkbox :hidden :file :submit
（特殊）:input 匹配所有 input， textarea， select 和 button 元素

注意：$("input")和$(":input")的区别

$("input")：标签选择器，只匹配input标签
$(":input")：匹配所有 input， textarea， select 和 button 等元素

对于表单项状态的选择器

:selected :checked :disabled

jQuery动画

实现显示动画效果方法：show()

实现隐藏动画效果方法：hide()

实现切换显示和隐藏动画效果方法：toggle()

实现向下滑动动画效果方法：slideDown()

实现向上滑动动画效果方法：slideUp()

实现滑动切换效果方法：slideToggle()

实现淡入动画效果方法：fadeIn()

实现淡出动画效果方法：fadeOut()

实现淡入淡出切换效果方法：fadeToggle()

实现淡入到指定透明度效果方法：fadeTo()

自定义动画

$(选择器).animate({

width: "500px"，

height: "500px"，

fontSize: "10em"

}， 1000);

jQuery对象的操作

操作文本的函数

html() 相当于innerHTML
- html() 获取文本节点（标签+文本）
- html(标签)没有则添加标签，有则会覆盖原有的内容
text() 相当于innerText
- text() 获取文本节点（纯文本）
- text(文本内容) 没有则添加文本，有则会覆盖原有的内容

操作属性的函数

attr(属性名) 获取属性值
attr(属性名, 属性值) 设置属性值
removeAttr(属性名) 移除属性
prop(属性名) 获取属性值与alter区别是返回值是true或者false
prop(属性名, 属性值) 设置属性值
val() 获取value属性值
val(值) 设置value属性值

操作元素的函数

append()、appendTo() 添加子元素节点（尾插）
- 父元素节点.append(新的子元素节点)
- 新的子元素节点.appendTo(父元素节点)
prepend()、prependTo() 添加子元素节点（头插）
before() 、insertBefore() 添加平级元素节点（前面）
after()、insertAfter() 添加平级元素节点（后面）
parent() 获取父元素节点
remove() 删除元素节点
empty() 删除子元素节点

操作CSS样式的函数

css(css)
css(css,val)
css({css1:val1,css2:val2,…..})
addClass(值) 追加类属性值，不是覆盖

removeClass(值) 移除属性值
toggleClass(值) 不存在，添加。存在，移除

正则表达式的使用

var reg=/表达式/;
var reg=new RegExp("表达式");

阳光男孩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的学习

$("input")和$(":input")的区别。实现淡入淡出切换效果方法：fadeToggle()实现切换显示和隐藏动画效果方法：toggle()实现向下滑动动画效果方法：slideDown()实现滑动切换效果方法：slideToggle()实现向上滑动动画效果方法：slideUp()获得所有ul标签中的直接子元素为li的标签。实现淡出动画效果方法：fadeOut()获得标签名为a的标签。实现淡入动画效果方法：fadeIn()实现显示动画效果方法：show()实现隐藏动画效果方法：hide()
复制链接

扫一扫