JavaScript의 jQuery가 충분하면 됩니다(필터, 속성 작업, jQuery 문서 처리 찾기)
46143 단어 웹 프런트엔드 개발
1. 필터는 특정한 탭에 다른 탭이 있는지 확인하는 것이다
// console.log($("div").hasClass("div1")); // div class div1 ，
2. 필터를 찾으려면 문장을 구분하십시오: 자바스크립트의 jQuery가 충분하면 됩니다(jQuery의 도입, 검색 선택기, 왼쪽 메뉴 표시줄)에 있는 선택기, 여기에 소개된 것은 필터입니다.그것들의 주요 기능은 차이가 많지 않지만, 용법상 어느 정도 차이가 있지만, 그것들과 JS의 용법은 거의 같다. JS선별기의 용법은 글을 보십시오
1. attr 속성 수정(사용자 정의에 자주 사용되는 속성)
console.log($("div").attr("name")); //
$("div").attr("name","n2"); // ， name n2
console.log($("div").attr("name"));
2. prop 속성 수정(고유의 속성에 자주 사용)
console.log($("div").prop("class"));
$("div").prop("class","div2");
console.log($("div").prop("class"));
// false， undefined
console.log($("input:first").prop("checked"));
console.log($("input:last").prop("checked"));
3, html() 및 text() 태그 내용 변경
console.log($("#id1").html()); //
console.log($("#id1").text()); //
$("#id1").html(" "
); //
$("#id1").text(" "
); // ，
4.val () 고유value 속성의 값을 보고 수정하며 사용자 정의로 표시할 수 없습니다
console.log($(":text").val()); //
console.log($(":text").next().val());
$(":text").val(" "); // value
5. CSS 속성 설정
//CSS ， CSS ；
// ， CSS ，
$("div").css("color","red"); //
$("[value='self_value']").css({"color":"yellow","background-color":"green"}); //
6. 테스트 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery </title>
</head>
<body>
<div class="div1" name="n1"></div>
<input type="checkbox">
<input type="checkbox" checked="checked">
<div id="id1">
<p> P </p>
</div>
<input type="text" value=" ">
<div value="self_value">DIVVVV</div>
<!--div value -->
<script src="jquery-3.4.1.js"></script>
<script>
//
// console.log($("div").hasClass("div1")); // div class div1 ，
//attr （ ）
// console.log($("div").attr("name")); //
// $("div").attr("name","n2"); // ， name n2
// console.log($("div").attr("name"));
//prop （ ）
// console.log($("div").prop("class"));
// $("div").prop("class","div2");
// console.log($("div").prop("class"));
// // false， undefined
// console.log($("input:first").prop("checked"));
// console.log($("input:last").prop("checked"));
// console.log($("#id1").html()); //
// console.log($("#id1").text()); //
// $("#id1").html(" "); //
// $("#id1").text(" "); // ，
// val value ，
// console.log($(":text").val()); //
// console.log($(":text").next().val());
// $(":text").val(" "); // value
//CSS ， CSS ；
// ， CSS ，
$("div").css("color","red"); //
$("[value='self_value']").css({"color":"yellow","background-color":"green"}); //
</script>
</body>
</html>
7. jQuery가 실현한 정반선
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
<button onclick="allSelect()"> </button>
<button onclick="cancel()"> </button>
<button onclick="reverse()"> </button>
<table border="2px">
<tr>
<td><input type="checkbox"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script src="jquery-3.4.1.js"></script>
<script>
function allSelect(){
$(":checkbox").each(function(){
$(this).prop("checked",true);
});
}
function cancel(){
$(":checkbox").each(function(){
$(this).prop("checked",false);
});
}
function reverse(){
$(":checkbox").each(function(){
$(this).prop("checked",!$(this).prop('checked')); // “！”， true false，
});
}
</script>
</body>
</html>
3. jQuery 문서 처리
1. 내부 삽입
$(".c1").append($ele); // ， c1 div $ele
$ele.appendTo(".c1"); // ， $ele c1
$(".c1").prepend($ele); // ， c1 div $ele
$ele.prependTo(".c1"); // ， $ele c1
2. 외부 삽입
$(".c1").after($ele); //
$(".c1").before($ele); //
$ele.insertAfter(".c1"); // $ele c1
$ele.insertBefore(".c1"); $ele c1
3、교체:replaceWith
$("p").replaceWith($ele); // $ele p
4, 삭제 및 비우기:remove,empty
$(".c1").empty(); // c1 （ ）
$(".c1").remove(); // c1 （ ）
5, 클론: clone
var $ele2=$(".c1").clone(); // c1
$(".c1").after($ele2); // c1
6, jQuery 변수 만들기
var $ele=$(" "); // jQuery $ele ，
$ele.html(" "); //
$ele.css("color","red"); //
7. 테스트 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<p> P </p>
</div>
<button> </button>
<script src="jquery-3.4.1.js"></script>
<script>
$("button").click(function(){ //jquery on
// ：append，prepend ；appendTo，prependTo
//$(".c1").append(" "); //
var $ele=$(" "); // jQuery $ele ，
$ele.html(" "); //
$ele.css("color","red"); //
// $(".c1").append($ele); // ， c1 div $ele
// $ele.appendTo(".c1"); // ， $ele c1
//
// $(".c1").prepend($ele); // ， c1 div $ele
// $ele.prependTo(".c1"); // ， $ele c1
// ：after，before ，insertAfter，insertBefore
// $(".c1").after($ele); //
// $(".c1").before($ele); //
// $ele.insertAfter(".c1"); // $ele c1
// $ele.insertBefore(".c1"); $ele c1
// ：replaceWith
$("p").replaceWith($ele); // $ele p
// ：remove，empty
$(".c1").empty(); // c1 （ ）
$(".c1").remove(); // c1 （ ）
// ：clone
var $ele2=$(".c1").clone(); // c1
$(".c1").after($ele2); // c1
})
</script>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[프런트엔드] 키보드 이벤트 일반 작업웹 페이지의 일부 조작은 키보드 이벤트가 필요합니다. 예를 들어enter 키를 누르면 로그인을 할 수 있습니다. 작업 대상:document 문서 대상 window 창 대상 html 태그 요소 body 태그 요소 모두...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
