专栏首页技术进阶之路JavaScript学习笔记（四）—— jQuery入门

JavaScript学习笔记（四）—— jQuery入门

2020-07-312020-07-31 15:15:10阅读 1000

终于到了js框架的学习部分了，这部分内容主要讲jQuery，也是非常重要的内容。

jQuery应用入门

jQuery是一个JavaScript库，极大的简化了JavaScript编程。

1. jQuery选择器

- 选择器都是以 $() 开头的

基础选择器

选择器	描述
id选择器	指定id元素
class选择器	遍历css类元素
element元素	遍历HTML元素
*选择器	遍历所有元素
并列选择器	这类选择器将每一个选择器匹配到的元素合并后一起返回

<body>
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
<script>
	$( "#myDiv" ).css( "border", "3px solid red" );
</script>
</body>

层级选择器

层级选择器是根据DOM元素之间的父子关系作为匹配筛选条件的选择器

选择器	描述
ancestor descendant	在给定的祖先元素下匹配所有的后代元素
parent>child	在给定的父元素下匹配所有的子元素
prev+next	匹配所有紧接在prev元素后的next元素
pre~siblings	匹配prev元素之后的所有siblings元素

<script>
	$( "ul.topnav > li" ).css( "border", "3px double red" );
</script>

属性选择器

属性选择器是通过元素的属性作为过滤条件进行筛选对象

名称	说明	举例
[attribute]	匹配包含给定属性的元素	$(“div[id]”)
[attribute=value]	匹配给定的属性是某个特定值的元素	$(“input[name=‘newsletter’]”)
[attribute!=value]	匹配给定元素不包含某个特定值的元素	$(“input[name!=‘newsletter’]”)
[attribute^=value]	匹配给定的元素是以某些值开始的元素	$(“input[name^=‘news’]”)
[attribute&=value]	匹配给定的元素是以某些值结尾的元素	$(“input[name&=‘news’]”)
[attribute*=value]	匹配给定的元素是以包含某些值的元素	$(“input[name*=‘man’]”)
[attr1][attr2]	复用属性选择器	("input[id][name("input[id][name("input[id][name=‘man’]")

("input[id][name

=‘man’]")

<script>
	$( "input[name!='newsletter']" ).next().append( "<b>; not newsletter</b>" );
</script>

2. jQuery伪类选择器

伪类选择器可以看成是一种特殊的选择器，伪类选择器都是以“：”开头。

简单伪类选择器

伪类选择器	说明
:not(selector)	选择除了某个选择器之外的所有元素
:first或first()	选择某元素的第一个元素
:last或last()	选择某元素的最后一个元素
:odd	选择某元素的索引值为奇数的元素
:even	选择某元素的索引值为偶数的元素
:eq(index)	选择给定索引值的元素
:lt(index)	选择小于索引值的元素
:gt(index)	选择所有大于索引值的元素
:header	选择标题元素
:animated	选择所有正在执行动画效果的元素
:root	选择页面的根元素
:target	选择当前活动的目标元素(锚点)

<script>
    $("tr:odd").css("background-color", "#bbbbff");
</script>

子元素伪类选择器

子元素伪类选择器就是选择某一个元素下面的子元素的方式，在jQuery中，子元素伪类选择器分为两大类：

不分元素类型的

选择器	说明
:first-child	选择父元素的第一个子元素
:last-child	选择父元素的随后一个子元素
:nth-child(n)	选择父元素下的第n个或奇偶元素,n的值为"整数或odd或even"
:only-child	选择父元素中唯一的子元素(该父元素只有一个子元素)

区分元素类型的

选择器	说明
:first-of-type	选择同元素类型的第一个子元素
:last-of-type	选择同元素类型的随后一个子元素
:nth-of-type	选择同元素类型的第n个或奇偶元素,n的值为"整数或odd或even"
:only-of-type	匹配父元素中特定类型的唯一子元素(该父元素可以有多个子元素)

<script>
    $("div span:first-child")
      .css("text-decoration", "underline")
      .hover(function () {
        $(this).addClass("sogreen");
      }, function () {
        $(this).removeClass("sogreen");
      });
</script>

可见性伪类选择器

可见性伪类选择器，就是根据元素的“可见”和“不可见”这两种状态来选取元素：

选择器	说明
:hidden	选取有不可见的元素
:visible	选取可见元素

display:none
type=“hidden”
visiblity:hidden

内容伪类选择器

根据元素中的文字内容或所包含的子元素特征来选择元素

选择器	说明
:contains(text)	选择包含给定文本内容的元素
:has(selector)	选择包含选择器所匹配元素的元素
:empty	选择所有不包含子元素或者不包含文本的元素
:parent	选择含有子元素或者文本的元素

<script>
    $("div:contains('刘')").css("text-decoration", "underline");
</script>

表单伪类选择器 表单伪类选择器,指的是根据表单类型来选择的伪类选择器:

选择器	说明
:input	选择所有的input元素
:button	选择所有的普通按钮，即type="button"的input元素
:submit	选择所有的提交按钮
:reset	选择所有的重置按钮
:text	选择所有的单行文本框
:image	选择所有的图像域
:hidden	选择所有的隐藏域

<script>
    $(document).ready(function () {
      $(":input").css("background-color", "green");
    });
</script>

表单属性伪类选择器 表单伪类选择，就是根据表单元素的标签属性来选取某一类表单元素。

选择器	说明
:check	选择所有被选中的表单元素，一般用于 radio 和 CheckBox
:option:selected	选择所有被选中的option元素
:enabled	选择所有的可用元素，一般用于input、select、textarea
:disabled	选择所有的不可用元素，一般用于input、select、textarea
:read-only	选择所有的只读元素，一般用于input、textarea
:focus	选择获取焦点的元素，一般用于input、textarea

<script>
    $("input").on("click", function () {
      $("#log").html($("input:checked").val() + "被选中!");
    });
</script>

jQuery控制页面

1. 操作元素内容和值

jQuery提供了对元素内容和值以及属性进行操作的方法：

元素的值
- 元素的唯一属性
- 大部分元素的值都对应value属性
元素的内容
- 定义元素起始标签和结束标签之间的内容
- 分为文本内容和HTML内容

对文本内容进行操作 jQuery提供了两种方法用于对文本内容进行操作，分别是text()方法和text(val)方法:
- text()方法用于获取全部匹配元素的文本内容
- text(val)方法用于设置全部匹配元素的文本内容

<script>
		$(document).ready(function () {
			$("button").click(function () {
				alert($("p").text());//获取文本内容
			});
		});
</script>

<script>
		$(document).ready(function () {
			$("button").click(function () {
				$("p").text("Hello jQuery!");//设置文本内容
			});
		});
</script>

对HTML内容进行操作 jQuery提供了两种方法对HTML进行操作，分别是html()方法和html(val)方法，同样是一个获取，一个设置。

<script>
		$(document).ready(function () {
			$("button").click(function () {
				alert($("p").html());//获取HTML内容
			});
		});
</script>

<script>
		$(document).ready(function () {
			$("button").click(function () {
				$("p").html("Hello <b>jQuery!</b>");//设置HTML内容
			});
		});
</script>

对元素的值进行操作在jQuery中，使用val()方法返回或设置被选元素的value属性。

<script>
$(document).ready(function(){
	$("button").click(function(){
		alert($("input:text").val());
	});
});
</script>

对元素的属性进行操作 jQuery提供了attr()方法对元素的属性进行设置或返回的操作。

<script>
		$(document).ready(function () {
			$("button").click(function () {
				$("img").attr({
					width: "250",
					height: "150"
				});
			});
		});
</script>

另外，jQuery还为用户提供了对元素的属性进行移除的方法，即removeAttr()方法，可以从被选元素移除一个或多个方法：

<script>
		$(document).ready(function () {
			$("button").click(function () {
				$("p").removeAttr("id class");
			});
		});
</script>

2. 操作元素的CSS样式

CSS类别操作 jQuery为用户提供了3种CSS类别操作方法：

- 添加css样式：addClass()，参数可选，空格隔开

<script language="javascript">
		$(document).ready(function () {
			$("button").click(function () {
				$("p:first").addClass("one two");
			});
		});
</script>

- 移除css样式：removeClass()，参数可选，不选则删除全部

<script>
		$(document).ready(function () {
			$("button").click(function () {
				$("p,h1").removeClass("head intro main");
			});
		});
</script>

- 切换css样式：toggleClass()，如果不存在则添加类，存在则删除类，这就是切换效果

<script>
		$(document).ready(function () {
			$("button").click(function () {
				$("p").toggleClass("main");
			});
		});
</script>

CSS属性操作 jQuery提供css()方法，用来获取或设置匹配的元素的一个或多个样式属性。与attr很像。

<script>
		$(document).ready(function () {
			$("button").click(function () {
				$("p").css("color", "red");
			});
		});
</script>

3. 获取与编辑DOM节点

插入节点

在元素内部插入节点

append()：在被选元素的结尾插入内容
appendTo()：在被选元素的结尾插入HTML元素
prepend()：在被选元素的开头插入内容
prependTo()：在内旋元素的开头插入HTML元素

<script>
		$(document).ready(function () {
			$("button").click(function () {
				$("<span>Hello jQuery!</span>").appendTo("p");
			});
		});
</script>

在元素外部插入节点

after()：在被选元素后插入内容
insertAfter()：在被选元素后插入HTML元素
before()：在被选元素前插入内容
insertBefore()：在内旋元素前插入HTML元素

<script>
    $(document).ready(function () {
      $("button").click(function () {
        $("p").after("<p>Hello jQuery!</p>");
      });
    });
</script>

删除节点

方法	描述
remove()	移除被选元素(不保留数据和事件)
detach()	移除被选元素(保留数据和事件)
empty()	从被选元素移除所有子节点和内容

复制节点与替换节点 clone() replaceAll()：把被选元素替换成新的HTML元素 replaceWith()：把被选元素替换成新的内容

<script>
		$(document).ready(function () {
			$("button").click(function () {
				$("p").clone().appendTo("body");
			});
		});
</script>

<script>
		$(document).ready(function () {
			$("button").click(function () {
				$("<span><b>Hello world!</b></span>").replaceAll("p:last");
			});
		});
</script>

jQuery的动画与特效

1. 元素的显示与隐藏

使用hide()方法使用hide()方法可以隐藏被选元素

<script>
    $(document).ready(function () {
      $(".ex .hide").click(function () {
        $(this).parents(".ex").hide("slow");
      });
    });
</script>

使用show()方法使用show()方法可以显示被隐藏元素

<script>
		$(document).ready(function () {
			$(".btn1").click(function () {
				$("p").hide();
			});
			$(".btn2").click(function () {
				$("p").show();
			});
		});
</script>

使用toggle()方法切换元素的可见性

<script language="javascript">
    $(document).ready(function () {
      $(".btn1").click(function () {
        $("p").toggle();
      });
    });
</script>

2. 元素的淡入与淡出

使用hide()与show()方法 show和hide方法可以接受参数控制隐藏的过程.:

show(speed,callback)

speed参数规定显示或隐藏的速度:
	- slow
	- fast
	- normal
	- 或者直接写数字，单位是毫秒，2000
callback是回调函数

使用fadeIn()方法 jQuery通过控制不透明度的变化来实现淡入效果，并在动画完成之后出发一个回调函数：fadeIn(speed，callback);

<script>
    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").fadeIn();
        $("#div2").fadeIn("slow");
        $("#div3").fadeIn(3000);
      });
    });
</script>

使用fadeOut()方法使用fadeOut方法可以实现淡出效果: fadeOut(speed,callback);

<script>
    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").fadeOut();
        $("#div2").fadeOut("slow");
        $("#div3").fadeOut(3000);
      });
    });
</script>

使用fadeToggle()方法可以在淡入和淡出之间切换:

<script>
		$(document).ready(function () {
			$("button").click(function () {
				$("#div1").fadeToggle();
				$("#div2").fadeToggle("slow");
				$("#div3").fadeToggle(3000);
			});
		});
</script>

使用fadeTo()方法将所有匹配的不透明度以渐进的方式调整到指定的不透明度，并在动画结束后回调一个至一个函数，这是就需要用到fadeTo()方法: - fadeTo(speed,opacity,callback); - opacity表示要调整到的不透明度值,1表示完全不透明

<script language="javascript">
    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").fadeTo("slow", 0.15);
        $("#div2").fadeTo("slow", 0.4);
        $("#div3").fadeTo("slow", 0.7);
      });
    });
</script>

3. 元素的滑上与滑下

使用slideDown()方法

slideDown方法用于向下滑动元素: $(selector).slideDown(speed,callback);

<script>
		$(document).ready(function () {
			$("#flip").click(function () {
				$("#panel").slideDown("slow");
			});
		});
</script>

使用slideUp()方法

slideUp方法用于向上滑动元素 $(selector).slideUp(speed,callback);

<script>
		$(document).ready(function () {
			$("#flip").click(function () {
				$("#panel").slideUp("slow");
			});
		});
</script>

使用slideToggle()方法

slideToggle方法用于切换滑动方式

<script>
		$(document).ready(function () {
			$("#flip").click(function () {
				$("#panel").slideToggle("slow");
			});
		});
</script>

4. 自定义动画

jQuery animate()方法允许用户创建自定义动画，根据方法参数不同，可以制作简单动画与复杂累积动画。

简单动画使用animate()方法创建简单动画时，其参数设置为：

$(selector).animate({params}, speed, callback);

- params参数为必须的，其定义形成动画的css属性
- speed可选，规定时长，可选slow，fast或数字
- callback可选，回调函数

<script>
    $(document).ready(function () {
      $("button").click(function () {
        $("div").animate({
          left: '250px'
        });
      });
    });
</script>

默认情况下，所有的HTML元素都有一个静态的位置，且是不可移动的。如果要改变，需要将元素的position属性设置成relative、fixed或absolute；

累积动画 jQuery为用户提供了针对动画的队列功能，用户可以编写多个animate方法，jQuery会逐一调用：

<script>
    $(document).ready(function () {
      $("button").click(function () {
        var div = $("div");
        div.animate({
          height: '300px',
          opacity: '0.4'
        }, "slow");
        div.animate({
          width: '300px',
          opacity: '0.8'
        }, "slow");
        div.animate({
          height: '100px',
          opacity: '0.4'
        }, "slow");
        div.animate({
          width: '100px',
          opacity: '0.8'
        }, "slow");
      });
    });
</script>

停止动画 stop（）方法用于在动画或效果完成前对他们进行停止，stop方法适用于所有的jQuery特效。

$(selector).stop(stopAll, goToEnd);

- 可选的stopAll参数规定是否应该清除动画队列,默认是false，即仅停止活动的画面
- 可选的GoToEnd参数规定是否立即完成当前动画，默认是false

<script>
    $(document).ready(function () {
      $("#flip").click(function () {
        $("#panel").slideDown(5000);
      });
      $("#stop").click(function () {
        $("#panel").stop();
      });
    });
</script>

注：keydown、keypress、keyup的区别

事件名称	触发方式	返回值
keydown	在键盘上按下某键时触发，一直按一直触发	返回键盘代码
keypress	在键盘上按下一个能产生字符的按键时触发	返回ASCII码
keyup	松开某一键时触发	返回键盘代码

jQuery的事件处理

1. jQuery常用的事件方法

鼠标操作事件

方法	描述
mousedown()	鼠标的键被按下
mouseenter()	当鼠标指针进入目标时
mouseleave()	当鼠标指针离开目标时
mouseout()	鼠标移除目标的上方
mousemove()	鼠标在目标的上方移动
mouseover	鼠标移动到目标的上方
mouseup()	鼠标的键被释放弹起
click()	单击鼠标的键
dbclick()	双击鼠标的键

<script type="text/javascript">
    $(document).ready(function () {
      $("p").mouseover(function () {
        $("p").css("background-color", "yellow");
      });
      $("p").mouseout(function () {
        $("p").css("background-color", "#E9E9E4");
      });
    });
</script>

键盘操作事件

方法	描述
keydown()	按下键盘上某个按键时触发
keypress()	按下键盘上某个产生字符的按键时触发
keyup()	释放某个按键的时候触发

<script language="javascript">
    $(document).ready(function () {
      $("input").keydown(function () {
        $("input").css("background-color", "red");
      });
      $("input").keyup(function () {
        $("input").css("background-color", "yellow");
      });
    });
</script>

其他常用事件

方法	描述
blur()	有元素或者窗口失去焦点时触发
change()	文本框内容改变时触发
error()	加载错误时触发
focus()	有元素或者窗口获得焦点时触发
select()	文本框中的字符被选择之后触发
submit()	表单提交之后触发
load()	加载完成后触发
unload()	卸载完成之后触发

<script type="text/javascript">
    $(document).ready(function () {
      $("input").select(function () {
        $("input").after("输入域中的内容被选中!");
      });
    });
</script>

2. 绑定与接触事件

绑定事件

绑定事件就是将页面中的元素事件类型与其在收到该事件之后期望进行的操作联系到一起。
通过bind()绑定事件，使用方法和DOM中的addEventListener()方法大致相同。

<script language="javascript">
    $(document).ready(function () {
      $("button").bind("click", function () {
        $("p").slideToggle();
      });
    });
</script>

移除事件 unbind方法可以移除事件：

<script>
    $(document).ready(function () {
      $("p").click(function () {
        $(this).slideToggle();
      });
      $("button").click(function () {
        $("p").unbind();
      });
    });
  </script>

3. 切换与触发事件

切换事件有两个方法用于事件的切换，一个是hover，一个是toggle 当需要设置鼠标悬停和鼠标移除的事件中进行切换时，使用K方法:

<script type="text/javascript">
        $(function () {
            $(".clsTitle").hover(function () {
                    $(".clsContent").show();
                },
                function () {
                    $(".clsContent").hide();
                })
        })
</script>

触发事件 trigger(type,[data])函数式jQuery提供的事件触发器之一，其作用是对页面上所有匹配的元素触发某一类型的事件。

综合案例——制作外卖配送页面

<!DOCTYPE html>
<html>

<head>
	<style type="text/css">
		<!--
		body {
			padding: 0px;
			margin: 10px 0px 0px 160px;
			font-size: 12px;
			font-family: Arial, Helvetica, sans-serif;
			color: #FFFFFF;
			background: #000000 no-repeat;
		}

		body>div {
			margin: 5px;
			padding: 0px;
		}

		div.detail {
			display: none;
			margin: 3px 0px 2px 15px;
		}

		div#totalPrice {
			padding: 10px 0px 0px 280px;
			margin-top: 15px;
			width: 85px;
			border-top: 1px solid #FFFFFF;
		}

		input {
			font-size: 12px;
			font-family: Arial, Helvetica, sans-serif;
		}

		input.quantity {
			border: 1px solid #CCCCCC;
			background: #3f1415;
			color: #FFFFFF;
			width: 15px;
			text-align: center;
			margin: 0px 0px 0px 210px
		}
		-->
	</style>

	<script language="javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		function addTotal() {
			//计算总价格的函数
			var fTotal = 0;
			//对于选中了的复选项进行遍历
			$(":checkbox:checked").each(function () {
				//获取每一个的数量
				var iNum = parseInt($(this).parent().find("input[type=text]").val());
				//获取每一个的单价
				var fPrice = parseFloat($(this).parent().find("span[price]").attr("price"));
				fTotal += iNum * fPrice;
			});
			$("#totalPrice").html("合计￥" + fTotal + "元");
		}
		$(function () {
			$(":checkbox").click(function () {
				var bChecked = this.checked;
				//如果选中则显示子菜单
				$(this).parent().find(".detail").css("display", bChecked ? "block" : "none");
				$(this).parent().find("input[type=text]")
					//每次改变选中状态，都将值重置为1，触发change事件，重新计算价格
					.attr("disabled", !bChecked).val(1).change()
					.each(function () {
						if (bChecked) this.focus();
					});
			});
			$("span[price] input[type=text]").change(function () {
				//根据单价和数量计算价格
				$(this).parent().find("span").text($(this).val() * $(this).parent().attr("price"));
				addTotal(); //计算总价格
			});
			//加载页面完全后，统一设置输入文本框
			$("span[price] input[type=text]")
				.attr({
					"disabled": true, //文本框为禁用
					"value": "1", //表示份数为1
					"maxlength": "2" //不能超多100份（包括100）
				}).change(); //触发change事件，让span都显示出价格
		});
	</script>
</head>

<body>
	<div>
		1. <input type="checkbox" id="zhushi"><label for="zhushi">汉堡</label>
		<span price="5"><input type="text" class="quantity"> ￥<span></span>元</span>
		<div class="detail">
			<label><input type="radio" name="hanbao" checked="checked">牛肉堡</label>
			<label><input type="radio" name="hanbao">超级鸡腿堡</label>
			<label><input type="radio" name="hanbao">香辣鸡腿堡</label>
			<label><input type="radio" name="hanbao">至珍七虾堡</label>
		</div>
	</div>
	<div>
		2. <input type="checkbox" id="xiaoshi"><label for="xiaoshi">小食</label>
		<span price="3"><input type="text" class="quantity"> ￥<span></span>元</span>
		<div class="detail">
			<label><input type="radio" name="xiaoshi" checked="checked">薯条</label>
			<label><input type="radio" name="xiaoshi">甜甜圈</label>
			<label><input type="radio" name="xiaoshi">布丁</label>
		</div>
	</div>
	<div>
		3. <input type="checkbox" id="HunCaiCheck"><label for="HunCaiCheck">肉类</label>
		<span price="4"><input type="text" class="quantity"> ￥<span></span>元</span>
		<div class="detail">
			<label><input type="radio" name="HunCai" checked="checked" />炸鸡腿</label>
			<label><input type="radio" name="HunCai">炸鸡翅</label>
			<label><input type="radio" name="HunCai">奥尔良烤鸡翅</label>
			<label><input type="radio" name="HunCai">鸡米花</label>
		</div>
	</div>
	<div>
		4. <input type="checkbox" id="SoupCheck"><label for="SoupCheck">饮品</label>
		<span price="3"><input type="text" class="quantity"> ￥<span></span>元</span>
		<div class="detail">
			<label><input type="radio" name="Soup" checked="checked" />可乐</label>
			<label><input type="radio" name="Soup">橙汁</label>
			<label><input type="radio" name="Soup">咖啡</label>
			<label><input type="radio" name="Soup">牛奶</label>
		</div>
	</div>
	<div id="totalPrice"></div>
</body>

</html>

本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。

展开阅读全文

我来说两句

0 条评论

登录后参与评论

Python 中甜甜的语法糖
首先解释一下语法糖是什么意思，其实就是简化我们的代码，让那些复杂的操作交给解释器来完成，这些语法糖刚开始学的时候觉得很难记住，如果看别人写的语法糖更容易蒙圈，还...
wsuo
Spring 注解开发之 @Bean 及其相关注解
这次介绍一下 Spring 中的几个注解 @Bean 以及 @Scope 和 @Lazy。
wsuo
org.springframework.util.xml.SimpleSaxErrorHandler warning org.xml.sax.SAXParseException； systemId:
wsuo
BFC笔记?
BFC(Block Formatting Context,块格式化上下文)指的是CSS布局的一块独立渲染区域。这块区域内只有Block-level box参与布...
gojam
关于浮动
小胖
winform窗口启动隐藏
this.WindowState = FormWindowState.Minimized;
sofu456
使用float后清除浮动的几种方法
浮动元素会生成一个块级框，而不论它本身是何种元素。所有主流浏览器都支持 float 属性。
德顺
php yield关键字及协程实现
一个生成器函数看起来更像一个普通的函数，不同的是普通函数返回的是一个值，而生成器可以yield生成许多个值。
gaobinzhan
【源码剖析】- Spark 新旧内存管理方案（上）
Spark 作为一个以擅长内存计算为优势的计算引擎，内存管理方案是其非常重要的模块。作为使用者的我们，搞清楚 Spark 是如何管理内存的，对我们编码、调试及优...
codingforfun
电解电容为什么会爆炸？一文看明白！
电解电容是通过电解质作用在电极上形成的氧化层作为绝缘层的电容，通常具有较大的容量。电解质是液体、胶冻状富含离子的物质，大多数电解电容都是有极性的，也就是在工作时...
MCU起航

腾讯云·社区

wsuo