프로그래밍/제이쿼리(jQuery) 반응형 5 [jQuery] 체크박스 선택된 값 가져오기 plus input hidden val 값 추가로 가져오기(feat.형제태그 값(val) 찾기) 1. 체크박스 선택된 값 가져오기 plus input hidden val 값 추가로 가져오기(feat. 형제태그 값(val) 찾기) 개발을 하던도중 체크박스에 체크된 값뿐 아니라 input hidden 태그를 각행에 추가해서 그 추가 값까지 같이 가져와야 되는 경우가 생겨서 기록용으로 작성해 봅니다. 바쁜 분들을 위해서 먼저 소스를 보겠습니다. 1행 입니다. 2행 입니다. 3행 입니다. 4행 입니다. 5행 입니다. 실행 결과 입니다. 크롬에서 실행 시 해당화면을 console 탭에서 아래에 결과를 확인하 실 수 있습니다. 2. 작성한 소스 간단한 설명 -> jquery를 사용하게 위해서 cdn으로 설정을 불러옵니다. 직접적으로 파일을 다운로드해서 상대경로로 해서 사용하는 방법이 있지만 편의상 cdn 방식.. 2023. 4. 16. [jQuery]제이쿼리 자주쓰는 함수 모음2 스타일 메서드 메소드 설명 $(선택자).css("스타일 속성 이름") $(선택자).css(["스타일 속성 이름", ...]) 해당 선택자에 원하는 스타일 부여 $(선택자).css("스타일 속성 이름",값) $(선택자).css({스타일 속성 이름:값, ...}) 해당 선택자에 원하는 스타일 속성 값 설정 $(선택자).addClass("클래스 이름") 해당 선택자에 클래스 추가 $(선택자).removeClass("클래스 이름") 해당 선택자 클래스 삭제 속성 메서드 메소드 설명 $(선택자).attr("속성이름") $(선택자).data("data-속성이름") 해당 선택자에 속성값 구하기 $(선택자).attr("속성이름","값") $(선택자).data("data-속성이름","값") 해당 선택자에 속성값 설정하기.. 2021. 9. 30. [jQuery]제이쿼리 자주쓰는 함수모음1 제이쿼리(jQuery) 선택자 선택자명 설명 $("tag") tag라는 이름의 모든 태그 요소를 선택 $(".class") class라는 클래스명의 모든 클래스 요소를 선택 $("#id") id라는 아이디명의 아이디요소를 선택(한페이지에 1개만 가능) $("div li") div에 있는 li모두 선택 $("div > p") div의 p태그라는 직계자식을 선택 $(this) 현재선택중인 요소를 가리킴 ※ 선택자 태그 입력 시 홑따옴표(') 또는 쌍따옴표("") 모두 입력가능 $('') 또는 $("") 제이쿼리(jQuery) 메소드 모음 분류 메소드 설명 일반노드찾기 $(선택자).length 찾은개수 구하기 $(선택자).eq(index) n번째 노드 접근하기 $(선택자).get(index) $(선택자)[in.. 2021. 9. 28. Uncaught ReferenceError: $ is not defined Uncaught ReferenceError: $ is not defined 개발을 하다가 보면 Uncaught ReferenceError: $ is not defined 이런 에러들을 종종 보게 됩니다. 이건 jquery가 제대로 import 되지 않았다는 뜻입니다. jquery를 선언해주시면 해결됩니다. 인터넷이 되는 환경이라면 CDN으로 설정 혹은 직접적으로 라이브러리를 다운로드하여서 선언하는 방법이 있습니다. 먼저 아래처럼 CDN으로 설정하는 방법이 있습니다. 그리고 인터넷이 안 되는 환경이라면 라이브러리를 직접 받아서 설정해주시는 방법이 있습니다. jQuery라이브러리 다운로드와 설정 방법 1. 라이브러리 다운로드를 위한 사이트 이동 jquery 다운로드 사이트 이동 2. Download 메뉴 클.. 2021. 7. 8. [jQuery] 제이쿼리 .on('click') vs .click() 차이점 제이쿼리. on('click') vs. click() 차이점 $(".btn_alert").on("click", function(){ alert("test"); return; }); . on('click')과. click()의 차이는. on('click')이 메모리를 덜먹고 동적으로 생성되는 요소들이 잘 작동되는 점이 다릅니다. 일단 테스트를 위해 소스를 작성해 보겠습니다. Add new alert! ▼ 아래의 클릭 이벤트를 실행하게 된다면 버튼이 추가로 생성될 겁니다. alert! 버튼이 추가로 생성되는 게 보이실 겁니다. 클릭 사용 시 : 1. 많은 요소들은 많은 개별 핸들러를 필요로 해서 메모리 사용량이 증가됨. 2. 돌적으로 추가된 요소들은 기존의 핸들러들이 안 먹힘. 예를 들어. 위의 html에서.. 2021. 4. 26. 이전 1 다음
