>  기사  >  웹 프론트엔드  >  jquery_jquery에서 일반적으로 사용되는 함수 및 속성에 대한 자세한 분석

jquery_jquery에서 일반적으로 사용되는 함수 및 속성에 대한 자세한 분석

WBOY
WBOY원래의
2016-05-16 16:56:26838검색

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 < b ? a : b; },
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으로 문의하세요.