함수는 다음과 같습니다. 1. jQuery 래퍼로서 선택기를 사용하여 DOM 요소를 선택합니다("$("selector")" 구문). 2. 함수 접두사(예: " $.trim(sString);"; 3. window.onload 함수에서 충돌을 해결합니다. 4. DOM 요소를 만듭니다(예: "$("
This is a good story")"). ; 5. jQuery를 확장하는 방법을 사용자 정의합니다. 6. jQuery 및 기타 라이브러리를 사용합니다. 7. 문서 준비 핸들러를 설정합니다.
이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6 버전, Dell G3 컴퓨터.
1. jQuery 래퍼로서 선택기를 사용하여 DOM 요소를 선택합니다.
CSS에서 선택기의 역할은 페이지에서 특정 유형의 요소(범주 선택기) 또는 특정 요소(ID 선택기)를 선택하는 것입니다. 페이지)
, 선택기로 사용되는 jQuery의 "$"도 특정 유형이나 요소 유형을 선택하지만 jQuery는 점점 더 포괄적인 선택 방법을
제공합니다. 그리고 사용자를 위한 브라우저 호환성 문제를 처리합니다.
h2 a{
/添加CSS属性/
}그리고 jquery에서 다음 코드를 사용하면
$("h2 a")$(selector)
또는
jQuery(selector)
selector가 CSS3 표준을 준수하는 경우
jQuery의 표현 방법이 훨씬 간단하다는 것을 알 수 있습니다
$("#showp“)for 루프를 사용하여 전체 DOM을 탐색해야 합니다
$(".SomeClass")$("p : odd")$("td:nth-child(1)")$("li > a")("a[ href=pdf". ]")
Note:
jQuery의 달러 기호 "$"는 실제로 "jQuery"와 동일합니다. 작성의 편의를 위해 jQuery
의 소스 코드에서 볼 수 있습니다. 코드에서는 일반적으로 "jQuery" 대신 "$"가 사용됩니다.
2. 함수 접두사
JavaScript에서 개발자는 예를 들어 사용자가 제출할 때 다양한 작업 세부 사항을 처리하기 위해 몇 가지 작은 함수를 수행해야 하는 경우가 있습니다.
텍스트 상자를 넣어야 합니다. JavaScript는 Trim()과 유사한 기능을 제공하지 않습니다.
jQuery를 도입한 후에는 다음과 같은 Trim() 함수를 직접 사용할 수 있습니다.
$.trim(sString);
위 코드는
jQuery.trim(sString);
trim() 함수는 jQuery 개체의 메서드입니다.
3 window.onload 함수의 충돌을 해결합니다.
HMTL 페이지의 프레임워크를 사용하려면 완전히 로드해야 하며, DOM을 프로그래밍할 때 window.onload가 사용됩니다.
함수가 자주 사용됩니다. 이 함수를 페이지의 여러 위치에서 사용해야 하거나 다른 .js 파일에도 window.onload 함수가 포함되어 있으면 충돌 문제가 매우 어렵습니다. jQuery의 Ready() 메서드는 위의 문제를 매우 잘 해결할 수 있습니다. 페이지가 로드된 후 자동으로 기능을 실행합니다.
여러 개의 Ready() 메서드를 서로 충돌하지 않고 동일한 페이지에서 사용할 수 있습니다. 예를 들어
$(document).ready(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});jQuery는 위 코드에 대한 약어도 제공하므로 "(document).ready" 부분을 생략할 수 있습니다. 코드는 다음과 같습니다.
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});4 DOM 요소 만들기
DOM 메서드 사용 요소 노드를 생성하려면 일반적으로 document.createElement(), document.create TextNode() 및 appendChild()를 함께 사용해야 하는데 이는 매우 번거로운 작업입니다. 그러나 jQuery에서는 "$" 기호를 사용할 수 있습니다. DOM 요소를 직접 생성합니다. 예를 들면
var oNewP = $("
This is a good story")
위 코드는 javascript의 다음 코드와 동일합니다.
var oNewP = document.createElement("p");// 新建节点
var oText = document.createTextNode("这是一个好故事");
oNewP.appendChild(oText);또한 jQuery는 insertAfter of DOM 요소() 메서드의 의사 코드는 다음과 같습니다.
$(function(){ // ready函数
var oNewP = $("<p>这是一个好故事</>");// 创建DOM元素
oNewP.insertAfter("#myTarget");// insertAfter()方法
});
<body>
<p id="myTarget">插入到这行文字之后</p>
<p>也就是插入到这行文字之前，但这行没有id,也可能不存在</p>
</body>5. jQuery 확장--"$"를 추가하는 사용자 정의
jQuery는 모든 사용자의 요구 사항을 모두 충족할 수 없으며 일부 특별한 요구 사항은 매우 틈새 시장에 있습니다. 전체 jQuery 프레임워크에 배치하는 데 적합하지 않습니다. 用户可以自定义该方法。代码如下： 以上代码首先设置".fn.disable",表明为""添加一个方法“disable()”,其中“$.fn”是扩展jQuery时所必须的 然后利用匿名函数定义这个方法，即用each()将调用这个方法的每个元素的disabled属性均设置为true(如果该属性存在) 6、使用jQuery和其他库 例如：Prototype库也是使用$符号，jQuery提供noConflict函数避免冲突，jQuery.noConflict();把$符号还原到非jQuery库定义的含义。 7、文档就绪处理程序，相当于$(document).ready(...) 例如： 扩展知识：解决"$"的冲突 如果其他框架也是用了“",会引起冲突，jQuery同样提供了noConflict()方法来解决""冲突问题 以上代码可以使""按照其他javascript框架的方式运算，这时再jQuery中便不能在使用“”，而必须使用jQuery， 例如$("p p") 必须写成jQuery("p p"). 【推荐学习：jQuery视频教程、web前端视频】 위 내용은 jquery에서 $는 무엇을 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!$.fn.disable = function(){
return this.each(function(){
if(typeof this.disabled != "undefined") this.disabled = true;
});
}$(function(){...}); //里面的函数会在DOM树加载完之后执行jQuery.noConflict();
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
