JavaScript学习笔记（四）—— jQuery入门
终于到了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] | 复用属性选择器 | ( " i n p u t [ i d ] [ n a m e ("input[id][name ("input[id][name=‘man’]") |
<script>
$( "input[name!='newsletter']" ).next().append( "; not newsletter" );
</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 jQuery!");//设置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 () {
$("Hello jQuery!").appendTo("p");
});
});
</script>
- 在元素外部插入节点
after()：在被选元素后插入内容
insertAfter()：在被选元素后插入HTML元素
before()：在被选元素前插入内容
insertBefore()：在内旋元素前插入HTML元素
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").after("Hello jQuery!
");
});
});
</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 () {
$("Hello world!").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>