飞雷神之术
jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头: $() 。
jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合
(1)元素选择器
jQuery元素选择器基于元素名选取元素。
语法:
$("p")
(2)id选择器
通过HTML元素的id属性选取指定的元素。使用 # 标识
页面中元素的id应该是唯一的,当需要在页面中选取唯一的元素时可以使用id选择器。
语法:
$("#app")
(3)class选择器
通过指定的class查找元素。使用 . 标识
语法:
$(".test")
(4)更多选择器
- $("*"):选取所有元素
- $(this):选取当前HTML元素
- $(“p.intro”):选取class为intro的<p>元素
- $(“p:first”): 选取第一个<p>元素
- $(“ul li:first”):选取第一个<ul> 元素的第一个<li> 元素
- $(“ul li:first-child”):选取每个 <ul> 元素的第一个 <li> 元素
- $("[href]"):选取带有href属性的元素
- $(":button"):选取所有 type=“button” 的 元素 和 元素。如果去掉冒号,$(“button”)只能获取 <button> 元素。
- $(“tr:even”):选取偶数位置的 元素
jQuery事件
(1)什么是事件
-
页面对不同访问者的响应叫做事件。
-
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
-
实例:
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
-
在事件中经常使用术语"触发"(或"激发")例如: “当您按下按键时触发 keypress 事件”。
(2)常见DOM事件
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload | |
hover |
(3)jQuery事件方法
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。
示例:
$("p").click(function(){
// 动作触发后执行的代码!!
});
(4)常用的jQuery事件方法
-
基本事件
- $(document).ready():文档已完全加载事件
- click():点击事件
- dbclick():双击事件
- hover():光标悬停事件
- focus():元素获取焦点
-
keypress, keydown, keyup的区别:
- keydown:在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外), 它返回的是键盘代码;
- keypress:在键盘上按下一个按键,并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符,所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
- keyup:用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.
案例1:获取按键代码或字符的ASCII码:
$(window).keypress(function(event){
//获取事件对象,里面包含各种有用的信息。
console.log(event);
//event.which是获取ASCII码,前面的函数是将ASCII码转换成字符,空格键和Enter键输出均为空白。
console.log(String.fromCharCode(event.which));
//从event对象中key属性获取字符,但是Enter键的key值为"Enter",空白键还是空白" "。
console.log(event.key);
});
案例2:传递数据给事件处理函数
//语法:
jQueryObject.keypress( [[ data ,] handler ] );
(1)data:通过event.data传递给事件处理函数的任意数据;
(2) handler:指定的事件处理函数;
// 只允许按下的字母键生效, 65~90是所有大写字母的键盘代码范围.
var validKeys = { start: 65, end: 90 };
$("#keys").keypress( validKeys, function(event){
var keys = event.data; //拿到validKeys对象.
return event.which >= keys.start && event.which <= keys.end;
} );
jQuery 元素操作
jQuery 拥有可操作 HTML 元素和属性的强大方法。
jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。
(1)元素内容获取和设置
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
- attr() - 方法用于设置/改变或获取属性值
<div>
内容
<a href="http://www.baidu.com">百度一下</a>
</div>
<input type="text" value="hello"><br />
<button class="text">获取文本Text</button>
<button class="html">获取内容HTML</button>
<button class="val">获取值value</button>
<button class="attr">获取属性attr</button>
<script type="text/javascript">
$(function() {
// text()
// 没有参数表示获取纯文本内容
// 带有参数表示修改内容
$(".text").click(function(){
console.log($("a").text("百度一下"));
})
// html()
// 没有参数表示获取内容,包含标签
// 带有参数表示修改内容,会以标签的格式显示
$(".html").click(function(){
console.log($("div").html());
})
// val()
// 没有参数表示获取value属性值
// 带有参数表示修改value值
$(".val").click(function(){
console.log($("input").val());
})
// // attr()
// 带有一个参数表示获取指定属性的值
// 带有两个参数表示修改指定属性的值
// 如果有多个属性需要修改时,使用{}对象表示
$(".attr").click(function(){
$("a").attr("target", "_blank");
console.log($("a").attr("href")); //获取href属性的值
$("input").attr({ //修改input元素的多个属性
type: "password",
value: "123",
name: "passwd"
})
})
})
(2)元素的添加及删除
-
添加新元素/内容
- append() - 在被选元素的结尾插入内容。追加
- prepend() - 在被选元素的开头插入内容。
- after() - 在被选元素之后插入内容。
- before() - 在被选元素之前插入内容。
- append与prepend在选择元素内部嵌入,after和before是在元素外面追加。
<div>
<p>目标元素</p>
</div>
<button class="addInner">内部添加元素</button>
<button class="addOuter">外部添加元素</button>
<script type="text/javascript">
$(function(){
// append() 和 prepend() 表示在指定元素内部的开头或结尾添加元素
// 添加的元素与指定元素是父子关系
$(".addInner").click(function() {
$("div").append("<span>末尾的元素</span>");
$("div").prepend("<input/>")
})
$(".addOuter").click(function(){
// after() 和 before() 表示在指定元素前面和后面添加元素
// 添加的元素与指定元素是兄弟关系
$("div").after("<h1>外部元素</h1>");
$('div').before("<ul><li>列表</li></ul>");
})
})
</script>
删除元素/内容
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<div>
<a href="#">百度</a>
<a href="#">新浪</a>
</div>
<button class="remove">remove</button>
<button class="empty">empty</button>
<script type="text/javascript">
$(document).ready(function() {
// remove()移除自己及其所有的子元素
$(".remove").click(function() {
$("ul").remove();
})
// empty()移除所有的子元素
$(".empty").click(function(){
$("div").empty();
})
})
</script>
<section class="father">
<p>其他元素</p>
<p class="son">段落</p>
</section>
<section class="other">xsdfad</section>
<button class="delete">删除</button>
<script type="text/javascript">
$(function() {
$(".delete").click(function() {
// 以下两行代码是等价的
// 选择元素后再过滤元素,然后删除
$("section").remove(".other");
//根据过滤器选择元素,再删除
$("section.other").remove();
})
})
</script>
(3)CSS的获取与设置
-
添加CSS
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
<style type="text/css">
.color {
background-color: lightcyan;
color: red;
border: 1px solid blue;
}
.font {
font: italic bold 40px/46px "楷体";
}
.size {
width: 200px;
height: 200px;
padding: 20px;
}
</style>
</head>
<body>
<div>
这是一段文本
</div>
<button class="add">添加样式</button>
<button class="del">移除样式</button>
<button class="toggle">切换样式</button>
<script type="text/javascript">
$(document).ready(function() {
$(".add").click(function(){
$("div").addClass("color font size"); //类似于className
})
$(".del").click(function(){
$("div").removeClass("size");
})
$(".toggle").click(function(){
$("div").toggleClass("color");
})
})
</script>
<h1 style="color: red;">这是标题</h1>
<script type="text/javascript">
$(function(){
console.log($("h1").css("color"))
// ele.style
$("h1").css({color: "blue", backgroundColor: "pink", "font-size": "50px"})
})
</script>
(4)jQuery尺寸
需要注意的地方,设置了 box-sizing 后,width() 获取的是 css 设置的 width 减去 padding 和 border 的值。
jQuery 遍历
(1)什么是遍历
jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。
可以在家族树中向上移动(祖先),向下移动(子孙),水平移动(同袍).这种移动被称为对 DOM 进行遍历
(2)祖先
- parent() - 返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历
- parents() - 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 ()。可以使用可选参数来过滤对祖先元素的搜索。
示例:
$(function(){
$("p").parents(); //返回所有的祖先元素
$("p").parents("ul"); //通过过滤器返回指定的祖先元素ul
});
- parentsUntil() - 返回介于两个给定元素之间的所有祖先元素,不包含指定的元素。
(3)后代
- children() - 返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。也可以使用可选参数来过滤对子元素的搜索。
示例:
$(function(){
$("ul").children(); //返回ul元素中的所有直接子元素
$("ul").children(".one"); //返回ul元素中所有类名为one的所有直接子元素
});
- find() - 返回被选元素的后代元素,一路向下直到最后一个后代。
示例:
$(function(){
$(".grand").find(".one"); //返回返回指定元素中所有类名为one的后代元素
$(".grand").find("*"); //返回指定元素的所有后代元素
});
(4)同袍
同胞拥有相同的父元素。
- siblings() - 返回被选元素的所有同胞元素。可以使用可选参数来过滤对同胞元素的搜索。
- next() - 返回被选元素的下一个同胞元素。该方法只返回一个元素。
- nextUntil() - 返回介于两个给定参数之间的所有跟随的同胞元素。
$(document).ready(function(){
$("h2").nextUntil("h6");
});
(5)过滤
first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。
- first() - 返回被选元素的首个元素。
- last() - 返回被选元素的最后一个元素。
- eq() - 返回被选元素中带有指定索引号的元素。索引号从0开始。
$(document).ready(function(){
$("div p").first(); //返回<div>中第一个p元素
$("div p").last(); //返回<div>中最后一个p元素
$("p").eq(1); //返回整个文档中第二个p元素
});
filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
- filter() - 返回匹配标准的所有元素。
- not() - 返回不匹配标准的所有元素。
$(document).ready(function(){
$("li").filter(".one"); //返回所有类名为one的<li>元素
$("li").not(".one"); //返回所有类名不为one的<li>元素
});
not 和 eq 可以实现反选的效果。
//选取索引值不为 1 的 p 元素,并把背景颜色设置为黄色
$("p").not(":eq(1)").css("background-color","yellow");
jQuery 效果
jQuery有方法可以很快的实现 隐藏、显示、切换,滑动,淡入淡出,以及动画等效果,哇哦!
(1)隐藏/显示
hide() / show() - 隐藏/显示 HTML 元素
语法:
toggle() - 切换 hide() 和 show() 方法
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
//参数说明:
//speed,可选参数,规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
//callback,可选参数,隐藏或显示完成后所执行的函数名称。
(2)淡入淡出
fadeIn() - 淡入已隐藏的元素
fadeOut() - 淡出可见元素
fadeToggle() - 在 fadeIn() 与 fadeOut() 方法之间进行切换
fadeTo() - 允许渐变为给定的不透明度(值介于 0 与 1 之间)
注意:
- 大小写,fadeIn() fadeOut() fadeToggle() fadeTo() 大小写不能变。
- fadeTo() 没有默认参数,必须加上 slow/fast/Time
(3)滑动
slideDown() - 向下滑动元素。
slideUp() - 向上滑动元素。
slideToggle() - 在 slideDown() 与 slideUp() 方法之间进行切换。
<style type="text/css">
div {
width: 500px;
height: 200px;
border: 1px solid red;
background-color: hotpink;
}
</style>
</head>
<body>
<button class="hide">隐藏</button>
<button class="show">显示</button>
<button class="toggle">切换显示和隐藏</button>
<button class="fadein">淡入</button>
<button class="fadeout">淡出</button>
<button class="fadetoggle">切换淡入淡出</button>
<button class="slideup">向上滑动</button>
<button class="slidedown">向下滑动</button>
<button class="slidetoggle">切换滑动</button>
<div></div>
<script type="text/javascript">
$(document).ready(function(){
// hide() 隐藏元素
// show() 显示元素
// toggle() 切换显示和隐藏元素
$(".hide").click(function() {
$("div").hide("slow", function(){
// alert("success");
});
})
$(".show").click(function(){
$("div").show("fast", function(){
// alert("show")
});
})
//显示与隐藏的切换
$(".toggle").click(function(){
$("div").toggle(2000, function(){
// alert("切换完成")
});
})
//淡入
$(".fadein").click(function(){
$("div").fadeIn(1000)
})
//淡出
$(".fadeout").click(function(){
$("div").fadeOut(2000);
})
//切换淡入淡出
$(".fadetoggle").click(function(){
$("div").fadeToggle(1500);
})
//向上滑动
$(".slideup").click(function(){
$("div").slideUp(2000);
})
//向下滑动
$(".slidedown").click(function(){
$("div").slideDown(1000);
})
//滑动切换
$(".slidetoggle").click(function(){
$("div").slideToggle(500);
})
})
</script>
(5)链(Chaining)
我们都是一次写一条 jQuery 语句(一条接着另一条)。
不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。
这样的话,浏览器就不必多次查找相同的元素。
如需链接一个动作,您只需简单地把该动作追加到之前的动作上。
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);