jQuery随笔--常见简单效果

常见的jQuery效果：

常见的jQuery效果练习
1、全选、反选、全不选
2、从左到右，从右到左
3、添加删除记录
注：各个元素获取的方式可以不同，只是明白大概思路以及熟悉用到的知识点

---

内容：

一、全选、反选、全不选
1、效果

2、思路

• 获取各个复选框
• 获取各个按钮，添加点击事件
• 全选框/全不选，特殊一点，不仅自身功能要实现，还要和其他的按钮包括复选框进行联动
  3、代码：

$(function(){
		var $item = $(':checkbox[name="items"]');
		var $checkedAllBox = $('#checkedAllBox');
		$('#checkedAllBtn').click(function () {
			$item.prop('checked',true);
			$checkedAllBox.prop('checked',true);
		});
		$('#checkedNoBtn').click(function () {
			$item.prop('checked',false);
			$checkedAllBox.prop('checked',false);
		});
		$('#checkedRevBtn').click(function () {
			$item.each(function () {
				this.checked=!this.checked;
			})
			if($(':checkbox[name="items"]:checked').length==$item.length){
				$checkedAllBox.prop('checked',true);
			}else{
				$checkedAllBox.prop('checked',false);
			}
		});
		$checkedAllBox.click(function () {
			$item.prop('checked',this.checked);
		});
		$item.click(function () {
			var checkedLength = $(':checkbox[name="items"]:checked').length;
			if(checkedLength==$item.length){
				$checkedAllBox.prop('checked',true);
			}else{
				$checkedAllBox.prop('checked',false);
			}
		})

		$('#sendBtn').click(function () {
			$(':checkbox[name="items"]:checked').each(function () {
				alert(this.value)
			})
		})


	});

4、涉及内容：

$item.prop('checked',true);//一次性设置了所有的checked为选中状态，对立使用的是attr(属性名,属性名对应的值)
$item.each(function () {
				this.checked=!this.checked;//this为当前dom对象
			})

二、从左到右，从右到左
1、效果

2、思路：

• 获取各个按钮，以及左右两个下拉列表
• 通过appendTo添加到各个下拉列表中，appendTo（“追加进入的标签”），appendTo内的参数可以不需要用$获取，appenTo自动会通过写入的参数（要追加的标签）在文档中匹配，例如xxxx.appendTo(‘body’);

3、代码

$(function(){
			//选中添加到右边
			$("button:eq(0)").click(function(){
				//alert($("select[name=sel01] :selected"))//返回的是选中的option的数组
				$("select[name=sel01] :selected").each(function(){
					//alert(this);//this为选中的option
					$(this).appendTo("select[name=sel02]");
				});
			});
			
			//全部添加到右边
			$("button:eq(1)").click(function(){
				$("select[name=sel01] option").each(function(){
					//alert(this);
					$(this).appendTo("select[name=sel02]");
				});
			});
			
			//选中删除到左边
			$("button:eq(2)").click(function(){
				$("select[name=sel02] :selected").each(function(){
					//alert(this);
					$(this).appendTo("select[name=sel01]");
				});
			});
			//全部删除到左边
			$("button:eq(3)").click(function(){
				$("select[name=sel02] option").each(function(){
					//alert(this);
					$(this).appendTo("select[name=sel01]");
				});
			});
		});


<div id="left">
		<select multiple="multiple" name="sel01">
			<option value="opt01">选项1</option>
			<option value="opt02">选项2</option>
			<option value="opt03">选项3</option>
			<option value="opt04">选项4</option>
			<option value="opt05">选项5</option>
			<option value="opt06">选项6</option>
			<option value="opt07">选项7</option>
			<option value="opt08">选项8</option>
		</select>
		
		<button>选中添加到右边</button>
		<button>全部添加到右边</button>
	</div>
	<div id="rigth">
		<select multiple="multiple" name="sel02">
		</select>
		<button>选中删除到左边</button>
		<button>全部删除到左边</button>
	</div>

三、添加删除记录
1、效果

2、思路

• 获取按钮，文本输入框的内容（.value）,以及删除按钮
• 通过获取的各个按钮进行事件监听
• 查找子元素.find(子元素名称)

3、代码

  $(function () {
            function del() {
                var $tr=$(this).parent().parent();
                var $tdName=$tr.find('td:first').text();
                var flag=confirm("你确定要删除"+$tdName+"用户吗?");
                if(flag){
                    $tr.remove();
                }
                return false;
            }


            var $employeeTable = $('#employeeTable');
            $('#addEmpButton').click(function () {
                var $nameVal = $('#empName').val();
                var $emailVal = $('#email').val();
                var $salaryVal = $('#salary').val();
                var $addTags=$(
                  "  <tr>\n" +
                    "        <td>"+$nameVal+"</td>\n" +
                    "        <td>"+$emailVal+"</td>\n" +
                    "        <td>"+$salaryVal+"</td>\n" +
                    "        <td><a href=\"#\">Delete</a></td>\n" +
                    "    </tr>" );
                $addTags.appendTo($employeeTable);
                $addTags.find('a').bind("click",del);
            });

            $('a').click(del);
        })