web项目技术必备-------jQuery快速入门

项目 同时被 2 个专栏收录
2 篇文章 0 订阅
6 篇文章 0 订阅

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.示例:
<!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对象)

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…”) 获取多个选择器中选中的元素
    • 2.层级选择器
      • 1.后代选择器
        • 语法:$(“A B”):选择A元素内部所有的B元素
      • 2.子代选择器
        • 语法:$(“A > B”):选择A元素内部所有的子元素B
    • 3.属性选择器
      • 1.属性名称选择器
        • 语法:$(“A[属性名]”) 包含指定属性的选择器
      • 2.属性选择器
        • 语法:$(“A[属性名 = ’ 属性值’]”) 包含指定属性等于指定值的选择器
      • 3.复合属性选择器
        • 语法:$(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器
    • 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获得标题元素,固定写法
    • 5.表单过滤选择器
      • 1.可用元素选择器
        • 语法: :enabled 获取可用元素
      • 2.不可用元素选择器
        • 语法: :disabled 获取不可用元素
      • 3.选中选择器
        • 语法::checked 获取单选/复选框选中的元素
      • 4.选中选择器
        • 语法: :selected 获取下拉框中选中的元素

5.DOM操作

  • 1.内容操作
    • 1.html():获取/设置元素标签体内容
      • <a><font>内容</font></a>-----><font>内容</font>
    • 2.text():获取/设置元素标签体内容
      • <a><font>内容</font></a>----->内容
    • 3.val():获取/设置元素的value属性
  • 2.属性操作
    • 1.通用属性操作
      • 1.attr():获取/设置元素
      • 2.removeAttr():
      • 3.prop():
      • 4.removeProp():
        • attr() 和 prop()的区别
          • 1.如果操作的是元素的固有属性,则建议使用prop
          • 2.如果操作的是元素的自定义属性,则建议使用attr
  • 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])
        1. 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]])

2.遍历

  • js的遍历方式
    • for(初始化值,循环结束条件,步长)
  • jq的遍历方式
    • jq对象.each(callback)
    • 语法:
    • jquery对象.each(function(index,element){});
      * index:就是元素在集合中的索引
      * element:就是集合中的每一个元素对象
      * this:集合中的每一个元素对象
    • 回调函数返回值:
      • true:如果当前function返回为false,则结束循环(break)。
      • false:如果当前function返回为true,则结束本次循环,继续下次循环(continue)

3.事件绑定

  1. jquery标准的绑定方式
    * jq对象.事件方法(回调函数);
    * 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
    * 表单对象.submit();//让表单提交
  2. on绑定事件/off解除绑定
    * jq对象.on(“事件名称”,回调函数)
    * jq对象.off(“事件名称”)
    * 如果off方法不传递任何参数,则将组件上的所有事件全部解绑
  3. 事件切换: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>
  • 1
    点赞
  • 3
    评论
  • 3
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:护眼 设计师:闪电赇 返回首页

打赏作者

换名换一年

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值