jquery select

프로그래밍/자바스크립트 2009/05/16 10:30

This is a paragraph of text with class="goofy." It has anexternal link, some $(code), and a same-page link.

  1. list item 1 with dummy link to silly.pdf
  2. list item 2 with class="goofy"
  3. list item 3
  4. list item 4 with silly link to silly.pdf
  •  $('li:eq(0)') gets the first list item
  •  $('li:even') gets all odd-numbered list items (because, in javascript, numbering starts with 0, not 1).
  •  $('li:lt(3)') gets the first 3 list items. "lt" stands for "less than," and it starts counting at 0, not 1.
  •  $('li:not(.goofy)') gets list items 1, 2, and 4, because they're not "goofy."
  •  $('p a[href*=#]') gets any links that are inside a paragraph and have an "href" attribute starting with "#" — containing "#" anywhere. in other words, same-page links. There are problems with trying to identify same-page links this way. I'll write about this in an upcoming entry. Note the space between the "p" and the "a"; that means that the "a" is a descendant of the "p."
  •  $('code, li.goofy') gets all code elements and any list item with a class of "goofy."
  •  $('ol .goofy > strong') gets all strong elements that are children of any element with a class of "goofy" as long as the class somewhere inside (i.e. a descendent) of an ordered list. Notice that the word "item" is not highlighted because, even though it's inside ".goofy," it's not a direct child. Only "goofy" is a direct child of ".goofy." Maybe we should call it "goofy jr."
  •  $('li + li > a[href$=pdf]') gets all links ending in "pdf" that are children of any list item that has another list item as its previous sibling. It won't get the first list item's silly.pdf because that list item has no other list items before it.
  •  $('span:hidden') gets any span element that is hidden.

Note: The selectors used for the toggle buttons are identical to the ones shown next to each button, except that they are preceded by $('#jqdt').find to target the highlighting.

jQuery's selector expressions cover the full range of CSS 1-3, along with basic XPath and a few jQuery-only expressions. For a complete list, visit jquery.com

Next time, I'll explore jQuery functions such as .filter(), prev(), and siblings() that complement the above selector expressions to give you full DOM-traversing power!

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

jquery select  (0) 2009/05/16
jQuery 를 이용한 XML 파싱  (0) 2009/05/16
INPUT TYPE 에서 숫자만 입력받기  (0) 2009/04/10
테두리가 둥근 테이블 만들기  (0) 2008/08/26
Posted by 웹눈
트랙백 0개, 댓글 0개가 달렸습니다.

jQuery 를 이용한 XML 파싱

프로그래밍/자바스크립트 2009/05/16 10:20
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>

 $(document).ready(function() { 
$.get("hello.xml",{},function(xml) {
$("item",xml).each(function(i) {
title = $(this).find("title").text();
$("#contents").append("title");
});
});
 });

  </script>

아래는 <body> 안에 들어갈 div 태그
<div id="contents"></div>

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

jquery select  (0) 2009/05/16
jQuery 를 이용한 XML 파싱  (0) 2009/05/16
INPUT TYPE 에서 숫자만 입력받기  (0) 2009/04/10
테두리가 둥근 테이블 만들기  (0) 2008/08/26
Posted by 웹눈
TAG jQuery
트랙백 0개, 댓글 0개가 달렸습니다.

INPUT TYPE 에서 숫자만 입력받기

프로그래밍/자바스크립트 2009/04/10 23:19
http://happybruce.tistory.com/324?srchid=BR1http://happybruce.tistory.com/324

위 링크 참조

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

jQuery 를 이용한 XML 파싱  (0) 2009/05/16
INPUT TYPE 에서 숫자만 입력받기  (0) 2009/04/10
테두리가 둥근 테이블 만들기  (0) 2008/08/26
체크시 오늘 하루동안 새창 열지 않기  (0) 2008/08/25
Posted by 웹눈
TAG INPUT
트랙백 0개, 댓글 0개가 달렸습니다.

테두리가 둥근 테이블 만들기

프로그래밍/자바스크립트 2008/08/26 17:00
이미지가 필요없이 테두리가 둥근 테이블을 만드는 HTML 소스입니다.

1. 먼저 <html>과 </html> 사이에 다음의 소스를 삽입합니다.

<script>
function roundTable(objID) {
var obj = document.getElementById(objID);
var Parent, objTmp, Table, TBody, TR, TD;
var bdcolor, bgcolor, Space;
var trIDX, tdIDX, MAX;
var styleWidth, styleHeight;

// get parent node
Parent = obj.parentNode;
objTmp = document.createElement('SPAN');
Parent.insertBefore(objTmp, obj);
Parent.removeChild(obj);

// get attribute
bdcolor = obj.getAttribute('rborder');
bgcolor = obj.getAttribute('rbgcolor');
radius = parseInt(obj.getAttribute('radius'));
if (radius == null || radius < 1) radius = 1;
else if (radius > 6) radius = 6;

MAX = radius * 2 + 1;

/*
create table {{
*/
Table = document.createElement('TABLE');
TBody = document.createElement('TBODY');

Table.cellSpacing = 0;
Table.cellPadding = 0;

for (trIDX=0; trIDX < MAX; trIDX++) {
TR = document.createElement('TR');
Space = Math.abs(trIDX - parseInt(radius));
for (tdIDX=0; tdIDX < MAX; tdIDX++) {
TD = document.createElement('TD');

styleWidth = '1px'; styleHeight = '1px';
if (tdIDX == 0 || tdIDX == MAX - 1) styleHeight = null;
else if (trIDX == 0 || trIDX == MAX - 1) styleWidth = null;
else if (radius > 2) {
if (Math.abs(tdIDX - radius) == 1) styleWidth = '2px';
if (Math.abs(trIDX - radius) == 1) styleHeight = '2px';
}

if (styleWidth != null) TD.style.width = styleWidth;
if (styleHeight != null) TD.style.height = styleHeight;

if (Space == tdIDX || Space == MAX - tdIDX - 1) TD.style.backgroundColor = bdcolor;
else if (tdIDX > Space && Space < MAX - tdIDX - 1) TD.style.backgroundColor = bgcolor;

if (Space == 0 && tdIDX == radius) TD.appendChild(obj);
TR.appendChild(TD);
}
TBody.appendChild(TR);
}

/*
}}
*/

Table.appendChild(TBody);

// insert table and remove original table
Parent.insertBefore(Table, objTmp);
}
</script>


2. <body>와 </body>사이에 다음의 소스를 삽입합니다.
<table id="ta" width="300" height="100" border="0" radius="3" rborder="#999999" rbgcolor="#F8F8F8">
<tr>
<td valign="top">테스트입니다</td>
</tr>
</table>
<script>roundTable("ta");</script>

<head></head>안에 들어가는 내용은 수정할 필요가 없습니다. <body></body>안에 들어가는 소스내용만 입맛에 따라 바꾸어주세요.

* 테이블 테그 안의 가로 크기와 세로 크기를 수정합니다.
  width="300" height="100"

* 테이블 테두리 색상과 테이블 안쪽 색상을 정합니다.
   rborder="#999999" rbgcolor="#F8F8F8"

* 테이블 둥근 테두리 정도 (값이 클수록 더욱 둥글 둥글 해집니다)
   radius="3"

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

INPUT TYPE 에서 숫자만 입력받기  (0) 2009/04/10
테두리가 둥근 테이블 만들기  (0) 2008/08/26
체크시 오늘 하루동안 새창 열지 않기  (0) 2008/08/25
링크시 생기는 테두리 한번에 없에는 자바스크립트  (6) 2008/08/22
Posted by 웹눈
TAG 웹팁
트랙백 1개, 댓글 0개가 달렸습니다.

체크시 오늘 하루동안 새창 열지 않기

프로그래밍/자바스크립트 2008/08/25 12:52
체크하면 오늘 하루동안 팝업창 띄우지 않는 자바스크립트 소스입니다.

1. 먼저, 새창을 띄울 페이지의 <html>과 </html> 사이에 다음 소스를 삽입합니다.
<script language="javascript">
 
function getCookie(name) {
var Found = false
var start, end
var i = 0
 
while(i <= document.cookie.length) {
start = i
end = start + name.length
 
if(document.cookie.substring(start, end) == name) {
Found = true
break
}
i++
}
 
if(Found == true) {
start = end + 1
end = document.cookie.indexOf(";", start)
if(end < start)
end = document.cookie.length
return document.cookie.substring(start, end)
}
return ""
}
// 이부분 까지는 수정할 필요 없습니다.
 
function openPopup()
{
var noticeCookie=getCookie("CookieName");  // 쿠키네임 지정(아무거나 영어로)
if (noticeCookie != "no")
window.open('팝업창 웹페이지 주소','팝업창 이름','width=350,height=400,top=50,left=150');
}
openPopup();
</SCRIPT>

2. 다음에는 팝업될 창의 <head>와</head> 사이에 다음의 소스를 삽입합니다.
<script language="JavaScript">  
function setCookie( name, value, expiredays )
{
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
 
function closeWin()  {
{
if ( document.cnjform.notice.checked )  // 폼네임 cnjform 은 동일해야 합니다.
setCookie("CookieName", "no" , 1);   // 위에서 지정한 쿠키네임과 일치 해야 합니다.
}
top.close();
}
</script>

3. 그리고 팝업될 창의 <body>와 </body> 사이에 다음의 소스를 삽입합니다.

<table border="1" cellspacing="0" width="276" bordercolor="#FCB0D8" bordercolordark="white" bordercolorlight="#66CCFF">
    <tr>
        <td width="270" height="25" bgcolor="#FFE6F2">
            <p align="center"><span style="font-size:9pt;"><img src="1202.gif" align="absmiddle" width="30" height="17" border="0">
            <font color="red"><b> 공지사항 </b></font><img src="1202.gif" align="absmiddle" width="30" height="17" border="0"></span></p>
        </td>
    </tr>
    <tr>
        <td width="270" height="259">
            <p align="center"><span style="font-size:9pt;">여기다가 공지사항을
            <br>쓰시면 됩니다.</span></p>
        </td>
    </tr>    <tr>
<td width="270" height="9" bgcolor="#99CCFF">
<form name="cnjform">
                <p align="center"><span style="font-size:9pt;"><input type="checkbox" name="notice" onclick="closeWin()"> 오늘 하룻동안 페이지를 열지 않습니다.</span>
</form>
       </td>
    </tr>
</table>

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

테두리가 둥근 테이블 만들기  (0) 2008/08/26
체크시 오늘 하루동안 새창 열지 않기  (0) 2008/08/25
링크시 생기는 테두리 한번에 없에는 자바스크립트  (6) 2008/08/22
웹사이트 및 블로그에 즐겨찾기추가 버튼 달기(파이어폭스,IE 작동)  (1) 2008/08/21
Posted by 웹눈
TAG 웹공부
트랙백 0개, 댓글 0개가 달렸습니다.

링크시 생기는 테두리 한번에 없에는 자바스크립트

프로그래밍/자바스크립트 2008/08/22 16:28
웹이나 블로그에서 링크를 클릭시 점선으로 된 테두리가 생기는 현상이 나타납니다.
이런 현상은 외관상으로도 별로 보기 안좋습니다.

이 점선 테두리를 없에는 방법중에서도 일일이 링크마다 소스를 삽입하지 않고 한번에 제거할수 있는
스크립스 소스가 있네요.

<script language="JavaScript">
function bluring(){
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();
}
document.onfocusin=bluring;
</script>

위의 소스를 <head> 와 </head> 사이에 삽입하면 됩니다.

다른 방법은 style.css 에 소스를 아래의 태그를 추가하는 방법입니다.

<style> a {selector-dummy : expression(this.hideFocus=true);} </style>

위의 한줄 추가만을도 모든 링크에 생기는 테두리를 제거할수 있습니다.

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

테두리가 둥근 테이블 만들기  (0) 2008/08/26
체크시 오늘 하루동안 새창 열지 않기  (0) 2008/08/25
링크시 생기는 테두리 한번에 없에는 자바스크립트  (6) 2008/08/22
웹사이트 및 블로그에 즐겨찾기추가 버튼 달기(파이어폭스,IE 작동)  (1) 2008/08/21
Posted by 웹눈
TAG HTML, JavaScript, 블로그팁, 웹팁
트랙백 0개, 댓글 6개가 달렸습니다

웹사이트 및 블로그에 즐겨찾기추가 버튼 달기(파이어폭스,IE 작동)

프로그래밍/자바스크립트 2008/08/21 21:46
웹사이트나 블로그에 '즐겨찾기추가' 버튼을 달아보도록 하겠습니다.

먼저 <head>와 </head> 태그 사이에 아래의 소스를 삽입하여 줍니다.

<!-- 즐겨찾기 추가 스크립트-->
<script type="text/javascript">
function bookmarksite(title,url) {
   if (window.sidebar) // firefox
   window.sidebar.addPanel(title, url, "");
   else if(window.opera && window.print)

   { // opera
      var elem = document.createElement('a');
      elem.setAttribute('href',url);
      elem.setAttribute('title',title);
      elem.setAttribute('rel','sidebar');
      elem.click();
   }

   else if(document.all) // ie
   window.external.AddFavorite(url, title);
}
</script>
<!--즐겨찾기 추가 끝-->

그다음에 <body> 와 </body> 태그 사이에 즐겨찾기추가 버튼을 삽입할 적절한곳에 아래의 태그를 삽입합니다.

<a href="javascript:bookmarksite('사이트명', '사이트주소')">즐겨찾기추가</a>

'즐겨찾기추가' 텍스트 대신 이미지를 삽압하고 싶은 경우

<a href="javascript:bookmarksite('사이트명', '사이트주소')"><img src="이미지경로"></a>

굷게 표시된 부분만 적절히 바꾸어 주시면 됩니다.
위 소스를 삽입해주시면 됩니다.

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

테두리가 둥근 테이블 만들기  (0) 2008/08/26
체크시 오늘 하루동안 새창 열지 않기  (0) 2008/08/25
링크시 생기는 테두리 한번에 없에는 자바스크립트  (6) 2008/08/22
웹사이트 및 블로그에 즐겨찾기추가 버튼 달기(파이어폭스,IE 작동)  (1) 2008/08/21
Posted by 웹눈
TAG 자바스크립트, 즐겨찾기추가버튼
트랙백 0개, 댓글 1개가 달렸습니다.