찾다

집  >  기사  >  웹 프론트엔드  >  JavaScript 지식 요약: jQuery 일반 선택기 및 필터 선택기

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

coldplay.xixi
coldplay.xixi앞으로
2021-01-18 17:53:082269검색

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

window.οnlοad=function()은 $(function)JavaScript 지식 요약: jQuery 일반 선택기 및 필터 선택기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") ：正在执行动画效果的元素

콘텐츠 필터 선택기
  1. $("li:contains(text)") ：含有文本内容为text的元素$("li::empty")：获取不包含后代元素或者文本的空元素$("li::has(selector)")：获取含有后代元素为selector的元素$("li::parent")：获取含有后代元素或者文本的非空元素
가시성
  1. $("li:hidden") ：隐藏li元素$("li:visible") ：显示li元素
속성 필터 선택기
  1. $("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을 작동합니다

  1. jquery 객체 생성
    2. var obj=$("#content")
요소 내부의 HTML 코드를 가져오거나 설정합니다.
    var obj=$("#content")；
obj.html("jQuery对象")
  1. DOM 객체는 jQuery 객체로 변환됩니다
    2. <script type="text/javascript">
		var $text=$(document.getElementsByTagName("li"));
		alert($text.eq(0).html());//获取第一个li里的值
		alert($text.eq(1).html());//获取第二个li里的值</script>
    jQuery는 DOM을 사용하여 요소를 조작합니다
    단일 속성 구문 jQuery object.css(name,value): name은 스타일 이름, value는 스타일 값이며 동시에 여러 속성을 설정합니다.
  1. jQuery object.css{(name:value,name:value,name) :value …)}: name은 스타일 이름이고 value는 스타일 값입니다
    jQuery는 DOM 조작 요소를 사용하여 클래스 스타일을 추가하고, 클래스 스타일을 삭제하고, 다른 클래스 스타일을 전환합니다.
jQuery object.addaClass(class)

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): html

eg:$("<a href=&#39;http://www.baidu.com&#39;></a>").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")
a.clon(ture)로 교체: a

eg:	$("ol").clon(ture)
a.remove(a) 복사 : 

eg:	$("ul li").remove()//删除ul下的所有li
	$("ul li").remove("li li:last")//删除ul下的最后一个li
jQuery 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&#39;/>
	</p>
	<input type="button" value="添加边框"/></body></body>	</html>

애니메이션 및 특수 효과

show(): 표시

hide(): 숨기기

toggle(): 토글

fadeIn (): 페이드 인

fadeOut(): 페이드 아웃

fadeToggle(): 페이드 아웃 토글

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

slideDown(): 슬라이드 인

slideUp(): 슬라이드 아웃

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

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

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

JavaScript jquery css html class append JS function 对象 事件 dom 选择器
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：jQuery 충돌 문제를 해결하는 방법다음 기사：jQuery 충돌 문제를 해결하는 방법

관련 기사

더보기