Unknowns of JavaScript

                You will probably find some thing unknown to you if you are not an expert JavaScript programmer and not familiar with JavaScript meta programming techniques! If that is the case, i can assure you that you will find something new and useful in at least one of the following posts.

Redefine function within function to avoid unnecessary if else blocks in JavaScript - this post is about self optimizing JavaScript functions.
Identifying weather JavaScript function is used as a constructor - this tells you the difference when a JavaScript function is called with new keyword and as a regular function call.
Public, Private Methods and Variables in JavaScript - as you know there are no public or private keywords in JavaScript to define the scope as in Java. This is about doing it even without those keywords.
Retain values between function calls without using global variables - normally we use global variables to retain some value between function calls. this tells you how to do it without using global variables.

Adding source file to the Google code using TortiseSVN

Go to the source tab of your projects page. There you will find a svn checkout URL of the project and the username. My URL looked like following

https://ceyloan-wordpress-theme.googlecode.com/svn/trunk/

In the same page, you will find a link to googlecode.com password. , follow this link to get the password.

Install TortiseSVN

Right click on the folder containing the source files. Click on TortiseSVN > Import

Enter the trunk URL, you will be prompted to enter the username and password.

That’s about it!

Creating an application specific library for application developed using Zend Framework

                I just wanted to do this when I tried to implement link exchange application using Zend Framework to understand the usage of Zend.

Here is what I wanted to do,

Create an Acl plugin and put it in a folder inside the library folder. Path from the application folder in www directory is as follows

linkdir/library/Linkdir/controller/plugin/Acl.php

in order to identify the this plugin by frame work I needed to add its name space to autoloader. If you are trying to do the same solution is here. Otherwise you are at the wrong place and this won’t be of any use for you.

Here is how I did it

I added the following line on the applicatioin.ini file

autoloaderNamespaces[] = "Linkdir_"

Since I added the name space my class name also needed to reflect the name space. Therefore the class name should look like something following

Linkdir_Controller_Plugin_Acl

Folder names are separated using ‘_’ .

There might be a way to do this by overriding  _initAutoload() method in the bootstrap.php file in the application folder.

Rounded Corners for IE using .htc files

                I’ve tried two methods which I found on the internet. They can be found in following URLs. These URLs point to the sites which I found them.

border-radius.htc

http://css3pie.com/

Unfortunately these have some issues. But the PIE solution is more advance and complete in my opinion. This is said by experience not by knowing inside workings of these.  I have mentioned the issues that I had to face using these solutions, there can be more but these are what I got into. I recommend PIE as the better solution. These are not just for the border radius; they also provide solutions to box shadow and some other stuff.

Issues Using border-radius.htc

Generate border lines for elements which were not present in the initial design.

Breakup jQuery code.  (This broke the spot light effect which I used)

Background images get repeated even if I use no-repeat

Issues Using PIE

I could not get the opacity controlling of elements which had background images. They work fine when background images are not present.

In case you are looking for equivalent properties for border-radius in CSS, -webkit and –moz look at the following url.

http://jayaprabath.blogspot.com/2011/04/how-to-provide-cross-browser-support.html

you may also read
Scheduling Tasks with JqueryCreate a Spot light effect using JQueryhttp://jayaprabath.blogspot.com/2011/05/css-gradient-cross-browser-support.htmlCreate a Simple Light box effect using jquery

Retain value between function calls without using global variables in JavaScript using callee

                Normally when we want to retain a value we use a global variable which is defined outside the scope of the function we are calling. But we can actually retain a value without using global variables but by using built in variables passed to the function. When a function is called two built in variables are made available to the function. One of them is the arguments variable. This variable contains a property named callee which contains a reference to the function itself.

                Since we can get a reference to the function we can use a property for that function to store the required value. See the example.

function deposit(amount){

var funct=arguments.callee;

 if(!funct.balance)

{

funct.balance=0;

}

funct.balance+=amount;

 return funct.balance;

}

When the function is called for the first time there is no property named balance for the function. Therefore we have to check it an initialize the property. Afterwards, we each time the function get called we can extract the stored value and modify it finally return the value. I tried and failed to develop a self-modifying function to avoid check each time and only check once for the existence of the property. You may give it a try!

Just  copy and paste this to firebug console and add these to check.

deposit(10);  //this would return 10

deposit(20); // this would return 30


You may also like to read
Change the Context using call() and apply() in JavaScriptRedefine function within function to avoid unnecessary if else blocks in JavaScriptWrapping a block of String within a particular element with HTML elements in JQuery using special key words to identify the blockhttp://jayaprabath.blogspot.com/2011/06/restrict-users-to-enter-numeric-values.html

JQuery image transitions

there are many ways to provide transition effects using animate() method of jquery. most of the effects mentioned here use the background-position property to prepare elements before they are being animated.

this jquery image slider consist of 10 different effect which are chosen randomly to apply for the animation. if you want to minimize the size of the code, you can bundle together some effects because most of these effects only require simple property changes. effects which can be budled in to a single function are named in a consistent manner. i dont want to minimize it because i need add some more effects. this format is better for testing. you can try and improve it if you want. download the code and the demo from the link beow.
http://www.mediafire.com/?e7eeoe08wj8re

The tricky part of Java method overriding

The tricky part of Java method overriding

                You can easily override a method of a super class in one of its subclasses.  But if you invoke an overridden method from a polymorphic object, the method of the actual object type gets invoked. Let’s look at an example,

class A{

public void test(){

                System.out.println(“I’m A”);

}

}

class B{

public void test(){

                System.out.println(“I’m B”);

}

}

Then some where in the code you might have a code similar to following

A a=new B();

a.test();

The output would be, I’m B. this is OK. But what happens when you invoke methods which can be overridden by a subclass. Well, let’s see,

class A{

private int a;

public A(int a){

this.a=a;

test();

}

Public void test(){

                System.out.println(“value of instance var of A after adding 2=”+(a+2));

}

}

class B{

private int b;

public B(int b){

                super(b);

                this.b=b;

}

public void test(){

                System.out.println((“value of instance var of B after adding 2=”+(b+2));

}

}

Then some where in the code you execute some thing similar to following

B b=new B(1);

The output would be,

value of instance var of B after adding 2=2

The overridden method of class B get called before the instance variable of B is not initialized. Call to super constructor must come first in the constructor of subclass disallowing subclass to initialize variables to avoid this havoc.

This shows that calling methods inside a constructor which can be overridden by subclasses is not suitable. You have to pay the price for it some day. Invoke only those which cannot be overridden by subclasses inside your constructor.

Java Variable passing and Assignment operation

Java Variable passing and Assignment operation

A variable can be considered as a holder containing a bit pattern. In primitive type variables those patterns contains the value of the variable. But what about variable which are referring to objects. Well that dose not contains the actual object; they just contain a bit pattern to get the actual object. Then what is the format?? I don’t know, but it somehow gets the object using the bit pattern.

What happens when you assign a value to a variable? Well, if it’s a primitive type the bit pattern representing the value get stored in the variable, if it’s a object type some bit pattern get stored so that it would refer to the actual object. Some times casting might be required and can generate weird results. Try this for example (byte b= (byte) 128 ;). If you can’t guess the result, you might have to do little bit of reading. I’m not going to talk about this here.

When you assign a variable to another variable, if it’s a primitive variable value of the variable get copied to the new variable.

Int a=5;

Int b=a;

If you change the value of b ( b=6) value of a remains 5. This is because variable b get a copy of the bit pattern stored in a, when the assignment is done. So, there is no drama in assignment operation when it comes to primitive type variables.

But when it comes to object type variables, there is a little bit of drama. Look at the following,

class Test{

            int t;

}

Test a=new Test();

Test b=a;

b.t=1;

System.out.println(“b.t=”+b.t);

System.out.println(“a.t=”+a.t);

Output would be

b.t=1;

a.t=1;

This happens because both a and b contains the same bit pattern which refer to a single object. But if you assign a newly created object to b after assigning this would be different.

Test a=new Test();

Test b=a; //bit pattern of a get copied to b, therefore both refer to the same object

b=new Test(); // b get a new bit pattern therefore b is referring to a different object

b.t++;

System.out.println(“b.t=”+b.t);

System.out.println(“a.t=”+a.t);

Output would be

b.t=1;

a.t=0;

Comments in the code would clarify it!!!!!!

There is one exception when you consider String objects. Those are treated differently. Strings cannot be modified. A new String would be created by the VM when you “change” a String. Look at the following

String a=”test”;

String b=a; // both b and a refer to the same string

b=b+” change”; // new string is created and b refers to the new String, original string is //left //unchanged

When you pass variables to methods similar thing would happen. A copy of the bit pattern would get passed in to the method, thus causing similar effects to those mentioned above.

Intent Filter to Appear in dynamic menus of other Android apps

This post has been moved to a different site. you will be redirected :)

Android Posts

Following are some of the posts i published which are related to android development

• Detecting Back Key press in Android

• MD5 fingerprint for android debug keystore

• Access localhost of the computer from android emulator
• 
  
• Opening a File Using Default Application in Android

• Google Maps API Key

• Install an apk file on the Emulator in ubuntu

Javascript Posts

here are some of the posts i published which are related to javascript and jquery

• Access Google Maps with JavaScript

• Jquery Selections Quick Reference

• Restrict users to enter numeric values to a form field with JQuery

CSS Posts

below are some of the posts which i published which are related to using CSS

• Create tool-tips using CSS

• CSS gradient cross browser support

• CSS background property reference

• How to Create a Drop Down Menu only using CSS – Without JavaScript

• How to Style HTML Elements to Give Them a Button Like Appearance

  
  
  
  
  
  
  
  

Detecting Back Key press in Android

This post is moved to a different site! you will be redirected to the new location.

Opening a File Using Default Application in Android

Opening a File Using Default Application in Android
Here is the  code to do this

File file = new File("direcotry","fileName");
Intent intent = new Intent();
intent.setAction(android.content.Intent.ACTION_VIEW);
intent.setDataAndType(Uri.fromFile(file), "mimetype");
startActivity(intent); 

if you want to open a audio file code would look something similar to the following

File file = new File("direcotry","fileName");
Intent intent = new Intent();
intent.setAction(android.content.Intent.ACTION_VIEW);
intent.setDataAndType(Uri.fromFile(file), "audio/*");
startActivity(intent); 

using setDataAndType method would allow you to over rule the actual mime type of the file.

JackRabbit Webdav method examples for WebDav client

This post has been moved to a different site. You will be redirected to the new location.

Access localhost of the computer from android emulator

Access localhost of the computer from android emulator

if you have tried to access localhost from android emulator using http://localhost or the ip address 127.0.0.1 , you would have seen an error message saying page not found. solution to this is to use 10.0.2.2 as the ip address for the localhost. you can access the localhost of your machine using this ip address.

you can see how socket are used to communicate with localhost and android emulator here.

Restrict users to enter numeric values to a form field with JQuery

This post has been moved to a different site! you will be redirected to the new location!

Access Google Maps with JavaScript

This post is permenatly moved! you will be redirected to new location!

CSS gradient cross browser support

Image	Morzilla	Webkit
	-moz-linear-gradient(left, red, blue);	-webkit-gradient(linear, left center, right center, from(red), to(blue));
	-moz-linear-gradient(45deg, red, blue);	-webkit-gradient(linear, left bottom, right top, from(red), to(blue));
	-moz-linear-gradient(90deg, red, blue, green);	-webkit-gradient(linear, center bottom, center top, from(red), color-stop(50%,blue), to(green));
	-moz-linear-gradient(90deg, red, blue 25%, green);	-webkit-gradient(linear, center bottom, center top, from(red), color-stop(25%,blue), to(green));
	-moz-radial-gradient(red, blue);	-webkit-gradient(radial, center center, 0, center center, 70.5, from(red), to(blue));
	-moz-radial-gradient(40% 40%, farthest-side, red, blue);	-webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(red), to(blue));
	-moz-radial-gradient(40% 40%, closest-side, red blue);	-webkit-gradient(radial, 40% 40%, 0, 40% 40%, 40, from(red), to(blue));
	-moz-radial-gradient(right top, red, blue, green);	-webkit-gradient(radial, right top, 0, right top, 141, from(red), color-stop(50%, blue), to(green));
	-moz-radial-gradient(right top, red, blue, green);	-webkit-gradient(radial, right top, 0, right top, 141, from(red), color-stop(50%, blue), to(green));
	-moz-radial-gradient(60% 60%,circle contain,red,blue 75%,green);	-webkit-gradient(radial,45% 45%,5,60% 60%,40,from(red),color-stop(75%, blue),to(green));

Aqua_Toggle: Moodle Theme

Aqua_Toggle

This theme was developed by extending Moodles standard_blue theme. This will give an aqua button look to side blocks, navigation menu and heading blocks in moodle. Furthermore this theme incorperates a bit of jquery functionality provide slide up and slide down animation effects when a user click on the headers of side blocks and heading blocks. Here is a screen shot of the moodle page with aqua_toggle theme.

Donwload the theme form here: http://www.mediafire.com/?80kt30jejs30tnq

Mantis Plugin Development

Mantis plug-in development is a very simple task. What you need to do is put set of folders and files in place and the Mantis will identify your plug-in. Of course your plug-in must do something useful, its up to you to decide what your plug-in should do. Here I'll look at the basics of Mantis plug-in development.

I learn this when I developed an authentication plug-in for mantis to authenticate users using SimpleSamlPhp. But unfortunately there is no way to develop a authentication plug-in without hacking the code base. There were some discussion about developing authentication plug-in system in Mantis forums and mailing lists. Checkout the forums and mailing lists if you want to develop an authentication plug-in.

OK I'll stop , lets go through the process to get your plug-in up and running.

Create a folder inside the plug-ins directory and give it a name(Test). This is the base name of the plug-in it is used to identify the plug-in.

Create a PHP file inside the directory with the same name as the directory name(Test.php). This file is sufficient enough for mantis to identify your plug-in, all the others are optional.

Create a directory inside your plug-in directory and name it as pages. This will contain the pages for your plug-in. Only files with .php extension should be stored in this directory.

Crete another directory inside your plug-in directory and name it as files. This folder will hold the extra files you need for your plug-in. For example CSS files.

Create a directory named lang inside your plug-in directory. This directory will hold language files which can be used for localization.

Now you have all the folders which are identified by the Mantis as parts of your plugin. So, lets take a look at what goes inside the Test.php file.

All the mantis plugins are created by extending the MantisPlugin class. So, create a class TestPlugin in the Test.php file. Class name is formed by appending “Plugin” to the base name of your plugin.

class TestPlugin extends MantisPlugin{}

next you need to define a funcation named register in your class. This will override the register function in MantisPlugin class.

class TestPlugin extends MantisPlugin{

function register(){

}

}

now lets see what goes inside the register function

function register(){

$this->name='Test';

$this->version='1.0';

$this->require=array('MantisCore'=>'1.2.0');

$this->description='description';

$this->page='default plugin page';

$this->author='author name';

$this->url='support webpage';

$this->contact='author contacts';

}

Name and Version are must. Other details are optional. Now Mantis can identify your plugin and you can install it. Of course this is of no use.

Lets see what are the other functions that can go inside your class.

function events(){

return array();

}

function hooks(){

return array();

}

function config(){

return array();

}

What are all these functions?

function events()

Here you can define the events which are triggered by your plugin. Others can listen to these events and do something useful. You need to put them in an array. Key would by the event name and the value would be the event type. There are five event types defined in Mantis, each of those has their own purpose. Here are the event types.

EVENT_TYPE_EXECUTE

EVENT_TYPE_OUTPUT

EVENT_TYPE_CHAIN

EVENT_TYPE_FIRST

EVENT_TYPE_DEFAULT

see the Mantis documentation for more details on these event types. So lets add couple of events for the plugin.

Function events(){

$test_events=array();

$test_events['EVENT_TEST_FIRST']=EVENT_TYPE_EXECUTE ;

$test_events['EVENT_TEST_SECOND']=EVENT_TYPE_DEFAULT ;

return $test_events;

}

function hooks()

this is the function in which you register your event handlers. This function returns an array containing event name as the key and your event handler as the value. You can listen to your own events or any other events that are triggered by Mantis.

Here i'm going to add an event handler which will handle an event defined by my plugin.

function hooks(){

$handlers=array();

$handlers['EVENT_TEST_FIRST']='first';

}

function first($p_event){

echo 'hello';

}

every events handler receives some value for $p_event. This can be used to identify the event in cases where same function is used to handle many events. There are some other variables that comes as parameters to your function depending on the type of event you are handling.

function config()

this function allows you to define any configuration option for your plugin. They are stored in the array returned by this function. Names of configuration options are given as keys and default values are given as values of the array.

So lets add some configuration options to you plug-in.

function config(){

$my_config=array();

$my_config['test_config']='hello';

}

you can access these configuration options using plugin_config_get($config_name) function and modify those using plugin_config_set function.

now your Test.php file is complete. You can do something more useful in your event handlers and announce others of something important that you've done using events that you've defined.

So lets give it a test. Add a new file named first.php in to you pages directory. We are going to trigger our EVENT_TEST_FIRST event when some one access the page and see our first($p_event) function in action which is registered as an event handler for the triggered event.

Here is the code that goes inside the file.

<?php

echo 'testing events <br/>';

echo 'our event handler should print “hello” in the next ling <br/>';

event_signal();

?>

you can access the page using the url mentioned below, after you have installed the plugin. To install the plugin go to the manage page and then go to the manage plugin page by clicking the links in main page.

mantis/plugin.php?page=Test/first

similarly you can test your configurations using plugin_config_get and plugin_config_set function.

You can add a config.php file to pages directory to allow users to change configurations and you can process and set the values by forwarding submissions to another file in pages directory named config_update.php.

These are just to indicate the standard way of setting your configuration options. You can always do those as you like, but I suppose standard way is better.

Create tool-tips using CSS

It's real fun for me to do this without using JavaScript. Of course this would mean that extra markup is in the code. If you want clean markup you can use JavaScript to generate markup on the fly, but CSS will stay the almost the same. So here is the HTML

<html>

<head>

<tilte>Tool Tips</title>

<link type="text/css" href="tooltips.css" rel="stylesheet" />

</head>

<body>

<h1>Example</h1>

<div><a href='#' class='tooltip'>tooltip<span ">this is the awsome

tool tip! this gives me great pleasure</br></span></a>

</div>

</body>

</html>

nothing fancy about this. Content inside the <span> is used as the tool-tip. I told u , extra markup!!.

The trick in the CSS which enabled me to throw javascript away was the :hover psudo class. Postioning property is set to absolute and margin-left to a large minus value this will remove the content of the span out of the window. When mouse is hovering over the <a> element we change the property to bring them back to the screen. Daily hacks with -webkit and -moz is used to provide cross browser support.

Here is the CSS

a{

display: box;

font-size: 20;

padding: 2px 10px;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

background-image:-moz-linear-gradient(top,green,yellow);

background: -webkit-gradient(linear,left center,right center,

from(green),to(yellow));

outline: none;

cursor: select;

text-decoration: none;

position: relative;

}

a span {

font-size: 12px;

margin-left: -999em;

position: absolute;

}

a:hover span {

border-radius: 5px 5px; -moz-border-radius: 5px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);

-webkit-box-shadow:5px 5px rgba(0, 0, 0, 0.1);

-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

font-family:sans-serif;

color:white;

position: absolute;

left: 3em;

top: 3em;

margin-left: 0;

width: 200px;

background: #B22222;

border: 1px solid #FF8C00;

}

border-radius and box-shadow are just to make it little fancy. First CSS block is to give the <a> element a button like appearance. Left and top properties are set to slightly adjust the positioning of the <span> relative to its containing <a> element. In simple terms to move it little left and down.
Here are some other related post
http://jayaprabath.blogspot.com/2011/04/how-to-style-html-elements-to-give-them.html
http://jayaprabath.blogspot.com/2011/04/how-to-create-drop-down-menu-only-using.html
http://jayaprabath.blogspot.com/2011/04/css-background-property-reference.html
http://jayaprabath.blogspot.com/2011/04/how-to-provide-cross-browser-support.html

How to Style HTML Elements to Give Them a Button Like Appearance

 This can easily be done using basic css properties. Here I'm going to style a div element. Here is the code.

<html>

<head>

<style type="text/css" rel="stylesheet">

.button-div{

/*set geometric properties of the div*/

width: 100px;

height: 20px;

padding: 3px;

border: 2px solid #ccc;

-webkit-border-radius: 12px;

/*style the text*/

text-align:center;

font-family:Helvetica, sans-serif;

font-weight:bold;

color: white;

/*style the div*/

background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(105, 105, 105, 0.8)), to(rgba(128, 0, 0, .9)));

border-color:brown;

}

</style>

</head>

<body>

<div class="button-div">

Button

</div>

</body>

<html>

This work really nicely on Chrome. You might must make any necessary modifications in order to get the same appearance in other browsers such as firefox. I'm not sure weather firefox support gradient but you can certainly get the rounded corners using -moz-border-radius . Hope this will help some one out there.

How to provide cross browser support for the border-radius CSS property

The border-radius property is not well supported by mayn browsers. However we can use proprietary properties provided by Firefox an Webkit. But there naming is inconsistent. Following shows border-radius equivalence for CSS, Firefox and Webkit.
IF you are looking for IE hacks look hrere
http://jayaprabath.blogspot.com/2011/11/rounded-corners-for-ie-using-htc-files.html

CSS3	Firefox	Webkit
border-radius	-moz-border-radius	-webkit-border-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border- top-left-radius
border-top-right-radius	-moz-border- radius-topright	-webkit-border- top-right-radius
border- bottom-right-radius	-moz-border- radius-bottomright	-webkit-border- bottom-right-radius
border- bottom-left-radius	-moz-border- radius-bottomleft	-webkit-border- bottom-left-radius

Jquery Selections Quick Reference

Selecting an DOM element

$('element')

Ex: $('div') – selects <div> elements

Selecting descending elements of an element

$('parent_element_selector').find('child_element_selector')

Ex: $('div').find('p') – selects <p> elements inside <div> elements

$('child_element',$('parent_element'))

Ex: $('p',$('div')) - selects <p> elements inside <div> elements

Selecting an element which has a particular element as its descendent's

$('element:has(descendant_element)')

Ex: $('div:has(h1)') – selects all <div> elements which contains <h1> elements

Selecting the first child of an element

$('element child_element:first')

Ex: $('ul li:first') – selects the first <li> element in each <ul> element

Selecting the last child of an element

$('element_selector child_element:last')

Ex: $('ul li:last') – selects the last <li> element in each <ul> element

Selecting children or immediate descending elements of an element

$('parent_element'_selector).children()

Ex: $('div').children() - selects all direct children of <div> elements

$('parent_element_selector').children('child_element_selector')

Ex: $('div').children('p') – selects set of <p> elements which are direct children of <div> elements

Selecting the parent of an element

$('element_selector').parent()

Ex: $('div').parent() - selects the parent element of each div element

Selecting adjacent siblings of an element

$('element_selector + sibling_element_selector')

Ex: $('h1 + h2') – selects <h2> elements which are adjacent to <h1> elements

Selecting all the siblings of an element

$('element_selector').siblings('sibling_element_selector')

Ex: $('h1').siblings('h2') – selects all the <h2> elements which are siblings of <h1> elements

Selecting all the siblings beyond an element

$('element_selector').nextAll('sibling_element_selector')

Ex: $('div').nextAll('h1') – selects all sibling <h1> elements after each <div> element

Selecting the first sibling beyond an element

$('element_selector').next('sibling_element_selector')

Ex: $('div').next('h1') – selects first <h1> sibling after each <div> element

Selecting the first element which is located before a particular element

$('element_selector').prev('sibling_element_selector')

Ex: $('div').prev('h1') – selects first <h1> element before each <div> element

Selecting all siblings which are located before a particular element

$('element_selector').prevAll('sibling_element_selector')

Ex: $('div').prevAll('h1') – selects all <h1> elements before each <div> element

Selecting elements based on their attributes

$('element_selector[attr_name=”attr_value”]')

Ex: $('a[href=”http://www.example.com”]') - selects all <a> elements with “href=http://www.example.com”

$('div[class*=”test”]') - selects all <div> elements that contains “test” as part of their class attribute value

$('div[class|=”test”]') – selects all <div> elements in which their class attribute is either equal or starts with “test”

$('[class!=”test”]') - selects all elements whose class is not equal to “test”

Selecting Form elements of a particular type

$(':type_name')

Ex: $(':text') – selects all text input element

Ex: $(':radio') – selects all radio button input elements

Selecting elements using CSS selectors

$('#id')

Ex: $('#myid') – selects the element with the id='myid'

$('.classname')

Ex: $('.myclass') -selects the set of elemtns with attribute class='myclass'

Ex:$('div p a') – selects the set of <a> elements which are inside <p> elements and those <p> elements are contained inside <div> elements

Similarly all the other CSS selectors can be used for selection.

Note- Either CSS selectors or DOM element names can be used as selectors. Further Jquery provides filtering capability to filter the selections.