저자 | Jeskson
소스 | 다다 프런트 엔드 비스트로
jquery설치 및 문법, jquery선택기, 다양한 dom운영 및 jquery이벤트.
jQuery프레임 워크, 소개, 장점, 설치, 문법, jQuery선택, id선택, 클래스 선택, 태그 선택기, 속성 선택자, 위치 선택, 자손 선택자, 하위 선택, 개체를 선택 개체의 통과를 선택, 페이지 초기화, 작업, 검색, 삭제, 생성, 복사, 삽입, 대체, 이벤트, 이벤트 바인딩, 마우스 이벤트, 키보드 이벤트, 폼 이벤트, 윈도우 이벤트, 이벤트 버블 링, 취소 이벤트.jQuerydomjQuery
jQuery그것은 좋은 사용이다 JavaScript도서관, 쓰기 적게, 더 많은 작업을 수행.
어디에서 jQuery를의 장점 것인가?
그것의 장점은 가볍고은 무엇인가, 그것은 경량이다? 이 30킬로바이트의 크기에 대해 매우 요구, 즉, 강력한 선택과 함께 dom포장 작업, 신뢰할 수있는 이벤트 처리 메커니즘, 사운드 ajax, jquery모든 ajax기능에 대한 포장 작업 ' $.ajax()에가, 플러그인의 재산을 가지고 잘 문서화 오픈 소스 제품.
jquery설치, 다운로드 JQuery와 jQuery 라이브러리는, 두 번째는 CDN에서 다운로드 할 수 있습니다.
jquery공식 웹 사이트
http://jquery.com
먼저 입력 download jquery, 다운로드 페이지를 최신 다운로드 jquery라이브러리 파일을, 두 가지 버전이 있습니다 : 생산 버전, Production version실제 사이트에 대한 Development version테스트 및 개발을위한 개발 버전.
<head>
<meta charset="UTF-8">
<title>jquery</title>
<script type="text/JavaScript" src="./js/jquery-xx.js">
</script>
</head><script type="text/JavaScript">
$(document).ready(function(){
// 等待dom元素加载完毕
alert("成功引入");
});
</script>cdn구성에서 Jquery다운로드하지 않으면 jquery, 당신은 사용할 수 있습니다 cdn참조.
jquery구문 :
jquery
$(selector).action()
$(this).hide()
$("p").hide()
$("p.test").hide()
$("#test").hide()
// 入口
$(document).ready(function(){
// 执行代码
});
$(function(){
// 执行代码
});
JavaScript的入口函数
// 入口函数如下
window.onload = function(){
// 执行代码
}JavaScript입력 기능과 jquery입력 기능 :
jquery항목 기능입니다 HTML모든 라벨이로드 된 후 실행, 이벤트이며, (등 이미지 파일 포함)의 모든 콘텐츠는 완성 된로드 후에 실행했다.JavaScriptwindow.onload
jquery선택자
JavaScript선택기 :
document.getElementById();
document.getElementsByClassName()
document.getElementsByTagName()선택기 $ ( "."),
기능으로, 공장 함수, 함수 이름으로 $.
ID 선택
$("#id")
ID가 지정된 요소 a를 일치
클래스 선택
$(".class")
소정의 클래스에 따른 소자 매칭
태그 선택기
$("element")
지정된 요소 이름의 모든 요소를 일치
속성 선택기
$("element[attribute]")
주어진 특성을 포함하는 매칭 소자
$("div[title=test]")
위치 선택
$(element:position)
태그가 일치하는 위치에 대응하는 요소들을 매칭
$("div:first")
첫 번째 div 요소의 사업부에서 모든 경기
후손 선택기
$("ancestor descendant")
모든 하위 요소의 주어진 조상 일치
$("#ul li")
아이디가 null 일치하는 모든 리튬 요소
후손 선택
$("parent>child")
지정된 모든 "부모"요소를 지정 직접적인 자식 요소의 "아이"일치
$("#标签id值")
// 原生
var div = document.getElementById('test');
div.style.border = '3px solid blue';
// jquery
$("#test1").css("border", "3px solid red");
$(".class属性值")
$(".cls1").css(...);
$("标记名称");
// 找到所有P标签
$("p")
属性选择器
$("[属性名"])
匹配所有具有指定属性的元素
$("[属性名='值']")
匹配与值相等的元素
$("[属性名!='值']")
匹配与值不相等的元素
$("[属性名^='值']")
匹配以值开头的元素
$("[属性名$='值']")
匹配以值结尾的元素
$("[属性名*='值']")
匹配包含值的元素위치 선택기 :
$("selector:first")
첫 번째 요소를 일치
$("selector:last")
마지막 요소를 일치
$("selector:odd")
제로 카운트부터 홀수 요소 매칭 인덱스 값
$("selector:even")
인덱스 값과 일치하면 카운트 제로부터 짝수 요소
$("selector.eq(n)")
N는 정합 소자들의 인덱스 집합이다
$("selector.gt(n)")
인덱스 값보다 N 요소의 집합을 매칭
$("selector:lt(n)")
n보다 적은 요소의 색인 값 집합을 매칭
$("选择器1 选择器2...")$("#test li").css("border", "2px solid red");후손 선택
$("选择器1>选择器2>...")객체 선택 :
$("选择器").each(function(index){this})
选择器对象的遍历
$("选择器").find()
找前面选择器匹配到的元素的子元素
$("选择器").not()
在前面选择器匹配到的元素中去除某个或者某几个
$("选择器").add()
在前面选择器中再追加节点객체 통과를 선택
<body>
<ul id="test">
<li>d</li>
<li>a</li>
</ul>
</body>
<script type="text/JavaScript">
$("#test li").each(function(index){
this.title="我是第"+(index+1)+"个";
});
</script>페이지 초기화
<script type="text/JavaScript">
$(function(){
//一定会在页面加载完成后运行
})
</script>jquery페이지의 끝이로드되고 실행될 때까지이 기능에 기능 코드는 기다릴 수 있습니다.
Jquery에서 dom작동.
dom그것은이다 document object model약어. 문서 객체 모델. dom브라우저, 플랫폼, 언어 독립적 인 인터페이스인가, 작업은에 동작의 요소.jquerydomHTML
<script type="text/JavaScript">
$(document).ready(function(){
// 测试
$("#btn1").click(function(){
alert("文本内容："+$("#test0").text());
});
});
</script>
<p id="test0">da</p>
<button id="btn1">da</button>attr()다양한 속성의 값을 가져옵니다
$(document).ready(function(){
$("button").click(function(){
alert($("p").attr("title"));
});
});생성 HTML요소를 :
$(document).ready(function(){
var $li1 = $("<li>d</li>");
var $li2 = $("<li>a</li>");
$("button").click(function(){
$("ul").append($li1);
$("ul").append($li2);
});
});삽입 HTML요소
append()
추가 내용은 각 요소의 내부에 맞게
appendTo()
요소의 또 다른 집합에 추가 된 모든 매칭 요소에 지정된
참고 $(A).append(B)작업이 B 행 (A)에 첨가되지 않고, B, A로 첨부되고
prepend()
내부 헤드 일치하는 각 요소의 내용
prependTo()
다른 사전 지정된 요소의 집합에 일치하는 모든 요소.
주 : $(A).prepend(B)상기 프리앰블의 B에 대한 조작에 앞이 아닌 B하지만
after()
각 정합 소자 후에 삽입
insertAfter()
지정된 세트의 다른 구성 요소에 삽입 된 이후 모든 정합 소자
참고 $(A).after(B)조작이 아닌 후에 삽입 B 대신 B의이 후방 삽입
before()
각 정합 요소 앞에 삽입
insertBefore()
세트의 모든 다른 원소의 앞에 삽입 정합 요소 지정.
주 : $(A).before(B)동작은 B-A의 앞에 삽입되지는 대신 B의 전방에 삽입
삭제 HTML 요소
일반적으로 사용되는 삭제 HTML 요소 jquery에 remove()와empty()
remove()역할 내지 dom요소가 삭제되면, 그 하위 요소도 삭제 삭제가 선택된 요소와 하부 요소.
empty()역할은 삭제되지 않습니다 HTML요소지만 빈 HTML요소, 당신은 확인 비울 수 있습니다 HTML모든 자손 요소 HTML요소를.
복사 HTML 요소
clone()효과는 HTML 요소를 복사하는 것입니다.
$(document).ready(function() {
$("button").click(function() {
$("body").append($("p").clone());
});
});
});교체 HTML요소를
두 가지 방법이 있습니다 replaceWith()및 replaceAll()두 가지 방법은
repalceWith()
HTML 요소 또는 요소를 DOM 지정된 일치하는 모든 요소를 대체합니다
repalceAll(selector)
대안 적으로 모든 선택기 엘리먼트 매칭 소자 일치
replaceWith()그리고 replaceAll()그 효과는 같은 단지 다른 용도이다.
보충 소자 B 요소 :
replaceWith()말씨
A.replaceWith("B")
B.replaceAll("A")
$(document).ready(function(){
$("button").click(function(){
$("ul li:eq(0)").replaceWith("<li>da</li>")
});
});행사
마우스 이벤트 :
click，mouseover，hover
키보드 이벤트 :
keypress，keydown，keyup
양식 이벤트 :
submit，change，focus
윈도우 이벤트 :
scroll，resize
이벤트 바인딩
이벤트 결합 구 결합 () 메소드
bind(type,[data],fn)click(),blur(),focus(),
mouseover(),mouseout(),
mousedown(),mouseup()
mouseenter(),mouseleave(),
resize(),scroll(),
keydown(),keyup(),keypress()type매개 변수는 하나 이상의 이벤트 유형을 포함하는 문자열 data파라미터로 추가 event.data이벤트 객체에 전달 여분 데이터 객체의 속성 값이, fn상기 파라미터는 상기 매칭 이벤트 핸들러의 각 요소에 결합된다.
$(document).ready(function(){
$("input").bind("focus",function(){
$("span").show();
});
});바인딩 이벤트에 대한 속기
$(document).ready(function(){
$("input").focus(function(){
$("span").show();
});
});마우스 이벤트를 click(),dblclick()두 번 클릭이 짧은 시간에 두 번 발생은 click더블 클릭 이벤트이다.
mouseenter()요소를 통해 마우스 포인터가 발생하면 mouseenter이벤트를 mouseleave()마우스 포인터가 요소가 발생 떠날 때 mouseleave이벤트를. hover()행사에 커서를 시뮬레이션하는 데 사용됩니다.
$(document).ready(function(){
$("#p1").hover{
function(){
$("#p1").css('background','green');
},
function(){
$('#p1").css("background","pink");
}
}
});keydown()키보드 나 버튼을 누를 때 발생 keydown하는 이벤트는, keyup키보드가 해제 될 때 발생하는 keyup이벤트를. keypress()키보드 나 버튼을 누를 때 발생 keypress하는 이벤트.
양식 이벤트
양식이 제출되면 일어날 submit이벤트를. change()때 요소의 값이 변경이 발생합니다 change, 이벤트 focus()요소가 초점, 트리거 오면 focus이벤트. blur()요소가 포커스를 잃을 때 발생합니다.
윈도우 이벤트 :
scroll()때 사용자가 지정된 요소의 트리거 스크롤 scroll이벤트를. scroll이벤트는 모든 스크롤 요소에 적용 window객체. resize()브라우저 창의 크기를 조정할 때, 트리거 resize이벤트를.
x=0;
$(document).ready(function(){
$(window).resize(function(){
$("span").text(x+=1);
});
});이벤트 버블 링은 이벤트가 따를 것이다 dom상단까지 변함없이 위로 물집 같은 계층 구조를
정지 버블 링과 기본 동작 :
stopPrapagation()및preventDefault()
event.preventDefault();
// 阻止默认行为event.stopPropagation();
// 停止事件冒泡이벤트 리프트 :
unbind(type, [data])
type이벤트의 유형에 대해
data기능 발매 예정
학습 당신의 발자국을 떠날 것을 잊지 마십시오 ❤️ [+ 댓글처럼 수집 장소 +]
정보를 저자 :
[저자] Jeskson
[일본어] 공개 번호 : 다다 전단 비스트로.
[복지] : 자기 학습 자료는 마구로 전송있는 공개 답장 "정보"(공유에 대한 그룹으로는 당신이 하를 말하고 싶은, 내가 볼하지 않았다)!
[예약] 설명 : 소스를 표시하시기 바랍니다, 감사합니다 재현! ~
대형 프론트 엔드 개발, 프론트 엔드 개발 포지셔닝 기술 스택 블로그, PHP의 배경 지식, 너무 쉽게 네트워크 이론을 이해하기 웹 전체 스택 기술 분야, 데이터 구조 및 알고리즘, 그리고 주니어 파트너에게 제공됩니다. 당신이 지원 사랑의 호의 감사합니다! ! !
지역의 내용이 숫자가 비트를 얻을 수없는 경우 (예 : 저작권 또는 기타 문제), 적시에 할 수있다 정류에 대한 문의 및 제 시간에 처리됩니다하십시오.
엄지 손가락주세요! 동의하기 때문에 / 격려 내 글의 가장 큰 힘이다!
에 오신 것을 환영합니다 관심 다다 의 CSDN!
이것은 품질, 태도의 블로그
