덜 쓰고 더 많이 ——작성하고 더 많이 하기
캡슐화 기술을 통해 기본 DOM 작업이 캡슐화됩니다.
- 코드 단순화
- 자동 순회
- 함수 오버로딩 메커니즘 - 다기능 함수 만들기
용법:
- $: 범용 함수
- $(문자열): 요소에서 JQ 개체를 찾기 위한 선택기로 사용
- $(DOM): 요소가 JQ 객체로 캡슐화됩니다.
- JQ 개체의 프로토타입에는 많은 메서드가 있습니다.
- css: 스타일 인라인 스타일 조작
- 클릭: 일괄 클릭 이벤트
- 수업
- 추가 클래스: 추가
- 제거 클래스: 삭제
- 토글 클래스: 토글
- 표시 및 숨기기
- 쇼 : 표시
- 숨기기: 삭제
- 토글 : 토글
- 선택자
- eq=(n) : 질의 결과에서 일련번호가 n인 요소 찾기
- 부모(): 부모 요소
- 형제자매(): 형제 요소
- next(): 다음 형제
제이쿼리 애니메이션
애니메이션은 크게 애니메이션 방식 1: 트윈 애니메이션, 트랜지션
애니메이션 방식 2: 애니메이션 애니메이션: 전문가용, 그리고 쿼리
는 스타일을 통해 스타일을 수정하여 애니메이션을 구현하는 두 가지 유형으로 크게 나뉜다는 것을 알고 있습니다 .
그것을 시도하십시오.
사례: 위치 조정 애니메이션
쿼리 아웃 태그
const $box=$('#box')
참고: jq 개체인 경우 변수 이름은 일반적으로 구별하기 위해 $ 접두사가 붙습니다(이것은 모든 사람이 인식하는 표준입니다.
첫 번째 버튼 레이블을 찾으십시오.
$('button').eq(0).click(function() {
})
// 找到第一个button标签
그런 다음 애니메이션을 설정합니다.animation
속성 animate 의 첫 번째 매개
변수는 스타일 스타일입니다.작은 고비의 작성 방법을 사용하거나 원래 스타일을 직접 작성할 수 있습니다.두 번째
매개 변수는 밀리 초 단위의 애니메이션 시간입니다.
세 번째 매개 변수는 콜백입니다. 애니메이션이 완료된 후 기능.
$box.animate({
borderRadius:'50%'
})
물론 애니메이션 대기열도 지원됩니다.
$("button")
.eq(0)
.click(function () {
// 让盒子变圆
// animate：以动画的形式修改元素的style
// 参数1：style样式
$box.animate({
borderRadius: "50%",
});
// 参数12
$box.animate({
top: "100px"
},2000);
// 参数123
$box.animate({
left: "100px"
},2000,function(){
alert("动画结束")
});
});
정지 방법을 이용한 애니메이션 정지
파라미터 1: 애니메이션 대기열 지우기(false/true)는 기본적으로 꺼져 있습니다
.
$('button').eq(1).click(function () {
$box.stop(true,true)
})
효과 그림:
메인 프레임 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: orange;
position: relative;
}
</style>
</head>
<body>
<button>开始</button>
<button>结束</button>
<div id="box"></div>
<script src="./js/jquery-3.6.0.js"></script>
<script>
// 查询出标签
const $box = $("#box");
// 如果是jq对象则变量名用$作为前缀，以区分
$("button")
.eq(0)
.click(function () {
// 让盒子变圆
// animate：以动画的形式修改元素的style
// 参数1：style样式
$box.animate({
borderRadius: "50%",
});
// 参数12
$box.animate(
{
top: "100px",
},
2000
);
// 参数123
$box.animate(
{
left: "100px",
},
2000,
function () {
alert("动画结束");
}
);
});
$("button")
.eq(1)
.click(function () {
$box.stop(true, true);
});
// 找到第一个button标签
</script>
</body>
</html>
jquery 캐러셀 맵
먼저 사진을 준비합니다. 준비가 되지 않은 경우 제가 준비한 사진을 직접 다운로드할 수 있습니다.
다운로드하려면 클릭하세요.
회전목마의 원리
그림은 아래 그림과 같이 배열되어 있습니다. 전환하고 싶을 때 위치를 이동하여 전환 효과를 얻으십시오. 회전
목마를 만들자.
먼저 프레임을 만든 다음 컨트롤을 작성하십시오.
코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>轮播图</title>
<style>
/* 样式 */
/* 换页按钮 */
* {
margin: 0;
}
#img_box {
width: 480px;
height: 320px;
/* overflow: hidden; */
border-radius: 10px;
}
#img_box > #img_item {
/* width: 480px; */
height: 320px;
overflow: hidden;
border-radius: 10px;
display: flex;
}
#img_box > #img_item > img {
width: 480px;
height: 320px;
}
#btn_too {
width: 480px;
height: 320px;
position: fixed;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
#btn_too >button{
width: 40px;
height: 60px;
}
#btn_too > #list_item {
width: 480px;
height: 20px;
display: flex;
justify-content: center;
position: absolute;
bottom: 0;
}
#btn_too > #list_item > span {
width: 12px;
height: 12px;
background-color: rgb(184, 182, 89);
border-radius: 50%;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
/* position: relative; */
/* top: 0; */
}
#btn_too > #list_item > span.active {
width: 12px;
height: 12px;
background-color: rgb(31, 31, 21);
border-radius: 50%;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="img_box">
<div id="img_item">
<img src="./img/1.jpg" alt="" />
<img src="./img/2.jpg" alt="" />
<img src="./img/3.jpg" alt="" />
<img src="./img/4.jpg" alt="" />
</div>
<div id="btn_too">
<button>上一张</button>
<button>下一张</button>
<div id="list_item">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<script src="./js/jquery-3.6.0.js"></script>
<script>
</script>
</body>
</html>
이제 컨트롤 작성을 시작합니다.
먼저 작은 점에 호버를 추가하여 강조 표시해야 합니다.
$('span').mouseover(function(){
// 添加上class他的兄弟去除掉active状态
$(this).addClass('active').siblings().removeClass('active');
})
API를 모르는 경우 이전 jquery 기사
Portal을 읽을 수 있습니다.
스위치를 인식한 후 클릭 후 스위치를 인식합니다. 먼저 회로도를
얻어야 합니다 : 데이터를 얻기 위한 코드:
// 获取轮播的宽度
const width = $('#img_item').width();
console.log(width);
// 获取当前小圆点的序号
const index=$(this).index();
console.log(index);
그러면 우리는 그의 데이터를 얻을 수 있습니다.
데이터를 얻었으니 전환하기 쉽습니다.
먼저 이동해야 할 데이터를 계산한 다음 작동합니다.
$("#img_item").animate({
left: -(index * width) }, 1000);
효과는 다음과 같습니다.
그러나 다음과 같은 새로운 문제가 있습니다.
내비게이션 바에 넣지 않아도 애니메이션이 계속되는 이유는 무엇입니까?
이것은 애니메이션 시퀀스 때문인데 이를 해결하기 위해서는 새로운 애니메이션이 시작되기 전에 이전 애니메이션을 제거해야 합니다
마우스 포커스 전환 동작을 구현했으니 이제 토글 버튼을 클릭하는 방식을 구현해야 합니다.
먼저 클릭을 얻습니다.
$('#btn_too>button').eq(1).click(function () {
});
트리거: 현재 활성화된 도트의 일련번호를 먼저 구한 후 다음 도트의 활성화 시점으로 점프하는데
이제 마지막 도트이고 다시 처음으로 점프하고 싶기 때문에 판단이 필요하므로
조건이 현재 활성화 항목이며 마지막 프로젝트 시간입니다.
$('#btn_too>button').eq(1).click(function () {
if($('span.active').index()==$('span:last-child').index()){
$('span:first-child').mouseover();
return 1
// 终止函数执行，防止下面的执行之后跳到下面去（1=》2）
}
$("span.active").next().mouseover()
});
효과:
이제 우리는 성공적으로 클릭 및 포커스 탐색 전환을 만들었지만 자격을 갖춘 캐러셀에는 자격을 갖춘 타이머가 있어야 하므로 다음으로 타이머 구현 코드를 만듭니다 .
// 定时器每xx秒触发下一页的活动
setInterval(() => {
$('button').eq(1).click();
}, 3000);
전체 코드:
jquery 속성 값의 연산
도트 구문
<body>
<a href="http://www.baidu.com" title="baidu" data-x="10" data-y="20">百度一下</a>
<script src="./js/jquery-3.6.0.js"></script>
<script>
var $a=$('a')
// 读取点语法 和 getAttribute两种
console.log($a.prop('href'));
console.log($a.prop('title'));
</script>
</body>
getAttribute 방법
맞춤 속성 - 데이터세트에 존재하는 속성
데이터 방법: 사용자 정의 속성 읽기
물론 이러한 속성은 이전 데이터를 제외하고는 고정되어 있지 않으므로
작성하면 다음과 같이 작성할 수 있습니다.
고정 속성 수정
첫 번째 매개변수: 속성 이름
두 번째 매개변수: 업데이트 값
사용자 정의 속성 수정
