1. jQuery介绍

是JavaScript和Query，辅助JavaScript开发的js类库

2. jQuery核心函数

$是jQuery的核心函数，$()就是调用$这个函数
传入参数为函数时，表示页面加载完成后，相当于window.οnlοad=function(){}
传入参数为HTML字符串时，会帮我们创建这些HTML标签对象
传入参数为选择器字符串时，$("#id属性值") 等于 id选择器，根据id查询标签对象；$(“标签名” )等于标签名选择器，根据指定的标签名查询标签对象
传入参数为DOM对象时，会把这个DOM对象转换为jQuery对象

3. jQuery对象和DOM对象

3.1 jQuery对象和DOM对象使用区别

jQuery对象是DOM对象的数组＋jQuery提供的一系列功能函数
jQuery对象不能使用DOM对象的属性和方法
DOM对象也不能使用jQuery对象的属性和方法

3.2 DOM对象和jQuery对象转化

$(DOM对象)就可以转成jQuery对象
jQuery对象[小标]取出相应的DOM对象

4. jQuery选择器

4.1 基本选择器

#id
element
.class
*

4.2 层级选择器

ancestor descendant 祖先元素下所有的后代元素
parent > child 直接子元素
prev + next 紧接在prev元素后的next元素
prev ~ siblings prev元素之后所有的元素

4.3 过滤选择器

4.3.1 基本过滤器

:first 获取第一个元素
:last 获取最后的元素
:not(selector) 取反
:even 匹配索引值为偶数的元素
:odd 索引值为奇数的元素，从0开始
:eq(index) 匹配一个给定索引值的元素
gt(index) 大于给定索引值的元素
lt(index) 小于给定索引值的元素
:header h1-h6
:animated 正在执行动画效果的元素

4.3.2 内容过滤器

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

4.3.3 属性过滤器

[attribute] 匹配包含给定属性的元素
[attribute=value] 属性是某个值的元素
[attribute!=value] 不含有指定属性或属性不等于特定值的元素
[attribute^=value] 给定的属性以某些值开始的元素
[attribute$=value] 结尾的
[attribute*=value] 包含的

4.3.4 表单过滤器

:input 匹配所有表单，很少用
:text 匹配素有的单行文本框
:password 所有密码框
:radio 单选
:checkbox 复选框
:submit 提交按钮
:reset 重置按钮
:buttom 按钮
:hidden 不可见的元素或type为hidden的元素

4.3.5 表单对象属性过滤器

:enabled 匹配所有可用元素
:disabled 不可用
:checked 被选中的（单选、复选框）
:selected 选中的option元素

5. jQuery元素筛选

方法	作用	功能
eq()	获取给定索引的元素	跟:eq一样
first()	获取第一个元素	跟:first一样
last()	获取最后一个元素	:last一样
filter(eq)	过滤，留下匹配元素
is()	判断是否匹配给定的选择器，有一个匹配返回true
has(exp)	返回包含有匹配选择器的元素的元素	:has
not(exp)	删除匹配选择器的元素	:not
children(exp)	返回匹配给定选择器的子元素	parent>children
find(exp)	返回匹配给定选择器的后代元素	祖先后代
next()	返回当前元素的下一个兄弟元素	prev+next
nextAll()	当前元素的同辈元素	prev~siblings
nextUntil()	当前元素到指定匹配元素为止
parent()	返回父元素
prev(exp)	当前元素的上一个兄弟元素
prevAll()	返回当前元素所有的兄弟元素
siblings(exp)	返回所有兄弟元素
add()	把add匹配的选择器元素添加到当前jquery对象中

6. jQuery的属性操作

html() 可以设置和获取起始标签和结束标签中的内容，跟DOM属性innerHTML一样
text() 可以设置和获取文本，跟DOM属性innerText一样
val() 可以设置和获取表单项的value值，跟DOM属性value一样
attr() 可以设置和获取属性的值，不推荐操作checked,readOnly,selected,disabled。还可以操作非标准的属性，比如自定义属性abc,bcd…
prop() 对于一些属性，返回undefined时，attr()不推荐的使用prop()

6.1 练习：全选、全不选，反选

<!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;});var allCount = $(":checkbox[name='items']").length;var checkCount = $(":checkbox[name='items']:checked").length;$("#checkedAllBox").prop("checked", allCount == checkCount);});$("#sendBtn").click(function () {$(":checkbox[name='items']:checked").each(function () {alert(this.value);});});$("#checkedAllBox").click(function () {$(":checkbox[name='items']").prop("checked", this.checked);});$(":checkbox[name='items']").click(function () {var allCount = $(":checkbox[name='items']").length;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>

7. DOM的增删改

内部插入

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

外部插入

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

替换

a.replaceWith(b) 用b替换掉a
a.replaceAll(b) 用a替换所有b
删除
remove(a) 删除a标签
empty(a) 清空a标签的内容

7.1 练习左右删除

<!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>

7.2 练习表格增删

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="styleB/css.css"/><script type="text/javascript" src="../../script/jquery-1.7.2.js"></script><script type="text/javascript">$(function () {var deleteFun = function () {var $trObj = $(this).parent().parent();var name = $trObj.find("td:first").text();if (confirm("确认删除" + name + "？")) {$trObj.remove();}return false;}$("#addEmpButton").click(function () {var name = $("#empName").val();var email = $("#email").val();var salary = $("#salary").val();var $trObj = $("<tr>\n" +"        <td>" + name + "</td>\n" +"        <td>" + email + "</td>\n" +"        <td>" + salary + "</td>\n" +"        <td><a href=\"deleteEmp?id=003\">Delete</a></td>\n" +"    </tr>");$trObj.appendTo($("#employeeTable"));$trObj.find("a").click(deleteFun);});$("a").click(deleteFun);})</script>
</head>
<body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th>&nbsp;</th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="deleteEmp?id=001">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr>
</table><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name:</td><td class="inp"><input type="text" name="empName" id="empName"/></td></tr><tr><td class="word">email:</td><td class="inp"><input type="text" name="email" id="email"/></td></tr><tr><td class="word">salary:</td><td class="inp"><input type="text" name="salary" id="salary"/></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td></tr></table>
</div>
</body>
</html>

8. CSS样式操作

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

9. jQuery动画

基本动画

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

淡入淡出动画

fadeIn() 淡入
fadeOut() 淡出
fadeTo() 在指定时长内慢慢的将透明度修改到指定值
fadeToggle() 淡入/淡出切换

9.1 练习 CSS动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>品牌展示练习</title><style type="text/css">* {margin: 0;padding: 0;}body {font-size: 12px;text-align: center;}a {color: #04D;text-decoration: none;}a:hover {color: #F50;text-decoration: underline;}.SubCategoryBox {width: 600px;margin: 0 auto;text-align: center;margin-top: 40px;}.SubCategoryBox ul {list-style: none;}.SubCategoryBox ul li {display: block;float: left;width: 200px;line-height: 20px;}.showmore, .showless {clear: both;text-align: center;padding-top: 10px;}.showmore a, .showless a {display: block;width: 120px;margin: 0 auto;line-height: 24px;border: 1px solid #AAA;}.showmore a span {padding-left: 15px;background: url(img/down.gif) no-repeat 0 0;}.showless a span {padding-left: 15px;background: url(img/up.gif) no-repeat 0 0;}.promoted a {color: #F50;}</style><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">$(function () {$("li:gt(5):not(:last)").hide();$(".showmore a").click(function () {$("li:gt(5):not(:last)").toggle();if ($("li:gt(5):not(:last)").is(":hidden")) {$("div div  a span").text("显示全部品牌");$("div div").removeClass();$("div div").addClass("showmore");$("li:contains('佳能')").removeClass("promoted");} else {$("div div a span").text("省略");$("div div").removeClass();$("div div").addClass("showless");$("li:contains('佳能')").addClass("promoted");}return false;});});</script>
</head>
<body>
<div class="SubCategoryBox"><ul><li><a href="#">佳能</a><i>(30440) </i></li><li><a href="#">索尼</a><i>(27220) </i></li><li><a href="#">三星</a><i>(20808) </i></li><li><a href="#">尼康</a><i>(17821) </i></li><li><a href="#">松下</a><i>(12289) </i></li><li><a href="#">卡西欧</a><i>(8242) </i></li><li><a href="#">富士</a><i>(14894) </i></li><li><a href="#">柯达</a><i>(9520) </i></li><li><a href="#">宾得</a><i>(2195) </i></li><li><a href="#">理光</a><i>(4114) </i></li><li><a href="#">奥林巴斯</a><i>(12205) </i></li><li><a href="#">明基</a><i>(1466) </i></li><li><a href="#">爱国者</a><i>(3091) </i></li><li><a href="#">其它品牌相机</a><i>(7275) </i></li></ul><div class="showmore"><a href="more.html"><span>显示全部品牌</span></a></div>
</div>
</body>
</html>

10. jQuery事件操作

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

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

jQuery中其他的事件处理方法

click() 绑定单击事件，以及出发单击事件
mouseover() 鼠标移入事件
mouserout() 鼠标移出事件
bind() 可以给元素一次性绑定一个或多个事件
one() 使用上跟bind一样，绑定的事件只能相应一次
unbind() 解除事件的绑定
live() 可以用来绑定选择器匹配的所有元素的事件，哪怕这个元素时后面动态创建出来的也有效

事件的冒泡

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

10.1 JavaScript事件对象

事件对象是指封装有触发的事件信息的一个JavaScript对象
在给元素绑定事件时，在事件的function(event)参数列表中添加一个参数，这个参数名，我们习惯命名为event，这个event就是JavaScript传递参数事件处理函数的事件对象

// window.onload = function () {//     document.getElementById("areaDiv").onclick = function (event) {//         console.log(event);//     }// }$(function () {$("#showMsg").click(function (event) {console.log(event);});})

10.2 练习图片跟随

<!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">body {text-align: center;}#small {margin-top: 150px;}#showBig {position: absolute;display: none;}</style><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">$(function () {$("#small").bind("mouseover mouseout mousemove", function (event) {if (event.type == "mouseover") {$("#showBig").show();} else if (event.type == "mouseout") {$("#showBig").hide();} else if (event.type == "mousemove") {$("#showBig").offset({left: event.pageX + 10,top: event.pageY + 10});}});});</script>
</head>
<body>
<img id="small" src="img/small.jpg"/>
<div id="showBig"><img src="img/big.jpg">
</div>
</body>
</html>

JavaWeb基础-1.jQuery相关推荐

超详细的Java面试题总结（四）之JavaWeb基础知识总结
系列文章请查看: 超详细的Java面试题总结(一)之Java基础知识篇超详细的Java面试题总结(二)之Java基础知识篇超详细的Java面试题总结(三)之Java集合篇常见问题超详细的Java ...
零基础入门jQuery视频教程
零基础入门jQuery最新版开发.NET富客户端应用(选择器.DOM操作.事件和动画.Ajax应用.插件.Mobile) 课程分类:.NET+Jquery 适合人群:初级课时数量:35课时用到技术 ...
index加载显示servlet数据_[WEB篇]-JavaWeb基础与应用-02-Servlet开发
JavaWeb基础与应用 2.Servlet开发 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公司在其API中提供了一个servlet接口,用户若想用发一个动态web资源 ...
javaweb基础知识点记录2
javaweb基础知识点记录 1.在service方法中,首先获得请求的方法名,然后根据方法名调用对应的doXXXX方法,比如说请求参数为GET,那么就会去调用doGet方法,请求参数为POST,那么 ...
javaweb基础知识点记录1
javaweb基础知识点记录 1.当我们通过在浏览器的输入栏中直接输入网址的方式访问网页的时候,浏览器采用的就是GET方法向服务器获取资源. 2.我们可以将Servlet看做是嵌套了HTML代码的ja ...
黑马程序员最新版JavaWeb基础教程-学习笔记
da@黑马程序员最新版JavaWeb基础教程-学习笔记 day06-HTML&CSS HTML HTML(HyperTest Markup Language):超文本标记语言是一门语言,所有 ...
JavaWeb基础5——HTTP，TomcatServlet
导航: [黑马Java笔记+踩坑汇总]JavaSE+JavaWeb+SSM+SpringBoot+瑞吉外卖+SpringCloud/SpringCloudAlibaba+黑马旅游+谷粒商城目录一 ...
JavaWeb基础核心技术-佟刚-专题视频课程
JavaWeb基础核心技术-132383人已学习课程介绍本Java视频教程涵盖JavaWEB 企业级开发所需的Servlet.JSP.MVC 设计模式.EL 表达式.JavaBea ...
JavaWeb基础学习2
目录 JavaWeb基础 Http Maven JavaWeb基础 Http 什么是Http Http是一个简单的请求–响应协议(超文本传输协议),它通常运行在TCP之上 80端口 Https:443 ...

JavaWeb基础-1.jQuery

1. jQuery介绍

2. jQuery核心函数

3. jQuery对象和DOM对象

3.1 jQuery对象和DOM对象使用区别

3.2 DOM对象和jQuery对象转化

4. jQuery选择器

4.1 基本选择器

4.2 层级选择器

4.3 过滤选择器

4.3.1 基本过滤器

4.3.2 内容过滤器

4.3.3 属性过滤器

4.3.4 表单过滤器

4.3.5 表单对象属性过滤器

5. jQuery元素筛选

6. jQuery的属性操作

6.1 练习：全选、全不选，反选

7. DOM的增删改

7.1 练习左右删除

7.2 练习表格增删

8. CSS样式操作

9. jQuery动画

9.1 练习 CSS动画

10. jQuery事件操作

10.1 JavaScript事件对象

10.2 练习图片跟随

JavaWeb基础-1.jQuery相关推荐

最新文章

热门文章

JavaWeb基础-1.jQuery

1. jQuery介绍

2. jQuery核心函数

3. jQuery对象和DOM对象

3.1 jQuery对象和DOM对象使用区别

3.2 DOM对象和jQuery对象转化

4. jQuery选择器

4.1 基本选择器

4.2 层级选择器

4.3 过滤选择器

4.3.1 基本过滤器

4.3.2 内容过滤器

4.3.3 属性过滤器

4.3.4 表单过滤器

4.3.5 表单对象属性过滤器

5. jQuery元素筛选

6. jQuery的属性操作

6.1 练习：全选、全不选，反选

7. DOM的增删改

7.1 练习 左右删除

7.2 练习 表格增删

8. CSS样式操作

9. jQuery动画

9.1 练习 CSS动画

10. jQuery事件操作

10.1 JavaScript事件对象

10.2 练习 图片跟随

JavaWeb基础-1.jQuery相关推荐

最新文章

热门文章

7.1 练习左右删除

7.2 练习表格增删

10.2 练习图片跟随