ㅋㅋㅋ 쿼리 파일 라이브러리, 사이트에 저장 js 폴더에 있는 스크립트 태그를 사용하여 이를 소개하고 head 태그에 배치합니다.
window.οnlοad=function()은 $(function)window.οnlοad=function(){ … 페이지 로딩 이벤트로 단순화될 수 있습니다. }
$(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") :正在执行动画效果的元素
$("li:contains(text)") :含有文本内容为text的元素$("li::empty"):获取不包含后代元素或者文本的空元素$("li::has(selector)"):获取含有后代元素为selector的元素$("li::parent"):获取含有后代元素或者文本的非空元素
$("li:hidden") :隐藏li元素$("li:visible") :显示li元素
$("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元素
jQuery는 DOM을 작동합니다
var obj=$("#content")
var obj=$("#content"); obj.html("jQuery对象")
<script type="text/javascript"> var $text=$(document.getElementsByTagName("li")); alert($text.eq(0).html());//获取第一个li里的值 alert($text.eq(1).html());//获取第二个li里的值</script>
jQuery object.removeaClass(class) jQuery object.toggleClass(class)
jQuery는 DOM을 사용하여 요소 내용과 값 연산을 조작합니다.
jQuery object.html(): 첫 번째 클래스의 HTML 내용이나 텍스트 내용을 가져오는 데 사용됩니다. 일치하는 요소jQuery 객체.html(content): 일치하는 모든 요소의 HTML 콘텐츠 또는 텍스트 콘텐츠를 설정하는 데 사용됩니다.
jQuery object.text(): 일치하는 모든 요소의 텍스트 콘텐츠를 가져오는 데 사용됩니다.jQuery object.text(content) : 일치하는 모든 요소의 내용을 설정하는 데 사용됩니다. 텍스트 내용 jQuery object.val(): 요소의 값을 가져오거나 설정하는 데 사용됩니다. jQuery object.attr(name): 요소의 속성 값을 가져오는 데 사용됩니다.
jQuery object.attr(name, value) : 요소의 Attribute 값을 설정하는데 사용jQuery object.attr(name, function(index)) : 해당 값을 요소의 속성값으로 반환하는 Bind 함수 함수jQuery object.removeAttr(name): 요소의 속성 값을 삭제하는 데 사용됩니다
jQuery는 DOM을 사용하여 노드를 작동합니다
$(html): htmleg:$("<a href='http://www.baidu.com'></a>").appendTo(p)
a.append(b)의 jQuery 객체를 생성합니다. b를 aeg:$("ul").append("li"):a里添加ba.appendTo(b)에 추가: b
eg:$li.appendTo("ul"):a添加到b
a에 a를 추가합니다. .prepend(b): a
eg: $("ul").prependTo("li")
a.prependTo(b)에 b를 추가합니다. beg: $li.prependTo("ul")
a에 a를 추가합니다. after(b): aeg: $("ul").after($p)뒤에 b 삽입
a.insertAfter(b): beg: $p.insertAfter("ul")
a.before(b) 뒤에 a 삽입: aeg: $("ul").before($p)
a.insertBefore(b) 앞에 b 삽입: 앞에 a 삽입 beg: $p.insertBefore("ul")a .replaceWith(b): a를 b
eg: $("li").replaceWith("ol")
a.replaceAll(b)로 교체: a를 beg: $("ol").replaceAll("li")
a.clon(ture)로 교체: a
eg: $("ol").clon(ture)a.remove(a) 복사 :
eg: $("ul li").remove()//删除ul下的所有li $("ul li").remove("li li:last")//删除ul下的最后一个lijQuery object.each 삭제(콜백): 요소 트래버스
<html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script> <script type-"text/javascript"> $(function(){ $("input[type='button']"). click(function(){ $("img").each(function(index, element){ //jQuery对象 //$(this).css("border","2px solid red"); //$(this).attr("title"," 第 "+(index+1)+"副风景画"); //DOM对象 this.style.border="2px solid red"; this.title="第"+(index+1)+"幅风景画"; }); }); }); </script></head><body> <p> <img src=".../img/img1.jpg"/> <img src=".../img/img2.jpg'/> </p> <input type="button" value="添加边框"/></body></body> </html>
애니메이션 및 특수 효과
show(): 표시
hide(): 숨기기
toggle(): 토글
fadeIn (): 페이드 인
fadeOut(): 페이드 아웃
fadeToggle(): 페이드 아웃 토글
fadeTo(): 페이드 투명도 값 지정
slideDown(): 슬라이드 인
slideUp(): 슬라이드 아웃
slideToggle(): 슬라이드 인 및 슬라이드 아웃 전환 animate(): 사용자 정의 애니메이션
위 내용은 JavaScript 지식 요약: jQuery 일반 선택기 및 필터 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!