jQuery学习--选择器的使用

1. jQuery的ready事件 -> js的onload

• 大多是第一种，匿名函数写法

	<script type="text/javascript">
		// 匿名函数写法 ready 开始函数
		$(function() {
			// -> js的窗体加载事件
			alert("hello jQuery!");
		});
		
		// 其它写法
		jQuery(function() {
			alert("load 2");
		});
		
		$(document).ready(function() {
			alert("load 3");
		});
		
		jQuery(document).ready(function() {
			alert("load 4");			
		});
		
	</script>

2. 选择器的使用

• 基本选择器

	$(function() {
		$("#div1").css("background", "pink");
		$(".div2").css("background", "orange");

		// 元素选择器
		$("div").css("background", "red");
			
		// 组合选择器
		$("#div1, .div2").css("background", "yellow");		
	});

• 层级选择器

			// form 下面所有input元素 包括孙孙子
			$("form input").css("background", "yellow");
			
			// form 下面的直接子级元素 第一层儿子
			$("form > input").css("background", "red");
			
			// label下跟着的子级元素
			 $("label + input").css("background", "pink");
			
			//获取所有同辈的元素
			$("form ~ input").css("background", "aqua");

• 基本筛选器

			// odd 隔行变色
			$("#tab1 tr:odd").css("background", "aqua");
			
			// 获取下标为0 的表格第一行html内容
			alert($("#tab1 tr:eq(0)").html());
			// 基本筛选器还有许多用法... 请看api文档

• 属性选择器

			// 属性是否包含p标签
			$("#divHello:has(p)").css("background", "blue");
			
			// 属性选择器
			// span元素所有 含id的属性的 元素
			$("span[id]").css("background", "blue");
			
			// 选中input名字为newsletter的复选框
			$("input[name='newsletter']").prop("checked", true);
		
			// 还有请看api

• 表单操作

			// type=button 点击事件
			$(":button").click(function() {
				alert("hello,...");
			});

• 获得下拉框列表的值

			// 下拉框选中的值
			var val = $("select option:selected").val();
			alert(val);

jQuery中文文档下载地址
更新…