Jquery的使用

云端之子

已于 2023-09-23 19:38:05 修改

阅读量236

点赞数 5

文章标签： jquery 前端 javascript

于 2023-09-23 19:35:01 首次发布

本文链接：https://blog.csdn.net/m0_72128887/article/details/133214694

版权

1.jQuery引入

    <head>
        <script src="js/jquery.js"></script>
    </head>

2.jQuery对象与DOM对象

DOM对象：

Jquery对象：

DOM对象转换成jQuery对象

$(DOM对象);

jQuery对象转换成DOM对象

jQuery对象[index];

jQuery对象.get(index);

3.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 标签后面所有的兄弟元素节点

10.属性选择器

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

11.位置选择器

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

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

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

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

13.表单选择器

对于表单项的选择器

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

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

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

对于表单项状态的选择器

:selected :checked :disabled

4.jQuery动画

实现显示动画效果方法：show()
实现隐藏动画效果方法：hide()
实现切换显示和隐藏动画效果方法：toggle()
实现向下滑动动画效果方法：slideDown()
实现向上滑动动画效果方法：slideUp()
实现滑动切换效果方法：slideToggle()
实现淡入动画效果方法：fadeIn()
实现淡出动画效果方法：fadeOut()
实现淡入淡出切换效果方法：fadeToggle()
实现淡入到指定透明度效果方法：fadeTo()
自定义动画

$(选择器).animate({

        width: "500px"，

        height: "500px"，

        fontSize: "10em"

}， 1000);

5.jQuery对象的操作

5.1操作文本的函数

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

5.2操作属性的函数

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

5.3操作元素的函数

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

5.4操作CSS样式的函数

css(css)
css(css,val)
css({css1:val1,css2:val2,…..})
addClass(值) 追加类属性值，不是覆盖
removeClass(值) 移除属性值
toggleClass(值) 不存在，添加。存在，移除

6.表单验证

正则表达式的使用

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

云端之子

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Jquery的使用

(":input")：匹配所有 input， textarea， select 和 button 等元素。$("input")：标签选择器，只匹配input标签。获得所有ul标签中的直接子元素为li的标签。获得prev 标签后面所有的兄弟元素节点。获得p标签中 class名为a的标签。获得所有ul标签中的所有li标签。获得p标签中 id名为a的标签。获得class名为a的标签。获得标签名为a的标签。获得id名为a的标签。$("类型1，类型2，类型3")DOM对象转换成jQuery对象。
复制链接

扫一扫