jQuery2

最新推荐文章于 2022-04-28 10:33:03 发布

Zz_z__

最新推荐文章于 2022-04-28 10:33:03 发布

阅读量82

点赞数

分类专栏： Java学习笔记

本文链接：https://blog.csdn.net/Zz_z__/article/details/109037763

版权

Java学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery属性操作

html() 可以设置和获取起始标签和结束标签中的内容，跟dom属性innerHTML一样。
text() 可以设置和获取起始标签和结束标签中的文本，跟dom属性innerText一样。
val() 可以设置和获取表单项的value属性值，跟dom属性value一样。
attr() 可以设置和获取属性的值，不推荐操作checked，readOnly，selected，disabled等等
prop() 可以设置和获取属性的值，只推荐操作checked，readOnly，selected，disabled等等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
/*            //不传参数是获取，传参数是设置
            alert($("div").html()); //获取
            $("div").html("<h1>我是div中的标题1</h1>");//设置*/
/*            //不传参是获取，传参是设置
            alert($("div").text());
            $("div").text("<h1>我是div中的标题1</h1>");*/
            //不传参是获取，传参是设置
            $("button").click(function () {
                alert($("#username").val());//获取
                $("#username").val("<h1>我是div中的标题1</h1>");
            });
        });
    </script>
</head>
<body>
    <div>我是div标签<span>我是div中的span标签</span></div>
    <input type="text" name="username" id="username" />
    <button>操作文本框</button>
</body>
</html>

全选和全不选，demo

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		//按钮全选
		$("#checkedAllBtn").click(function () {
			$(":checkbox").prop("checked",true);
		});
		// 按钮全不选
		$("#checkedNoBtn").click(function () {
			$(":checkbox").prop("checked",false);
		});
		// 反选
		$("#checkedRevBtn").click(function () {
			// 查询全部的球类复选框
			$(":checkbox[name='items']").each(function () {
				this.checked = !this.checked;
			});
			// 获取所有checkbox的个数
			var allCount = $(":checkbox[name='items']").length;
			// 获取选中的checkbox的个数
			var checkCount = $(":checkbox[name='items']:checked").length;
/*			if(allCount == checkCount){
				$("#checkedAllBox").prop("checked",true);
			}else {
				$("#checkedAllBox").prop("checked",false);
			}*/
			$("#checkedAllBox").prop("checked",allCount == checkCount);
		});
		// 提交
		$("#sendBtn").click(function () {
			// 获取所有选中的checkbox
			$(":checkbox[name='items']:checked").each(function () {
				alert(this.value);
			});
		});
		// 全选和全不选
		$("#checkedAllBox").click(function () {
			// 在事件的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象
			$(":checkbox[name='items']").prop("checked",this.checked);
		});
		// 给全部的checkbox绑定单击事件，判定上方全选和全不选的选中状态
		$(":checkbox[name='items']").click(function () {
			// 获取所有checkbox的个数
			var allCount = $(":checkbox[name='items']").length;
			// 获取选中的checkbox的个数
			var checkCount = $(":checkbox[name='items']:checked").length;
			$("#checkedAllBox").prop("checked",allCount == checkCount);
		});
	});
</script>
</head>
<body>
	<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
		<br />
		<input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br />
		<input type="button" id="checkedAllBtn" value="全　选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反　选" />
		<input type="button" id="sendBtn" value="提　交" />
	</form>
</body>
</html>

dom的增删改

内部插入

appendTo() a.appendTo(b) :把a插入到b子元素末尾，成为最后一个子元素
prependTo() a.prependTo(b):把a插到b所有子元素前面，成为第一个子元素

外部插入

insertAfter() a.insertAfter(b) 得到ba
insertBefore() b.insertBefore(b) 得到ab

替换

replaceWith() a.replaceWith(b) 用b替换a
replaceAll() a.replaceAll(b) 用a替换所有的b

删除

remove() a.remove() 删除a标签
empty() a.empty() 清空a标签里的内容

示例代码，选中从左到右和从右到左

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		select {			width: 100px;			height: 140px;		}
		div {			width: 130px;			float: left;			text-align: center;		}
	</style>
	<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function () {
			$("button:eq(0)").click(function () {
				$("select:eq(0) option:selected").appendTo($("select:eq(1)"));
			});
			$("button:eq(1)").click(function () {
				$("select:eq(0) option").appendTo($("select:eq(1)"));
			});
			$("button:eq(2)").click(function () {
				$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
			});
			$("button:eq(3)").click(function () {
				$("select:eq(1) option").appendTo($("select:eq(0)"));
			});
		});
	</script>
</head>
<body>
	<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>
</body>
</html>

jQuery样式操作

addClass() 添加样式
removeClass() 删除样式
toggleClass() 有就删除，没有就添加样式
offset() 获取和设置元素的坐标

jQuery动画操作

基本动画

show() 将隐藏的元素显示
hide() 将可见的元素隐藏
toggle() 可见就隐藏，不可见就显示。

淡入淡出动画

fadeln() 淡入
fadeOut() 淡出
fadeTo() 在指定时长内慢慢将透明度修改到指定的值。0 透明，1 完全可见，0.5 半透明
fadeToggle() 淡入/淡出切换
以上动画方法都可以添加参数：
1. 第一个参数是动画执行时长，以毫秒为单位
2. 第二个参数是动画的回调函数（动画完成后自动调用的函数）
  比如：show(1000,function(){alert(“abc”)});

jQuery事件操作

window.οnlοad=function(){}和$(function(){});的区别？

触发顺序：jQuery页面加载完成之后先执行，原生js的页面加载完成之后执行。
什么时候触发：jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好dom对象之后就会马上执行。原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好dom对象，还要等标签显示时需要的内容加载完成。
执行的次数：原生js的页面加载完成之后，只会执行最后一次的赋值函数。jQuery的页面加载完成之后是全部把注册的function函数，一次顺序全部执行。

jQuery中其它的事件处理方法：

click() 可以绑定单击事件以及触发单击事件
mouseover() 鼠标移入事件
mouseoout() 鼠标移出事件
bind() 可以给元素一次性绑定一个或多个事件
one() 使用上跟bind一样，但是one方法绑定的事件只会响应一次
live() 跟bind方法相反的操作，解除事件的绑定
unbind() 也是用来绑定事件，它可以用来绑定选择器匹配的的所有元素的事件，这个元素是后动态创建出来的也有效

事件的冒泡

什么是事件的冒泡？
父子元素同时监听同一个事件，当触发子元素事件的时候，同一个事件也被传到了父元素的事件里去响应。
如何阻止事件冒泡？
在事件函数体内，return false; 可以阻止事件的冒泡传递。

js事件对象

是封装有触发的事件信息的一个js对象。
如何获取js事件对象？
在给元素绑定事件的时候，在事件的function（event）参数列表中添加一个参数，这个参数名，习惯取名为event。这个就是js传递参数事件处理函数的事件对象。

Zz_z__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery2

jQuery属性操作html() 可以设置和获取起始标签和结束标签中的内容，跟dom属性innerHTML一样。text() 可以设置和获取起始标签和结束标签中的文本，跟dom属性innerText一样。val() 可以设置和获取表单项的value属性值，跟dom属性value一样。attr() 可以设置和获取属性的值，不推荐操作checked，readOnly，selected，disabled等等prop() 可以设置和获取属性的值，只推荐操作checked，readOnly，selec
复制链接

扫一扫