제2절 JQuery 원리와 핵심 방법
20310 단어 JQuery
JQuery는 js의 new Object에서 생성된 일반 객체입니다.
//JQuery
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<h1>aaaaaaaaaaaaaaah1>
<h1>aaaaaaaaaaaaaaah1>
<h1>aaaaaaaaaaaaaaah1>
<h1>aaaaaaaaaaaaaaah1>
<h1>aaaaaaaaaaaaaaah1>
<script type="text/javascript">
function $(){
obj = new Object();
obj.username= 'usr123';
obj.say=function(){
alert('my name is : '+this.username)
return this;
}
obj.eat = function(){
alert('I am eating !');
}
return obj;
}
//
$().say().eat();
script>
body>
html>둘.js 대상과 jquery 대상의 속성 방법은 공용할 수 있습니까?
공용할 수 없다
셋.js 대상과 jquery 대상은 서로 바꿀 수 있습니까?
능js대상=>jquery대상---$(DOM대상)jquery대상=>js대상---$(DOM대상)[0] 또는 $(DOM대상)을 사용합니다.get(0)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
*{
font-family: ;
}
style>
<script type="text/javascript" src="../jquery-1.8.3.min.js">script>
head>
<body>
<img src="../image/1.jpg" id="imgid" alt="">
<script type="text/javascript">
imgobj = document.getElementById('imgid');
$(imgobj).click(function(){
this.src = '../image/2.jpg';
//$(this).attr({'src':'../image/2.jpg'});
});
script>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
*{
font-family: ;
}
style>
<script type="text/javascript" src="../jquery-1.8.3.min.js">script>
head>
<body>
<h1>aaaaaaaaaah1>
<h1>bbbbbbbbbbh1>
<script type="text/javascript">
arr=$('h1').get();
obj = $('h1').get(0);
alert(arr);
alert(arr[0].outerHTML);
alert(arr[1].outerHTML);
alert(obj.outerHTML);
script>
body>
html>넷.핵심 방법
size()
each()
<html lang="en">
<head>
<meta charset="UTF-8">
<title> title>
<style type="text/css">
*{
font-family: ;
}
style>
<script type="text/javascript" src="../jquery-1.8.3.min.js">script>
head>
<body>
<h1>aaaaaaaaaah1>
<h1>aaaaaaaaaah1>
<h1>aaaaaaaaaah1>
<h1>aaaaaaaaaah1>
<h1>aaaaaaaaaah1>
<script type="text/javascript">
// jQuery length
$('h1').size();
//for
$('h1').each(function(i){
//$('h1').get()[i].setAttribute('num',i+1);// jquery dom , js
//
$(this).attr({'num':i+1});
});
$('h1').click(function(){
//this.innerHTML=this.getAttribute('num');
//
$(this).html($(this).attr('num'));
});
script>
body>
html>index () 는 일치하는 요소를 검색하고 해당 요소의 인덱스 값을 되돌려줍니다. 0부터 계산합니다.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script type="text/javascript" src="../jquery-1.8.3.min.js">script>
head>
<body>
<ul>
<li id="foo">fooli>
<li id="bar">barli>
<li id="baz">bazli>
ul>
<script type="text/javascript">
var a = $('li').index(document.getElementById('bar')); //1， DOM ，
var b = $('li').index($('#bar')); //1， jQuery
var c = $('li').index($('li:gt(0)')); //1， jQuery ，
var d = $('#bar').index('li'); //1， ， #bar li
var e = $('#bar').index(); //1， ， 。
alert(a);
alert(b);
alert(c);
alert(d);
alert(e);
script>
body>
html>데이터 () 데이터는 요소에 데이터를 저장하고 jQuery 대상을 되돌려줍니다
<html lang="en">
<head>
<meta charset="UTF-8">
<title> title>
<style type="text/css">
*{
font-family: ;
}
style>
<script type="text/javascript" src="../jquery-1.8.3.min.js">script>
head>
<body>
<h1>aaaaaaaaaah1>
<h1>aaaaaaaaaah1>
<h1>aaaaaaaaaah1>
<h1>aaaaaaaaaah1>
<h1>aaaaaaaaaah1>
<script type="text/javascript">
$('h1').each(function(i){
$(this).data({'num':i+1});
});
$('h1').click(function(){
$(this).html($(this).data('num'));
});
script>
body>
html>좋은 웹페이지 즐겨찾기
