jQuery의 DOM 연산 예제 분석-JS 튜토리얼-php.cn

jQuery의 DOM 연산 예제 분석

韦小宝

풀어 주다： 2017-11-28 10:12:58

원래의

1577명이 탐색했습니다.

이 문서의 예에서는 jQuery의 DOM 작업 메서드를 설명합니다. DOM에서의 jQuery 사용은 jQuery의 가장 큰 의미라고 할 수 있습니다. jQuery의 DOM 작업에 대한 강점 분석을 살펴보겠습니다! !

여기서 설계된 주요 DOM 작업에는 dom 객체 생성(JS 메서드 및 jquery 메서드), 속성 수정, 스타일 수정 및 이벤트 동적 바인딩
코드는 다음과 같습니다.

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<title>动态创建对象</title>
</head>
<body>
<div id="testDiv">测试图层</div>
<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA"/>
<input type=text id=inputTest readonly=true />
<div id="testDiv5" customer="customer data 1">获取自定义数据-1</div>
<div id="testDiv6">获取自定义数据-2</div>
<script type="text/javascript">
//document.getElementById("testDiv").innerHTML = "<div style=\"border:solid 1px #FF0000\">动态创建的div</div>";
var testDiv = document.getElementById("testDiv");
var select = document.createElement("select");
select.options[0] = new Option("加载项1", "value1");
select.options[1] = new Option("加载项2", "value2");
select.size = "2";
var object = testDiv.appendChild(select);
$("img").each(function(index) {
this.alt = "changed";//修改dom属性信息
//alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);
});
$("#inputTest").removeAttr("readonly");
//alert($("#inputTest").attr("readonly"));
$(function()
{
alert("attr(\"width\"):" + $("#testDiv").attr("width"));//undifined
alert("css(\"width\"):" + $("#testDiv").css("width"));//auto(ie6) 或1264px(ff)
alert("width():" + $("#testDiv").width()); //正确的数值1264
alert("style.width:" + $("#testDiv")[0].style.width ); //空值
})
//动态绑定单击事件
$("#testDiv5").bind("click", function(event)
{ alert($(event.target).attr("customer")); });
//绑定只执行一次的单击事件
$("#testDiv6").one("click", { customer: "customer data 2",a:"aaa" }, function(event)
{ alert(event.data.customer) });
</script>
</body>
</html>

로그인 후 복사

이 글이 여러분에게 도움이 되기를 바랍니다. 위 내용은 모든 분들의 jQuery 프로그래밍에 도움이 될 것입니다. 자세한 내용은 PHP 중국어 웹사이트 에서oh~

검색해 보세요. 관련 권장 사항:

jQuery ajax를 사용하여 로컬 json 파일을 읽는 사례

JQuery 이미지 캐러셀 효과 구현 예

비동기 검색 jquery 선택 플러그인 사용 방법

위 내용은 jQuery의 DOM 연산 예제 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!