jQuery基础思维导图以及基础案例

 隔行换色

<script>
			//需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow
		$(function () {
			//获取奇数行tr 设置背景色pink
			$("tr:gt(1):odd").css("backgroundColor","pink");
			//获取偶数行tr 设置为yellow
			$("tr:gt(1):even").css("backgroundColor","yellow");
		});
		</script>

全选全不选

 

<script>
			function selectAll(obj) {
				// alert(obj.checked);
			//获取下边的复选框
				$(".itemSelect").prop("checked",obj.checked);
			}
		
</script>

qq表情选择

 

<script>
        $(function () {
            //需求：点击qq表情，将其追加到发言框中
            //给img图片添加点击事件
            $("ul img").click(function () {
                //追加p标签
                $(".word").append($(this).clone());
            });
        });
</script>

 

下拉列表选择条目左右选择

		<script>
			//需求：实现下拉列表选择条目左右选择功能
		$(function () {
			$("#toRight").click(function () {
				//获取右边的下拉列表对象 append（左边选中的option）
				$("#rightName").append($("#leftName>option:selected"));
			});
			$("#toLeft").click(function () {
				$("#leftName").append($("#rightName>option:selected"));
			});
		});
		</script>