Ir al contenido principal

JQuery - Methods

Method Listener

There are two ways to bind events to elements

Case 1: 

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

} );

Case 2: 

$("my_element").bind('click',function () {

} );


Unbind method

The function .unbind remove the mehod pass as paramenter. 

Also the function .each iterate in all the elements from the element selector.

$("div.guess_box").each( function(){
$(this).unbind ('click');
});

Functions

There are two ways to declare a function

Function declaration

function nameFunction() {
   //Code
}

Function variable

var nameFunction = function () {
   //Code
}

Anonymous Function

Is when inside another function you declare your own function. In this case $(this).unbind('click'); is the anonymous function.

$("div.guess_box").each( function(){
$(this).unbind('click');
});

Contains Function

Compate inside this if have the element with Id "has_discount"

if ($.contains(this , document.getElementById("has_discount"))) {
$(this).addClass("discount");
}else{
$(this).addClass("no_discount");
}

Functions Catalogue

$("p").empty() - Delete all the content from an element

$("span").replaceWith("<div>Change DOM</div>") - Delete all the content from an element

$("span").before("<div>Change DOM</div>") - Insert a element before span

$("span").after("<div>Change DOM</div>") - Insert a div element after span

Animate Functions

This function only work in numerical properties. The first parameter is the property to be affected with the end value and the second parameter is the duration.

The default time is 400 milliseconds.

$("p").animate({left:"100 px"}, 500);

In the first parameter can include many properties.
$("p").animate({left:"100 px", width: "200"}, 500);

Climb the DOM

parent() - Get the father element
$(".element").parent().   

$(".element").parents(). - Get all the parents elements   

$(".element").prev() - Get the first sibling  to the left

$(".element").children() - Get all the children elements

$(".element").next() - Get from the sibling elements, the one at the right from the first element at the left.

$(".element").closet("#id_element") - Climb through all parents until find the #id_element parent.

Filter the DOM

$(".element").children().first(); - Get the first element from the collection.
$(".element").children().last(); - Get the last element from the collection.
$(".element").children().eq(2); - Get the element from the index.
$(".element").children().slice(2,3); - Get the elements between the indexes.
$(".element").children().filter(".organic"); - Get all the father elements from the selector element.
$(".element").children().not("#id_element"); - Get the elements that not mathc the #id_element.

Best Practice

$variable  - Use a dollar sign before the variable name to indicate you store values from JQuery.



Positions

  • Relative



  • Absolute
           
  • Fixed
        








Comentarios

Publicar un comentario

Entradas populares de este blog

C# Using tabs

To use tabs in C# use the TabContainer element from AjaxControlToolkit Include AjaxControlToolkit  Include in the Web.config file, inside the tag <system.web> the following code  <pages>       <controls>         <add tagPrefix="ajaxCTK" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit"/>       </controls>     </pages>   Include TabContainer element First  include TabContainer element that is the section where all the tabs will be displayed. <ajaxCTK:TabContainer ID="TabContainerUpdate" runat="server"                 Height="800"                 CssClass="ajax__tab_style"> </ajaxCTK:TabContainer> Second per each tab include the following code corresponding to each ...
Publicar un comentario
Leer más

Rails - Basic Steps III

pValidations Validations are a type of ActiveRecord Validations are defined in our models Implement Validations Go to   root_app/app/models Open files  *.rb for each model Mandatory field validates_presence_of   :field Ex:   validates_presence_of    :title Classes The basic syntax is class MyClass        @global_variable                def my_method              @method_variable        end end Create an instance myInstance = MyClass.new Invoke a mehod mc.my_method class() method returns the type of the object In Ruby, last character of method define the behavior If ends with a question -> return a boolean value If ends with an exclamation -> change the state of the object Getter / Setter method def global_variable       return @global_variable end ...
Publicar un comentario
Leer más

Python create package

Create a root folder Create a sub-folder "example_pkg" that contains the funtionallity packaging_tutorial/ example_pkg/ __init__.py In the root folder create the following structure  packaging_tutorial/ example_pkg/ __init__.py tests/ setup.py LICENSE README.md in the setup.py contains the configuration of the packages your package is found by find_packages() import setuptools with open ( "README.md" , "r" ) as fh : long_description = fh . read () setuptools . setup ( name = "example-pkg-YOUR-USERNAME-HERE" , # Replace with your own username version = "0.0.1" , author = "Example Author" , author_email = "author@example.com" , description = "A small example package" , long_description = long_description , long_description_content_type = "text/markdown" , url = "https://github.com/pypa/sam...
Publicar un comentario
Leer más