jquery基础知识

最新推荐文章于 2024-09-03 21:43:51 发布

美妙的时光

最新推荐文章于 2024-09-03 21:43:51 发布

阅读量204

点赞数

分类专栏： python全栈文章标签： jquery css js javascript

本文链接：https://blog.csdn.net/weixin_44730235/article/details/105683145

版权

python全栈专栏收录该内容

18 篇文章 0 订阅

订阅专栏

jquery内容：

1、选择器

2、筛选器

3、样式操作

4、文档处理

5、事件

6、each、data

1、选择器

基本选择器：

id选择器： $(’#id’)
标签选择器：$(“tagName”)
class选择器：$(".className")
配合使用： $(“div.c1”) //找到有c1 class类的div标签
组合选择器：$("#id,.className,tagName")

层级选择器：

x和y可以为任意选择器

$(“x y”) // x的所有后代y （子子孙孙）
$(“x > y”) //x的所有儿子y (儿子)
$(“x + y”) // 找到所有紧挨在x后面的y
$(“x ~ y”) // x之后所有的兄弟y

2、筛选器

属性	含义
:first	第一个
:last	最后一个
:eq(index)	索引等于index的那个元素
:even	匹配所有索引值为偶数的元素，从0开始计数
:odd	匹配所有索引值为奇数的元素，从0开始计数
:gt(index)	匹配所有大于给定索引值的元素
:lt(index)	匹配所有小于给定索引值的元素
:not	移除所有满足not条件的标签
:has	选取所有包含一个或多个标签在其内的标签

表单筛选器：

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

表单对象属性：

:enabled
:disabled
:checked
:selected

筛选器方法：
下一个元素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一个元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素：

$("#id").parent()
$("#id").parents() //查找当前元素的所有的父辈元素
$("#id").parentsUntil() //查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素：

$("#id").children(); //儿子们
$("#id").siblings(); //兄弟们

3、样式操作

addClass();	添加指定的css类名
removeClass();	移除指定的css类名
hasClass();	判断样式存不存在
toggleClass()	切换css类名，如果有就移除，如果没有就添加

示例：

$("p").css("color","red");
//将所有p标签的字体设为红色

4、文档处理

添加到指定元素内部的后面

$(A).append(B) //把B追加到A
$(A).appendTo(B) //把A追加到B

添加到指定元素内部的前面：

$(A).prepend(B) //把B前置到A
$(A).prependTo(B) //把A前置到B

添加到指定元素外部的后面：

$(A).after(B) //把B放到A的后面
$(A).insertAfter(B) //把A放到B的后面

添加到指定元素外部的前面：

$(A).before(B) //把B放到A的前面
$(A).insertBefore(B) //把A放到B的前面

克隆：clone()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>克隆</title>
<style>
#b1 {
	background-color: dodgerblue;
      padding: 5px;
      color: white;
      margin: 5px;
}
</style>    

</head>
<body>
<button id='b1'>一刀九十九</button>
<script src='jquery-3.4.1.min.js'></script>
<script>
	$('#b1').on("click",function(){
		$(this).clone(true).insertAfter(this);	
});

</script>
</body>
</html>

5、事件

常用事件：

click(function(){…}) 点击元素时，发生click事件
hover(function(){…}) 鼠标悬浮
blur(function(){…}) 当元素失去焦点时发生 blur 事件
focus(function(){…}) 当元素获得焦点时
change(function(){…}) 当元素的值发生改变时，会发生 change 事件。
keyup(function(){…})

事件绑定：
$(‘选择器’).click(function(){…})

6、each、data

.each() 循环遍历：

li = [10,20,30,40]
$.each(li,function(k,v){
	console.log(k,v);
})

.data() 在匹配的元素上存储任意相关数据:

$("div").data("k",100);
//给所有div标签都保存一个名为k,值为100

.removeData(key): 移除放在元素上的数据

美妙的时光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery基础知识

jquery内容：1、选择器2、筛选器3、样式操作4、文档处理5、事件6、each、data1、选择器基本选择器：id选择器： $(’#id’)标签选择器：$(“tagName”)class选择器：$(".className")配合使用： $(“div.c1”) //找到有c1 class类的div标签组合选择器：$("#id,.className,tagName")...
复制链接

扫一扫

专栏目录