>웹 프론트엔드 >JS 튜토리얼 >jQuery 값 획득 및 할당의 기본 방법_jquery

jQuery 값 획득 및 할당의 기본 방법_jquery

WBOY
WBOY원래의
2016-05-16 16:54:001103검색

/*TEXT.AREATEXT 값 가져오기*/
var textval = $("#text_id").attr("value")
//또는
var textval = $("#text_id" ) .val();
/*라디오 버튼 값 가져오기*/
var valradio = $("input[@type=radio][@checked]").val()
/* (items)라는 이름의 라디오 선택 항목 그룹 값 가져오기*/
var item = $('input[@name=items][@checked]').val()/* 체크박스 값 가져오기*/
var checkboxval = $("#checkbox_id").attr("value")
/*드롭다운 목록 값 가져오기*/
var selectval = $( '# select_id').val();

//텍스트 상자, 텍스트 영역:
$("#text_id").attr("value",'');//내용 지우기
$("#text_id").attr("value",'test');//내용 채우기
//다중 선택 상자 확인란:
$("#chk_id").attr(" selected", '');//선택 취소
$("#chk_id").attr("checked",true);//선택
if($("#chk_id").attr( 'checked')==true) //선택 여부 확인

//단일 선택 그룹 라디오:

$("input[@type=radio]").attr( "checked ",'2');//값=2인 항목을 현재 선택된 항목으로 설정

//드롭다운 상자 선택:
$("#select_id").attr( "value",'test ');//value=test로 설정한 항목이 현재 선택된 항목입니다
$("
testtest2$("#select_id").empty();//드롭다운 상자 지우기

선택한 라디오 세트의 값 가져오기 명명된 항목(항목)
var item = $ ('input[@name=items][@checked]').val();//선택하지 않은 경우 val() = 정의되지 않음
다음 텍스트 가져오기 선택한 항목
var item = $( "select[@name=items] option[@selected]").text()
선택 드롭다운 상자의 두 번째 요소는 현재 선택된 값입니다. 🎜>$('#select_id')[0].selectedIndex = 1;
라디오 라디오 그룹의 두 번째 요소는 현재 선택된 값입니다
$('input[@name=items]').get (1).checked = true;

//양식 재설정
$("form").each(function(){
.reset();
}); >
1.
$( "#myid") 요소를 선택하면 document.getElementById("myid")와 동일한 효과가 있지만 작성되는 문자가 훨씬 적습니다.

jQuery 개체를 html 요소로 변환하려면 0번째 요소만 가져오면 됩니다. 예를 들어 $("#myid")는 jQuery 개체를 반환하고 $("#myid")[0]는 html 요소를 반환합니다.

img 요소를 모두 선택한 경우 다음과 같이 작성합니다. $("img")

class="TextBox"인 div 요소를 선택한 경우(

), 다음과 같이 작성합니다: $("div.TextBox")

myattr 속성이 있는 요소를 선택합니다. $("div[myattr]")
myattr 속성이 있는 요소를 선택하고, 속성 값은 myclass와 같습니다. $("div[myattr='myclass']") 요소
속성은 [myattr!='myclass']와 동일하지 않습니다.
속성은 my [myattr^=로 시작합니다. 'my']
속성은 클래스 종료 [myattr$='class']로 시작합니다.
속성은 세 문자 cla [myattr*='cla']를 포함합니다.

선택 항목이 반환되는 경우 여러 요소가 있고 각 요소를 반환하려는 경우 요소에 특정 속성을 적용하려면
$("div").each(function()
{
$(this)를 작성하면 됩니다. css("배경색", "# F00″);
alert($(this).html());
$(this).width(”200px”);
});

2.이벤트
페이지에 onload 이벤트 처리 방법 추가
$(function()
{
alert("페이지 구조가 로드되었지만 일부 그림이 로드되지 않을 수 있습니다. 아직 로드되지 않았습니다(일반적으로 이 이벤트로 충분합니다) )");
});

여러 개의 onload 이벤트 처리 메서드를 페이지에 바인딩할 수 있습니다
$(function()
{
alert("내가 먼저 처형되었습니다" );
})

$(function()
{
alert("내가 두 번째로 처형되었습니다");
} );

Tie 특수 이벤트 정의
$("#myid").keydown(function()
{
alert("keydown 이벤트 트리거됨");
});

이러한 일반적으로 사용되는 이벤트와 일반적이지 않은 이벤트 외에도 바인드 메소드를 통해 바인딩해야 합니다.

3. 요소 속성/메서드
요소의 높이를 가져옵니다. $(”#myid ”).height()
요소의 위치를 ​​가져옵니다. $("#myid").offset()은 요소 위치의 상단을 가져오면 $("#myid")를 반환합니다. ).offset().top, 왼쪽으로 가면 $( "#myid").offset().left
요소의 innerHTML 가져오기 $("#myid").html()
요소의 innerText 가져오기, $("#myid").text( )
텍스트 상자의 값 가져오기, $("#myid").val()
요소의 속성 가져오기 element, $("#myid").attr("myattribute")

위 메소드는 기본적인 특징을 가지고 있습니다. 즉, 값을 표현하기 위해 매개변수를 사용하지 않고, 설정을 표현하기 위해 매개변수를 사용한다는 것입니다. 값(오프셋 제외), 예:
$(”#myid”).height(”20″)
$("#myid").html("asdasd")
$("#myid").val("asdasd")

오프셋은 읽기 전용입니다.

$("#myid").attr("width) ", "20%")
속성 읽기 $("#myid").attr( "width")
한 번에 여러 속성 지정 $("#myid").attr({disabled: “disabled ”, 너비: “20%”, 높이: “30″})
속성 삭제 $( "#myid").removeAttr("disabled")

스타일 적용$("#myid") .addClass("myclass")
스타일 제거$("#myid").removeClass(" myclass”)

스타일 추가 $(”#myid”).css(”height”, “ 20px”)
스타일 세트 추가 $(”#myid”).css({height: "20px", width:"100px"})
스타일을 추가하면 이 스타일의 이름은 CSS의 이름입니다(예: style=”Background-color:#FF0000″). jQuery 작성 방법은 $("#myid").css("Background-color", "#FF0000"입니다. )
그러나 스타일 세트를 추가할 때 스타일 이름은 JavaScript의 CSS 이름입니다(예: myid.style.BackgroundColor = “#FF0000″, 해당 jQuery 쓰기는 $(”#myid”)입니다. .css({BackgroundColor:”#FF0000″})

4. 관계에 따라 요소 찾기
합 찾기 해당 레벨의 다음 요소 $("#myid").next()
자신보다 아래에 있는 자체 레벨의 모든 요소 찾기 $("#myid").nextAll()
합계 찾기 자체 레벨의 이전 요소 $("#myid").prev()
자신보다 상위에 있는 자체 레벨의 모든 요소 찾기 $("#myid").prevAll()
자신만의 1세대 하위 요소 $("#myid").children() 찾기
첫 번째 상위 요소 찾기 $("#myid").parent()
모든 상위 요소 찾기$ ("#myid").parents()
예:
$("div. l4").parents().each(
function() {
alert($(this).html());
});

은 모든 상위 요소를 가져옵니다. class=l4인 div의 html에 경고

예:
$( ”div.l4″).parents(”div.l2″).each(function() { Alert($ (this).html()); });
은 class=l4의 상위 요소를 가져옵니다. 상위 요소는 div여야 하며 해당 class=l2입니다.

여기에 언급된 모든 메서드 표현식 작성 방법은 1부

를 참조하세요. 5. 본문에 요소 추가
$("body").append(" 요소를 유지합니다. 🎜>") 이 명령문은 body의 종료 태그 앞에 이 html을 삽입합니다. 결과는

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.