jquery this 값 가져오기

Jquery 2018. 10. 26. 17:14
SMALL
.
      $( ".class ).click(function() {
    
         alert($(this).index());
      }

몇번째 인지 알수있다


LIST

'Jquery' 카테고리의 다른 글

Jquery removeClass 단일,여러개 클래스 삭제  (0) 2018.11.05
jquery 부모 객체, 자식 객체, 접근자  (0) 2018.10.29
Jquery a 태그 THIS 값 받아오기  (0) 2018.10.26
jquery 부모 창 데이터 받아오기  (0) 2018.10.04
alert 창 줄 개행하기 , 줄바꿈하기  (0) 2018.09.10
블로그 이미지

SeoHW

,

Jquery a 태그 THIS 값 받아오기

Jquery 2018. 10. 26. 11:51
SMALL

onclick으로 자바스크립트 함수넘길때 주의점.

 

<script type="text/javascript">

function test(id){

  id.setAttribute('class','on');//속성 : class 값으로 on 추가

  alert(id);

  return false;

}

</script>

 

<a href="javascript:;" onclick="test(this);">dd</a> //이벤트객체 선택가능 그리고 a의 href값을 id로 넘겨준다.

 <a href="javascript:test(this);">dd</a> //this값을 받아오지못함

<p onclick="test(this);">dd</p>//이벤트객체 선택가능


출처:https://m.blog.naver.com/

LIST

'Jquery' 카테고리의 다른 글

jquery 부모 객체, 자식 객체, 접근자  (0) 2018.10.29
jquery this 값 가져오기  (0) 2018.10.26
jquery 부모 창 데이터 받아오기  (0) 2018.10.04
alert 창 줄 개행하기 , 줄바꿈하기  (0) 2018.09.10
팝업청 오픈시 위치설정  (0) 2018.08.20
블로그 이미지

SeoHW

,

jquery 부모 창 데이터 받아오기

Jquery 2018. 10. 4. 16:50
SMALL

jquery 부모 창 데이터 받아오기


- id 접근시

$(#id ,  opener,document).val();

※ opnner,document 쓰시면 부모창 data 접근이 가능합니다^^



- name 접근시

$(#id [name=name],  opener,document).val();




- data가 많은경우 index로 받고싶은 경우

$(#id ,  opener,document).eq(index).val();

※ eq(index) 사용시 접근이 가능합니다





감사합니다^^

LIST

'Jquery' 카테고리의 다른 글

jquery this 값 가져오기  (0) 2018.10.26
Jquery a 태그 THIS 값 받아오기  (0) 2018.10.26
alert 창 줄 개행하기 , 줄바꿈하기  (0) 2018.09.10
팝업청 오픈시 위치설정  (0) 2018.08.20
select box disabled 하기 (선택안되게하기)  (0) 2018.08.17
블로그 이미지

SeoHW

,

alert 창 줄 개행하기 , 줄바꿈하기

Jquery 2018. 9. 10. 10:46
SMALL

얼랏창 알림에 줄바꿈이 필요할 때가 있습니다

그럴땐 아래와 같이 사용하시면 됩니다

exam) alert("안녕하세요 \n 블로그입니다");

결과 : 


안녕하세요

블로그입니다 


이런식으로 나옵니다

문자열\n문자열\n

"\n" 을 여러 개 넣으면 여러줄로 줄바꿈이 됩니다.

LIST

'Jquery' 카테고리의 다른 글

Jquery a 태그 THIS 값 받아오기  (0) 2018.10.26
jquery 부모 창 데이터 받아오기  (0) 2018.10.04
팝업청 오픈시 위치설정  (0) 2018.08.20
select box disabled 하기 (선택안되게하기)  (0) 2018.08.17
jquery 제이쿼리 after() 뒤에추가하기  (0) 2018.02.21
블로그 이미지

SeoHW

,

팝업청 오픈시 위치설정

Jquery 2018. 8. 20. 09:50
SMALL


 left와 top 값을 0 으로 주시면 됩니다.





<script language=javascript>


function popConcert(){ 
   noticeWindow  = window.open('http://nibr.go.kr/exhibit/reserve_imsi/reserve_guide.jsp','bluesky','width=700,height=760,top=0,left=200,scrollbars=yes' );
noticeWindow.opener = self;
}
</script>

LIST

'Jquery' 카테고리의 다른 글

jquery 부모 창 데이터 받아오기  (0) 2018.10.04
alert 창 줄 개행하기 , 줄바꿈하기  (0) 2018.09.10
select box disabled 하기 (선택안되게하기)  (0) 2018.08.17
jquery 제이쿼리 after() 뒤에추가하기  (0) 2018.02.21
jquery 제이쿼리 자식 노드 다루기  (0) 2018.02.21
블로그 이미지

SeoHW

,

select box disabled 하기 (선택안되게하기)

Jquery 2018. 8. 17. 09:35
SMALL

select box disabled 하기 선택안되게하기



네임 접근

$("select[name=네임]").attr("disabled", true);


ID접근

$("#아이디").attr("disabled", true);



다시 활성화 하고싶을시


$("#아이디").removeAttr("disabled"); 


하시면 됩니다^^

LIST

'Jquery' 카테고리의 다른 글

alert 창 줄 개행하기 , 줄바꿈하기  (0) 2018.09.10
팝업청 오픈시 위치설정  (0) 2018.08.20
jquery 제이쿼리 after() 뒤에추가하기  (0) 2018.02.21
jquery 제이쿼리 자식 노드 다루기  (0) 2018.02.21
JSP 파라미터 url 삭제하기  (0) 2018.01.31
블로그 이미지

SeoHW

,

jquery 제이쿼리 after() 뒤에추가하기

Jquery 2018. 2. 21. 13:55
SMALL

.after()

원문 링크  http://api.jquery.com/after/

.after( content, [content] )Returns : jQuery

개요 : 어떤 요소 뒤에 새로운 요소를 추가합니다.

  • .after( content, [content] )
  • content 추가될 HTML 문자열, DOM 요소, 또는 jQuery 객체
  • content 추가될 하나 이상 복수개의 DOM 요소들, 요소 배열, HTML 문자열들, 또는 jQuery 객체들
  • after( function(index) )
  • function(index) 추가될 HTML 문자열을 반환하는 함수

HTML 을 보시죠.

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

아래와 같은 스크립트를 적용해 볼까요.

$('.inner').after('<p>Test</p>');

아래와 같은 결과가 됩니다. 각 inner 클래스를 가진 <div> 요소들 뒤에 새로운 내용(content)이 추가됩니다.

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

DOM 에 있는 특정 요소를 선택해서 다른 요소 뒤쪽에 위치 시킬수도 있습니다. 아래 예제를 보시죠.

$('.container').after($('h2'));

만일 이런 방법으로 사용한다면 선택된 해당 요소는 복사가 되는 것이 아닌 이동처리가 됩니다. 아래 결과를 보시면 명확하실 겁니다.

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>

만일 하나 이상의 타겟 요소가 있다면 첫번째는 이동 처리되고 그 다음 작업부터는 복사가 되어 처리 된답니다.

연결이 끊긴 DOM 노드를 삽입(Inserting Disconnected DOM nodes)

jQuery 1.4 버젼에 와서 .before() 와 .after() 함수로 연결이 끊긴 DOM 노드 작업을 할 수 있게 되었습니다. 저도 뭔 말인지 모르겠습니다. 다음 예제를 보시죠.

$('<div/>').after('<p></p>');

이 스크립트의 결과로 jQuery 집합은 div 와 paragraph 요소를 가지게 됩니다. 이 집합에 추가적인 조작을 하여 문서에 적용시킬 수 있습니다. 아래처럼 말이죠.

$('<div/>').after('<p></p>').addClass('foo')
  .filter('p').attr('id', 'bar').html('hello')
.end()
.appendTo('body');

결과는 닫힘 </body> 태그 바로 직전에 스크립트의 결과가 삽입됩니다. 아래와 같은 HTML 태그가 결과입니다.

 
<div class="foo"></div>
<p class="foo" id="bar">hello</p>

뭔가 번역을 하긴 했는데 이 내용과 위 내용의 소제목이 뭔 상관이 있는지 잘 모르겠는데요. ㅡㅡ;;;

함수 사용하기 (Passing a Function)

jQuery 1.4 버젼에 와서 .after() 함수는 인자로 삽입될 요소를 반환하는 함수를 사용할 수 있게 되었습니다.

$('p').after(function() {
  return '<div>' + this.className + '</div>';
});

위 예제의 결과는 p태그 후에 <div> 를 추가하는데 p태그의 클래스명(className)을 고대로 가져다가 사용할 수 있는 내용입니다. 뭐 예제가 중요한게 아니라 이것처럼 함수도 인자로 집어넣을 수 있다는 얘기입니다. 함수 내용에 신경 너무 쓰지들 마셔요.

추가 인자들(Additional Arguments)

여러개의 인자를 넘겨받아 새로운 요소를 추가하는 함수들은 .prepend(), .before(), .after() 와 같이 비슷한 함수들이 있습니다. 인자로는 DOM elements, jQuery objects, HTML 문자열들, 그리고 DOM elements로 구성된 배열 등이 올 수 있습니다.

예를 들어, 새로운 2개의 <div>와 이미 존재하는 <div>를 첫번째 p요소 다음에 추가하는 내용입니다.

var $newdiv1 = $('<div id="object1"/>'),
    newdiv2 = document.createElement('div'),
    existingdiv1 = document.getElementById('foo');
 
$('p').first().after($newdiv1, [newdiv2, existingdiv1]);

.after() 함수는 여러개의 인자를 가질 수 있기 때문에, 세가지 방법을 통해 <div> 를 만들어서 붙여넣을 수 있습니다. $('p').first().after($newdiv1, newdiv2, existingdiv1) 이런 것처럼 말이죠.

예 제  
p 태그 뒤에 HTML 문자열을 사용해 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>I would like to say: </p>
<script>$("p").after("<b>Hello</b>");</script>
 
</body>
</html>

미리보기

em 태그의 title 속성의 값을 찾아서 div 에 표시한 것을 볼 수 있습니다.

 

예 제  
p 태그 뒤에 텍스트 노드를 만들어 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>I would like to say: </p>
<script>$("p").after( document.createTextNode("Hello") );</script>
 
</body>
</html>

미리보기

img 태그에 src, title, alt 속성을 부여하고 있습니다. 재미있네요. map을 사용해서 추가하고 있는 예제입니다.

 

예 제  
p 태그 뒤에 jQuery 객체를 사용하여 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <b>Hello</b><p>I would like to say: </p>
<script>$("p").after( $("b") );</script>
 
</body>
</html>

미리보기

 

아주 간단하지만 정말 유용한 함수네요. 잘 사용하세요. 진짜 사용할 곳이 많을 것 같습니다.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.



출처: http://findfun.tistory.com/234 [즐거움을 찾자 Find Fun!!]

LIST

'Jquery' 카테고리의 다른 글

팝업청 오픈시 위치설정  (0) 2018.08.20
select box disabled 하기 (선택안되게하기)  (0) 2018.08.17
jquery 제이쿼리 자식 노드 다루기  (0) 2018.02.21
JSP 파라미터 url 삭제하기  (0) 2018.01.31
jquery(.before.after,.append,prepend) 사용기  (0) 2018.01.30
블로그 이미지

SeoHW

,

jquery 제이쿼리 자식 노드 다루기

Jquery 2018. 2. 21. 13:46
SMALL

1. 노드 찾기

 - 태그 이름으로 노드 찾기 :  $("태그이름"),   $("선택자")

 - 클래스 이름으로 노드 찾기 : $(".클래스이름")

 - ID로 노드 찾기 : $("선택자")

 - 속성으로 노드 찾기 : $("[속성이름=값]")

 - 찾은 요소 개수 구하기 :  .size()    ,     .length

 - 찾은 요소 n번째 접근하기 : .eq(index)    ,    .each(function(index){});

 - 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자")

 - 찾은 요소에서 특정 자식요소만 찾기 :  .find("선택자")

2. 자식 노드 찾기 

 - 전체 자식 노드 찾기
    -- 텍스트 노드 포함 전체 자식 노드 찾기 :  $("선택자").contents()
    -- 텍스트 노드 제외한 전체 자식 노드 찾기 : $("선택자").children("선택자")

 - n번째 자식 노드 접근
    -- $("선택자").children().eq(N)
    -- $("선택자").children(":eq(N)")

 - 첫번째 자식 노드 접근
    -- $("선택자").children().first()
    -- $("선택자").children(":first")
    -- $("선택자").children().eq(0)
    -- $("선택자").children(":eq(0)")

 - 마지막 자식 노드 접근
    -- $("선택자").children().last()
    -- $("선택자").children(":last")
 
3. 부모 노드 찾기
 
 - 바로 위의 부모 : $("선택자").parent()

 - 모든 부모 찾기
    -- $("선택자").parents()  모든 부모
 - 모든 부모 중 선택자에 해당하는 부모 찾기
    -- $("선택자").parents("선택자")

4. 형제 노드 찾기

 - 이전 형제 노드 찾기
    -- $("선택자").prev()
    -- $("선택자").prevAll("선택자");

 - 다음 형제 노드 찾기
    -- $("선택자").next()
    -- $("선택자").nextAll("선택자");

5. 노드 생성,추가,이동,삭제

 - 생성
    -- $("노드")
    -- $("선택자").html("<노드>...</노드>")
    -- $("노드").clone()

 - 추가
    -- $기준노드.append($추가노드)
    -- $추가노드.appendTo($기준노드)
    -- $기준노드.prepend($추가노드)  
    -- $추가노드.prependTo($기준노드)
    -- $추가노드.insertBefore($기준노드)
    -- $기준노드.before($추가노드)
    -- $추가노드.insertAfter($기준노드)
    -- $기준노드.after($추가노드)

 - 삭제
    -- $("선택자").remove()

 - 이동
    -- $기준노드.append($이동노드)  
    -- $이동노드.appendTo($기준노드)
    -- $이동노드.insertBefore($기준노드)
    -- $기준노드.before($이동노드)
    -- $이동노드.insertAfter($기준노드)   
    -- $기준노드.after($이동노드)

6. 텍스트 노드 다루기

 - 텍스트 노드 생성 : $("텍스트")
 
 - 텍스트 노드 추가 : $기준노드.append("텍스트")

 - 텍스트 노드 변경 : $기준노드.text("새로운 텍스트")

LIST

'Jquery' 카테고리의 다른 글

select box disabled 하기 (선택안되게하기)  (0) 2018.08.17
jquery 제이쿼리 after() 뒤에추가하기  (0) 2018.02.21
JSP 파라미터 url 삭제하기  (0) 2018.01.31
jquery(.before.after,.append,prepend) 사용기  (0) 2018.01.30
정규식 표현 전/후방 탐색  (0) 2018.01.24
블로그 이미지

SeoHW

,

JSP 파라미터 url 삭제하기

Jquery 2018. 1. 31. 16:09
SMALL

보통은 주소창에 parameter 값이 다음과 같이 표출된다.

https://lahuman.github.io/posts/?lang=ko

이때 해당 주소에서 parameter 값만 제거 하고 싶을 경우 다음의 스크립트를 이용하면 간단히 처리 할 수 있다.

history.replaceState({}, null, location.pathname);

parameter가 제거된 값은 다음과 같다.

https://lahuman.github.io/posts/

LIST

'Jquery' 카테고리의 다른 글

jquery 제이쿼리 after() 뒤에추가하기  (0) 2018.02.21
jquery 제이쿼리 자식 노드 다루기  (0) 2018.02.21
jquery(.before.after,.append,prepend) 사용기  (0) 2018.01.30
정규식 표현 전/후방 탐색  (0) 2018.01.24
jquery 팁  (0) 2018.01.22
블로그 이미지

SeoHW

,

jquery(.before.after,.append,prepend) 사용기

Jquery 2018. 1. 30. 11:49
SMALL

페이지 로드완료후에 이미지를 순차적으로 로드한다던지 페이지마다 다른 내용을 보여줘야 할때 등

동적으로 html요소를 추가해야 할때 아주 유용하게 사용되는 함수들 입니다.

 

before : 선택한 요소의 앞에 내용 삽입    ( 찾는 앞에 )

after : 선택한 요소의 뒤에 내용 삽입      ( 찾는 뒤에 )

prepend : 선택한요소의 자식요소 앞에 내용삽입   ( 데이터 맨 앞에)

append : 선택한요소의 자식요소 뒤에 내용삽입   (데이터 맨 뒤에)

 

 

 

 

 

예제코드

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>홈페이지제작업체 - 홈피사랑 HOMPYLOVE</title>
<style>
div{border:1px solid #000000; margin:3px; width:200px;}
div p{font-weight:bold;}
div p.red{background-color:red;}
div p.blue{background-color:blue;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<script>
$(document).ready(function() {
 $(".t01 p").before("<p class='blue'>test</p>");
 $(".t02 p").after("<p class='blue'>test</p>");
 $(".t03").append("<p class='blue'>test</p>");
 $(".t04").prepend("<p class='blue'>test</p>");
});
</script>

</head>
<body>
 <div class="t01"><p class="red">test01</p></div>
 <div class="t02"><p class="red">test02</p></div>
 <div class="t03"><p class="red">test03</p></div>
 <div class="t04"><p class="red">test04</p></div>
</body>
</html>


출처 : http://hompylove.com/system/bbs/board.php?bo_table=tip&wr_id=22

LIST

'Jquery' 카테고리의 다른 글

jquery 제이쿼리 자식 노드 다루기  (0) 2018.02.21
JSP 파라미터 url 삭제하기  (0) 2018.01.31
정규식 표현 전/후방 탐색  (0) 2018.01.24
jquery 팁  (0) 2018.01.22
ajax popup 창 띄우기  (0) 2018.01.18
블로그 이미지

SeoHW

,

공지사항

글 보관함

달력

«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

티스토리툴바