jquery 객체 액세스란 무엇이며 it_jquery를 사용하는 방법
- WBOY원래의
- 2016-05-16 15:02:381816검색
이 글은 jQuery 핵심 기능에 대한 이전 글에 이어 jQuery 객체에 접근하는 방법을 소개합니다.
jquery 객체 액세스
각(콜백)
크기()
길이
선택기
컨텍스트
get()
get(색인)
색인([제목])
테스트 케이스
다음은 이해하지 못하는 친구들이 참고할 수 있도록 코드를 통해 위의 jQuery 객체 액세스를 테스트하는 방법입니다.
<!DOCTYPE html>
<html>
<head>
<title>jquery对象访问</title>
<script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<!--
jquery对象访问之一each(callback)
-->
<div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
<span>span4</span>
<span>span5</span>
</div>
<script type="text/javascript">
var spanList = $("div span");
spanList.each(function(){
// alert(this.innerHTML); //这个获取的是span元素而不是jQuery对象，这点需要注意。依次输出span1 ... span5
// alert($(this).html()); //输出结果同上 只是$(this)会将元素转为jQuery对象
if($(this).html() == "span4")
return false; //可以提前使用return 退出循环
});
</script>
<!--
jquery对象访问之二size()
-->
<script type="text/javascript">
// alert($("div span").size()); //输出结果5 size()函数是获取jQuery集合中元素的个数
</script>
<!--
jquery对象访问之三length
-->
<script type="text/javascript">
// alert($("div span").length); //输出结果5 当前匹配的元素个数.同size 返回相同的值
</script>
<!--
jquery对象访问之四selector
-->
<ul id="ul1"></ul>
<script type="text/javascript">
$("#ul1")
.append("<li>" + $("ul").selector + "</li>")
.append("<li>" + $("ul li").selector + "</li>")
.append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
</script>
<!--
jquery对象访问之五context
-->
<ul id="ul2"></ul>
<script type="text/javascript">
$("#ul2")
.append("<li>" + $("ul").context + "</li>")
.append("<li>" + $("ul", document.body).context.nodeName + "</li>");
</script>
<!--
jquery对象访问之六get()
-->
<div id="get">
<span>get1</span>
<span>get2</span>
<span>get3</span>
<span>get4</span>
</div>
<script type="text/javascript">
var spans = $("#get span");
var span1 = spans.get();
// alert(span1); // 返回的是span元素的集合
// alert($(span1).html()); //输出结果get1 将节点元素包装成jQuery对象
</script>
<!--
jquery对象访问之七get(index)
-->
<div id="get">
<span>get1</span>
<span>get2</span>
<span>get3</span>
<span>get4</span>
</div>
<script type="text/javascript">
var spans = $("#get span");
var span1 = spans.get(0);
// alert(span1.innerText); //输出结果是get1 通过节点元素
// alert($(span1).html()); //输出结果同上 将节点元素包装成jQuery对象
</script>
<!--
jquery对象访问之八index([subject])
-->
<ul id="ul8">
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
<script type="text/javascript">
alert($('#ul8 li').index(document.getElementById('bar'))); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
alert($('#ul8 li').index($('#bar'))); //1，传递一个jQuery对象
alert($('#ul8 li').index($('#ul8 li:gt(0)'))); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
alert($('#bar').index('#ul8 li')); //1，传递一个选择器，返回#bar在所有li中的做引位置
alert($('#bar').index()); //1，不传递参数，返回这个元素在同辈中的索引位置。
</script>
</body>
</html>
실행 결과
요약
이 글에서는 jQuery의 객체 접근 모듈을 소개합니다. 이전에는 jQuery를 체계적으로 배우지 못했는데, 이제는 체계적으로 jQuery를 배워서 필요한 친구들이 참고할 수 있도록 포스팅할 예정입니다. 틀린 부분이 있다면 정정해주세요. 읽어주셔서 감사합니다!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.