jquery에서 $는 무엇을 합니까?
- 青灯夜游원래의
- 2023-01-28 15:06:352191검색
함수는 다음과 같습니다. 1. jQuery 래퍼로서 선택기를 사용하여 DOM 요소를 선택합니다("$("selector")" 구문). 2. 함수 접두사(예: " $.trim(sString);"; 3. window.onload 함수에서 충돌을 해결합니다. 4. DOM 요소를 만듭니다(예: "$("e388a4556c0f65e1904146cc1a846beeThis is a good story5f557f62ae7ac7a14e0b1cb564790dfc")"). ; 5. jQuery를 확장하는 방법을 사용자 정의합니다. 6. jQuery 및 기타 라이브러리를 사용합니다. 7. 문서 준비 핸들러를 설정합니다.
이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6 버전, Dell G3 컴퓨터.
1. jQuery 래퍼로서 선택기를 사용하여 DOM 요소를 선택합니다.
CSS에서 선택기의 역할은 페이지에서 특정 유형의 요소(범주 선택기) 또는 특정 요소(ID 선택기)를 선택하는 것입니다. 페이지)
, 선택기로 사용되는 jQuery의 "$"도 특정 유형이나 요소 유형을 선택하지만 jQuery는 점점 더 포괄적인 선택 방법을
제공합니다. 그리고 사용자를 위한 브라우저 호환성 문제를 처리합니다.
(1) CSS는 다음 코드를 사용하여 c1a436a314ed609750bd7c7d319db4da 태그 아래에 포함된 모든 하위 태그 3499910bf9dac5ae3c52d5ede7383485를 선택한 다음 해당 스타일을 추가할 수 있습니다.
h2 a{
/添加CSS属性/
}그리고 jquery에서 다음 코드를 사용하면 c1a436a314ed609750bd7c7d319db4da 태그 아래에 포함된 모든 하위 태그 3499910bf9dac5ae3c52d5ede7383485를 javascript
$("h2 a")에서 사용할 객체 배열로 선택할 수 있습니다. (2) jquery에서 선택기의 일반적인 구문은 다음과 같습니다.
$(selector)
또는
jQuery(selector)
selector가 CSS3 표준을 준수하는 경우
(3) javascript의 document.getElementById("#showp"")와 동일한 id 선택기
jQuery의 표현 방법이 훨씬 간단하다는 것을 알 수 있습니다
$("#showp“)(3) 카테고리 선택기, CSS 카테고리를 "SomeClass"의 모든 노드 요소로 선택합니다. 자바스크립트에서 동일한 선택을 달성하려면
for 루프를 사용하여 전체 DOM을 탐색해야 합니다
$(".SomeClass")(4) 모두 선택 316e2376415a42e09197d2feccd79ec1 a>, sun 태그 제외
$("li > a")(7 ) 모든 하이퍼링크를 선택하면 해당 하이퍼링크의 href 속성이 "pdf"로 끝납니다. 속성 선택기를 사용하면 페이지에서 다양한 특성 요소를 선택할 수 있습니다
("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 = $("e388a4556c0f65e1904146cc1a846beeThis is a good story5f557f62ae7ac7a14e0b1cb564790dfc")
위 코드는 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前端视频】$.fn.disable = function(){
return this.each(function(){
if(typeof this.disabled != "undefined") this.disabled = true;
});
}$(function(){...}); //里面的函数会在DOM树加载完之后执行jQuery.noConflict();
위 내용은 jquery에서 $는 무엇을 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!