jQuery基础知识
1.概念
- jquery是一个快速、简洁的JavaScript框架，是继prototype之后的又一个优秀的JavaScript框架。jQuery的设计宗旨是“write less，do more”，即倡导写更少的代码，做更多的事情。它封装了JavaScript常用的功能代码，提供一种简便的JavaScript的设计模式，优化html文档操作、事件处理、动画设计和Ajax交互
- JavaScript框架：本质就是一些js文件，封装了js的原生代码而已
2.快速入门
- 1.下载jQuery
- jquery-xxx.js和jquery-xxx.min.js有什么区别？
- jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释，体积更大一些
- jquery-xxx.min.js：生产版本。程序中使用，没有缩进，体积小一些，程序加载更快
2.导入js文件
3.使用
4.示例：
- jquery-xxx.js和jquery-xxx.min.js有什么区别？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery快速入门</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1111</div>
<div id="div2">div2222</div>
<script>
//入口函数
$(function () {
//使用jQuery获取元素对象
alert($("#div1").html());
alert($("#div2").html());
})
</script>
</body>
</html>
3.jQuery对象和JS对象的区别与转换
- jQuery对象在操作时更加的方便
- jQuery对象和js对象方法不通用
- 两者的相互转换
- jquery ----> js
- jquery对象[索引] 或者 jquery对象.get(索引)
- js ------- > jquery
- $(js对象)
- jquery ----> js
4.选择器
- 1.基本语法学习
- 1.1.事件绑定
- 1.2.入口函数
<body>
<div id="div1">div1111</div>
<div id="div2">div2222</div>
<input id="b1" type="button" value="点我"/>
<script>
//jquery入口函数与之前原生js中的window.onload的作用一致（dom文档加载完成之后执行该函数的代码）
$(function () {
//给b1绑定一个单击事件
$("#b1").click(function () {
alert("ok...")
});
})
</script>
</body>
- window.onload和$(function(){})的区别
- window.onload只能定义一次，如果定义多次，后边的会将前面的覆盖掉
- $(function(){})可以定义多次，不会被覆盖
- 1.3样式控制
$(function () {
$("#div1").css("background-color", "red");
//下面这种写法可以检查样式是否写错了
$("#div2").css("backgroundColor", "pink");
});
- 2.分类
- 1.基本选择器
- 1.标签选择器（元素选择器）
- 语法：$(“html标签名”) 获取所有匹配标签名称的元素
- 2.id选择器
- 语法：$("#id") 获取与指定id属性值相匹配的元素
- 3.类选择器
- 语法：$(".class属性值") 获取与指定class属性值相匹配的元素
- 4.并集选择器
- 语法：$(“选择器1，选择器2…”) 获取多个选择器中选中的元素
- 1.标签选择器（元素选择器）
- 2.层级选择器
- 1.后代选择器
- 语法：$(“A B”)：选择A元素内部所有的B元素
- 2.子代选择器
- 语法：$(“A > B”)：选择A元素内部所有的子元素B
- 1.后代选择器
- 3.属性选择器
- 1.属性名称选择器
- 语法：$(“A[属性名]”) 包含指定属性的选择器
- 2.属性选择器
- 语法：$(“A[属性名 = ’ 属性值’]”) 包含指定属性等于指定值的选择器
- 3.复合属性选择器
- 语法：$(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器
- 1.属性名称选择器
- 4.过滤选择器
- 1.首元素选择器
- 语法：:first获得选择的元素中的第一个元素
- 2.尾元素选择器
- 语法：:last获得选择的元素中的最后一个元素
- 3.非元素选择器
- 语法：:not(selector)不包括指定内容的元素
- 4.偶数选择器
- 语法：:even 偶数，从0开始计数
- 5.奇数选择器
- 语法：:odd 奇数，从0开始计数
- 6.等于索引选择器
- 语法：:eq(index) 指定索引元素
- 7.大于索引选择器
- 语法：:gt(index) 大于指定索引元素
- 8.小于索引选择器
- 语法：:lt(index) 小于指定索引元素
- 9.标题选择器
- 标题选择器：:header获得标题元素，固定写法
- 1.首元素选择器
- 5.表单过滤选择器
- 1.可用元素选择器
- 语法： :enabled 获取可用元素
- 2.不可用元素选择器
- 语法： :disabled 获取不可用元素
- 3.选中选择器
- 语法：:checked 获取单选/复选框选中的元素
- 4.选中选择器
- 语法： :selected 获取下拉框中选中的元素
- 1.可用元素选择器
- 1.基本选择器
5.DOM操作
- 1.内容操作
- 1.html():获取/设置元素标签体内容
<a><font>内容</font></a>-----><font>内容</font>
- 2.text():获取/设置元素标签体内容
<a><font>内容</font></a>----->内容
- 3.val():获取/设置元素的value属性
- 1.html():获取/设置元素标签体内容
- 2.属性操作
- 1.通用属性操作
- 1.attr():获取/设置元素
- 2.removeAttr():
- 3.prop():
- 4.removeProp():
- attr() 和 prop()的区别
- 1.如果操作的是元素的固有属性，则建议使用prop
- 2.如果操作的是元素的自定义属性，则建议使用attr
- attr() 和 prop()的区别
- 1.通用属性操作
- 2.对class属性进行操作
- 1.addClass():添加class属性值
- 2.removeClass():删除
- 3.toggleClass():切换
- toggleClass(“one”):判断如果元素对象上存在class=“one”,那么就删除掉，如果不存在，就添加该属性
- 4.css():增加样式
- 3.CRUD操作
- append():对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾
- appendTo()：与上面相反，追加到开头
- prepend()：对象1.append(对象2)：将对象2添加到对象1元素内部，并且在开头
- prependTo();追加到
- after()：对象1.after(对象2)，将对象2添加到对象1后边，并且是兄弟关系
- before()：添加到前边
- insertAfter()： 将对象2添加到对象1后边，并且是兄弟关系
- insertBefore()：前边
- remove():删除对象
- empty()：将对象的后代元素清空，但保留当前对象及其属性
6.案例
- 代码过多就不在这里展示了，只要掌握上面的就足够了。
- 全选和全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../js/jquery-3.3.1.min.js"></script>
<script>
//分析：需要保证下边的选中状态和第一个复选框的选中状态一致即可
function selectAll(obj) {
//获取下边所有的复选框
$(".itemSelect").prop("checked", obj.checked);
}
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr>
<td colspan="5"><input type="button" value="删除"></td>
</tr>
<tr>
<th><input type="checkbox" onclick="selectAll(this)" ></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
jQuery 高级部分
1.动画
- 三种方式显示和隐藏动画
- 1.默认显示和隐藏
- show([speed,[easing],[fn]])
- 参数
- speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
- easing：用来指定切换效果，默认是"swing"，可用参数"linear"
- swing：动画执行时效果是 先慢，中间快，最后又慢
- linear：动画执行时速度是匀速的
- hide([speed,[easing],[fn]])
- toggle([speed],[easing],[fn])
- fn：在动画完成时执行的函数，每个元素执行一次。
- show([speed,[easing],[fn]])
- 2.滑动显示和隐藏
- slideDown([speed],[easing],[fn])
- slideUp([speed,[easing],[fn]])
- slideToggle([speed],[easing],[fn])
- 3.淡入淡出显示和隐藏
- fadeIn([speed],[easing],[fn])
- fadeOut([speed],[easing],[fn])
- fadeToggle([speed,[easing],[fn]])
- 1.默认显示和隐藏
2.遍历
- js的遍历方式
- for(初始化值，循环结束条件，步长)
- jq的遍历方式
- jq对象.each(callback)
- 语法：
- jquery对象.each(function(index,element){});
* index:就是元素在集合中的索引
* element：就是集合中的每一个元素对象
* this：集合中的每一个元素对象 - 回调函数返回值：
- true:如果当前function返回为false，则结束循环(break)。
- false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
3.事件绑定
- jquery标准的绑定方式
* jq对象.事件方法(回调函数)；
* 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
* 表单对象.submit();//让表单提交 - on绑定事件/off解除绑定
* jq对象.on(“事件名称”,回调函数)
* jq对象.off(“事件名称”)
* 如果off方法不传递任何参数，则将组件上的所有事件全部解绑 - 事件切换：toggle
-
jq对象.toggle(fn1,fn2…)
* 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2… -
注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
-
4.案例
- 广告显示和隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告的自动显示与隐藏</title>
<style>
#content{width:100%;height:500px;background:#999}
</style>
<!--引入jquery-->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
/*
需求：
1. 当页面加载完，3秒后。自动显示广告
2. 广告显示5秒后，自动消失。
分析：
1. 使用定时器来完成。setTimeout (执行一次定时器)
2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
3. 使用 show/hide方法来完成广告的显示
*/
//入口函数，在页面加载完成之后，定义定时器，调用这两个方法
$(function () {
//定义定时器，调用adShow方法 3秒后执行一次
setTimeout(adShow,3000);
//定义定时器，调用adHide方法，8秒后执行一次
setTimeout(adHide,8000);
});
//显示广告
function adShow() {
//获取广告div，调用显示方法
$("#ad").show("slow");
}
//隐藏广告
function adHide() {
//获取广告div，调用隐藏方法
$("#ad").hide("slow");
}
</script>
</head>
<body>
<!-- 整体的DIV -->
<div>
<!-- 广告DIV -->
<div id="ad" style="display: none;">
<img style="width:100%" src="../img/adv.jpg" />
</div>
<!-- 下方正文部分 -->
<div id="content">
正文部分
</div>
</div>
</body>
</html>
扫一扫
749
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
