Difference between revisions of "JQuery Sandbox"

From Wikicliki
Jump to: navigation, search
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
http://effectize.com/jquery-developer-guide
 +
 +
http://snippets.dzone.com/tag/onload
 +
 +
http://www.learningjquery.com/2008/07/three-quick-ways-to-avoid-widows#more-93 --> ridiculously smart way of avoiding typographical widows (one-word stragglers pushed over to the next line of the title)
 +
== eq selector ==
 +
 +
<pre> $("div").eq(2).addClass("blue");
 +
</pre>
 +
 +
THIS WILL RETURN THE 3RD element as it starts from 0
 +
 
== experiment one ==
 
== experiment one ==
  
Line 38: Line 50:
 
</pre>
 
</pre>
  
−
this is what happens if you use regular expression
+
assuming im trying to get the countrycode from a url thats like "summerisle?countrycode=SM" and you want to retrieve just the code at the end. you can use jquery along with [[Regular Expressions]]
 +
 
 
<pre>
 
<pre>
 
  $("a").click(function(){   
 
  $("a").click(function(){   
Line 45: Line 58:
 
   alert(this.href.match(/countrycode=(\w\w)/));
 
   alert(this.href.match(/countrycode=(\w\w)/));
 
  });
 
  });
 +
</pre>
 +
 +
 +
alternatively you can do the same thing with substrings
 +
 +
<pre>
 +
  $("a").click(function(){ 
 +
var countryname = this.href;
 +
var countrycode = countryname.substring(countryname.length-2);
 +
      alert(countrycode);
 +
});
 +
</pre>
 +
 +
 +
== THE GOOD SHIT LOLLIPOP ==
 +
 +
working file
 +
hello! can anyone help how do i pass an entire URL as a variable FROM javascript to actionscript and then insert it into an image getURL (like a dynamic getURL)?
 +
 +
<pre>
 +
<html>
 +
<head>
 +
<title>EXPERIMENTS</title>
 +
<style>
 +
.item {font-size:10px; border:5px solid black; padding:2em}
 +
div.redcolor {font-size:30px}
 +
</style>
 +
    <script type="text/javascript" src="jquery.js"></script>
 +
<script type="text/javascript">
 +
 +
// SINGLE LINE COMMENT
 +
/* ANOTHER SINGLE COMMENT */
 +
/*
 +
* MULTI LINE
 +
* COMMENTS!!!
 +
*/
 +
 +
  $(document).ready(function(){
 +
// basic container for jQuery 
 +
  }
 +
</script>
 +
</head>
 +
<body>
 +
<div class=item>
 +
<script language="javascript">
 +
// LIST OF MULTIPLES
 +
document.write("<h2>1</h2>");
 +
for(i = 1, fact = 1; i < 5; i++, fact *=i){
 +
document.write(i + "! = " + fact);
 +
document.write("<br>");
 +
}
 +
for(i = 1, multiple = 1; i < 5; i++, multiple *=i){
 +
document.write(i + "<sup>2</sup> = " + multiple);
 +
document.write("<br>");
 +
}
 +
</script>
 +
</div>
 +
<br>
 +
<div class=item>
 +
<script language="javascript">
 +
  $(document).ready(function(){
 +
$("#NN").click(function(){ 
 +
var NNhttp;
 +
var NNhttp = this.href;
 +
alert (NNhttp);
 +
});
 +
 +
$("#MM").click(function(){ 
 +
var countryname = this.href;
 +
var countrycode = countryname.substring(countryname.length-2);
 +
      alert(countrycode);
 +
});
 +
});
 +
 +
</script>
 +
 +
<a name="NN" id="NN" href="experiment.html?countrycode=NN"> Reports its own URL in an alert</a><br>
 +
<a name="MM" id="MM" href="experiment.html?countrycode=MM"> Reports its own countrycode in alert</a><br>
 +
 +
</div>
 +
<br>
 +
<div class=item>
 +
<script language="javascript">
 +
 +
$("#fadingthing").click(function(
 +
addClass("redcolor");)
 +
{
 +
    event.preventDefault();
 +
  $(this).hide("slow");
 +
});
 +
</script>
 +
<div id=fadingthing style="width:100px;height:100px; background:lightblue">BLUE</div>
 +
 +
</div>
 +
</body>
 +
</html>
 +
</pre>
 +
 +
notes of great confusion
 +
 
<pre>
 
<pre>
 +
 +
// Find element by it's id 
 +
var mypara = $("#mypara"); 
 +
// Find elements by it tag name 
 +
var allpara = $("p"); 
 +
// Fine element using XPath
 +
 +
$("a[@src='google.com']"); 
 +
 +
var NN =
 +
($("#XX")) {
 +
var NNhttp = this.href;
 +
</pre>
 +
[[Category:Programming]]

Latest revision as of 02:27, 10 December 2009

http://effectize.com/jquery-developer-guide

http://snippets.dzone.com/tag/onload

http://www.learningjquery.com/2008/07/three-quick-ways-to-avoid-widows#more-93 --> ridiculously smart way of avoiding typographical widows (one-word stragglers pushed over to the next line of the title)

eq selector

 $("div").eq(2).addClass("blue");

THIS WILL RETURN THE 3RD element as it starts from 0

experiment one

this experiment prints the contents of the textarea in an alert, and also prints the tagname of the clicked items into the first span tag available.... 

  <html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){

 $("a").click(function(){  
 var curText= $("#myText").val(); 
  var urlname = curText;
   alert(urlname);
 });
 
     $("*", document.body).click(function (e) {
      e.stopPropagation();
      var getthething = $(this).get(0);
      $("span:first").text("Clicked on - " + getthething.tagName);
    });

 });
    </script>
  </head>
  <body>
  
  
    <a name="namename" id="idname" href="index2.html"> non nummy bong bong</a>
	<br><br>
	<span class=first></span>
	<br><br>
	
<textarea name="myText" rows="5" cols="20" id="myText" style="width:250px;"></textarea> 
	
  </body>
  </html>

assuming im trying to get the countrycode from a url thats like "summerisle?countrycode=SM" and you want to retrieve just the code at the end. you can use jquery along with Regular Expressions 

 $("a").click(function(){  
 var curText= $("#element");
  var urlname = curText;
   alert(this.href.match(/countrycode=(\w\w)/));
 });


alternatively you can do the same thing with substrings 

  $("a").click(function(){  
	var countryname = this.href;
	var countrycode = countryname.substring(countryname.length-2);
       alert(countrycode);
});


THE GOOD SHIT LOLLIPOP

working file hello! can anyone help how do i pass an entire URL as a variable FROM javascript to actionscript and then insert it into an image getURL (like a dynamic getURL)? 

<html>
<head>
<title>EXPERIMENTS</title>
<style>
.item {font-size:10px; border:5px solid black; padding:2em}
div.redcolor {font-size:30px}
</style>
    <script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
	
// SINGLE LINE COMMENT
/* ANOTHER SINGLE COMMENT */	
/*
*	MULTI LINE
*	COMMENTS!!!
*/
	
  $(document).ready(function(){
// basic container for jQuery   
  }
</script>
</head>
<body>
<div class=item>
	<script language="javascript">
	// LIST OF MULTIPLES
	document.write("<h2>1</h2>");
		for(i = 1, fact = 1; i < 5; i++, fact *=i){
			document.write(i + "! = " + fact);
			document.write("<br>");
		}
		for(i = 1, multiple = 1; i < 5; i++, multiple *=i){
			document.write(i + "<sup>2</sup> = " + multiple);
			document.write("<br>");
		}
	</script>
</div>
<br>
<div class=item>
	<script language="javascript">
	  $(document).ready(function(){
	$("#NN").click(function(){  
	var NNhttp;
	var NNhttp = this.href;
	alert (NNhttp);
	});
		
	$("#MM").click(function(){  
	var countryname = this.href;
	var countrycode = countryname.substring(countryname.length-2);
       alert(countrycode);
	});
	});
	
	</script>

	 <a name="NN" id="NN" href="experiment.html?countrycode=NN"> Reports its own URL in an alert</a><br>
	 <a name="MM" id="MM" href="experiment.html?countrycode=MM"> Reports its own countrycode in alert</a><br>
	 
</div>
<br>
<div class=item>
	<script language="javascript">
 
 $("#fadingthing").click(function(
 addClass("redcolor");)
 {
    event.preventDefault();
   $(this).hide("slow");
 });
	</script>
<div id=fadingthing style="width:100px;height:100px; background:lightblue">BLUE</div>	
	
</div>
</body>
</html>

notes of great confusion 


// Find element by it's id  
var mypara = $("#mypara");  
// Find elements by it tag name  
var allpara = $("p");  
// Fine element using XPath 
 
$("a[@src='google.com']");  

var NN = 
($("#XX")) {
var NNhttp = this.href;
Retrieved from "http://dbbd.sg/wiki/index.php?title=JQuery_Sandbox&oldid=5010"