JavaScript 지식 요약: jQuery 일반 선택기 및 필터 선택기

ㅋㅋㅋ 쿼리 파일 라이브러리, 사이트에 저장 js 폴더에 있는 스크립트 태그를 사용하여 이를 소개하고 head 태그에 배치합니다.

window.οnlοad=function()은 $(function)window.οnlοad=function(){ … 페이지 로딩 이벤트로 단순화될 수 있습니다. }

다음은 위의jQuery의 선택기기본 선택기

$("#id") ：id选择器 $("p") ：p选择器 $(".class") ：类选择器 $(".class,.class2,#id") ：组合选择器

$("#id>.class") ：子元素选择器$("#id .class") ：后代选择器$("#id+.class") ：紧邻下一个元素选择器$("#id~.class") ：兄弟元素选择器

$(":input")//获取inpu。textarea，select，button元素$(":text")//所有的单行文本框$(":text")等价于$("[type=text]")，推荐使用$("input:text")效率更高$(":password") //获取type=password的input元素$(":radio") //获取type=radio的input元素$(":checkbox") //获取type=checkbox的input元素$(":submit") //获取type=submit的input元素$(":reset") //获取type=reset的input元素$(":button") //获取type=button的input元素$(":file") //获取type=file的input元素$(":image") //获取type=image的input元素

jQuery 필터

필터 사용: 시작

$("Ii:first") ：第一个li $("li:last") ：最后一个li $("li:even") ：挑选 下标为偶数的li $("li:odd") ：挑选 下标为奇数的li $("Ii:eq(4)") ：下标等 于4的li(第五个li元素)$("Ii:gt(2)") ：下标大于 2的li $("li:lt(2)") ：下标小于 2的li$("Ii:not(#runoob)") ：挑选除id="runoob"以外的所有li$("Ii:header") ：所有标题元素$("Ii:animated") ：正在执行动画效果的元素

1. $("li:contains(text)") ：含有文本内容为text的元素$("li::empty")：获取不包含后代元素或者文本的空元素$("li::has(selector)")：获取含有后代元素为selector的元素$("li::parent")：获取含有后代元素或者文本的非空元素

   로그인 후 복사

2. $("li:hidden") ：隐藏li元素$("li:visible") ：显示li元素

   로그인 후 복사

3. $("li[title]") ：获取所有属性包括title的li元素$("p[id^='qq']") ：id属性值以qq开头的p元素$("p[id*='bb'") ：id属性值包含bb的p元素$("li[title=text2]") ：li属性值等于text2的元素$("p[id!='aa'") ：id属性值不等于aa的p元素$("p[id$='z']") ：id 属性值以zz结尾的p$("input[id][name$='man']")：多属性选过滤，同时满足两个属性的条件的元素

   로그인 후 복사

$("input:enabled") ：选取可用的表单元素$("input:disabled") ：选取不可用的表单元素$("input:checked") ：选取被选中是input元素$("input:selected") ：选取被选中的option元素

1. jquery 객체 생성

var obj=$("#content")

로그인 후 복사

var obj=$("#content")； obj.html("jQuery对象")

로그인 후 복사
2. DOM 객체는 jQuery 객체로 변환됩니다

로그인 후 복사

jQuery는 DOM을 사용하여 요소를 조작합니다

단일 속성 구문 jQuery object.css(name,value): name은 스타일 이름, value는 스타일 값이며 동시에 여러 속성을 설정합니다.
4. jQuery object.css{(name:value,name:value,name) :value …)}: name은 스타일 이름이고 value는 스타일 값입니다

jQuery는 DOM 조작 요소를 사용하여 클래스 스타일을 추가하고, 클래스 스타일을 삭제하고, 다른 클래스 스타일을 전환합니다.

jQuery object.removeaClass(class)jQuery object.toggleClass(class)

jQuery는 DOM을 사용하여 요소 내용과 값 연산을 조작합니다.

jQuery 객체.html(content): 일치하는 모든 요소의 HTML 콘텐츠 또는 텍스트 콘텐츠를 설정하는 데 사용됩니다.

jQuery object.text(content) : 일치하는 모든 요소의 내용을 설정하는 데 사용됩니다. 텍스트 내용jQuery object.val(): 요소의 값을 가져오거나 설정하는 데 사용됩니다.jQuery object.attr(name): 요소의 속성 값을 가져오는 데 사용됩니다.

jQuery object.attr(name, function(index)) : 해당 값을 요소의 속성값으로 반환하는 Bind 함수 함수

jQuery object.removeAttr(name): 요소의 속성 값을 삭제하는 데 사용됩니다

jQuery는 DOM을 사용하여 노드를 작동합니다

$(html): html

eg:$("").appendTo(p)

로그인 후 복사

a.append(b)의 jQuery 객체를 생성합니다. b를 a

eg:$("ul").append("li"):a里添加b

로그인 후 복사

a.appendTo(b)에 추가: b

eg:$li.appendTo("ul"):a添加到b

a에 a를 추가합니다. .prepend(b): a

eg: $("ul").prependTo("li")

a.prependTo(b)에 b를 추가합니다. b

eg: $li.prependTo("ul")

로그인 후 복사

a에 a를 추가합니다. after(b): a

eg: $("ul").after($p)

로그인 후 복사

뒤에 b 삽입
a.insertAfter(b): b

eg: $p.insertAfter("ul")

로그인 후 복사

a.before(b) 뒤에 a 삽입: a

eg: $("ul").before($p)

로그인 후 복사

a.insertBefore(b) 앞에 b 삽입: 앞에 a 삽입 b

eg: $p.insertBefore("ul")

로그인 후 복사

a .replaceWith(b): a를 b

eg: $("li").replaceWith("ol")

a.replaceAll(b)로 교체: a를 b

eg: $("ol").replaceAll("li")

eg: $("ol").clon(ture)

eg: $("ul li").remove()//删除ul下的所有li $("ul li").remove("li li:last")//删除ul下的最后一个li

애니메이션 및 특수 효과

show(): 표시

hide(): 숨기기

toggle(): 토글

fadeIn (): 페이드 인

fadeOut(): 페이드 아웃

fadeToggle(): 페이드 아웃 토글

fadeTo(): 페이드 투명도 값 지정

slideDown(): 슬라이드 인

slideUp(): 슬라이드 아웃

slideToggle(): 슬라이드 인 및 슬라이드 아웃 전환animate(): 사용자 정의 애니메이션

stop(): 정지
• 표시된 대로 위치 코드 이동:
• 표시된 대로 사용자 정의 애니메이션 코드

위 내용은 JavaScript 지식 요약: jQuery 일반 선택기 및 필터 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!