디렉토리
jQuery를
1. jQuery를 소개
1.jQuery는 경량, 멀티 브라우저 호환 자바 스크립트 라이브러리입니다.
더 쉽게, HTML 문서, 이벤트를 처리 애니메이션 효과를 달성, 쉽게 아약스와 상호 작용 할 수 있도록 2.jQuery, 자바 스크립트는 크게 프로그래밍을 단순화 할 수 있습니다. 그 목적은 "더 많은 일, 더 적은을 작성합니다."
2. jQuery를 장점
- 경량 JS 프레임 워크. jQuery를 핵심 JS 파일 만 수십 킬로바이트는 페이지 로딩 속도에 영향을 미치지 않습니다.
- 리치 DOM 셀렉터는 jQuery를 선택는 DOM 객체의 인접한 요소, JS는 여러 줄의 코드를 작성할 수 찾기 위해, 예를 들어, 사용하기 쉬운 사용, 코드 jQuery를 한 줄은 다음과 같은 인터레이스로 테이블을 원하는 얻을 수 색상은 jQuery를 또한 코드의 라인을 얻을.
- 체인 식입니다. jQuery의 체인 여러 작업은 단 한 줄의 코드, 더 간결하게 작성할 수 있습니다.
- 이벤트, 스타일, 애니메이션을 지원합니다. jQuery를도 또한 동작 CSS JS 코드의 가독성과 JS보다 강한을 단순화합니다.
- 아약스 작업을 지원합니다. AJAX JQuery와 동작을 단순화 복귀 통신 JSON 문자열 포맷의 후단 전단에서 수행 할 수있다.
- 크로스 브라우저 호환. 이제 주요 브라우저와 기본적으로 호환 jQuery를 더 이상 호환 브라우저 문제와 두통.
- 플러그인 확장 기능 개발. jQuery를 같은 타사 플러그인의 재산이있다 : 앞 페이지의 기본 구성 요소는 해당 플러그인을 가지고 등 트리 메뉴, 날짜 제어, 이미지 전환 플러그인, 팝업, 및 jQuery를 플러그인 효과 놀라운 함께 할, 그리고 할 수 있습니다 간단하고 실용적인 자신의 다시 작성해야 및 패키지 플러그인에 따라.
3. jQuery를 도입
첫 번째 :
다운로드 : https://jquery.com/
먼저 jQuery를 파일을 다운로드해야하고 HTML 파일이 파일에 도입, 당신은 우리가이 파일에 대한 인터페이스를 제공하기 위해 jQuery를 사용할 수 있습니다.
중국어 문서 : http://jquery.cuishifeng.cn/
<script src="jquery.js"></script>두 번째 : 링크 네트워크 주소
bootCDN : https://www.bootcdn.cn/jquery/
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>4. jQuert 객체
JQuery와 구문 : $ ( "선택")하는 생성 의 jQuery 개체
jQuery를 개체 jQuery를하여 DOM 객체 포장 후에 생성되는 객체이다. jQuery를 오브젝트는 jQuery를 고유합니다. 객체가있는 경우 jQuery를 객체 에, 당신은 사용할 수 의 jQuery 방법이 제공되었다.
JS 방법 기본 라벨은 DOM 객체를 호출 할 수 있습니다, DOM 객체라는 객체를 발견했다.
DOM의 JQuery와 객체와 객체가 서로 변환 할 수 있습니다 :
jQuery对象转成DOM对象，通过一个jQuery对象+[0]索引零，就变成了DOM对象，就可以使用JS的代码方法了，DOM对象转换成jQuery对象：$(DOM对象)，通过$符号包裹一下就可以.
jquery对象转换成DOM对象 +[0]索引： $(“选择器”)[0]
（通过[]索引找到的对象都是DOM对象）
DOM对象转换成jquery对象 在前面加 $ 符号： $(div)라벨 5. 봐
아무리 레이블을 찾아 무엇을, 어떻게 선택기 ( "") 따옴표 선택기를 쓰기 $를 쓸해야합니다.
기본 선택 (CSS로)
ID 선택
$("#id值")태그 선택
$("标签名")클래스 선택
$(".类值")선택기로
$('div.c1') // 找到类值为c1的div标签선택자
$("*")조합 선택
$("#id,.className,tagName")레벨 선택 (CSS로)
X, Y는 임의의 선택이다
$("x y"); // x的所有后代y（后代）
$("x > y"); // x的所有儿子y（儿子）
$("x + y") // 找到紧挨在x后面的y(毗邻)
$("x ~ y") // x之后所有的兄弟y(弟弟)示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<div id="d1">
<ul id="u1">
<li class="c1">111</li>
<li class="c2">222</li>
<li class="c3">333</li>
<li class="c4">444</li>
<li class="c5">555</li>
</ul>
</div>
</body>
</html>
操作：
$("#d1");
$("li");
$(".c1");
$("#u1 li");
$("#u1>li");
$(".c1+li");
$(".c1~li");기본 필터 (필터 선택)
:first // 找到多个后取第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) 选取包含某个后代标签的标签예 :
$("li:first");
$("li:eq(2)");
$("li:gt(2)");
$("li:not('.c4')");
$("div:has('.c1')");jQuery를 이벤트
시뮬레이션 대화 상자
$('#id').click() // 绑定事件
$(".c1,.c2").removeClass("c3") # 删除c1，c2类中的c3值
$(".c1,.c2").addClass("c3") # 将c3值添加到c1，c2类中// 绑定事件的方法
$('#btn').click(function () {
// DOM写法：
$('.mode')[0].classList.remove('hide');
$('.shadow')[0].classList.remove('hide');
// jquery写法:
$('.mode,.shadow').removeClass('hide');
})示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg{
background:rgba(6,6,6,0.6);
position: fixed;
top:0;
right: 0;
bottom:0;
left: 0;
z-index: 9;
}
.case{
width: 600px;
height: 400px;
background-color: white;
position: absolute;
top:50%;
left:50%;
margin-top: -200px;
margin-left: -300px;
z-index: 10;
}
.case #off{
float: right;
}
.hide{
display: none;
}
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<div style="color: red">欢迎来到-->
<input type="submit" value="登录" id="reg"></div>
<div class="bg hide" id="d1"></div>
<div class="case hide" id="d2">
<label for="i1" >用户名:</label>
<input type="text" id="i1">
<input type="submit" id='off' value="X">
<div></div>
<label for="i2">密 码:</label>
<input type="password" id="i2">
<script>
$("#reg").click(function () {
// $("#d1, #d2").removeClass("hide")
$(".bg,.case").removeClass("hide")
});
$("#off").click(function () {
$("#d1, #d2").addClass("hide")
})
</script>
</div>
</body>
</html>선택기 속성
$("[属性]");
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
示例：多用于input标签
<div id = 'd2'>
用户名：<input type="text" class="i1">
密码：<input type="password" name="pwd">
性别：<input type="radio" name="sex">男
<input type="radio" name="sex">女
</div>
操作：
$("input[type]");
$("input[type='text']");
$("input[type='radio']");
폼 필터
의 형태로 나타난 양식을 찾기 위해 입력 라벨에 사용
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
예 :
$(":text"); //找到所有的text
$(":radio") //找到所有的radio
폼 개체 속성
:enabled // 找可用的标签
:disabled // 废除
:checked // 选中的
:selected // 下拉框选中的
示例：
$(“:enabled”); // 找可用的标签
$(":disabled"); // 找不可用的标签
$(":checked"); // 找选中的标签（checkbox的）
$(":selected"); // 找下拉框中选中的标签
$(":selected").text(); //查看下拉框选中的文本内容
6. 필터 방법
다음 다음 내용 찾기 :
$("#id").next() // 下一个标签
$("#id").nextAll() // 下全部标签
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它
.prev 찾고 :
$("#id").prev() // 上一个标签
$("#id").prevAll()
$("#id").prevUntil("#i2") // 从上找，顺序从下向上
부모 .parent 찾기 :
$("#id").parent() // 找父辈
$("#id").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。
아들과 형제
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选
상대 자손 .find
$("div").find("p") // 等价于$("div p") 找div后代p标签
심사 .filter
$("div").filter(".c1") //等价于 $("div.c1") 找有class='c1'属性的div
보충
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
7. 라벨 작동
스타일 작업
스타일 집단 소송 :
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
CSS 작업 :
싱글 : $ ( "") CSS ().
:. $ ( "") CSS는 ({})의 복수
.css("color","red") //DOM操作：tag.style.color="red"
示例：
$('div').css('background-color','green');
$('div').css({'background-color':'yellow','width':'400px'});
체인 표현
<ul>
<li>111</li>
<li>222</li>
<li class="c1">333</li>
<li>444</li>
<li>555</li>
<li class="c2">666</li>
<li>777</li>
</ul>
操作 $('li:first').next().css('color','green').next().css('color','red');
작동 위치
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移，不能设置位置
$(window).scrollTop() //滚轮向下移动的距离
$(window).scrollLeft() //滚轮向右移动的距离
$(".c1").offset() // 查看相对当前窗口的位置
$(".c1").offste({top:100,left:200}); // 设置位置
$(".c2").position() //查看相对父级的位置
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。与 .position()的差别在于： .position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.c1{
background-color: red;
height: 100px;
width: 100px;
display: inline-block;
}
.c2{
background-color: green;
height: 100px;
width: 100px;
display: inline-block;
}
</style>
</head>
<body>
<div class="cc">
<div class="c1"></div><div class="c2"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js">
</script>
</body>
</html>
操作：
$(".c1");
$(".c1").offset();
$(".c1").offset({top:100,left:200});
$(".c1").position();마우스 스크롤 :
$ (창) .scroll () # 마우스 스크롤 트리거 이벤트
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1,.c3{
width: 200px;
height: 400px;
background-color: red;
}
.c2{
width: 200px;
height: 800px;
background-color: pink;
}
.a1{
width: 80px;
height: 20px;
text-decoration: none;
position: fixed;
right:40px;
bottom: 40px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<a id="top">顶部</a>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<a href="#top" class="a1 hide">回顶部</a>
<script>
$(window).scroll(function () {
if ($(window).scrollTop()>400){
$(".a1").removeClass("hide");
}else{
$(".a1").addClass("hide");
}
});
</script>
</body>
</html>크기
height() //盒子模型content的大小，就是我们设置的标签的高度和宽度
width()
innerHeight() //内容content高度 + 两个padding的高度
innerWidth()
outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度，不包括margin的高度，因为margin不是标签的，是标签和标签之间的距离
outerWidth()
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height:200px;
padding:20px 30px;
border:2px solid red;
}
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<div class="c1"></div>
</body>
</html>
操作：
$(".c1").height(); // 200
$(".c1").width(); // 200
$(".c1").innerWidth(); // 260
$(".c1").innerHeight(); // 240
$(".c1").outerHeight(); // 244
$(".c1").outerWidth(); // 264
텍스트 조작
.html() // 获取其所有的标签及内容
.html(val) // 设置内容，识别标签，能够表现出标签的效果
.text() // 获取所有的文本内容
.text(val) // 设置内容，不识别标签，将标签作为文本插入进去
값 방법
取值方法：
input文本框： $("[type='text']").val() // 获取匹配到的值
input单选框radio：
$("[type='radio']:cheched").val()
input多选框checkbox:（多选需循环取值）
var d=$("[type="checkbox"]:checked")
for (var i=0;i<d.length;i++){
console.log(d.eq(i).val());
}
input下拉框select：(可多选值)
$("").val
设置值：
文本框： $(":text").val("xxx");
单选框： $(":radio").val(['1']);
多选框： $(":checkbox").val(["1","3"])
给单选框或者多选框设置值的时候，只要val方法中的值和标签的value属性对应的值相同时，那么这个标签会被选中。
$(":radio").val('1');这样设置，不带中括号，会将所有radio的value值都修改为1,产生错误。
单选下拉框：(通过select标签操作)
$("").val('2');
或者： $("").val(['2']);
多选下拉框：
$("").val(['2'，'4']);
예 :
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<div>
用户名：<input type="text">
</div>
<div>
密码：<input type="password" name="pwd">
</div>
<div>
性别：
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
</div>
<div>
爱好：
<input type="checkbox" name="hobby" value="3">抽烟
<input type="checkbox" name="hobby" value="4">喝酒
<input type="checkbox" name="hobby" value="5">蹦迪
</div>
<div>
地点：
<select name="city" id="city" multiple>
<option value="11">北京</option>
<option value="12">上海</option>
<option value="13">深圳</option>
</select>
</div>
</body>
</html>
操作：
$(":text").val("sd");
$(":radio").val(['2']);
$(":checkbox").val(['3','4']);
$("#city").val(['13','12']);