linuxian

자바스크립트에서의 이벤트의 모든 것

이벤트란, 특정한 상황이 발생했을 때 특정한 일을 수행하도록 하는 일종의 트리거다.
타 언어와 마찬가지로, 자바스크립트에서도 이벤트 관련 기능을 지원한다.
이벤트에 대해 파헤치기 전에, 먼저 이벤트의 작동 방식부터 살펴보자.

이벤트의 작동 방식
이벤트 작동 방식은 크게 bubbling과 capturing으로 나뉜다.
이것은 DOM 계층구조에 따른 이벤트 추출 방식으로,
bubbling의 경우 가장 하위 구조의 이벤트부터 처리하고
capturing의 경우 가장 상위 구조의 이벤트부터 처리한다.
이에 대한 예를 들어보자.

이렇게 영역을 계층구조로 잡아놓고, div 영역을 클릭하면 어떻게 될까 ?!
bubbling 방식의 경우, 2가 먼저 뜨고 1이 다음에 뜬다.
capturing 방식의 경우, 1이 먼저 뜨고 2가 다음에 뜬다.
이제 bubbling과 capturing의 차이가 어느정도 이해가 될 것이다.

이벤트 핸들러
이제 실질적으로 이벤트를 어떻게 객체에 추가하는지 알아보자.
이벤트를 객체에 추가하는 방식은 두 가지가 있다. (고전방식, 리스너)

고전방식의 이벤트는 매우 직관적이다.
obj.onclick = fnHandle과 같이 객체의 하위 element로 이벤트를 설정하면 된다.
고전방식의 단점은, 한 객체에 단 하나의 이벤트 핸들러밖에 등록하지 못한다는 것.
만약 사용자가 다음과 같이 이벤트 핸들러를 두 번 등록하면,
새로운 핸들러 함수가 이전 핸들러 함수를 덮어쓰도록 처리된다.

obj.onclick = fnHandle1
obj.onclick = fnHandle2

이제 리스너 방식에 대해 살펴본다.
이 방식의 단점이라면, IE의 경우에만 함수 이름이 다르다는 것이다.
하지만 약간의 꼼수를 더해서 처리해주도록 하면 아무런 문제가 없다.
이벤트를 등록하는 함수는 다음과 같다.

// 인터넷 익스플로러(IE)의 경우 이벤트 등록/삭제
obj.attachEvent("name_of_event", fnHandle)
obj.detachEvent("name_of_event", fnHandle)

// 그외 브라우저의 경우 이벤트 등록/삭제
obj.addEventListener("name_of_event", fnHandle, capture)
obj.removeEventListener("name_of_event", fnHandle, capture)

각 인자들에 대해서 설명하자면, name_of_event는 이벤트 종류이다.
fnHandle은 이벤트가 발생했을 때 처리할 함수(핸들러)이고,
마지막 인자인 capture는 capturing 방식을 사용할 것인지의 여부를 결정한다.

capture 인자는 입력하지 않아도 상관없지만(기본값 false: bubbling),
만약 입력했을 경우, add와 remove에서의 capture 여부를 맞춰주어야 한다.
그렇지 않는다면 이벤트 리스너에서 함수가 제대로 제거되지 않는다.

다음은 이벤트를 등록하는 예제이다. (모든 브라우저에서 동작한다)

var fnClick1 = function() { alert('1 clicked'); }
var fnClick2 = function() { alert('2 clicked'); }

var odiv = document.getElementById('div_box');
// 브라우저가 IE가 아닌 경우 처리
if(odiv.addEventListener)
odiv.addEventListener("onclick", fnClick1);
// 브라우저가 IE인 경우 처리
else
odiv.attachEvent("onclick", fnClick2);

위 예제에서 odiv를 클릭하면, IE인 경우 2 clicked가, 아닌 경우 1 clicked가 뜬다.

이벤트 객체
이벤트 객체를 사용해서 어떤 이벤트가 어떻게 발생했는지 여부를 알 수 있다.
이 경우에도 인터넷 익스플로러(IE)와 타 브라우저간에 차이점이 존재한다.
이래저래 IE는 자바스크립트 코더에게는 골치덩어리다.
다음은 이벤트 객체의 속성(properties) 목록이다.

altKey ALT키가 눌려있는지의 여부를 반환
bubbles 이벤트 작동방식이 bubbling인지 여부를 반환 (IE 지원 안함)
button 마우스의 어떤 버튼이 눌렸는지를 코드로 반환
0 아무런 버튼도 눌리지 않음
1 왼쪽 버튼이 눌림
2 오른쪽 버튼이 눌림
3 왼쪽과 오른쪽 버튼이 동시에 눌림
4 가운데 버튼이 눌림
5 왼쪽과 가운데 버튼이 동시에 눌림
6 오른쪽과 가운데 버튼이 동시에 눌림
7 왼쪽과 오른쪽, 그리고 가운데 버튼이 동시에 눌림
cancellable 이벤트가 취소되었는지 여부를 반환 (IE 지원 안함)
cancelBubble 이벤트 bubbling이 취소되었는지 여부를 반환
charCode 입력된 키의 유니코드 값을 반환 (IE 지원 안함)
clientX 브라우저 영역에서의 마우스 X좌표 위치를 반환
clientY 브라우저 영역에서의 마우스 Y좌표 위치를 반환
ctrlKey CTRL 키가 눌려있는지의 여부를 반환
currentTarget 이벤트가 수행되고 있는 대상 객체를 반환 (IE 지원 안함)
detail 마우스 버튼이 클릭된 횟수를 반환 (IE 지원 안함)
eventPhase 이벤트 처리 상황을 코드로 반환 (IE 지원 안함)
0 capturing 처리 상황
1 이벤트 처리 대상에 위치함
2 bubbling 처리 상황
isChar 입력된 키가 문자인지 여부를 반환 (IE 지원 안함)
keyCode 입력된 키의 키코드 반환
offsetX 이벤트 대상 객체에서의 상대적 마우스 X좌표 위치를 반환 (IE만 지원)
offsetY 이벤트 대상 객체에서의 상대적 마우스 Y좌표 위치를 반환 (IE만 지원)
pageX 브라우저 페이지에서의 상대적 마우스 X좌표 위치를 반환 (IE 지원 안함)
pageY 브라우저 페이지에서의 상대적 마우스 Y좌표 위치를 반환 (IE 지원 안함)
repeat 키보드 이벤트 발생시 키가 여러번 눌렸는지 여부 반환 (IE만 지원)
screenX 전체 모니터 스크린에서의 마우스 X좌표 위치를 반환
screenY 전체 모니터 스크린에서의 마우스 Y좌표 위치를 반환
shiftKey SHIFT 키가 눌려있는지의 여부를 반환
srcElement currentTarget과 같은 기능 (IE만 지원)
type 발생한 이벤트의 이름
x 이벤트 대상 객체의 부모 객체에서의 상대적 마우스 X좌표 위치를 반환 (IE만 지원)
y 이벤트 대상 객체의 부모 객체에서의 상대적 마우스 Y좌표 위치를 반환 (IE만 지원)

참고로, Opera 브라우저의 경우 키보드 이벤트에서 특정 키를 제대로 읽지 못한다.
예를들면, SHIFT, CTRL, ALT 키의 입력을 잘 인식하지 못하는 버그가 있다.
(특히 ALT키는 아예 인식을 전혀 하지 않는다고 한다)

이벤트 객체를 핸들러 함수에서 얻는 방법은 다음과 같다.

function fnHandle(oEvent)
{
if(oEvent.type == 'click')
alert('clicked');
}

즉, 함수에 oEvent 인자를 넣어주면 이벤트 발생시 자동으로 객체가 할당된다.

이벤트의 종류
보통 이벤트의 경우, 마우스와 키보드 이벤트가 대부분이다.
시간(timer) 또는 주기(interval) 이벤트는 관련 포스팅을 참조하기 바란다.
다음은 이벤트의 종류들을 나열한 것이다.

마우스 이벤트
click 마우스 버튼 클릭시 발생
dblclick 마우스 버튼 더블클릭시 발생
mousedown 마우스 버튼을 눌렀을 때 발생
mouseup 마우스 버튼을 눌렀다 뗐을 때 발생
mouseover 마우스 커서를 올려놓았을 때 발생
mouseout 마우스 커서를 올려놓았다가 밖으로 나갈 때 발생
mousemove 마우스 커서를 움직일 때 발생

키보드 이벤트
keydown 키보드가 눌려있을 때 발생
keyup 키보드가 눌려있다가 떼는 순간 발생
keypress 키보다가 눌리는 순간 발생

HTML 이벤트
load 페이지를 전부 다 읽어들인 후에 발생
unload 페이지로부터 빠져나갈 때 발생
abort 페이지를 읽다가 사용자의 중지 요청에 의해 중단되는 경우 발생
error 페이지를 읽다가 오류에 의해 중단되는 경우 발생
select 텍스트박스에서 사용자가 특정 문자나 문자열을 선택했을 때 발생
change 텍스트박스의 값이 변경되는 경우 발생
submit FORM에서의 submit 버튼이 클릭되는 경우 발생
reset FORM에서의 reset 버튼이 클릭되는 경우 발생
resize 윈도우(window)나 프레임(frame) 크기가 변경되는 경우 발생
scroll 스크롤바가 스크롤되는 경우 발생
focus 특정 객체(element)에 포커스가 주어지는 경우 발생
blur 특정 객체(element)에 포커스가 있다가 사라지는 경우 발생

javascript event

linuxian lilla — Thu, 27 Oct 2011 16:53:08 +0900

Event Bubbling - 이벤트 버블링

Programing/Javascript 2009/06/17 11:43

자바스크립트의 이벤트 처리는 생각보다 단순하지 않다.

<div onclick="say()">

<div>

이러한 DOM 이 있을 경우, click 시 하위의 hello부터 상위의 say까지 순서대로 실행되는데,
마치 이런 경우를 샴페인 플루트의 거품처럼 퍼져간다고 하여 이벤트 버블링이라고 부른다.

하지만 때때로 버블링을 막고 싶을 경우가 있다.

위의 예제에서 인사만 하고 싶었는데(hello) 말까지 건네는(say) 상황이 마음에 들지 않는다.

이걸 멈추려면 다음과 같이 작업한다.

view plain copy to clipboard print ?

function hello(event)
{
// IE 일 경우
if(!event) window.event.cancelBubble(true);
// 표준 브라우저일 경우
else event.stopPropagation();
alert("hello");
}

버블링이 훌륭하게 막아질 것이다.

여기서 한번 더 생각해보아야 할 문제가 있다.

사실 버블링 이전에는 캡쳐라는 단계가 하나 더 있다.

이벤트가 일어나면 DOM 트리의 루트에서 대상 엘리먼트까지 이벤트가 전파된다.
그 후 다시 루트로 올라가며 이벤트가 전파되게 된다.

전 단계를 캡쳐, 그 다음을 버블이라고 부른다.
하지만 현재 IE는 캡처이벤트를 지원히지 않고 있다.

스크립트에서 흔히 이벤트를 붙일때 사용하는 함수가

addEventListner() // 표준 브라우저
attatchEvent() // IE

가 있는데 이것도 IE가 캡처를 지원하지 않아 벌어진 문제이다.

ex) addEventListner()의 마지막 인자로는 이벤트가 캡처인지 버블인지 설정하는 플래그 변수가 존재한다.

jquery plugin

linuxian lilla — Thu, 27 Oct 2011 16:08:45 +0900

Plugins/Authoring

So you've become comfortable with jQuery and would like to learn how to write your own plugins. Great! You're in the right spot. Extending jQuery with plugins and methods is very powerful and can save you and your peers a lot of development time by abstracting your most clever functions into plugins. This post will outline the basics, best practices, and common pitfalls to watch out for as you begin writing your plugin.

[edit]

Getting Started

To write a jQuery plugin, start by adding a new function property to the jQuery.fn object where the name of the property is the name of your plugin:

jQuery.fn.myPlugin = function() {

  // Do your awesome plugin stuff here

};

But wait! Where's my awesome dollar sign that I know and love? It's still there, however to make sure that your plugin doesn't collide with other libraries that might use the dollar sign, it's a best practice to pass jQuery to a self executing function (closure) that maps it to the dollar sign so it can't be overwritten by another library in the scope of its execution.

(function( $ ) {
  $.fn.myPlugin = function() {
  
    // Do your awesome plugin stuff here

  };
})( jQuery );

Ah, that's better. Now within that closure, we can use the dollar sign in place of jQuery as much as we like.

[edit]

Context

Now that we have our shell we can start writing our actual plugin code. But before we do that, I'd like to say a word about context. In the immediate scope of the plugin function, the this keyword refers to the jQuery object the plugin was invoked on. This is a common slip up due to the fact that in other instances where jQuery accepts a callback, the this keyword refers to the native DOM element. This often leads to developers unnecessarily wrapping the this keyword (again) in the jQuery function.

(function( $ ){

  $.fn.myPlugin = function() {
  
    // there's no need to do $(this) because
    // "this" is already a jquery object

    // $(this) would be the same as $($('#element'));
        
    this.fadeIn('normal', function(){

      // the this keyword is a DOM element

    });

  };
})( jQuery );

$('#element').myPlugin();

[edit]

The Basics

Now that we understand the context of jQuery plugins, let's write a plugin that actually does something.

(function( $ ){

  $.fn.maxHeight = function() {
  
    var max = 0;

    this.each(function() {
      max = Math.max( max, $(this).height() );
    });

    return max;
  };
})( jQuery );

var tallest = $('div').maxHeight(); // Returns the height of the tallest div

This is a simple plugin that leverages .height() to return the height of the tallest div in the page.

[edit]

Maintaining Chainability

The previous example returns an integer value of the tallest div on the page, but often times the intent of a plugin is simply modify the collection of elements in some way, and pass them along to the next method in the chain. This is the beauty of jQuery's design and is one of the reasons jQuery is so popular. So to maintain chainability in a plugin, you must make sure your plugin returns thethis keyword.

(function( $ ){

  $.fn.lockDimensions = function( type ) {  

    return this.each(function() {

      var $this = $(this);

      if ( !type || type == 'width' ) {
        $this.width( $this.width() );
      }

      if ( !type || type == 'height' ) {
        $this.height( $this.height() );
      }

    });

  };
})( jQuery );

$('div').lockDimensions('width').css('color', 'red');

Because the plugin returns the this keyword in its immediate scope, it maintains chainability and the jQuery collection can continue to be manipulated by jQuery methods, such as .css. So if your plugin doesn't return an intrinsic value, you should always return the this keyword in the immediate scope of the plugin function. Also, as you might assume, arguments you pass in your plugin invocation get passed to the immediate scope of the plugin function. So in the previous example, the string 'width' becomes the type argument for the plugin function.

[edit]

Defaults and Options

For more complex and customizable plugins that provide many options, it's a best practice to have default settings that can get extended (using $.extend) when the plugin is invoked. So instead of calling a plugin with a large number of arguments, you can call it with one argument which is an object literal of the settings you would like to override. Here's how you do it.

(function( $ ){

  $.fn.tooltip = function( options ) {  

    var settings = {
      'location'         : 'top',
      'background-color' : 'blue'
    };

    return this.each(function() {        
      // If options exist, lets merge them
      // with our default settings
      if ( options ) { 
        $.extend( settings, options );
      }

      // Tooltip plugin code here

    });

  };
})( jQuery );

$('div').tooltip({
  'location' : 'left'
});

In this example, after calling the tooltip plugin with the given options, the default location setting gets overridden to become 'left', while the background-color setting remains the default'blue'. So the final settings object ends up looking like this:

{
  'location'         : 'left',
  'background-color' : 'blue'
}

This is a great way to offer a highly configurable plugin without requiring the developer to define all available options.

[edit]

Namespacing

Properly namespacing your plugin is a very important part of plugin development. Namespacing correctly assures that your plugin will have a very low chance of being overwritten by other plugins or code living on the same page. Namespacing also makes your life easier as a plugin developer because it helps you keep better track of your methods, events and data.

[edit]

Plugin Methods

Under no circumstance should a single plugin ever claim more than one namespace in thejQuery.fn object.

(function( $ ){

  $.fn.tooltip = function( options ) { // THIS };
  $.fn.tooltipShow = function( ) { // IS   };
  $.fn.tooltipHide = function( ) { // BAD  };
  $.fn.tooltipUpdate = function( content ) { // !!!  };

})( jQuery );

This is a discouraged because it clutters up the $.fn namespace. To remedy this, you should collect all of your plugin's methods in an object literal and call them by passing the string name of the method to the plugin.

(function( $ ){

  var methods = {
    init : function( options ) { // THIS },
    show : function( ) { // IS   },
    hide : function( ) { // GOOD },
    update : function( content ) { // !!! }
  };

  $.fn.tooltip = function( method ) {
    
    // Method calling logic
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    
  
  };

})( jQuery );

$('div').tooltip(); // calls the init method
$('div').tooltip({  // calls the init method
  foo : 'bar'
});
$('div').tooltip('hide'); // calls the hide method
$('div').tooltip('update', 'This is the new tooltip content!'); // calls the update method

This type of plugin architecture allows you to encapsulate all of your methods in the plugin's parent closure, and call them by first passing the string name of the method, and then passing any additional parameters you might need for that method. This type of method encapsulation and architecture is a standard in the jQuery plugin community and it used by countless plugins, including the plugins and widgets in jQueryUI.

[edit]

Events

A lesser known feature of the bind method is that is allows for namespacing of bound events. If your plugin binds an event, its a good practice to namespace it. This way, if you need to unbind it later, you can do so without interfering with other events that might have been bound to the same type of event. You can namespace your events by appending “.<namespace>” to the type of event you're binding.

(function( $ ){

  var methods = {
     init : function( options ) {

       return this.each(function(){
         $(window).bind('resize.tooltip', methods.reposition);
       });

     },
     destroy : function( ) {

       return this.each(function(){
         $(window).unbind('.tooltip');
       })

     },
     reposition : function( ) { // ... },
     show : function( ) { // ... },
     hide : function( ) { // ... },
     update : function( content ) { // ...}
  };

  $.fn.tooltip = function( method ) {
    
    if ( methods[method] ) {
      return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    
  
  };

})( jQuery );

$('#fun').tooltip();
// Some time later...
$('#fun').tooltip('destroy');

In this example, when the tooltip is initialized with the init method, it binds the reposition method to the resize event of the window under the namespace 'tooltip'. Later, if the developer needs to destroy the tooltip, we can unbind the events bound by the plugin by passing its namespace, in this case 'tooltip', to the unbind method. This allows us to safely unbind plugin events without accidentally unbinding events that may have been bound outside of the plugin.

[edit]

Data

Often times in plugin development, you may need to maintain state or check if your plugin has already been initialized on a given element. Using jQuery's data method is a great way to keep track of variables on a per element basis. However, rather than keeping track of a bunch of separate data calls with different names, it's best to use a single object literal to house all of your variables, and access that object by a single data namespace.

(function( $ ){

  var methods = {
     init : function( options ) {

       return this.each(function(){
         
         var $this = $(this),
             data = $this.data('tooltip'),
             tooltip = $('<div />', {
               text : $this.attr('title')
             });
         
         // If the plugin hasn't been initialized yet
         if ( ! data ) {
         
           /*
             Do more setup stuff here
           */

           $(this).data('tooltip', {
               target : $this,
               tooltip : tooltip
           });

         }
       });
     },
     destroy : function( ) {

       return this.each(function(){

         var $this = $(this),
             data = $this.data('tooltip');

         // Namespacing FTW
         $(window).unbind('.tooltip');
         data.tooltip.remove();
         $this.removeData('tooltip');

       })

     },
     reposition : function( ) { // ... },
     show : function( ) { // ... },
     hide : function( ) { // ... },
     update : function( content ) { // ...}
  };

  $.fn.tooltip = function( method ) {
    
    if ( methods[method] ) {
      return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    
  
  };

})( jQuery );

Using data helps you keep track of variables and state across method calls from your plugin. Namespacing your data into one object literal makes it easy to access all of your plugin's properties from one central location, as well as reducing the data namespace which allows for easy removal if need be.

[edit]

Summary and Best Practices

Writing jQuery plugins allows you to make the most out of the library and abstract your most clever and useful functions out into reusable code that can save you time and make your development even more efficient. Here's a brief summary of the post and what to keep in mind when developing your next jQuery plugin:

Always wrap your plugin in (function( $ ){ // plugin goes here })( jQuery );
Don't redundantly wrap the this keyword in the immediate scope of your plugin's function
Unless you're returning an intrinsic value from your plugin, always have your plugin's function return the this keyword to maintain chainability.
Rather than requiring a lengthy amount of arguments, pass your plugin settings in an object literal that can be extended over the plugin's defaults.
Don't clutter the jQuery.fn object with more than one namespace per plugin.
Always namespace your methods, events and data.
jQuery.fn is pronounced jQuery effin'

jquery widget

linuxian lilla — Thu, 27 Oct 2011 10:17:37 +0900

http://wiki.jqueryui.com/w/page/12138135/Widget%20factory

m_factory frame

linuxian lilla — Tue, 25 Oct 2011 14:48:19 +0900

<html>

<head>

</head>

<!--link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />

<style>

.left { float : left;

margin :0px;

padding :0px;

}

.right {

float : right;

}

#left {

width : 40%;

}

#right {

width : 58%;

}

</style>

<body>

<h1>Multi-page</h1>

</div>

<li data-role="list-divider">Overview</li>

<li><a href="acura.html">Acura</a></li>

</ul>

</div>

<h3>Broken Bells</h3>

<p>Broken Bells</p></a>

<a href="index.html">Purchase album</a>

</li>

<h3>Broken Bells</h3>

<p>Broken Bells</p></a>

<a href="index.html">Purchase album</a>

</li>

<h3>Broken Bells</h3>

<p>Broken Bells</p></a>

<a href="index.html">Purchase album</a>

</li>

</ul>

</div>

<h4>Page Footer</h4>

</div>

</div>

</body>

</html>

교육 1024

linuxian lilla — Mon, 24 Oct 2011 17:23:36 +0900

gcc test.c a.out

-v

-c -> 현재 만들어진 *.c를 하나로 묶어 버리면된다.

-o

-S

-On

-I 헤더 파일 경로를 설정할때 사용한다.

-L 라이브러리 있는 경로 명을 이야기해준다.

-g 디버깅 할때 심볼릭 테이블을 만든다 jtag 장비를 사용해 디버깅할 때 사용된다

-Wall -ansi

-D

.so 공유라이브러리

.a 정적라이브러리

gcc -c test02.c -I../inc

ar -r libtest.a test01.o test02.o

gcc -o test test_main.c -I../inc ./libtest.a

gcc -o test test_main.c -I../inc -L../lib/ -ltest -> 라이브러리 경로 -L -ltest .so 먼저 찾고 없으면 .a를 찾는다

gcc -Wall -ansi -o temp2 test_main.c -I../inc -L../lib -ltest ANSI 규격에 맞게 검사

gcc -fPIC -c test01.c test02.c -I../inc

gcc -shared -W1,soname,libtest.so.1 -o libtest.so.1.0.1 test01.o test02.o

gcc -o test test_main.c -I../inc -L../lib -ltest

export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/tftpboot/lib

#gdb

list, run, quit

show args, set args

break,

backtrace = bt =where = back

info break, step, next, continue , print

delete -> id 값

clear -> line number

node.js install

linuxian lilla — Thu, 20 Oct 2011 16:14:41 +0900

https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

jquery custom selector

linuxian lilla — Wed, 19 Oct 2011 15:01:53 +0900

$.expr[':'].test = function(obj, index, meta, stack){

    // obj - is a current DOM element

    // index - the current loop index in stack

    // meta - meta data about your selector

    // stack - stack of all elements to loop

   

    // Return true to include current element

    // Return false to explude current element

};


// Usage:

$('.someClasses:test').doSomething();

Let’s now create a very simple custom selector using the template above. Let’s say we want a custom jQuery selector that will return elements with nonempty rel attribute.

$.expr[':'].withRel = function(obj){

  var $this = $(obj);

  return ($this.attr('rel') != '');

};


// Usage:

$('a:withRel').css('background-color', 'yellow');

linuxian

css selector

tornado 파일 수정시 auto restart

javascript event

javascript event

Event Bubbling - 이벤트 버블링

jquery plugin

Plugins/Authoring

CONTENTS

Getting Started

Context

The Basics

Maintaining Chainability

Defaults and Options

Namespacing

Plugin Methods

Events

Data

Summary and Best Practices

jquery widget

m_factory frame

교육 1024

node.js install

jquery custom selector