찾다
웹 프론트엔드JS 튜토리얼jquery_jquery에서 일반적으로 사용되는 함수 및 속성에 대한 자세한 분석

Dom:
속성: 속성
$("p").addClass(css에 정의된 스타일 유형) 요소에 스타일 추가
$("img").attr({ src: "test.jpg",title:"test Image"}); 요소에 속성/값을 추가합니다. 매개변수는 map
$("input").attr({"checked", "checked"}입니다. );
$("img").attr("title", function() { return this.src }) 요소에 속성/값 추가
$("Element Name").html ( ); 요소 내의 콘텐츠(요소, 텍스트 등)를 가져옵니다.
$("Element Name").html("new stuff"); 🎜>$ ("요소 이름").removeAttr("속성 이름") 요소에서 지정된 속성과 속성 값을 삭제합니다.
$("요소 이름").removeClass("클래스") 지정된 속성을 삭제합니다. 요소의 스타일
$("Element Name").text(); 요소의 텍스트 가져오기
$("Element Name").text(value); 요소의 텍스트 값을 value로 설정합니다.
$(" 요소 이름").toggleClass(class) 매개변수의 스타일에 요소가 존재하는 경우 취소합니다. 존재하지 않으면 이 스타일을 설정합니다.
$("input element name").val( ); 입력 요소의 값을 가져옵니다
$("input element name").val(value); 입력 요소의 값을 value
로 설정합니다.

조작:

$("Element Name").after(content); 일치하는 요소 뒤에 콘텐츠를 추가합니다.
$("Element Name").append(content); 요소
$("요소 이름").appendTo(content); 콘텐츠 뒤에
$("요소 이름").before(content) 요소를 추가합니다. ( "요소 이름").clone(부울 표현식) 불리언 표현식이 true인 경우 요소를 복제합니다(매개 변수가 없으면 true로 간주됨)
$("요소 이름").empty() 요소 복사 내용
$("Element Name").insertAfter(content); 콘텐츠 뒤에 요소를 삽입합니다.
$("Element Name").insertBefore(content); 콘텐츠에 요소를 삽입합니다.
$("Element").prepend(content); 콘텐츠를 요소의 일부로 사용하고 요소 앞에 배치합니다.
$("Element").prependTo(content); 콘텐츠를 콘텐츠 앞에 배치합니다.
$("Element").remove(); 지정된 모든 요소 제거
$("Element").remove("exp"); Element
$("Element").wrap("html"); html을 사용하여 요소 둘러싸기
$("Element").wrap(element);
순회:
add(expr)는 새로운 일치 요소 세트 'expr'을 현재 일치 요소 세트에 추가하여 새로운 일치 요소 세트를 형성합니다.

예:


코드 복사 코드는 다음과 같습니다.$(document) .ready( function(){
$("div").css("border", "2px solid red")
.add("p")//문서의 P 요소에는 노란색 CSS 스타일의 배경색
.css("배경", "노란색")


children(expr)은 현재 일치하는 요소 집합에서 각 요소의 첫 번째 수준 하위 집합을 가져와 새 요소 집합을 형성합니다.
contains(str)는 집합에 변수 텍스트 str을 포함하는 요소 집합과 일치하고 반환합니다. 일치하는 요소인 Collection
end()는 find() 또는 parent() 함수(또는 다른 순회 함수)를 호출하기 전에 jQuery 객체로 돌아가는 데 사용됩니다.


$("#div1").find("p").hide().end().hide()
첫 번째 hide()는 p 태그용이고 end를 사용합니다. ()는 p 태그에 대한 참조를 종료하고 #div1 태그로 돌아갑니다
따라서 두 번째 hide()는 #div1에 대해 작동합니다
end()가 추가되지 않으면 두 hide() 모두 p 태그에 대한 작업이 됩니다.

filter(expression)
find(expr)
filter와 find의 차이점:
filter는 선택한 요소 집합 중에서 선택합니다.
find는 선택한 요소 집합 중에서 선택합니다. ;




테스트 2




find() 메소드를 사용하는 경우:
var $find = $("div").find( ".rain");
alert( $find.html() ) ;
은 다음을 출력합니다: 테스트 1
filter() 메서드를 사용하는 경우:
var $filter = $("div") .filter(".rain");
alert( $filter.html() );
출력: 테스트 2
차이점은 다음과 같습니다.

find()는 div 요소 내에서 rain 클래스가 있는 요소를 찾습니다.
그리고 filter()는 div에서 클래스가 rain인 요소를 필터링합니다.
하나는 하위 집합에 대해 작업하는 것이고, 다른 하나는 자체 컬렉션의 요소를 필터링하는 것입니다.

is(expr)//기존 세트가 'expr' 세트의 일부인지 확인합니다. 그렇다면 true를 반환하고, 그렇지 않으면 false를 반환합니다

next(expr)//일치하는 요소 세트에서 각 요소의 바로 다음 형제 요소를 포함하는 세트를 가져옵니다.

not(el)//필터링 요구 사항을 충족하는 일치 집합에 요소 집합이 없습니다

예:

$("div").not(".green, #blueone")
$("input:not(:checked)span")
$('tr:not ([일]):홀수')

parent(expr)는 일치하는 모든 요소의 고유한 상위 요소를 포함하는 요소 집합을 가져옵니다

parents(expr)//일치하는 요소 집합에 있는 각 요소의 모든 상위 요소 집합을 가져옵니다
prev( expr)은 일치하는 요소 집합에 있는 각 요소의 바로 앞의 형제 요소 집합을 가져옵니다.
siblings(expr)는 일치하는 요소 집합에 있는 각 요소의 모든 형제 요소 집합을 가져옵니다.

핵심:

$(html).appendTo("body")는
$(elems) 본문에 HTML 코드를 작성하여 DOM
$(에 요소를 가져오는 것과 같습니다. function( ){……..}); 함수 실행
$("div > p").css("border", "1px solid grey"); 스타일
$("input:radio", document.forms[0]) 현재 페이지의 첫 번째 양식에서 모든 라디오 버튼을 찾습니다.
jQuery는 플러그인 개발을 위한 두 가지 방법, 즉 다음과 같은 두 가지 방법을 제공합니다.
jQuery .extend(object)는 jQuery 클래스 자체를 확장합니다. 클래스에 새 메서드를 추가합니다.

jQuery.extend({
min: function(a, b) { return a max: function(a, b) { return a > b ? a : b; }
});
jQuery 인용:

코드 복사 $.min(3,4); //return 3jQuery.fn.extend(object)는 jQuery의 확장인 jQuery 객체에 메서드를 추가합니다. 프로토타입
jQuery.fn = jQuery.prototype = {
  init: function( selector, context ) {//.... 
  //...... }; 🎜>

예제



코드 복사

jQuery 인용:
$("#input1").alertWhileClick();
jQuery( 표현식, [컨텍스트] ) ---$( 표현식, [컨텍스트]); 기본적으로 $()는 현재 HTML 문서의 DOM 요소를 쿼리합니다.

각( 콜백 )은 일치하는 각 요소를 컨텍스트로 사용하여 함수를 실행합니다.

예: 1



코드 복사

코드는 다음과 같습니다.

$(" span") .click(function){

$("li").each(function(){
$(this).toggleClass("example");

});} );
예: 2
코드 복사 코드는 다음과 같습니다.

$(" 버튼") .click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("BackgroundColor ", " 노란색");
if ($(this).is("#stop")) {
$("span").text("div 인덱스 #에서 중지됨" index);
return false ;
}
});
});

jQuery 이벤트: 이벤트

ready(fn); $(document).ready() 본문에 onload 이벤트가 없으면 함수가 실행될 수 없습니다. 각 페이지에는 많은 기능을 불러와 실행할 수 있으며, fn의 순서대로 실행됩니다.

예:
$(document).ready(function(){alert("aa");}

bind( type, [data], fn )은 하나 이상의 이벤트 핸들러 함수를 일치하는 각 요소의 특정 이벤트(예: 클릭)에 바인딩합니다. 가능한 이벤트 유형 속성은 다음과 같습니다: 흐림, 초점, 로드, 크기 조정, 스크롤, 언로드, 클릭, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, 변경, 선택, 제출, keydown, keypress,keyup, 오류

예 1:
$('#myBtn').bind("click",function(){ 
alert('click');
});

예 2:

함수 핸들러(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, 핸들러)

one( type, [data], fn )은 하나 이상의 이벤트 핸들러 함수를 일치하는 각 요소의 특정 이벤트(예: 클릭)에 바인딩합니다. 이 이벤트 핸들러는 각 개체에 대해 한 번만 실행됩니다. 그 외의 규칙은 Bind() 함수와 동일합니다.

type(String): 이벤트 유형.
data(Object): (선택 사항) event.data 속성 값으로 이벤트 객체에 전달되는 추가 데이터 객체입니다.
fn(Function): 일치하는 각 요소의 이벤트에 바인딩되는 핸들러 함수입니다.

trigger( type, [data] )는 일치하는 각 요소에서 특정 유형의 이벤트를 트리거합니다.

$("p").click( function (event, a, b) {
// 일반적인 클릭 이벤트에서 a와 b는 정의되지 않은 유형입니다.
// 다음 명령문으로 트리거되는 경우 , a는 "foo"를 가리키고 b는 "bar"를 가리킵니다
} ).trigger("click", ["foo", "bar"]); 일치하는 요소를 클릭하면 토글( fn, fn ), 지정된 첫 번째 기능이 트리거되고 동일한 요소를 다시 클릭하면 지정된 두 번째 기능이 트리거됩니다.
$("p").toggle(function(){
$(this).addClass("selected");
},
function(){
$(this) .removeClass("선택됨");
}
);

예:

$("p").bind("myEvent", function (event, message1, message2) {
Alert(message1 ' ' message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
triggerHandler( type, [data] ) 이 특정 메서드는 특정 이벤트를 트리거합니다(지정된 이벤트 유형). , 이 이벤트에 대한 브라우저의 기본 작업을 취소하는 동안
unbind( [type], [data] ) 바인딩을 해제하고 일치하는 각 요소에서 바인딩된 이벤트를 제거합니다.
$("p").unbind()는 모든 단락에서 모든 바인딩된 이벤트를 제거합니다
$("p").unbind( "click" )는 모든 단락에서 클릭 이벤트를 제거합니다

예:


코드 복사 코드는 다음과 같습니다.
var foo = function () {
// 이벤트를 처리하는 코드
};
$("p").bind("click", foo) // ... 함수 foo는 단락이 실행될 때 실행됩니다. 클릭됨
$("p").unbind("click", foo) // ... 다시는 실행되지 않습니다. foo
hover(over, out) over 및 out은 일치하는 요소 위로 마우스를 이동하면 첫 번째로 지정된 기능이 트리거됩니다. 마우스가 이 요소 밖으로 이동하면 지정된 두 번째 기능이 트리거됩니다.

$("p").hover(function(){
$(this).addClass("over");
},
function(){
$(this) .addClass("아웃");
}
);


元素事件列表说明
注:不带参数的函数,其参数为可选的 fn。jQuery不支持form元素的reset事件。
事件描述,支持元素或对象
focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area
blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area
$("#in").focus(function(){
   if($("#in").val()=='关键字'){
   $("#in").val("")};
}).blur(function(){
   if($("#in").val()==''){
   $("#in").val("关键字").css("color","#ccc")};
});
change( ) 用户改变域的内容 input, textarea, select
change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触发。
$("input[type='text']").change( function() {
   // 这里可以写些验证代码
});
click( ) 鼠标点击某个对象 几乎所有元素
dblclick( ) 鼠标双击某个对象 几乎所有元素
error( ) 当加载文档或图像时发生某个错误 window, img
keydown( ) 某个键盘的键被按下 几乎所有元素
keypress( ) 某个键盘的键被按下或按住 几乎所有元素
keyup( ) 某个键盘的键被松开 几乎所有元素
load( fn ) 某个页面或图像被完成加载 window, img
mousedown( fn ) 某个鼠标按键被按下 几乎所有元素
mousemove( fn ) 鼠标被移动 几乎所有元素
mouseout( fn ) 鼠标从某元素移开 几乎所有元素
mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素
mouseup( fn ) 某个鼠标按键被松开 几乎所有元素
resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame
scroll( fn ) 滚动文档的可视部分时 window
select( ) 文本被选定 document, input, textarea
submit( ) 提交按钮被点击 form
unload( fn ) 用户退出页面 window

JQuery Ajax 方法说明:

load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。
$("#feeds").load("feeds.html"); 将feeds.html文件载入到id为feeds的div中
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});

jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。
$.get("test.cgi", { name: "John", time: "2pm" }, function(data){
alert("Data Loaded: " + data);
});

jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});

jQuery.getScript( url, [callback] ) 使用GET请求JavaScript文件并执行。
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。

ajaxComplete( callback ) 当一个AJAX请求结束后,执行一个函数。这是一个Ajax事件
$("#msg").ajaxComplete(function(request, settings){
$(this).append("

  • Request Complete.
  • ");
    });
    ajaxError( callback ) 当一个AJAX请求失败后,执行一个函数。这是一个Ajax事件
    $("#msg").ajaxError(function(request, settings){
    $(this).append("
  • Error requesting page " + settings.url + "
  • ");
    });
    ajaxSend( callback ) 在一个AJAX请求发送时,执行一个函数。这是一个Ajax事件
    $("#msg").ajaxSend(function(evt, request, settings){
    $(this).append("
  • + "
  • });

    ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时,执行一个函数。这是一个Ajax事件
    当AJAX请求开始(并还没有激活时)显示loading信息
    $("#loading").ajaxStart(function(){
    $(this).show();
    });

    ajaxStop( callback ) 当所有的AJAX都停止时,执行一个函数。这是一个Ajax事件
    当所有AJAX请求都停止时,隐藏loading信息。
    $("#loading").ajaxStop(function(){
    $(this).hide();
    });

    ajaxSuccess( callback ) 当一个AJAX请求成功完成后,执行一个函数。这是一个Ajax事件
    当AJAX请求成功完成时,显示信息。
    $("#msg").ajaxSuccess(function(evt, request, settings){
    $(this).append("

  • Successful Request!
  • ");
    });

    jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。
    设置默认的全局AJAX请求选项。
    $.ajaxSetup({
    url: "/xmlhttp/",
    global: false,
    type: "POST"
    });
    $.ajax({ data: myData });

    serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列
    function showValues() {
    var str = $("form").serialize();
    $("#results").text(str);
    }
    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();

    serializeArray( ) 连接所有的表单和表单元素(类似于.serialize()方法),但是返回一个JSON数据格式。
    从form中取得一组值,显示出来
    function showValues() {
    var fields = $(":input").serializeArray();
    alert(fields);
    $("#results").empty();
    jQuery.each(fields, function(i, field){
    $("#results").append(field.value + " ");
    });
    }
    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();

    JQuery Effects 方法说明

    show( ) 显示隐藏的匹配元素。
    show( speed, [callback] ) 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。
    hide( ) 隐藏所有的匹配元素。
    hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数
    toggle( ) 切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,
    切换为可见的。
    slideDown( speed, [callback] ) 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以
    "滑动"的方式显示出来。
    slideUp( speed, [callback] ) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以"滑动"的方式隐藏起来。
    slideToggle( speed, [callback] ) 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度,可以使匹配的元素以"滑动"的方式隐藏或显示。
    fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
    fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
    fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
    stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中,他们就会立即开始。
    queue( ) 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组)
    queue( callback ) 在每一个匹配元素的事件序列的末尾添加一个可执行函数,作为此元素的事件函数
    queue( queue ) 以一个新的动画序列代替所有匹配元素的原动画序列
    dequeue( ) 执行并移除动画序列前端的动画
    animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。
    animate( params, options ) 创建自定义动画的另一个方法。作用同上。


    JQuery Traversing 方法说明

    eq( index ) 从匹配的元素集合中取得一个指定位置的元素,index从0开始
    filter( expr ) 返回与指定表达式匹配的元素集合,可以使用","号分割多个expr,用于实现多个条件筛选.
    ilter( fn ) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。
    is( expr ) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的
    表达式就返回true。
    map( callback ) 将jQuery对象中的一组元素利用callback方法转换其值,然后添加到一个jQuery数组中。
    not( expr ) 从匹配的元素集合中删除与指定的表达式匹配的元素。
    slice( start, [end] ) 从匹配元素集合中取得一个子集,和内建的数组的slice方法相同。
    add( expr ) 把与表达式匹配的元素添加到jQuery对象中。
    children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器将使这个方法只匹配符合的元素(只包括元素节点,不包括文本节点)。
    contents( ) 取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集合(只包括元素节点,不包括文本节点),如果元素为iframe,则取得其中的文档元素
    find( expr ) 搜索所有与指定表达式匹配的元素。
    next( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
    nextAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合
    parent( [expr] ) 取得一个包含着所有匹配元素的唯一父元素的元素集合。
    parents( [expr] ) 取得一个包含着所有匹配元素的唯一祖先元素的元素集合(不包含根元素)。
    prev( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
    prevAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。
    siblings( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。
    andSelf( ) 将前一个匹配的元素集合添加到当前的集合中取得所有div元素和其中的p元素,添加border类属性。取得所有div元素中的p元素,
    添加background类属性
    $("div").find("p").andSelf().addClass("border");
    $("div").find("p").addClass("background");
    end( ) 结束当前的操作,回到当前操作的前一个操作
    找到所有p元素其中的span元素集合,然后返回p元素集合,添加css属性
    $("p").find("span").end().css("border", "2px red solid");

    JQuery Selectors选择器方法说明

    基本选择器
    $("#myDiv") 匹配唯一的具有此id值的元素
    $("div") 匹配指定名称的所有元素
    $(".myClass") 匹配具有此class样式值的所有元素
    $("*") 匹配所有元素
    $("div,span,p.myClass") 联合所有匹配的选择器

    层叠选择器
    $("form input") 后代选择器,选择ancestor的所有子孙节点
    $("#main > *") 子选择器,选择parent的所有子节点
    $("label + input") 临选择器,选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素

    $("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

    基本过滤选择器
    $("tr:first") 匹配第一个选择的元素
    $("tr:last") 匹配最后一个选择的元素
    $("input:not(:checked) + span")从原元素集合中过滤掉匹配selector的所有元素(这里有是一个临选择器)
    $("tr:even") 匹配集合中偶数位置的所有元素(从0开始)
    $("tr:odd") 匹配集合中奇数位置的所有元素(从0开始)
    $("td:eq(2)") 匹配集合中指定位置的元素(从0开始)
    $("td:gt(4)") 匹配集合中指定位置之后的所有元素(从0开始)
    $("td:gl(4)") 匹配集合中指定位置之前的所有元素(从0开始)
    $(":header") 匹配所有标题
    $("div:animated") 匹配所有正在运行动画的所有元素

    内容过滤选择器
    $("div:contains('John')") 匹配含有指定文本的所有元素
    $("td:empty") 匹配所有空元素(只含有文本的元素不算空元素)
    $("div:has(p)") 从原元素集合中再次匹配所有至少含有一个selector的所有元素
    $("td:parent") 匹配所有不为空的元素(含有文本的元素也算)
    $("div:hidden") 匹配所有隐藏的元素,也包括表单的隐藏域
    $("div:visible") 匹配所有可见的元素

    속성 필터 선택기
    $("div[id]")는 지정된 속성을 가진 모든 요소와 일치
    $("input[name='newsletter']")는 지정된 속성 값을 가진 모든 요소와 일치
    $("input[name!='newsletter']")는 지정된 속성 값이 없는 모든 요소와 일치합니다.
    $("input[name^='news']")는 지정된 속성 값이 있는 모든 요소와 일치합니다. 값으로 끝나는 속성 값
    $("input[name$='letter']")로 시작하는 요소는 값
    $("input[name*='man']으로 끝나는 모든 지정된 속성 값과 일치합니다. ")는 지정된 모든 요소와 일치합니다. 속성 값에 값 문자가 포함된 요소
    $("input[id][name$='man']")는 동시에 여러 선택기와 일치하는 모든 요소와 일치합니다.

    하위 요소 필터 선택기
    $("ul li:nth-child(2)"),
    $("ul li:nth-child(odd)")는 상위 요소의 n번째 요소와 일치합니다. 요소 하위 요소
    $("ul li:nth-child(3n 1)")

    $("divspan:first-child")는 상위 요소의 첫 번째 하위 요소와 일치합니다.
    $("divspan:last-child")는 상위 요소의 마지막 하위 요소와 일치합니다
    $ (" div 버튼:only-child")는 상위 요소의 유일한 하위 요소

    와 일치합니다.

    양식 요소 선택기
    $(":input")는 모든 유형의 입력, 텍스트 영역, 선택 및 버튼을 포함한 모든 양식 입력 요소와 일치합니다
    $(":text")는 모든 유형의 텍스트와 일치합니다. 입력
    $(":password") 요소는 비밀번호 유형의 모든 입력 요소와 일치합니다.
    $(":radio")는 라디오 유형의 모든 입력 요소와 일치합니다.
    $(":checkbox")는 다음의 모든 입력 요소와 일치합니다. type checkbox
    $(":submit") submit 유형의 모든 입력 요소와 일치
    $(":image") image 유형의 모든 입력 요소와 일치
    $(": Reset") 모든 입력 요소와 일치 재설정 유형
    $(":button")은 버튼 유형의 모든 입력 요소와 일치합니다.
    $(":file")은 파일 유형의 모든 입력 요소와 일치합니다.
    $(":hidden")은 모든 입력과 일치합니다.

    형식의 숨겨진 필드 또는 숨겨진 필드 유형의 요소

    양식 요소 필터 선택기
    $(":enabled")는 작동 가능한 모든 양식 요소와 일치
    $(":disabled")는 작동 불가능한 모든 양식 요소와 일치
    $(":checked ")는 선택된 모든 요소와 일치 요소
    $("select option:selected")는 선택한 모든 요소와 일치합니다.

    JQuery CSS 메서드 설명

    css( name )은 일치하는 첫 번째 요소의 스타일 속성에 액세스합니다.
    css(properties) "이름/값 쌍" 객체를 일치하는 모든 요소의 스타일 속성으로 설정합니다.
    $("p").hover(function () {
    $(this).css({ backgroundColor:"yellow",fontWeight:"bolder" });
    }, function () {
    var cssObj = {
    backgroundColor: "#ddd",
    fontWeight: "",
    color: "rgb(0,40,244)"
    }
    $(this). css(cssObj);
    });
    css( name, value ) 일치하는 모든 요소에 스타일 속성 값을 설정합니다.
    offset( )은 현재 시각적 창을 기준으로 첫 번째로 일치하는 요소의 위치를 ​​가져옵니다. 반환된 객체에는
    top과 left라는 두 가지 속성이 있으며 속성 값은 정수입니다. 이 기능은 보이는 요소에만 사용할 수 있습니다.
    var p = $("p:last");
    var offset = p.offset();
    p.html( "left: " offset.left ", top: " offset.top ) ;
    width()는 현재 첫 번째로 일치하는 요소의 너비 값을 가져오고,
    width( val)은 일치하는 각 요소에 대해 지정된 너비 값을 설정합니다.
    height()는 현재 첫 번째로 일치하는 요소의 높이 값을 가져오고,
    height(val)은 일치하는 각 요소에 대해 지정된 높이 값을 설정합니다.

    JQuery 유틸리티 메서드 설명
    jQuery.browser
    .msie는
    jQuery.browser.version이 사용자 브라우저의 버전 정보를 읽는다는 의미입니다.
    jQuery.boxModel은 사용자 브라우저의 버전을 감지합니다. 현재 페이지가 W3C CSS 박스 모델을 기반으로 하는지 보여줍니다.
    jQuery.isFunction( obj ) 전달된 매개변수가 function
    function stub() { }
    var objs = [
    function인지 확인합니다. () {},
    { x:15, y:20 },
    null,
    스텁,
    "함수"
    ];
    jQuery.each(objs, 함수( i) {
    var isFunc = jQuery.isFunction(objs[i]);
    $("span:eq( " i ")").text(isFunc);
    });
    jQuery.trim( str ) 문자열의 양쪽 끝에서 공백을 제거합니다. 정규 표현식을 사용하여 주어진 문자의 양쪽 끝에서 공백을 제거합니다.
    jQuery.each( object, callback ) 원활하게 반복하는 데 사용할 수 있는 일반 반복자입니다. 객체 및 배열
    jQuery.extend(target, object1, [objectN])은 객체를 확장하고 원본 객체를 수정하여 반환합니다. 이는 상속을 위한 강력한 도구입니다. 이 상속은 프로토타입 대신 값을 전달하여 구현됩니다. JavaScript 체인 방식으로.
    설정 및 옵션 개체를 병합하고 수정된 설정 개체 반환
    var settings = { 유효성 검사: false, 제한: 5, 이름: "foo" };
    var 옵션 = { 유효성 검사: true, 이름: "bar" };
    jQuery.extend(설정, 옵션);

    기본값과 옵션 개체를 병합했는데 기본 개체는 수정되지 않았습니다. 옵션 개체의 값은 기본 개체의 값 대신 빈 값으로 전달됩니다.

    코드 복사 코드는 다음과 같습니다.

    var 비어 있음 = {}
    var defaults = { 유효성 검사: false, 제한: 5, 이름: "foo" };
    var options = { 유효성 검사: true, 이름: "bar" };
    var settings = $.extend(비어 있음, 기본값, options);
    jQuery.grep( array, callback, [invert] )는 필터 함수를 통해 배열에서 항목을 제거합니다.
    $.grep( [0,1,2], function(n,i){
    n > 0;
    });

    jQuery.makeArray( obj ) 배열과 유사한 객체를 실제 배열로 변환합니다.
    선택한 div 요소 컬렉션을 배열로 변환합니다.
    var arr = jQuery.makeArray(document.getElementsByTagName("div ")) ;
    arr.reverse(); // dom 요소 목록에 Array 메서드 사용
    $(arr).appendTo(document.body);
    jQuery.map( array, callback ) 메서드 사용 배열의 항목을 수정한 후 새 배열을 반환합니다.
    jQuery.inArray( value, array) 배열에서 값의 위치를 ​​반환하고 값이 없으면 -1을 반환합니다.
    jQuery.unique(배열) 배열의 모든 중복 요소를 제거하고 정렬된 배열을 반환합니다
    성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    JavaScript의 진화 : 현재 동향과 미래 전망JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

    JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

    Demystifying JavaScript : 그것이하는 일과 중요한 이유Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

    JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

    Python 또는 JavaScript가 더 좋습니까?Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

    Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

    JavaScript를 어떻게 설치합니까?JavaScript를 어떻게 설치합니까?Apr 05, 2025 am 12:16 AM

    JavaScript는 이미 최신 브라우저에 내장되어 있기 때문에 설치가 필요하지 않습니다. 시작하려면 텍스트 편집기와 브라우저 만 있으면됩니다. 1) 브라우저 환경에서 태그를 통해 HTML 파일을 포함하여 실행하십시오. 2) Node.js 환경에서 Node.js를 다운로드하고 설치 한 후 명령 줄을 통해 JavaScript 파일을 실행하십시오.

    Quartz에서 작업이 시작되기 전에 알림을 보내는 방법은 무엇입니까?Quartz에서 작업이 시작되기 전에 알림을 보내는 방법은 무엇입니까?Apr 04, 2025 pm 09:24 PM

    쿼츠 타이머를 사용하여 작업을 예약 할 때 미리 쿼츠에서 작업 알림을 보내는 방법 작업의 실행 시간은 CRON 표현식에 의해 설정됩니다. 지금...

    JavaScript에서 생성자의 프로토 타입 체인에서 함수의 매개 변수를 얻는 방법은 무엇입니까?JavaScript에서 생성자의 프로토 타입 체인에서 함수의 매개 변수를 얻는 방법은 무엇입니까?Apr 04, 2025 pm 09:21 PM

    JavaScript 프로그래밍에서 JavaScript의 프로토 타입 체인에서 함수 매개 변수를 얻는 방법 프로토 타입 체인의 기능 매개 변수를 이해하고 조작하는 방법은 일반적이고 중요한 작업입니다 ...

    Wechat Mini 프로그램 웹 뷰에서 Vue.js 동적 스타일 변위가 실패한 이유는 무엇입니까?Wechat Mini 프로그램 웹 뷰에서 Vue.js 동적 스타일 변위가 실패한 이유는 무엇입니까?Apr 04, 2025 pm 09:18 PM

    WeChat 애플릿 웹 뷰에서 vue.js를 사용하는 동적 스타일 변위 실패가 vue.js를 사용하는 이유를 분석합니다.

    TamperMonkey에서 여러 링크에 대한 동시 GET 요청을 구현하고 순서대로 반환 결과를 결정하는 방법은 무엇입니까?TamperMonkey에서 여러 링크에 대한 동시 GET 요청을 구현하고 순서대로 반환 결과를 결정하는 방법은 무엇입니까?Apr 04, 2025 pm 09:15 PM

    동시 링크에 대한 요청을 여러 링크와 순서대로 판단하여 결과를 반환하는 방법은 무엇입니까? 탬퍼 몬키 스크립트에서는 종종 여러 체인을 사용해야합니다 ...

    See all articles

    핫 AI 도구

    Undresser.AI Undress

    Undresser.AI Undress

    사실적인 누드 사진을 만들기 위한 AI 기반 앱

    AI Clothes Remover

    AI Clothes Remover

    사진에서 옷을 제거하는 온라인 AI 도구입니다.

    Undress AI Tool

    Undress AI Tool

    무료로 이미지를 벗다

    Clothoff.io

    Clothoff.io

    AI 옷 제거제

    AI Hentai Generator

    AI Hentai Generator

    AI Hentai를 무료로 생성하십시오.

    인기 기사

    R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
    3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. 최고의 그래픽 설정
    3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
    3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
    WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
    3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

    뜨거운 도구

    SecList

    SecList

    SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

    메모장++7.3.1

    메모장++7.3.1

    사용하기 쉬운 무료 코드 편집기

    드림위버 CS6

    드림위버 CS6

    시각적 웹 개발 도구

    Atom Editor Mac 버전 다운로드

    Atom Editor Mac 버전 다운로드

    가장 인기 있는 오픈 소스 편집기

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.