前端(四)–jQuery

1、jQuery的基本用法

1.1 jQuery引入

<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>

1.2 第一个jQuery测试

<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    //jQuery的标准用法,只要记住：$就代表jQuery
    $(document).ready(function(){
        alert("今天是KH96班学习jQuery的第一天");
    });
</script>

1.3 $(document).ready()与window.onload的区别

<script type="text/javascript">
    function loadOne(){
        alert("LoadOne");
    }
    function loadTwo(){
        alert("loadTwo");
    }
    function loadThree(){
        alert("loadThree");
    }

    //onload的用法，页面加载完成后，调用函数,只能执行一个，且是最后指定的那个，特点：必须要等待网页元素全部加载才执行
    // window.onload = loadOne;
    // window.onload = loadTwo; //只有后面这个才有效

    //jQuery 的用法，页面结构加载完成后，调用函数，可以定义多个，互相不影响,且都可以执行
    //三个都可以执行
    $(document).ready(function(){
        loadOne();
    });

    //简化1
    $(document).ready(function(){
        loadTwo();
    });

    //简化 2   我们常用这种简化方式
    $(function(){
        loadThree();
    });

</script>

2、jQuery选择器

基本选择器的语法：$(“选择器”).action();

2.1 基本选择器

名称	语法	说明
标签选择器	element	选取指定标签名的元素
类选择器	.class	选取指定类名的元素
ID选择器	#id	选取指定id名的元素
并集选择器	selector1,selector2…	选取多种元素(里面可以是标签名，类名，id名)
全局选择器	*	选取所有元素

2.2 层次选择器

语法	说明
ancestor desscendant	后代选择器 A B
partn>child	子选择器 A>B
prev+next	相邻选择器 A+B
prev~siblings	同辈选择器 A~B

2.3 属性选择器

$(“标签[属性]”)

语法	说明
[attribute]	包含某属性
[attribute=value]	指定属性等于指定值
[attribute^=value]	指定属性以指定值开头
[attribute$=value]	指定属性以指定值结尾
[attribute*=value]	指定属性值包含指定参数值

2.4 过滤选择器

标签名:过滤选择器；

作用：过滤指定标签；

语法	说明
:first	选取第一个元素
:last	选取最后一个元素
:not(selector)	选取除selector选择了的元素之外的元素
:even	选取索引是偶数的元素(index从0开始)
:odd	选取索引是奇数的元素(index从0开始)

语法	说明
:eq(index)	选取索引等于index的元素
:gt(index)	选取索引大于index的元素
:lt(index)	选取索引小于index的元素
:header	选取所有标题元素（h1~h6） 注意 :header之前要有空格
:docus	选取当前获取焦点的元素
:animated	选取所有动画

可见性选择器

语法	说明
:visible	选取所有可见的元素 hidden()方法 隐藏
:hidden	选取所有隐藏的元素 show()方法 显示

2.5 jQuery选择器注意事项

选择器的书写规范很严格，多一个或少一个空格，都会影响选择器的效果；

2.6 $(“选择器”).css()

方法	说明
$(“选择器”).css(“属性名称”,”属性值”)	对单个css属性赋值
$(“选择器”).css({“属性名称”：”属性值”，”属性名称”：”属性值”})	对多个css属性赋值

2.7 $(this).find(“标签名”)

$(this)就是将这个dom对象转换成jquery对象，就可以对这个对象进行操作；

可以查找当前元素下的子元素；

html

//当鼠标访问指定的li时，指定的li下的p标签显示，鼠标移除后，对应的p消失
<ol>
     <li><span>3</span>三八线<p>加入看单</p></li>
    <li><span>4</span>吉详天宝<p>加入看单</p></li>
    <li><span>5</span>亲爱的翻译官<p>加入看单</p></li>
    <li><span>6</span>仙剑云之凡<p>加入看单</p></li>
    <li><span>7</span>权力的游戏第五季<p>加入看单</p></li>
    <li><span>8</span>琅琊榜<p>加入看单</p></li>
    <li><span>9</span>那年青春我们正好<p>加入看单</p></li>
    <li><span>10</span>乡村受情8（上）<p>加入看单</p></li>
</ol>

javascript

$("#play ol li").mouseover(function(){
	$(this).find("p").css({"display":"block"});
});
$("#play ol li").mouseleave(function(){
	$(this).find("p").css({"display":"none"}); //查找到当前元素的子元素
});


//还可以是使用:hidden 和 :visible  可见选择器
$("#play ol li").mouseover(function(){
    $(this).find("p:hidden").show();
});

$("#play ol li").mouseleave(function(){
    $(this).find("p:visible").hide();
});

$(this)表示当前元素，它还可以点出很多方法，需要的时候可以加个点看看有哪些；

常用方法

方法	说明
$(this).find(“标签名”)	当前标签下的指定标签
$(this).index()	当前标签的下标

3、jQuery基本操作

3.1 样式操作

方法(已声明好的外部样式类名，多个使用空格分割)	说明
addClass(“样式类名”)	添加样式
removeClass(“样式类名”)	移除样式
toggleClass(“样式类名”)	切换样式(就是添加和移除结合)可以与hover事件结合
hasClass(“样式类名”)	判断是否包含指定样式

3.2 内容操作

方法名	说明
html(context)	给指定元素添加网页内容(会编译标签) js->innerHTML
html()	获取指定元素的网页内容
text(context)	给指定元素添加网页内容(不会编译标签)js->innerText
text()	获取指定元素的网页内容

3.3属性值操作

方法	说明
val()	获取value属性的属性值
val(参数值)	设置value属性的属性值

3.3.1获取单选框的值

$('input:radio[name="IsAvail"]:checked').val()

3.4 节点操作

3.4.1 创造节点

$()用于获取或创建节点

方法	说明
$(element)	把DOM节点转化成jQuery节点
$(selector)	通过选择器获取节点
$(html)	使用HTML字符创建jQuery节点

3.4.2 插入节点

1 元素内部插入子节点

方法	说明
$(A).append(B)	将B节点追加到A节点的子节点中
$(A).appendTo(B)	将A节点追加到B节点的子节点中
$(A).prepend(B)	将B节点追加到A节点的子节点中
$(A).prependTo(B)	将A节点追加到B节点的子节点中

注意：jq中已经创建好的同一节点，多次执行插入，只会执行一次

var $node2 = $("<li>上海新增本土54例</li>");
$node2.appendTo($("ul")); //执行
//jq中已经创建好的同一节点，多次执行插入，只会执行一次
$node2.appendTo($("ul")); //不执行

//只用每次创建新的节点，才会多次执行
$("<li>罗永浩：那火烤中学高有问题</li>").prependTo($("ul"));//执行
$("<li>罗永浩：那火烤中学高有问题</li>").prependTo($("ul"));//执行

2 元素外部插入同辈节点

方法	说明
$(A).after(B)	将B节点追加到A节点之后
$(A).insterAfter(B)	将A节点追加到B节点之后
$(A).before(B)	将B节点追加到A节点之前
$(A).insertBefore(B)	将A节点追加到B节点之前

3.4.3 删除节点

方法	说明
remove()	删除当前整个节点
empty()	清空节点内容，节点还存在
detach()	删除整个节点，保留元素的绑定事件和附加的数据

3.4.4 替换节点

方法	说明
$(A)replaceWith(B)	B节点替换A节点
$(A).replaceAll(B)	A节点替换B节点

3.4.5 复制节点

方法	说明
clone(true)	复制节点及节点上的事件
clone(false)	复制节点但不复制节点上的事件

3.5属性操作

方法	说明
$(“元素标签”).attr(“属性名”）	获取指定属性的属性值
$(“元素标签”).attr(“属性名”,”属性值”)	设置指定属性的属性值
$(“元素标签”).attr({“属性名”:”属性值”,”属性名”:”属性值”})	设置多个指定属性的属性值
removeAttr(“属性名”)	删除指定属性

3.6 节点遍历

3.6.1 遍历子元素

方法	说明
children()	获取元素的所有子元素
$(selector).children([expr]);	获取子元素的中的指定元素

3.6.2 遍历同辈元素

方法	说明
next()	获取当前元素后的第一个同辈元素
prev()	获取当前元素前的第一个同辈元素
slibings()	获取当前元素的所有同辈元素

3.6.3 遍历前辈元素

方法	说明
parent()	获取当前元素的父级元素
parents()	获取当前元素的所有祖先元素

3.6.4 each() 遍历

例子

//遍历所有的li元素
//隐式迭代:自动遍历集合中的所有元素
$("li").each(function(index,elm){
    alert(index);
    alert($(elm).html());
});

$("li").each(function(){
//注意:elm时dom元素对象,不可以直接使用jQuery方法,必须是转化为jQuery节点
    alert($(this).html()); //$(this)转换为jQuery节点
});

3.6.5 end()

结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态；

//end():结束当前的最后一次筛选,恢复到初始状态
$(".gameList li").first().css("background-color","orange").end().last().css({"background-color":"pink"}); //可以选取到第一个li和最后一个li
//先选取第一个li，然后end()清除.first()的过滤，回到$(".gameList li")，在选取last()
//相当于两条语句：
/*
$(".gameList li").first().css("background-color","orange");
$(".gameList li").last().css({"background-color":"pink"});
*/

4、jQuery事件与特效

4.1 基础事件

4.1.1 鼠标事件

事件名称	说明
mouseover()	鼠标移入事件
mouseout()	鼠标移出事件
mouseenter()	鼠标移入事件
mouseleaver()	鼠标移出事件
hover()	鼠标移入和移出事件
click()	鼠标点击事件
dblclick()	鼠标双击事件
focus()	获取焦点事件
blur()	失去焦点事件

鼠标事件方法的区别

方法	相同点	不同点
mouseover()	鼠标进入被选元素时会触发	鼠标在其被选元素的子元素上来回进入时，触发
mouseenter()	鼠标进入被选元素时会触发	鼠标在其被选元素的子元素上来回进入时，不触发
mouseout()	鼠标离开被选元素是会触发	鼠标在其被选元素的子元素上来回离开时，触发
mouseleaver()	鼠标离开被选元素是会触发	鼠标在其被选元素的子元素上来回进入时，不触发

4.1.2 键盘事件

方法	说明
keydown()	键盘按下事件
keyup()	键盘弹起事件
keypress	产生可打印的字符事件

键盘按下灵活应用

//键盘按下事件，判断是否是enter键，并手动提交表单
$(document).keydown(function(even){
    if(even.keyCode == 13){
        if(confirm("确定要提交登录请求吗？")){
            alert("登录请求可以提交");
            //jQuery中手动提交表单
            $("form").submit();
        }else{
            alert("登录请求取消")
        }
    }
});

4.1.3 浏览器事件(了解)

4.1.4 window事件(了解)

4.1.5 表单事件(了解)

4.2 绑定事件和移出事件

4.2.1 绑定事件

方法	说明
bind()	绑定事件

4.2.1.1 绑定单个事件

bind(事件类型名，事件处理函数)；

//对指定元素绑定mouseover事件
$(".on").bind("mouseover",function(){
    $(".topDown").show();
});
//对指定元素绑定mouseout事件
$(".on").bind("mouseout",function(){
    $(".topDown").hide();
});

4.2.1.2 绑定多个事件

bind({事件名称：事件处理函数，事件处理名称：事件处理函数。。。})

//对指定元素，绑定mouseover和mouseout事件
$(".on").bind({
    "mouseover":function(){
        $(".topDown").show();
    },
    "mouseout":function(){
        $(".topDown").hide();
    }
});

4.2.2 移除事件

方法	说明
unbind();	解除指定元素绑定的所有事件
unbind(事件名);	解除指定元素绑定的指定事件

4.3 复合事件

4.3.1 hover

方法	说明
hover()	相当于mouseover和mouseout的集合，并支持切换

//复合事件：hover,相当于mouseover和mouseout的集合，并支持切换
$(".on").hover(function(){ 
    $(".topDown").show();
},function(){
    $(".topDown").hide();
});

4.3.2 toggle 1.9版本之后，移除了toggle()复合事件方法

方法	说明
toggle(函数。。。)	连续点击会切换函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>连续点击，了解</title>
	</head>
	<body>
		<input type="button" value="切换颜色">
	</body>
	<script src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//连续点击：toggle(function1,function2...),随着鼠标的点击自动切换函数
			$("input[type=button]").toggle(
			function(){
				$("body").css("background-color","#f00");
			},
			function(){
				$("body").css("background-color","#0f0");
			},
			function(){
				$("body").css("background-color","#00f");
			}
			)
		});
	</script>
</html>

4.3.3 toggle(),toggle(函数),toggleClass()区别

方法	说明
toggle()	相当于show()和hidden()
toggle(函数)	复合事件 随着鼠标的点击自动切换函数
toggleClass(类名)	相当于addClas(“类名”)，removeClass()

4.4 jQuery 动画效果

4.4.1 控制元素的显示及隐藏

方法	说明
show()	立刻显示
show(毫秒数)	慢慢显示
show(毫秒数,函数)	在动画效果结束后执行函数
hide()	立刻隐藏
hide(毫秒数)	慢慢隐藏
hide(毫秒数,函数)	在动画效果结束后执行函数

toggle() 方法等于这两个方法

方法	说明
toggle()	立即显示和隐藏
toggle(毫秒数)	慢慢显示和隐藏
toggle(毫秒数，函数)	在动画效果结束后执行函数

参数：可以为任意毫秒数或，slow,normal,fast;

4.4.2 改变元素的透明度(淡入淡出)

方法	说明
fadeIn()	立即淡入
fadeIn(毫秒数)	淡入
fadeln(毫秒数，函数)	在动画效果结束后执行函数
fadeOut()	立即淡出
fadeOut(毫秒数)	淡出
fadeOut(毫秒数，函数)	在动画效果结束后执行函数

参数：可以为任意毫秒数或，slow,normal,fast;

4.4.3 改变元素高度(收缩)

方法	说明
slideDown()	立即延伸
slideDown(毫秒数)	慢慢延伸
slideDown(毫秒数，函数)	在动画效果结束后执行函数
slideUp()	立即收缩
slideUp(毫秒数)	慢慢收缩
slideUp(毫秒数，函数)	在动画效果结束后执行函数

参数：可以为任意毫秒数或，slow,normal,fast;

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画-显示，隐藏，淡入淡出，收索，拉伸</title>
	</head>
	<body>
		<p>
			<img src="img/img01.jpg" alt="" width="600px" height="300px">
		</p>
		<input type="button" value="显示" id="showImg">
		<input type="button" value="隐藏" id="hideImg">
		
		<p>
			<img src="img/img02.jpg" alt="" width="600px" height="300px">
		</p>
		<input type="button" value="淡入" id="dadeIn">
		<input type="button" value="淡出" id="dadeOut">
		
		<p>
			<img src="img/img03.jpg" alt="" width="600px" height="300px">
		</p>
		<input type="button" value="延伸" id="slidedownImg">
		<input type="button" value="收缩" id="slideupImg">
		
	</body>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//显示和隐藏：可以不带，带一个，带两个参数
			//第一个参数是执行显示或隐藏的速度或者隐藏的时长，单位是毫秒,如果为0，立刻执行
			//也可以是：slow,normal,fast，
			//第二个参数是执行显示或者隐藏效果完成后，需要执行的操作函数
			$("#showImg").click(function(){
				// $("img:eq(0)").show();//立刻显示
				$("img:eq(0)").show(5000);//慢慢显示，整个过程1秒，默认是从左上角显示
				
			});
			
			$("#hideImg").click(function(){
				// $("img:eq(0)").hide();//立刻显示
				$("img:eq(0)").hide(5000);
			});
			
			
			//淡入和淡出的动画效果，通过改变元素的透明度，实现淡入和淡出，带参数的效果和上面一样
			$("#dadeIn").click(function(){
				// $("img:eq(1)").fadeIn();//立刻淡入
				$("img:eq(1)").fadeIn(5000);//淡入
				
			});
			
			$("#dadeOut").click(function(){
				// $("img:eq(1)").fadeOut();//立刻淡出
				$("img:eq(1)").fadeOut(5000);//淡出
			});
			
			//通过改变元素的高度
			$("#slidedownImg").click(function(){
				// $("img:eq(2)").slideDown();//立刻延伸
				$("img:eq(2)").slideDown(5000);//延伸
				
			});
			
			$("#slideupImg").click(function(){
				// $("img:eq(2)").slideUp();//立刻收缩
				$("img:eq(2)").slideUp(5000);//收缩
			});
			
		})
	</script>
</html>

4.4.4 自定义动画(了解)

5、项目中常用的知识点

5.1 自定义表单验证 required

自定义表单的input标签必须添加required属性，否则就不会触发；

//自定义用户名校验提示语，对浏览器默认提示语，进行统一修改
$("input[type=submit]").click(function(){	
    var userName = document.getElementById("userName");
    if(userName.validity.valueMissing){
        userName.setCustomValidity("用户名不能为空")
    }else if(userName.validity.patternMismatch){
        //正则校验提示
        userName.setCustomValidity("用户名不符合规则校验")
    }else{
        userName.setCustomValidity("");
    }
    
});

5.2 return false 的理解和用法

当表单提交事件，接收到false的返回值不会再提交表单内容，可以实现去除表单的默认提交处理(让from的action失败)，包括超链接；

$("form").submit(function(){
    // alert("监听表单提交事件");
    //提示是否确认登录请求
    if(!confirm("确认要进行登录吗？")){
    //当表单提交事件，接收到false的返回值不会在提交表单内容，可以实现去除表单的默认提交处理(让from的action失败)，包括超链接
        return false;
    }
});

5.3 stop(true,true)

stop(true,true)停止匹配当前正在执行的动画效果，解决快速移入移出导致的延迟效果;

//二级导航栏的下拉特效
$(".wel_rhelp").bind({
    "mouseenter":function(){
     //stop(true,true) 停止匹配当前正在执行的动画效果，解决快速移入移出导致的延迟效果
      $(".wel_rhelp_ul").stop(true,true).slideDown(1000);
    },
    "mouseleave":function(){
        $(".wel_rhelp_ul").stop(true,true).slideUp(1000);
    }
});

5.4 轮播图

html

<!--焦点图-->
<div class="banner">
    <div class="top_slide_wrap">
        <ul class="slide_box ">
            <li class="active"><img src="img/ban1.jpg" width="700" height="401" /></li>
            <li><img src="img/ban2.jpg" width="700" height="401" /></li>
            <li><img src="img/ban3.jpg" width="700" height="401" /></li>
        </ul>
        <ul class="num">
            <li class="active">
                <a href="#">1</a>
            </li>
            <li class="">
                <a href="#">2</a>
            </li>
            <li>
                <a href="#">3</a>
            </li>
        </ul>
        <div class="op_btns">
            <div class="op_btns_1 clear">
                <a href="#" class="op_btn op_prev"></a>
                <a href="#" class="op_btn op_next"></a>
            </div>
        </div>
    </div>
</div>

javaScript

$(function(){
    //调用轮播函数
    playBanner();
});


//自定义轮播图播放函数
function playBanner(){
    //初始化图片序号变量
    var bannerIndex = 0;

    //初始化标识，当鼠标移入到轮播图数字上，暂停轮播
    var bannerFlog = false; //默认不暂停，当为true才暂停

    //获取要轮播的图片对象集合
    var $bannerImgs = $(".slide_box").children("li");
    //获取要轮播的图片对应数字集合
    var $bannerNums = $(".num").children("li");

    //1.当鼠标移入轮播图移入到对应的数字上，显示对应的轮播图
    $bannerNums.mouseover(function(){
        //确定移入的是哪个数字
        bannerIndex = $bannerNums.index($(this));
        // alert(bannerIndex);

        //让对应轮播图数字的图片进行淡入
        $bannerImgs.eq(bannerIndex).fadeIn();

        //所有当前轮播图数字外其他图片都要淡出
        $bannerImgs.eq(bannerIndex).siblings().fadeOut();

        //当前轮播图的数字要高亮 actice类是让数字高亮
        $(this).addClass("active");

        //所有当前轮播图数字外其他的数字都要取消高亮
        $(this).siblings().removeClass("active");

        //修改轮播图true,暂停
        bannerFlog = true;

    }).mouseout(function(){
        //修改轮播标识为false,继续自动轮播
        bannerFlog = false;
    });

    //开启自动轮播
    setInterval(function(){

        // 判断当前是不是鼠标在某个轮播图片的数字上，如果是，不可以切换图片，否则继续
        if(bannerFlog){
            return;
        }

        //默认从第一个图片开始轮播，轮播到最后一个图片，如果鼠标移入到某个图片，从当前的图片开始轮播
        bannerIndex++;

        //如果轮播图片序号大于轮播图片总数，代表轮播到最后，要从头开始
        if(bannerIndex >= $bannerImgs.length){
            bannerIndex = 0;
        }
        
        //切换轮播图片
        $bannerImgs.eq(bannerIndex).stop(true,true).fadeIn().siblings().fadeOut();
        
        //切换对应的轮播数字
        $bannerNums.eq(bannerIndex).stop(true,true).addClass("active").siblings().removeClass("active");

    },3000);
}

5.5 jQuery 判断checked的三种方法:

方法	说明
.attr(‘checked’)；	看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop(‘checked’)；	16+:true/false
.is(‘:checked’)；	所有版本:true/false//别忘记冒号哦

赋值

方法	说明
.attr(“checked”,”checked”);	赋值checked
.attr(“checked”,true);	赋值true

5.6 prop()方法的应用

prop() 方法设置或返回被选元素的属性和值

prop(参数1，参数2)：

1. 参数1用于设置属性
2. 参数2设置属性值
   下面一个简单的案例来应用一下这个方法：

head部分

<script src="lib/jquery/jquery-3.4.1.min.js"></script>
	<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
	<style>
	.wrap {
		width: 500px;
		height: 300px;
		margin: 50px auto;
	}
	th {
		text-align: center;
	}
    </style>

body部分

<div class="wrap">
		<table class="table table-striped table-bordered table-hover text-center">
			<thead>
				<tr class="success">
					<th><input type="checkbox" id="min_check"></th>
					<th>语文</th>
					<th>数学</th>
					<th>英语</th>
				</tr>
			</thead>
			<tbody id="t_body">
				<tr>
					<td><input type="checkbox"></td>
					<td>55</td>
					<td>66</td>
					<td>61</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>68</td>
					<td>23</td>
					<td>58</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>35</td>
					<td>35</td>
					<td>88</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>36</td>
					<td>58</td>
					<td>21</td>
				</tr>
			</tbody>
		</table>
	</div>
	<script>
		$(function(){
			// 需求1：当点击全选按钮的时候，下面的四个按钮也被选中
			$("#min_check").click(function(){
				$("#t_body input:checkbox").prop("checked",$(this).prop("checked"));
			});
			//需求2：当下面按钮有一个没被选中，上面的全选按钮也取消选中状态
			$("#t_body input:checkbox").click(function(){
				if($("#t_body input:checkbox").length === $("#t_body input:checked").length){
					$("#min_check").prop("checked",true);
				}else {
					$("#min_check").prop("checked",false);
				}
			});
		});
	</script>