一、认识jQuery
（1）定义：目前最流行的JavaScript函数库之一，对JavaScript进行了封装。
（2）JS和jQuery对比
-
JavaScript的缺点
-
选择器功能弱
-
DOM操作繁琐至极
-
浏览器兼容性不好
-
动画功能弱
-
-
jQuery的优点
-
强大的选择器
-
出色的DOM封装
-
出色的浏览器兼容性
-
强大的动画功能
-
体积小，压缩后只有100KB左右
-
可靠的事件处理机制
-
使用隐式迭代简化编程
-
丰富的插件支持
-
二、jQuery的使用
注意：jQuery的使用需要先导入jQuery的js文件。
（1）基本语法：$(selector).action
获取页面内容:$(selector)
操作页面的内容：action
（2）$(function(){})
-
相当于 window.οnlοad=function(){}，功能比window.onload更强大
-
window.onload一个页面只能写一个，但是可以写多个$() 而不冲突
-
window.onload要等整个页面加载完后再执行（包括图片、超链接、音视频等），但是$的执行时间要早
-
完整形式是$(document).ready(…….); jQuery(document).ready(…….);
（3） jQuery对象和DOM对象
DOM对象和jQuery对象分别拥有一套独立的属性和函数，不能混用。
-
DOM对象：直接使用JavaScript获取的节点对象
-
className innerHTML value
-
-
jQuery对象：使用jQuery选择器获取的节点对象，它能够使用jQuery中的方法
-
addClass() html() val()
-
-
DOM对象转换成jQuery对象
-
$(DOM对象)
-
-
jQuery对象转换成DOM对象
-
jQuery对象[index]
-
jQuery对象.get(index)
-
三、jQuery选择器
（1）基本选择器
-
标签选择器 $("a")
-
ID选择器 $("#id")
-
类选择器 $(".class")
-
通配选择器 $("*")
-
交集选择器 $("p#id") $("h2.class")
-
并集选择器$("elem1， elem2， elem3")
-
后代选择器 $(ul li)
-
子选择器 $(ul > li)
-
后面第一个兄弟元素节点 prev + next
-
后面所有的兄弟元素节点 prev ~ next
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<script>
$(function () {
//id选择器
var $p1 = $("#p1");
console.log($p1);
//class选择器
var $p2 = $(".p2");
console.log($p2);
//标签选择器
var $p = $("p");
console.log($p);
//通配选择器
var $1 = $("*");
console.log($1);
//交集选择器:返回符合所有要求的内容
var $p3 = $("p.p2");
console.log($p3);
//并集选择器:将指定选择器获取到的内容一起返回
var $p4 = $("#p1,.p2,div");
console.log($p4);
//后代选择器:只要是后代就行
var $div1 = $("#div1 p");
console.log($div1);
//子选择器:直接后代选择器
var $div = $("#div1>p");
console.log($div);
//后面的第一个兄弟元素结点,只能获取到后面的第一个兄弟
var $h3 = $("#h3+h3");
console.log($h3);
//后面的所有兄弟元素结点
var $p5 = $("#p1~p");
console.log($p5);
})
</script>
</head>
<body>
<p id="p1">我是段落1.</p>
<p class="p2">我是段落2.</p>
<p class="p2">我是段落3.</p>
<div id="div1">
<span>我是div中span的内容！</span>
<h2>我是div中的h2标题内容1！</h2>
<p>我是div中的段落1.</p>
<p>我是div中的段落2.</p>
<div>
<p>我是div中的div中的段落.</p>
</div>
<h2>我是div中的h2标题内容2！</h2>
</div>
<h3 id="h3">我是h3内容1</h3>
<h3>我是h3内容2</h3>
<h3>我是h3内容3</h3>
</body>
</html>（2）属性选择器
-
[attribute] 匹配包含给定属性的元素
-
[attribute1][attribute2] 复合属性选择器，需要同时满足多个属性
-
[attribute=value] 匹配给定的属性是某个特定值的元素
-
[attribute!=value] 匹配所有属性不等于特定值的元素
-
[attribute^=value] 匹配给定的属性是以某些值开始的元素
-
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
-
[attribute*=value] 匹配给定的属性是以包含某些值的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<script>
$(function () {
//获取form标签中的子标签含有name属性的标签
var $form = $("form [name]");
console.log($form);
//获取input标签并且含有name和value属性的标签
var $input = $("input[name][value]");
console.log($input);
//获取input标签并且name属性为username的标签
var $input1 = $("input[name='username']");
console.log($input1);
//获取input标签并且name属性不为username的标签
var $input2 = $("input[name!='username']");
console.log($input2);
//获取input标签并且name属性以h开头的标签
var $input3 = $("input[name^='h']");
console.log($input3);
//获取input标签并且name属性以o结尾的标签
var $input4 = $("input[name$='o']");
console.log($input4);
//获取input标签并且name属性含有o的标签
var $input5 = $("input[name*='o']");
console.log($input5);
})
</script>
</head>
<body>
<form action="">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" value="Java">Java
<input type="checkbox" name="hobby" value="C++">C++
<input type="checkbox" name="hobby" value="PHP">PHP
</td>
</tr>
<tr>
<td>职业：</td>
<td>
<select name="professional" id="professional">
<option value="程序员">程序员</option>
<option id="p2" value="公务员">公务员</option>
<option value="律师">律师</option>
<option value="医生">医生</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>（3）位置选择器
针对整个页面而言的位置选择器
-
:first 获取第一个元素
-
:last 获取最后一个元素
-
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
-
:even匹配所有索引值为偶数的元素，从 0 开始计数
-
:eq(n) 匹配一个给定索引值的元素，从0开始计数
-
:gt(n) 匹配所有大于给定索引值的元素
-
:lt(n) 匹配所有小于给定索引值的元素
针对上级标签而言的位置选择器
-
:first-child 匹配第一个子元素
-
:last-child 匹配最后一个子元素
-
:nth-child(n) 匹配其父元素下的第N个子元素
-
:nth-child(odd|even) 匹配其父元素下的奇偶元素，从1开始计数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<script>
$(function () {
//获取整张页面的第一个li
var $li = $("li:first");
console.log($li);
//获取整张页面的最后一个li
var $li1 = $("li:last");
console.log($li1);
//获取整张页面的奇数个li
var $li2 = $("li:odd");
console.log($li2);
//获取整张页面的偶数个li
var $li3 = $("li:even");
console.log($li3);
//获取整张页面的指定位置的li
var $li4 = $("li:eq(3)");
console.log($li4);
//获取整张页面的大于指定位置的li
var $li5 = $("li:gt(3)");
console.log($li5);
//获取整张页面的小于指定位置的li
var $li6 = $("li:lt(3)");
console.log($li6);
//获取第一个子元素
var $ul = $("ul :first-child");
console.log($ul);
})
</script>
</head>
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
<ul>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
</ul>
</body>
</html>（4）表单选择器
关于表单项的选择器
-
:text :password :radio :checkbox :hidden :file :submit
-
:input 匹配所有 input， textarea， select 和 button 元素
注意：$("input")和$(":input")的区别
-
$("input")：标签选择器，只匹配input标签
-
$(":input")： 匹配所有 input， textarea， select 和 button 等元素
关于表单项状态的选择器
-
:selected：被选择的
-
:checked：被选中的，包含:selected
-
:disabled：被禁用的
四、jQuery事件机制
使用格式
$(function(){
$('选择器').事件(function(){
});
})
注意：
-
使用jQuery给元素绑定事件时，要写在页面加载完事件内。
-
这里的事件可以是 click、blur、focus等等。不要写on，因为之前在js中我们写的是onClick。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<script>
$(function () {
$("button").click(function () {
alert("按钮被点击了");
});
});
</script>
</head>
<body>
<button>按钮</button>
</body>
</html>五、显示隐藏动画
（1）展示和隐藏
实现显示动画效果方法：show()
实现隐藏动画效果方法：hide()
实现切换显示和隐藏动画效果方法：toggle()
注意：可以有一个参数，指定动画时长，单位毫秒。
（2）滑动
实现向下滑动动画效果方法：slideDown()
实现向上滑动动画效果方法：slideUp()
实现滑动切换效果方法：slideToggle()
注意：可以有一个参数，指定动画时长，单位毫秒。
（3）淡入淡出
实现淡入动画效果方法：fadeIn()
实现淡出动画效果方法：fadeOut()
实现淡入淡出切换效果方法：fadeToggle()
实现淡入到指定透明度效果方法：fadeTo()，该方法多一个参数2，指定透明度
注意：可以有一个参数，指定动画时长，单位毫秒。
（4）自定义动画
实现自定义动画效果：animate()，该方法有两个参数。
参数1：最终的样式，参数2：动画时长。
六、DOM操作
（1）操作文本
-
html() 相当于innerHTML
-
html() 获取文本节点（标签+文本）
-
html(标签) 添加标签，会覆盖原有的所有内容
-
-
text() 相当于innerText
-
text() 获取文本节点（文本）
-
text(文本内容) 添加文本，会覆盖原有的所有内容
-
（2）操作属性
-
attr(属性名) 获取属性值
-
attr(属性名, 属性值) 设置属性值
-
removeAttr(属性名) 移除属性
-
prop(属性名) 获取属性值
-
prop(属性名, 属性值) 设置属性值
-
jQuery 1.6新增加prop()方法。如checked, selected、readonly、disabled 使用prop()时，返回值是true或者false，更加方便处理。
-
-
val() 获取value属性值
-
val(值) 设置value属性值
（3）操作元素
-
append()、appendTo() 添加子元素节点（末尾）
-
父元素结点.append(新的子元素结点)
-
新的子元素结点.appendTo(父元素结点 )
-
-
prepend()、prependTo() 添加子元素节点（前置）
-
before() 、insertBefore() 添加平级元素节点（前面）
-
after()、insertAfter() 添加平级元素节点（后面）
-
parent() 获取父元素节点
-
remove() 删除元素节点
-
empty() 删除子元素节点
（4）动态绑定事件
$(document).on(事件，选择器，事件触发方法)；
七、CSS操作
（1）直接操作CSS样式
-
css(css)
-
css(css,val)
-
css({css1:val1,css2:val2,…..})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js">
</script>
<script>
$(function () {
$("div:first").mousemove(function () {
//设置单个样式
$(this).css("background-color","red");
$(this).css("height","150px");
//设置多个样式
$(this).css({"background-color":"red","height":"150px"})
});
});
</script>
</head>
<body>
<div style="background-color: pink;height: 100px;width: 100px"></div>
</body>
</html>（2）操作类样式
-
addClass(值) 追加类属性值，而不是覆盖
-
removeClass(值) 移出属性值
-
toggleClass(值) 不存在，添加。存在，移除
八、jQuery中的遍历
var list = [1, 2, 3, 4, 5];
//i: 脚标 e: 数组中的每一个元素
$(list).each(function (i,e) {
console.log(e);
});
九、正则表达式
（1）什么是正则表达式
-
Regular Expression，在代码中常简写为regex
-
正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。
-
在很多文本编辑器里，正则表达式通常被用来检索、替换那些符合某个模式的文本。
（2）创建正则表达式
-
var reg=/正则表达式/;
-
var reg=new RegExp("正则表达式");
（3）正则表达式的通配符号
（4） 正则表达式的重复字符
（5）使用正则表达式
var reg = /a/;
var b = reg.test("abc");
1./a/：必须包含a
2./[0-9]/：包含任意一个 0~9 即可
3./[A-z]/：包含任意一个 a~z A~Z 即可
4./[A-z0-9]/：包含任意一个 a~z A~Z 0~9 即可
扫一扫
241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
