jquery에는 꽤 많은 내용이 있으므로 적어두면 나중에 참조하는 데 도움이 됩니다. 이것도 상당히 편리합니다.
JquerySelector
$(document).ready(function(){})
$(function(){})얻은 객체가 jQuery 객체인 경우 변수 앞에는 $,가 옵니다. 예: var $variable=jQueryObject
Selector
1, 페이지에 요소가 존재하는지 확인: if($(“#tt”).length>0){} 또는 if($(“#tt”)[0]){};
2, 기본 선택기
| |||||
| <🎜>$(".test")<🎜>선택 <🎜>테스트<를 위한 클래스<🎜><🎜>의 모든 요소<🎜><🎜>< 🎜> /td> | |||||
| <🎜>$("p")< 🎜> <🎜> <🎜>태그<🎜><🎜> | |||||
| <🎜>$("*")<🎜>페이지의 모든 요소 선택<🎜><🎜> | |||||
| <🎜>$(“span ,#two”)<🎜>모두 선택 <🎜>< 페이지 🎜> 태그가 있고 <🎜>id<🎜>가 있는 <🎜><🎜> |
3, 层次选择器
$(“p 스팬”)表示选取 $(“p span”)表示选取p中的所有的span元素 $(“parent>children”)选取parent下所有children的子元素 $(‘.one span')选取class为one的下一个span元素 $(‘.one~p')选取class为one的后面的所有的p兄弟元素 | ||||
$(“parent>children”)选取<🎜>부모下所유<🎜>자녀적자자원素<🎜><🎜>< /td> | ||||
$('.onespan')选取<🎜>class为<🎜>하나적下一个<🎜>span元素<🎜>< 🎜> | ||||
$('.one~p')选取<🎜>class为<🎜>하나적의 后면적所유적<🎜>p兄弟元素<🎜><🎜> |
$('.onespan')은 $(".one").next("span")
$('one~p')<🎜와 동일합니다. >$(“.one”).next모두(“p”)
$(“.one”).siblings(“p”)와 동일 4, 에 관계없이 class의 모든 형제 요소
p를 1으로 선택합니다. 필터 선택
| $(“p :first”)모두 선택 p첫 번째 p 요소의 요소 |
| $(“p:last”) 모두 선택p 마지막p요소 |
| $(“input:not(.myClass)”) <🎜를 선택합니다. >input 요소$( "input:even") 인 | 색인
| 요소홀수 선택 | 입력
$("input:eq (1)") | 입력
$( "input:gt(1)")색인이 더 큰 input 요소를 선택합니다. | 1
| 보다 큼에는 1이 포함되지 않음) |
$("input:lt(1)")인덱스가 1보다 작은 input 요소<🎜를 선택하세요. > (1 미만, 1 제외) |
| $(" : header”)h1, h2... |
| $ 모두 선택 ( "p:animated") 애니메이션을 실행하는 p 요소 |
2)콘텐츠 필터 $(“p:contains(‘我')”)选取含有文字“我”的p元素 $(“p:empty”)选取不包含子元素（包含文本元素）的p空元素 $(“p:has(p)”)选取含有p元素的p元素 $(“p:parent”)选取拥有子元素（包含文本元素）的p元素 (3)가시성 필터 선택기 $ (“:hidden”) $(“:hidden”)选取所有不可见的元素。包括, $(“p:visible”)选取所有可见的 元素 $("p:visible")<🎜>표시되는 항목 모두 선택 <🎜> < 🎜> 요소 <🎜><🎜> （4）属性过滤选择器 $(“p[id]”) $(“p[id]”)选取拥有属性id的元素 $(“p[title=test]”)选取属性title为test的p元素 $(“p[title!=test]”)选取属性title不是test的p元素（没有属性title的p也会被选取） $(“p[title^=test]”)选取属性title以test开始的p元素 $(“p[title$=test]”)选取属性title以test结束的p元素 $(“p[title*=test]”)选取属性title包含test的p元素 $(“p[id][title$='test']”)选取拥有属性id，并且属性title以test结束的p元素 $(“p[title=test]”)<🎜>选取属性<🎜>title<🎜>为<🎜>test<🎜>적<🎜>p<🎜>元素<🎜><🎜 > $(“p[title!=test]”)<🎜>选取属性<🎜>title<🎜>不是<🎜> 테스트<🎜>적<🎜>p<🎜>元素（没有属性<🎜>제목<🎜>적<🎜>p<🎜>也会被选取）<🎜><🎜> $(“p[title^=test]”)<🎜>选取属性<🎜>title<🎜>以<🎜> 테스트<🎜>开始적<🎜>p<🎜>원素<🎜><🎜> $(“p[title$=test]”)<🎜>选取属性<🎜>title<🎜>以<🎜> 테스트<🎜>结束적<🎜>p<🎜>원素<🎜><🎜> $(“p[title*=test]”)<🎜>选取属性<🎜>title<🎜>包含<🎜> 테스트<🎜>적<🎜>p<🎜>원素<🎜><🎜> $(“p[id][title$='test']”)<🎜>选取拥有属性<🎜>id< 🎜>，并且属性<🎜>제목<🎜>以<🎜>테스트<🎜>结束적<🎜>p<🎜>원素<🎜><🎜> (5)하위 요소 필터 선택기 :eq(index) :eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0算起的 :first只返回单个元素，而:first-child选择符将为每个父元素匹配第一个子元素。 例如$(“ul li:first-child”)选取每个ul中第一个li元素 :last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素 $(“ul li:only-child”)在ul中选取是唯一子元素的li元素 first<🎜>는 단일 요소만 반환하는 반면, <🎜>:first-child <🎜> 선택기는 각 상위 요소의 첫 번째 하위 요소와 일치합니다. <🎜><🎜> <🎜>예를 들어, <🎜>$("ul li:first-child")<🎜>는 각 <🎜>ul<🎜>에서 첫 번째 <🎜>li<🎜를 선택합니다. >요소<🎜><🎜> $("ul li:only-child")<🎜>지금<🎜> ul<🎜><🎜><🎜> :nth-child() 선택자는 매우 일반적으로 사용되는 하위 요소 필터링 선택자이며, 세부 기능은 다음과 같습니다. 1.:nth-child(even) 각 상위 요소 아래의 인덱스 값이 짝수인 요소를 선택할 수 있습니다 2. :nth-child(odd)각 상위 요소 아래의 인덱스 값이 홀수인 요소를 선택할 수 있습니다. number 3.:nth-child(2)각 상위 요소<에서 인덱스 값이 2 은 0부터 시작하여 각 상위 요소 아래의 인덱스 값이 의 배수인 (n 요소를 선택할 수 있습니다. 3 ) 은 각 상위 요소 아래의 인덱스 값이 (3n 1<인 요소 (n)를 선택할 수 있습니다. 🎜>) 0부터 시작) 6) 양식 객체 속성 필터 선택기 < 테이블 스타일="BORDER-RIGHT: 중간 없음; BORDER-TOP: 중간 없음; MARGIN-LEFT: 18pt; BORDER-LEFT: 중간 없음; BORDER-BOTTOM: 중간 없음; BORDER-COLLAPSE: 축소" border="1 "> $("#form1 :enabled ”) $(“#form1 :enabled”)选取id为form1的表单内的所有可用元素 $(“#form2 :disabled”)选取id为“form2”的表单内的所有不可用元素 $(“input:checked”)选取所有被选中的input元素 $(“select :selected”.text())选取所有被选中的选项元素 $("#form2 :disabled")<🎜>선택<🎜>id<🎜> <🎜 >form2<🎜>” 양식에서 사용할 수 없는 모든 요소<🎜><🎜> $("input:checked")<🎜>선택한 <🎜>입력<🎜> 요소 모두 선택<🎜><🎜> $("select :selected".text())<🎜>모두 선택 옵션 요소<🎜><🎜> 5．表单选择器 $(“:input”)选取所有input、textarea、select和button元素 $(“:text”)选取所有的单行文本框 $(“:password”)选取所有的密码框 $(“:radio”)选取所有的单选框 $(“:checkbox”)选取所有的复选框 $(“:submit”)选取所有的提交按钮 $(“:image”)选取所有的图像按钮 $(“:reset”)选取所有的重置按钮 $(“:button”)选取所有的按钮 $(“:hidden”)选取所有不可见元素 Dom작업 Dom 코어(core), HTML-DOM 및 CSS-DOM 1. 노드 삽입 방법 append() $(“p”) .append(“당신”) 테스트 appendTo() $(“당신”).appendTo(“p” ) test prepend() $(“p”). 당신”) 당신은테스트 prependTo() $(“p”). prependTo(“너”) 당신테스트 After() $(“p”). after ( “你”) 테스트 insertAfter() $(“你”). insertAfter(“p”) test Before() $(“p” ). 이전 ( “你”) 你 테스트 insertBefore() $(“你”). insertBefore (“p”) 你 test 2. 删除节点 Remove()方法 empty()清空节点 3. 复制节点 复制元素的同时复制元素中所绑定的事件 4. 替换节点 5. 包裹节点 Wrap() $(“strong”).wrap(“”);ssss wrapAll() $(“strong”). wrapAll (“”);ssss ssss wrapInner() $(“strong”).wrapInner (”);ssssg> 6. 属性操作 removeAttr()移除属性 7. 样式操作 获取和设置样式 Attr() 追加样式 addClass() 移除样式 removeClass() removeClass(“one two”) 切换样式 toggle()主要控制行为上的重复切换 toggleClass()样式上的重复切换 判断是否含有某个样式 hasClass()等价于is(“.one”) 8.设置和获取html、文本和值 html() 读取或者设置某个元素中的HTML内容 text() 读取或者设置某个元素中文本内容 val() 设置和获取元素的值defaultValue初始值 9.遍历节点 Children() 取得匹配元素的子元素的集合，只考虑子元素不考虑后代元素 Next() 取得匹配元素后面紧邻的同辈元素 Prev() 取得匹配元素前面紧邻的同辈元素 Siblings() 取得匹配元素前后所有的同辈元素 Closest() 取得最近的匹配元素 还有很多遍历方法：find(),filter(),nextAll(),prevAll(),parent(),parents()等 CSS-DOM작업 스타일링 $(“.one”).css(“color”) 스타일 설정 $(“.one”).css(“color”, "빨간색") $(".one").css({"opacity":"0.5","배경색":"파란색" }) 키() $(" .one").height(),설정: $(".one").height("20px") 너비() $(“.one”).width(), 설정: $(“.one”).width(“200px”) 오프셋() top 및 을 포함하여 현재 창에 있는 요소의 상대 오프셋을 가져옵니다. 왼쪽 직위() 가장 가까운 위치 스타일 속성을 상대로 설정하여 요소를 가져옵니다. absolute의 상위 노드의 상대 오프셋에는 top 및 <이라는 두 가지 속성도 포함됩니다. 🎜>왼쪽 ScrollTop() 가져오기 및 요소의 스크롤 막대와 상단 사이의 거리 설정 ScrollLeft() 요소의 스크롤 막대와 왼쪽 사이의 거리를 가져오고 설정합니다 事件和动画 事件 （1） 绑定事件 bind(type[,data],fn); 参数：type：事件类型，也可以自定义名称 data:作为event.data属性值传递给事件对象的额外数据对象 fn：用来绑定的处理函数 绑定多个事件类型 （2） 合成事件 Hover(enter,leave); 用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数（enter）；当光标移除这个元素时，会触发指定的第二个函数（leave） toggle(fn1,fn2,….fnN); 用户模拟鼠标连续单击事件。第一次单击元素，触发指定的第一个函数；当在次单击同一个元素时，则触发指定的第二个函数（fn2）；如果有更多的函数，则依次触发，知道最后一个。 （3） 冒泡事件 假设网页上有2个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时body元素也绑定了click事件，当点击最里面元素的事件时，同时其它事件也会触发。从内向外 停止事件冒泡的方法： 停止表单默认提交：event.preventDefault()==return false; （4） 移除事件 Type:事件类型 Data：将要移除的函数 （5） 触发一次函数 事件触发后立即解除 动画 Show() 느림: 600ms, 보통: 400 밀리초, 빠름: 200밀리초 숨기기() Fadeln() 요소가 완전히 사라질 때까지 일정 시간 동안 요소의 불투명도를 줄입니다. fadeout() 위의 반대 slideUp() 다음과 반대로 slideDown() 요소가 위에서 아래로 확장되어 표시됩니다. 맞춤 애니메이션animate 문법 구조: animate(params, speed, callback) 매개변수 설명은 다음과 같습니다. 1. Params: 스타일 속성과 값을 포함하는 매핑(예: {property1: "value1", property2: "value2",…} 속도 매개변수, 선택사항. 콜백: 애니메이션 완료 시 실행되는 함수, 선택 일단 추가하세요. 앞으로는 천천히 개선해 보세요! $("p:contains('I
')")<🎜>텍스트 "I" 🎜>p가 포함된 <를 선택하세요<🎜 >요소<🎜><🎜><🎜><🎜><🎜><🎜><🎜>$(“p:empty”)<🎜>하위 요소(텍스트 요소 포함)를 포함하지 않는 요소 선택 <🎜> p<🎜>빈 요소<🎜><🎜><🎜><🎜><🎜><🎜><🎜>$(“p:has(p)”)<🎜><🎜>p를 포함하는 항목 선택 <🎜 <🎜><🎜><🎜><🎜><🎜><🎜><🎜>$(“p:parent”)<🎜>의 >p<🎜> 요소는 소유하는 하위 요소( <🎜>p<🎜> 요소 <🎜><🎜><🎜><🎜><🎜><🎜> 텍스트 요소 포함)
보이지 않는 요소를 모두 선택하세요. <🎜>,
选取拥有属性<🎜 >id<🎜>적원素<🎜><🎜>
의 유일한 하위 요소인 <🎜>li<🎜> 요소를 선택하세요.
는 하나의 요소에만 일치하는 반면 <🎜>:nth-child<🎜>는 모든 상위 요소와 일치합니다. 하위 요소와 일치하며 <🎜> <🎜>:nth-child(index)<🎜>의 index<🎜>는 <🎜>1<🎜>부터 시작하고, <🎜>:eq(index)<🎜>는 <🎜>0<🎜부터 계산됩니다. ><🎜><🎜>
가 <🎜>form1<🎜><🎜><🎜>
$(“:input”)选取所有<🎜>input、<🎜>텍스트 영역、<🎜>선택및<🎜>버튼< span style="FONT-FAMILY: 宋体">원素<🎜><🎜><🎜>$(“:text”)选取所有的单行文本框<🎜><🎜> <🎜>$(“:password”)选取所有密码框<🎜><🎜> <🎜>$(“:radio”)选取所有单选框<🎜> <🎜> <🎜>$(“:checkbox”)选取所有复选框<🎜><🎜> <🎜>$(“:submit”)选取所有提交按钮<🎜><🎜> <🎜>$(“:image”)选取所有图image按钮<🎜>< 🎜> <🎜>$(“:재설정”)选取所有的重置按钮<🎜><🎜> <🎜>$(“:button”)选取所有按钮<🎜><🎜 > <🎜>$(“:파일”)选取所유적上传域<🎜><🎜> <🎜>$(“:hidden”)选取所有不可见元素<🎜>< 🎜> Clone() $(this).clone(true).appendTo(“body”)
replaceWith():$(“p”).replaceWith(“<a>test</a>”);
replaceAll():$(“<a>test</a>”). replaceAll (“p”);
Attr(); 设置多个$(“p”).attr({“title”:”dd”,”name”:”myp”})
html()<🎜><🎜><🎜>读取或者设置某个元素中的<🎜>HTML<🎜>内容<🎜><🎜> <🎜>text()<🎜><🎜> <🎜>读取或者设置某个元素中文本内容<🎜><🎜> <🎜>val()<🎜><🎜> <🎜>设置和获取元素的值<🎜>defaultValue<🎜>初始值<🎜><🎜>
어린이()<🎜><🎜> <🎜>取得匹配元素的子元素的集合，只考虑子元素不考虑后代元素<🎜><🎜> <🎜>Next()<🎜><🎜> <🎜>取得匹配元素后face紧邻的同辈元素<🎜><🎜> <🎜>Prev()<🎜><🎜> <🎜>取得匹配元素前面紧邻的同辈元素<🎜><🎜> <🎜>Siblings()<🎜><🎜> <🎜>取得匹配元素前后所多同辈元素<🎜><🎜> <🎜>Closest()<🎜><🎜> <🎜>取得最近的匹配元素<🎜><🎜> <🎜>还有很多遍历方法：<🎜>find(),filter(),nextAll(),prevAll(),parent(),parents( )<🎜>等<🎜><🎜> Ex：$(“p”).bind(“mouseover mouseout”,function(){
$(this).toggleClass(“over”);
})stopPropagation()
Ex:$(‘span').bind(“click”,function(event){
Var txt=$().html()+”<p>内层span元素被单击</p>”;
$(‘#msg').html(txt);
Event.stopPropagation(); 停止事件冒泡
})Unbind([type][,data]);
One（type，[data],fn）;
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
