JQuery-语法、选择器、过滤器

jQuery基本语法

	<script type="text/javascript">
		//dom对象转换成jQuery对象
		var username = document.getElementById("username");
		//建议jQuery对象以$开头
		var $username = $(username);
		//alert($username.val());
		
		//将jQuery对象转换成dom对象
		var username2 = $username[0];
		//alert(username2.value);
		var username3 = $username.get(0);
		alert(username3.value);
		
	</script>

基本选择器

<script type="text/javascript">
	//jQuery的页面加载成功事件
	$(document).ready(function() {
		//alert("123");
	});

	$(document).ready(function() {
		//<input type="button" value="选择 id为 one 的元素." id="btn1"/>
		//id选择器
		$("#btn1").click(function(){
			$("#one").css("background-color","red");
		});
		//<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
		$("#btn2").click(function(){
			$(".mini").css("background-color","green");
		});
		//<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
		$("#btn3").click(function(){
			$("div").css("background-color","yellow");
		});
		//<input type="button" value="选择 所有的元素." id="btn4"/>
		$("#btn4").click(function(){
			$("*").css("background-color","blue");
		});
		//<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
		$("#btn5").click(function(){
			$("span,#two").css("background-color","green");
		});
	});
</script>

层次选择器

<script type="text/javascript">
	$(document).ready(function() {
		//<input type="button" value="选择 body内的所有div元素." id="btn1" />
		$("#btn1").click(function() {
			$("body div").css("background-color", "red");
		});
		//<input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
		$("#btn2").click(function() {
			$("body>div").css("background-color", "red");
		});
		//<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
		$("#btn3").click(function() {
			$("#one+div").css("background-color", "red");
		});
		//<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
		$("#btn4").click(function() {
			$("#two~div").css("background-color", "red");
		});
		//<input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/>
		$("#btn5").click(function() {
			$("#two").siblings("div").css("background-color", "red");
		});
	});
</script>

基本过滤选择器

<script type="text/javascript">
	$(document).ready(function() {
		//<input type="button" value="选择第一个div元素." id="btn1"/>
		$("#btn1").click(function() {
			$("div:first").css("background-color", "red");
		});
		//<input type="button" value="选择最后一个div元素." id="btn2"/>
		$("#btn2").click(function() {
			$("div:last").css("background-color", "green");
		});
		//<input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
		$("#btn3").click(function() {
			$("div:not('.one')").css("background-color", "green");
		});
		//<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
		$("#btn4").click(function() {
			$("div:even").css("background-color", "green");
		});
		//<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
			$("#btn5").click(function() {
			$("div:odd").css("background-color", "green");
		});
		//<input type="button" value="选择索引值等于3的元素." id="btn6"/>
		//<input type="button" value="选择索引值大于3的元素." id="btn7"/>
		//<input type="button" value="选择索引值小于3的元素." id="btn8"/>
		//<input type="button" value="选择所有的标题元素." id="btn9"/>
			$("#btn9").click(function() {
			$(":header").css("background-color", "green");
		});
		//<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
			$("#btn10").click(function() {
				$(":animated").css("background-color", "green");
			});
	});
</script>

input标签绑定获得焦点和失去焦点事件

		//<input type="text" value="请输入账号" defaultValue="请输入账号" />
		//<input type="text" value="请输入密码" defaultValue="请输入密码" />
		$("input[type='text']").on("focus blur",function(){
			//获得当前文本框的默认值
			var dv = $(this).attr("defaultValue");
			
			//判断是否获得焦点
			if($(this).is(":focus")){
				//获得焦点，如果当前值是默认值，将value值置为空
				if($(this).val() == dv){
					$(this).val("");
				}
			}else{
				//失去焦点，将value值置为默认值
				if($(this).val().length == 0){
					$(this).val(dv);
				}
			}
			
		});

HTML5中可以用一个placeholder属性完成上面的功能

	<input type="text" placeholder="默认值"/>