jQuery

never_.

已于 2023-10-08 19:19:27 修改

阅读量178

点赞数 1

文章标签： jquery 前端 javascript

于 2023-10-08 19:13:00 首次发布

本文链接：https://blog.csdn.net/m0_75168728/article/details/133688171

版权

一．概念

jQuery是一个基于javaScript的库，主要用于操作DOM

二、操作

1.获取节点

$(“选择器”)

2.操作节点

$().method();

3.设置元素样式

$().css()

eg.多个按钮绑定点击事件

<button>按钮1</button>

<button>按钮2</button>

<button>按钮3</button>

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

<script>

//获取节点$("选择器")

$("button").click(function(){

console.log("hello");

})

</script>

三．常用方法

1.$

$是一个函数名，是jQuery的简写，作用如下：

可以作为选择器，获取DOM对象对应的jQuery对象

将一个dom对象转换成一个jQuery对象，$()将dom对象包装成jQuery对象，之后就可以使用jQuery的方法

事件中的this，指向DOM对象，所以需要使用$(this)做转换

<input type="button" value="按钮1">

<input type="button" value="按钮2">

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

<script>

$("input").click(function(){

console.log(this);

console.log(this.value);

})

此时，点击按钮输出的为DOM对象，结果为

console.log($(this));

console.log($(this).val());

此时，点击按钮输出结果为jQuery对象

2.index();获取元素索引

<button>按钮1</button>

<button>按钮2</button>

<button>按钮3</button>

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

<script>

$("button").click(function(){

let index=$(this).index();

console.log(index);

})

点击按钮，会输出对应的索引

3.text();获取和设置文本节点

$("button").click(function(){

let text=$(this).text();

console.log(text);

})

点击按钮，输出对应的内容

$("button").click(function(){

$(this).text("新文本");})

点击按钮，对应的按钮名字会被修改成新文本

4.css();获取和设置样式

$("button").click(function(){

let height=$(this).css("height");

console.log(height)

输出button的高度

$("button").click(function(){

$(this).css("height","100px")

}

点击按钮，设置button的高度

$(this).css({

height:"100px",

width:"100px"

})

设置高度和宽度

5.val();获取和设置value值

<input type="button" value="input按钮">

$("input").click(function(){

$(this).val("新")

console.log($(this).val())

})

点击按钮，修改按钮的值，并输出该值

6.attr();获取和设置属性值，如src

<img src="../images/img1.png" alt="">

<div class="btn-lit\st">

<button>1</button>

<button>2</button>

<button>3</button>

</div>

<script>

let imgSrc=[

"../images/img1.png",

"../images/img2.png",

"../images/img3.png"

]

$("button").click(function(){

let index=$(this).index();

$("img").attr("src",imgSrc[index])

})

</script>

点击按钮，切换图片

7.addClass();添加class

<style>

.active{

background-color: red;

}

</style>

<script>

$("button").click(function(){

$(this).addClass("active");

})

</script>

点击按钮，按钮背景变色

8.removeClass();删除class

<style>

.active{

background-color: red;

}

</style>

</head>

<body>

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

<script>

<div class="btn-list">

<button class="active">1</button>

<button class="active">2</button>

<button class="active">3</button>

</div>

$("button").click(function(){

$(this).removeClass("active");

})

</script>

</body>

点击按钮，背景颜色恢复

9.toggleClass();切换class（有class就删除class，没有就加class）

$("button").click(function(){

$(this).toggleClass("active");

})

点击button,实现点一下，出现背景颜色，再点一下，背景颜色消失的效果，即背景颜色的切换

10.sibling();获取同级其他元素

$("button").click(function(){

$(this).addClass("active");

$(this).siblings.removeClass("active")

})

上面的例子中，点击一个按钮使其背景变色后，再点击另一个，最后两个按钮都变色，但在本例中，三个按钮只会有一个变色，因为，点击一个按钮后，sibling()会获取同级按钮，而remove()会删除同级按钮的class，所以，只有被点击的按钮变色

11.find(“选择器”);获取子级

<style>

   .box{

    width: 200px;

height: 200px;

border: 1px solid red;

}

</style>

</head>

<body>

<div class="box">

<button>按钮</button>

</div>

<div class="box">

<button>按钮</button>

</div>

<div class="box">

<button>按钮</button>

</div>

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

<script>

$(".box").click(function(){

$(this).find("button").css("background-color","red")

})

</script>

</body>

点击div，按钮变色

12.partent();获取父级

$("button").click(function(){

$(this).parent().css("background-color","red")

})

点击按钮，div变色

13.append();添加元素节点

14.remove();删除元素节点

<ul class="fruit-list">

<li>香蕉</li>

<li>苹果</li>

<li>柿子</li>

</ul>

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

<script>

$(".fruit-list li").click(function(){

$(this).remove();

})

</script>

删除选择的水果

<input type="text" >

<button>添加</button>

<ul class="fruit-list">

<li>香蕉</li>

<li>苹果</li>

<li>柿子</li>

</ul>

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

<script>

$("button").click(function(){

let value=$("input").val();

let li=$(`<li>${value}</li>`);

//将li插入到列表

$(".fruit-list").append(li);

})

//使用on进行事件委托，格式on(事件类型，选择器，事件执行的函数)

//事件委托：将子集的事件交给父级处理，

//使添加的元素也能被删除

$(".fruit-list").on("click","li",function(){

$(this).remove();

})

添加输入的元素，同时，实现删除

四、事件

1.click()

2.mouseenter();

3.mouseleave();

4.mousemove();

$(".box").mouseenter(function(){

console.log("mouseenter")

})

$(".box").mouseleave(function(){

console.log("mouseleave")

})

$(".box").mousemove(function(){

console.log("mousemove")

})

5.on();事件委托

格式：

on(事件类型，选择器，事件执行的函数)

6.链式操作

因为mouseenter();、mouseleave();、mousemove();的返回值都为jQuery对象，即在例子中，是box，那么可以将他们连在一起

$(".box").mouseenter(function(){

console.log("mouseenter")

}).mouseleave(function(){

console.log("mouseleave")

}).mousemove(function(){

console.log("mousemove")

})

效果与上面一样

7.获取鼠标的坐标

pageX

pageY

$(".box").mousemove(function(e){

let x=e.pageX;

let y=e.pageY;

console.log(`x的坐标为${x}，y的坐标为${y}`)

})

五、动画方法

1.show();

2.hide();

以左上角为中心显示隐藏

<style>

   .box{

    width: 100px;

height: 100px;

background-color: red;

}

</style>

</head>

<body>

<button class="show">显示</button>

<button class="hide">隐藏</button>

<div class="box"></div>

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

<script>

$(".show").click(function(){

//以500毫秒的时间展示

$(".box").show(500);

})

$(".hide").click(function(){

//以500毫秒的时间隐藏

$(".box").hide(500);

})

</script>

</body>

点击按钮，控制div是否可见