Jquery-Basic

<!---Part one--->
1. jQuery == $
2. window.jQuery = window.$ = jQuery;
3.$(document).ready(function(){
})==== $(function(){

})

4.যদি সুধু parent element এর মধ্য children element দরকার হয় তবে .children() method ব্যবহার করবে । এই method শুধু parent element এর মধ্যে children element কে select করে ।

৫। আর জদি সব element খুজতে চাই তাহলে .find() method ব্যবহার করতে হবে ।
6. some example
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>part three</title>
	<style type="text/css">
		.container{
			color:green;
		}
		.bg{
			background:black;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>Welcom my Website</h1>
		<ul class="far">
			<h2>lsdkfjdls</h2>
		</ul>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500</p>

		<ul class="em container">
		 <li>Item one</li>
		 <li>item two</li>
		 <li>item three</li>
		 <li>item four</li>
		 <li>
			 <ul>
			 	<li>one</li>
			 	<li>two</li>
			 	<li>three</li>
			 </ul>
		 </li>
		</ul>
	</div>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			console.log('jquery ready');
			//$('ul.em').children('li').css('color','green');//find only child element under parent element.
			//$('ul.em').find('li').css('color','red');//find all element under parent element
			//$('ul.em').find('li:nth-child(2)').css('color','red');//find first two li  element under parent element
			//$('ul.em').children('li').first().addClass('gr');//select children first element under the parent element.
			//$('ul.em').children('li:nth-child(2)').text('Added with jquery');//select second children element under the parent element.
			//$('ul.em').children('li').eq(1).text('Added with jquery');//select second children element under the parent element. eq() method count the element 0,1,2,3.... like this. so first element is 0 and so on.
			/*$('ul.em')
				.children('li')
					.eq(2)
						.next()
						.text('Added with jquery'); select the 4th item list in the child element. */


			//$('li').parent('ul.em').css('background','red');//parent() method select one current set of matched element
			//$('li').parents('.container').addClass('bg');//parents() method all select all parent element of selector
			$('li').closest('.container').css('background','red');//closest() method select the near/close element of the selector.
			console.log($('li').parents('.container'));
			console.log($('li').closest('.container'));
		});
	</script>
</body>
</html>
/*----------------------------------------------------------Event Part one-------------------------------------------------*/
this--- মুলত current যে element select করা হয়েছে সেটা return করে।
	<script type="text/javascript">
			$(document).ready(function(){
				console.log('jquery ready');
				$('button').click(function(){এই খানে button select করা হয়েছে।
					console.log('Button was clicked');
					console.log(this);// bortoman je function select kore hoyesi seita selet kore this method. $() diya wrap korte hoy.
					console.log($(this));//use $ and wrap the 'this' on jquery. এই খানে button এর value টা print করা হচ্ছে this use করে।
					$(this).text('changed');//
				});
			});
		</script>

একই element বার বার select না করে $(this) ব্যবহার করে ভাল।

2.attr() method এই method দ্বারা <a>,<link>tag ও বিভিন্ন tag এর attributes select করা হয় ।
<div class="attr"><a href="asad.com">Asad</a></div>এইখানে a tag এর href এর value asad.com
$('.attr').click(function(){
					$('a').attr('href','http://asaduzzamansuman.com');এইখানে তা change হয়ে http://asaduzzamansuman.com করা হয়েছে ।
				});


3. data() method - শুধু data-ডাটা নাম select করে।
যেমন <button data-file="day">Day</button>
data('file')