$("p:contains('I
$(“p:contains(‘我')”)选取含有文字“我”的p元素 |
$(“p:empty”)选取不包含子元素（包含文本元素）的p空元素 |
$(“p:has(p)”)选取含有p元素的p元素 |
$(“p:parent”)选取拥有子元素（包含文本元素）的p元素 |
')")텍스트 "I" 🎜>p가 포함된 요소$(“p:empty”)하위 요소(텍스트 요소 포함)를 포함하지 않는 요소 선택 p빈 요소$(“p:has(p)”)p를 포함하는 항목 선택 $(“p:parent”)의 >p 요소는 소유하는 하위 요소( p 요소 텍스트 요소 포함)(3)가시성 필터 선택기
|
$ (“:hidden”)
$(“:hidden”)选取所有不可见的元素。包括b36110a7fe5a79730b35a3506f95a3b4,6f943d4c784aa7acf613167b36fd38d7和949ab30bebc0876d788c24b8c95c515a等元素。如果只想选取d5fd7aea971a85678ba271703566ebfd元素，可以使用$(“input:hidden”) |
$(“p:visible”)选取所有可见的e388a4556c0f65e1904146cc1a846bee元素 |
보이지 않는 요소를 모두 선택하세요. b36110a7fe5a79730b35a3506f95a3b4,6f943d4c784aa7acf613167b36fd38d7 및 949ab30bebc0876d788c24b8c95c515a 및 기타 요소. d5fd7aea971a85678ba271703566ebfd 요소만 선택하려는 경우 $("input:hidden") |
$("p:visible")표시되는 항목 모두 선택 e388a4556c0f65e1904146cc1a846bee 요소 |
（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元素 |
选取拥有属性id적원素 |
$(“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元素 |
는 하나의 요소에만 일치하는 반면 :nth-child는 모든 상위 요소와 일치합니다. 하위 요소와 일치하며 :nth-child(index)의 index는 1부터 시작하고, :eq(index)는 0 |
|
first는 단일 요소만 반환하는 반면, :first-child 선택기는 각 상위 요소의 첫 번째 하위 요소와 일치합니다.
예를 들어, $("ul li:first-child")는 각 ul에서 첫 번째 li요소
|
$("ul li:only-child")지금 ul |
의 유일한 하위 요소인 li 요소를 선택하세요.:nth-child() 선택자는 매우 일반적으로 사용되는 하위 요소 필터링 선택자이며, 세부 기능은 다음과 같습니다.
1.:nth-child(even) 각 상위 요소 아래의 인덱스 값이 짝수인 요소를 선택할 수 있습니다
2. :nth-child(odd)각 상위 요소 아래의 인덱스 값이 홀수인 요소를 선택할 수 있습니다. number
3.:nth-child(2)각 상위 요소2 와 같은 요소를 선택할 수 있습니다. 🎜>4.nth -child(3n)은 0부터 시작하여 각 상위 요소 아래의 인덱스 값이 의 배수인 (n 요소를 선택할 수 있습니다. 3 ) 5.nth-child(3n 1)은 각 상위 요소 아래의 인덱스 값이 (3n 1n)를 선택할 수 있습니다. 🎜>) 0부터 시작) (6) 양식 객체 속성 필터 선택기
|
$("#form1 :enabled ”) id
$(“#form1 :enabled”)选取id为form1的表单内的所有可用元素 |
$(“#form2 :disabled”)选取id为“form2”的表单内的所有不可用元素 |
$(“input:checked”)选取所有被选中的input元素 |
$(“select :selected”.text())选取所有被选中的选项元素 |
가 form1 |
$("#form2 :disabled")선택id form2” 양식에서 사용할 수 없는 모든 요소 |
$("input:checked")선택한 입력 요소 모두 선택 | $("select :selected".text())모두 선택 옵션 요소 |
5．表单选择器
$(“:input”)选取所有input、textarea、select和button元素 |
$(“:text”)选取所有的单行文本框 |
$(“:password”)选取所有的密码框 |
$(“:radio”)选取所有的单选框 |
$(“:checkbox”)选取所有的复选框 |
$(“:submit”)选取所有的提交按钮 |
$(“:image”)选取所有的图像按钮 |
$(“:reset”)选取所有的重置按钮 |
$(“:button”)选取所有的按钮 |
$(“:file”)选取所有的上传域 |
$(“:hidden”)选取所有不可见元素 |
$(“:input”)选取所有input、텍스트 영역、선택및버튼원素
|
| $(“:text”)选取所有的单行文本框
|
$(“:password”)选取所有密码框
|
| $(“:radio”)选取所有单选框
|
| $(“:checkbox”)选取所有复选框
|
| $(“:submit”)选取所有提交按钮
|
| $(“:image”)选取所有图image按钮
|
| $(“:재설정”)选取所有的重置按钮
|
| $(“:button”)选取所有按钮
|
| $(“:파일”)选取所유적上传域
|
| $(“:hidden”)选取所有不可见元素
|
Dom작업
Dom 코어(core), HTML-DOM 및 CSS-DOM
1. 노드 삽입 방법
append() |
$(“p”) .append(“a4b561c25d9afb9ac8dc4d70affff419당신0d36329ec37a2cc24d42c7229b69747a”)
e388a4556c0f65e1904146cc1a846bee테스트 a4b561c25d9afb9ac8dc4d70affff419너0d36329ec37a2cc24d42c7229b69747a94b3e26ee717c64999d7867364b1b4a3
|
appendTo() |
$(“a4b561c25d9afb9ac8dc4d70affff419당신0d36329ec37a2cc24d42c7229b69747a”).appendTo(“p” )
e388a4556c0f65e1904146cc1a846beetest a4b561c25d9afb9ac8dc4d70affff419당신0d36329ec37a2cc24d42c7229b69747a94b3e26ee717c64999d7867364b1b4a3
|
prepend() |
$(“p”). a4b561c25d9afb9ac8dc4d70affff419당신0d36329ec37a2cc24d42c7229b69747a”)
e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419 당신은0d36329ec37a2cc24d42c7229b69747a테스트 94b3e26ee717c64999d7867364b1b4a3
|
prependTo() |
$(“p”). prependTo(“a4b561c25d9afb9ac8dc4d70affff419너0d36329ec37a2cc24d42c7229b69747a”)
e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419당신0d36329ec37a2cc24d42c7229b69747a테스트 94b3e26ee717c64999d7867364b1b4a3
|
After() |
$(“p”). after ( “a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747a”)
e388a4556c0f65e1904146cc1a846bee테스트 94b3e26ee717c64999d7867364b1b4a3< ;b>你0d36329ec37a2cc24d42c7229b69747a
|
insertAfter() |
$(“a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747a”). insertAfter(“p”)
e388a4556c0f65e1904146cc1a846beetest 94b3e26ee717c64999d7867364b1b4a3a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747a
|
Before() |
$(“p” ). 이전 ( “a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747a”)
a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846bee테스트 94b3e26ee717c64999d7867364b1b4a3
|
insertBefore() |
$(“a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747a”). insertBefore (“p”)
a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beetest 94b3e26ee717c64999d7867364b1b4a3
|
2. 删除节点
Remove()方法 empty()清空节点
3. 复制节点 Clone() $(this).clone(true).appendTo(“body”) 复制元素的同时复制元素中所绑定的事件
4. 替换节点 replaceWith():$(“p”).replaceWith(“<a>test</a>”);
replaceAll():$(“<a>test</a>”). replaceAll (“p”); 5. 包裹节点
Wrap() |
$(“strong”).wrap(“a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a”);a4b561c25d9afb9ac8dc4d70affff4198e99a69fbe029cd4e2b854e244eab143ssss128dba7a3a77be0113eb0bea6ea0a5d00d36329ec37a2cc24d42c7229b69747a |
wrapAll() |
$(“strong”). wrapAll (“a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a”);a4b561c25d9afb9ac8dc4d70affff4198e99a69fbe029cd4e2b854e244eab143ssss128dba7a3a77be0113eb0bea6ea0a5d0
8e99a69fbe029cd4e2b854e244eab143ssss128dba7a3a77be0113eb0bea6ea0a5d00d36329ec37a2cc24d42c7229b69747a
|
wrapInner() |
$(“strong”).wrapInner (a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a”);8e99a69fbe029cd4e2b854e244eab143a4b561c25d9afb9ac8dc4d70affff419ssss0d36329ec37a2cc24d42c7229b69747aac614297babda07451c2ac7bdedd5452 |
6. 属性操作 Attr(); 设置多个$(“p”).attr({“title”:”dd”,”name”:”myp”})removeAttr()移除属性
7. 样式操作
获取和设置样式 |
Attr() |
追加样式 |
addClass() |
移除样式 |
removeClass() removeClass(“one two”) |
切换样式 |
toggle()主要控制行为上的重复切换
toggleClass()样式上的重复切换
|
判断是否含有某个样式 |
hasClass()等价于is(“.one”) |
8.设置和获取html、文本和值
html() |
读取或者设置某个元素中的HTML内容 |
text() |
读取或者设置某个元素中文本内容 |
val() |
设置和获取元素的值defaultValue初始值 |
html()
|
读取或者设置某个元素中的HTML内容 |
| text() |
读取或者设置某个元素中文本内容 |
| val() |
设置和获取元素的值defaultValue初始值 |
9.遍历节点
Children() |
取得匹配元素的子元素的集合，只考虑子元素不考虑后代元素 |
Next() |
取得匹配元素后面紧邻的同辈元素 |
Prev() |
取得匹配元素前面紧邻的同辈元素 |
Siblings() |
取得匹配元素前后所有的同辈元素 |
Closest() |
取得最近的匹配元素 |
还有很多遍历方法：find(),filter(),nextAll(),prevAll(),parent(),parents()等 |
어린이()
|
取得匹配元素的子元素的集合，只考虑子元素不考虑后代元素 |
| Next() |
取得匹配元素后face紧邻的同辈元素 |
| 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：用来绑定的处理函数
绑定多个事件类型 Ex：$(“p”).bind(“mouseover mouseout”,function(){
$(this).toggleClass(“over”);
})（2） 合成事件
Hover(enter,leave);
用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数（enter）；当光标移除这个元素时，会触发指定的第二个函数（leave）
toggle(fn1,fn2,….fnN);
用户模拟鼠标连续单击事件。第一次单击元素，触发指定的第一个函数；当在次单击同一个元素时，则触发指定的第二个函数（fn2）；如果有更多的函数，则依次触发，知道最后一个。
（3） 冒泡事件
假设网页上有2个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时body元素也绑定了click事件，当点击最里面元素的事件时，同时其它事件也会触发。从内向外
停止事件冒泡的方法： stopPropagation()
Ex:$(‘span').bind(“click”,function(event){
Var txt=$().html()+”<p>内层span元素被单击</p>”;
$(‘#msg').html(txt);
Event.stopPropagation(); 停止事件冒泡
})
停止表单默认提交：event.preventDefault()==return false;
（4） 移除事件 Unbind([type][,data]); Type:事件类型
Data：将要移除的函数
（5） 触发一次函数 One（type，[data],fn）; 事件触发后立即解除
动画
Show() |
느림: 600ms, 보통: 400 밀리초, 빠름: 200밀리초 |
숨기기() |
Fadeln() |
요소가 완전히 사라질 때까지 일정 시간 동안 요소의 불투명도를 줄입니다. |
fadeout() |
위의 반대 |
slideUp() |
다음과 반대로 |
slideDown() | 요소가 위에서 아래로 확장되어 표시됩니다. |
맞춤 애니메이션animate 문법 구조: animate(params, speed, callback)
매개변수 설명은 다음과 같습니다.
1. Params: 스타일 속성과 값을 포함하는 매핑(예: {property1: "value1", property2: "value2",…} 2． 속도:속도 매개변수, 선택사항.
콜백: 애니메이션 완료 시 실행되는 함수, 선택
일단 추가하세요. 앞으로는 천천히 개선해 보세요! 위 내용은 jQuery 선택기, DOM 연산, 이벤트, 애니메이션 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!
|
