目录
第一章 jQuery简介
1.1、jQuery简介
1.2、jQuery官网
1.3、jQuery版本介绍
1.4、jQuery引入方式
1.5、jQuery快速使用
1.6、jQuery两把利器
第二章 jQuery核心函数
2.1、选择器
2.1.1、基本选择器
2.1.1.1、标签选择器
2.1.1.2、id选择器
2.1.1.3、class选择器
2.1.1.4、通配符选择器
2.1.1.5、并集选择器
2.1.1.6、交集选择器
2.1.2、层级选择器
2.1.2.1、子代选择器
2.1.2.2、后代选择器
2.1.2.3、兄弟选择器
2.1.3、过滤选择器
2.1.3.1、基本筛选器
2.1.3.2、内容筛选器
2.1.3.3、属性筛选器
2.1.3.4、可见性筛选器
2.1.3.5、子元素筛选器
2.1.4、表单选择器
2.1.4.1、表单类型选择器
2.1.4.2、表单状态选择器
2.2、工具
2.2.1、$.each方法
2.2.2、$.trim方法
2.2.3、$.type方法
2.2.4、$.isArray方法
2.2.5、$.isFunction方法
2.3、ajax
2.3.1、$.ajax方法
2.3.2、$.get方法
2.3.3、$.post方法
第三章 jQuery核心对象
3.1、属性
3.1.1、属性
3.1.1.1、attr()
3.1.1.2、prop()
3.1.1.3、val()
3.1.2、样式
3.1.2.1、css()
3.1.2.2、addClass()
3.1.2.3、removeClass()
3.1.2.4、hasClass()
3.1.2.5、toggleClass()
3.1.3、尺寸
3.1.3.1、width()
3.1.3.2、height()
3.1.3.3、innerWidth()
3.1.3.4、innerHeight()
3.1.3.5、outerWidth()
3.1.3.6、outerHeight()
3.1.3.7、综合演示
3.1.4、位置
3.1.4.1、offset()
3.1.4.2、position()
3.1.4.3、scrollLeft()
3.1.4.4、scrollTop()
3.2、操作
3.2.1、DOM内部插入
3.2.1.1、text()
3.2.1.2、html()
3.2.1.3、append()
3.2.1.4、appendTo()
3.2.1.5、prepend()
3.2.1.6、prependTo()
3.2.2、DOM外部插入
3.2.2.1、after()
3.2.2.2、before()
3.2.2.3、insertAfter()
3.2.2.4、insertBefore()
3.2.3、DOM移除
3.2.3.1、empty()
3.2.3.2、remove()
3.2.4、DOM替换
3.2.4.1、replaceWith()
3.2.4.2、replaceAll()
3.2.5、DOM拷贝
3.2.5.1、clone()
3.2.6、DOM遍历
3.2.6.1、parent()
3.2.6.2、children()
3.2.6.3、prev()
3.2.6.4、prevAll()
3.2.6.5、next()
3.2.6.6、nextAll()
3.2.6.7、siblings()
3.3、遍历
3.3.1、遍历
3.3.1.1、each()
3.3.2、筛选
3.3.2.1、first()
3.3.2.2、last()
3.3.2.3、eq()
3.3.2.4、not()
3.3.2.5、filter()
3.4、事件
3.4.1、浏览器事件
3.4.1.1、resize()
3.4.1.2、scroll()
3.4.2、事件绑定
3.4.2.1、on()
3.4.2.2、off()
3.4.3、事件委托
3.4.3.1、delegate()
3.4.3.2、undelegate()
3.4.4、事件对象
3.4.5、表单事件
3.4.5.1、focus()
3.4.5.2、blur()
3.4.5.3、change()
3.4.5.4、select()
3.4.5.5、submit()
3.4.6、鼠标事件
3.4.6.1、click()
3.4.6.2、dblclick()
3.4.6.3、mousedown()
3.4.6.4、mouseup()
3.4.6.5、mouseenter()
3.4.6.6、mouseleave()
3.4.6.7、mouseover()
3.4.6.8、mouseout()
3.4.6.9、mousemove()
3.4.6.10、hover()
3.4.7、键盘事件
3.4.7.1、keydown()
3.4.7.2、keyup()
3.4.7.3、keypress()
3.5、动画
3.5.1、基础
3.5.1.1、hide()
3.5.1.2、show()
3.5.1.3、toggle()
3.5.2、渐变
3.5.2.1、fadeIn()
3.5.2.2、fadeOut()
3.5.2.3、fadeToggle()
3.5.3、滑动
3.5.3.1、slideDown()
3.5.3.2、slideUp()
3.5.3.3、slideToggle()
3.5.4、自定义
3.5.4.1、animate()
3.5.4.2、stop()
第四章 jQuery插件介绍
4.1、扩展jQuery工具
4.2、扩展jQuery对象
第五章 jQuery项目百练
5.1、项目百练介绍
5.2、项目百练目录
DOM操作
1.内容操作：
html(): 获取/设置元素的标签体内容。
text(): 获取/设置元素的标签体纯文本内容。
val()： 获取/设置元素的value属性值。
属性操作
1.通用属性操作
attr(): 获取/设置元素的属性。
removeAttr():删除属性。
prop():获取/设置元素的属性。
removeProp():删除属性。
2.对class属性操作
addClass():添加class属性值。
removeClass():删除class属性值。
toggleClass():切换class属性。
3.CRUD操作
append():父元素将子元素追加到末尾。
对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾。
prepend():父元素将子元素追加到开头。
对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头。
appendTo():
对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾。
prependTo()：
对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头。
after():添加元素到元素后边。
对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系。
before():添加元素到元素前边。
对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系。
insertAfter()：
对象1.insertAfter(对象2)：将对象1添加到对象2后边。对象1和对象2是兄弟关系。
insertBefore()：
对象1.insertBefore(对象2)： 将对象1添加到对象2前边。对象1和对象2是兄弟关系。
remove():移除元素。
对象.remove():将对象删除掉。
empty():清空元素的所有后代元素。
对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点。
元素增删
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//点击刷新,需要动态生成数据，需要通过java代码读取数据库中的数，使用JQ进行元素的添加
//自定义一组数据，模拟后端程序获取的数据
var data = [{
"id": 1,
"name": "方便面",
"price": 3.5,
"brand": "白象"
},
{
"id": 2,
"name": "火腿肠",
"price": 1.5,
"brand": "双汇"
},
{
"id": 3,
"name": "牛奶",
"price": 4.5,
"brand": "蒙牛"
},
{
"id": 4,
"name": "瓜子",
"price": 6.5,
"brand": "金鸽"
},
{
"id": 5,
"name": "辣条",
"price": 5.5,
"brand": "卫龙"
},
{
"id": 6,
"name": "面包",
"price": 3.5,
"brand": "盼盼"
},
];
//点击刷新，把上面的数据动态的显示到页面的标签元素中
$("#refresh").click(function() {
//先把list里面页面元素清空
$("#list").empty();
//定义变量进行字符串的拼接
var dom = "";
//遍历数组
for(var i = 0; i < data.length; i++) {
//获取data数组的一条数据
var goods = data[i]
//把该条数据的值取出来拼装成一个tr信息
dom += "<tr>" +
"<td><input type='checkbox' class='check'/></td>" +
"<td>" + goods.id + "</td>" +
"<td>" + goods.name + "</td>" +
"<td>" + goods.price + "</td>" +
"<td>" + goods.brand + "</td>" +
"<td>" +
"<a href='#'>修改</a> " +
"<button>删除</button>" +
"</td>" +
"</tr>";
}
//向list中添加元素
$("#list").append(dom);
});
//2.click事件只能绑定到文档一开始存在的元素标签上，动态生成的元素不能进行事件绑定
//动态生成的页面元素只能通过on()进行事件绑定
//语法：元素on('事件名称',''给里面哪个元素,功能函数)
$("#list").on('click', 'tr td button', function() {
//当前点击的button执行删除它的父元素且名字是tr
$(this).parents("tr").remove();
})
//3.点击全选，选中所有的数据行
$("#checkAll").click(function() {
//点击全选获取的选中状态
var flag = $(this).prop("checked");
//让list里面所有class为check的复选框设置相同的状态
$("#list .check").prop("checked", flag);
});
//4.删除选中的行
$("#batchDel").click(function() {
//找到id为list 里面所有class为check的元素，且他们被选中，执行删除父元素tr
$("#list .check:checked").parents("tr").remove();
});
});
</script>
</head>
<body>
<button id="refresh">刷新</button>
<hr/>
<table>
<thead>
<tr>
<th>勾选</th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>品牌</th>
<th>操作</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
<div>
<input type="checkbox" id="checkAll" class="check" />
<span>全选 </span>
<button id="batchDel">删除</button>
</div>
</body>
</html>
3565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
