JAVA学习笔记—前端学习笔记（二）—JQ、ES6、Bootstrap

最新推荐文章于 2022-07-13 16:09:48 发布

Big_BlueCat

最新推荐文章于 2022-07-13 16:09:48 发布

阅读量1k

点赞数

分类专栏： Java学习笔记文章标签： javascript jquery es6

本文链接：https://blog.csdn.net/qq_40850871/article/details/109731993

版权

文章目录

四、jQuery基础
六、Bootstrap基础

四、jQuery基础

1.jQuery介绍

jQuery由美国人John Resig（约翰·莱西格）于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more
实现隔行变色效果，JavaScript要循环加判断，而jQuery只需一句关键代码

$("tr:even").css("background-color","#ccc");

1.1 jQuery能做什么?

访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合
jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率
其实，jQuery和JavaScript的之间关系，可以理解为“成语”和“白话文”之间的关系。成语是对白话文高度压缩，而jQuery也是对JavaScript的高度压缩库

1.2 jQuery的优势

体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性

2. jQuery的使用

jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突
在页面中使用传统引入js文件的方式引入即可。

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

2.1 基本的语法介绍

<script>
	$(selector).action();
</script>

说明：
工厂函数 $() ：将 D O M 对象转化为 j Q u e r y 对象选择器 s e l e c t o r ：获取需要操作的 D O M 元素（没错，用法基本上和 c s s 一致）方法 a c t i o n () ： j Q u e r y 中提供的方法，其中包括绑定事件处理的方法 “$ ”等同于“ jQuery ”
例如：

<body>
	<p>hello</p>
</body>
	<script src="js/jquery-3.4.1.min.js"></script>
<script>
	alert( $("p").text() );
</script>

2.2 jQuery对象与DOM对象

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

$("#title").html();
// 等同于
document.getELementById("title").innerHTML;

想混用，要转换
DOM对象转jQuery对象

var a = document.getElementById("name"); // a是DOM对象
var b = $(a); // b是jQuery对象

jQuery对象转DOM对象

var a = $("#name"); // a是jQuery对象
var b = jqObject.get(0); // b是DOM对象

2.3 选择器

2.3.1 基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$(“h2” )选取所有h2元素
类选择器	.class	根据给定的配元素 class匹	$(" .title 为title的元素 ")选取所有class
ID选择器	#id	根据给定的元素 id匹配	$(" #title 元素 ")选取id为title的
并集选择器	selector1,selector2,…,selectorN	将每一个选择器匹配的元素合并后一起返回	$(“div,p,.title” )选取所有 div、p和拥有class为title 的元素
交集选择器	element.class或element#id	匹配指定class或id 的某元素或元素集合	$(“h2.title”)选取所有拥有 class为title的h2元素

<p>中国</p>
<p>武汉</p>
<p class="jy">加油</p>
<p id="wan">祖国万岁</p>
<h3 class="jy">祖国万岁</h3>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//$("p").css("color","red"); // 标签选择器，获得所有的p
//$(".jy").css("color","red"); //类选择器
//$("#wan").css("color","red"); //ID选择器,更具备唯一性
//$(".jy,#wan").css("color","red"); // 并集选择器，.jy和#wan
$("h3.jy").css("color","red"); // 交集选择器，既是h3标签，又拥有.jy的元素
</script>

2.3.2 层次选择器

名称	语法构成	描述	示例
后代选择器	ancestor descendant	选取ancestor元素里的所有 descendant（后代）元素	$("#menu span" )选取 #menu下的元素
子选择器	parent>child	选取元素parent元素下的child（子）	$(" #menu>span #menu的子元素 " )选取
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻元素之后的同辈元素
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings 元素	$(" h2~dl " )选取元素之后所有的同辈元素

<h3>000</h3>
<div id="x">
111
<p>p1</p>
<div>
<p>p2</p>
</div>
</div>
<h3>222</h3>
<h3>333</h3>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//$("#x p").css("color","red"); // 后代选择器，忽略层级
//$("#x>p").css("color","red"); // 子代选择器，只负责子级
//$("#x+h3").css("color","red"); // 相邻元素选择器，下一个紧邻的兄弟h3
$("#x~h3").css("color","red"); // 同辈元素选择器，下面的所有兄弟h3
</script>

2.3.3 属性选择器

<a href="www.baidu.com">百度网</a>
<a href="www.sina.com.cn">新浪网</a>
<a href="http://www.163.com">网易</a>
<p href="x">哈哈1</p>
<p href="x" title="x">哈哈2</p>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//$("[href]").css("color","red"); // 选取拥有href属性的元素
//$("[href='x']").css("color","red"); // 选取拥有href=x的元素
//$("a[href!='x']").css("color","red"); // 选取a标签中href不等于x的元素
//$("[href^='www']").css("color","red"); // 选取href属性以www开头的元素
//$("[href$='com']").css("color","red"); // 选取href属性以com结尾的元素
//$("[href*='a']").css("color","red"); // 选取href属性包含a的元素
$("p[href][title='x']").css("color","red"); // 选取拥有href属性和title属性，并且title=x的p元素
</script>

2.3.4 过滤选择器

语法构成	描述	示例
:first	选取第一个元素	$(" li:first" )选取所有元素中的第一个元素
:last	选取最后一个元素	$(" li:last" )选取所有元素中的最后一个元素
:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有元素
:eq(index)	选取索引等于index的元素（index从0开始）	$(“li:eq(1)” )选取索引等于1的元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的元素（注：小于1，不包括1）

<h2 id="h2#x">修仙小说</h2>
<ul>
<li>凡人修仙传</li>
<li>遮天</li>
<li>神墓</li>
<li>残袍</li>
<li>大主宰</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//$("li:first").css("color","red"); // 第一个li
//$("li:last").css("color","red"); // 最后一个li
//$("li:even").css("color","red"); // 偶数行的li
//$("li:odd").css("color","red"); // 奇数行的li
//$("li:eq(2)").css("color","red"); // 下标为2的li
//$("li:gt(1)").css("color","red"); // 下标大于1的li
//$("li:lt(2)").css("color","red"); // 下标小于2的li
$("#h2\\#x").css("color","red"); // 使用转义符
</script>

2.4 事件

2.4.1 鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouse over事件	鼠标移过时
mouseout( )	触发或将函数绑定到指定元素的mouse out事件	鼠标移出时

<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("img").click( function(){
   
//点击一下，换照片
$(this).attr( "src","img/2.jpg" ); //this就是事件触发的源头
} );
$("img").mouseover( function(){
    //移动到元素上
$(this).css( "border","2px solid red" );
} );
$("img").mouseout( function(){
    //离开元素
$(this).css( "border","2px solid white" );
} );
</script>

2.4.2 键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有：

方法	描述	执行时机
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时

<input>
<h3></h3>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("input").keyup( function(){
   
var str = $(this).val(); // 获取框中的值
$("h3").text( str ); // 将h3元素中的文本内容更改为str
} );
</script>

2.4.3 表单事件

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表：

方法	描述	执行时机
focus( )	触发或将函数绑定到指定元素的focus事件	获得焦点
blur( )	触发或将函数绑定到指定元素的blur事件	失去焦点

<form action="">
<p>帐号: <input id="a" value="请输入帐号..."> </p>
<p>电话: <input id="b"> </p>
</form>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//获得焦点（激活/点击一下）
$("#a").focus(function(){
   
$(this).val("");
});
//失去焦点（未激活/未点击）
$("#a").blur(function(){
   
$(this).val("请输入帐号...");
});
</script>

2.4.4 鼠标悬停复合事件

hover()方法相当于mouseover与mouseout事件的组合

<img src="img/3.jpg" width="400">
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("img").hover(
function(){
   
$(this).css("border","5px solid red");
},
function(){
   
$(this).css("border","5px solid white");
}
);
</script>

2.4.5 连续点击复合事件

toggle()除了可以模拟鼠标的连续单击事件

<h2>修仙小说</h2>
<ul>
<li>凡人修仙传</li>
<li>遮天</li>
<li>神墓</li>
<li>残袍</li>
<li>大主宰</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("h2").click(function(){
   
$("ul").toggle(); // 连续点击，ul的可见和隐藏进行切换
});
</script>

2.4.6 事件的动态绑定

对dom元素绑定事件的另一种写法
绑定一个事件

$(".del").on('click', function() {
   
alert('hello');
})

绑定多个事件

$(".del").on('click mouseover', function() {
   
alert('hello');
})

2.5 元素的隐藏和显示

2.5.1 改变元素的宽和高（带动画效果）

show( speed )：显示
hide( speed )：隐藏
toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<style>
div{
    
width: 200px;
height: 200px;
background-color: black;
}
</style>
<body>
<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<button id="btn3">切换</button>
<div></div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#btn2").click(function(){
    
//fast:快速的
//slow:缓慢的
//毫秒：自定义
$("div").hide(2000);
});
    $("#btn1").click(function(){
    
$("div").show('slow');
});
$("#btn3").click(function(){
    
$("div").toggle(1000);
});
</script>
</body>

2.5.2 改变元素的高（拉伸效果）

slideDown( speed ) ：显示
slideUp( speed )：隐藏
slideToggle( speed )等价于slideDown+slideUp
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<script>
$("#btn2").click(function(){
    
$("div").slideUp(1000); //向上收缩
});
$("#btn1").click(function(){
    
$("div").slideDown(1000); //向下伸展
});
$("#btn3").click(function(){
    
$("div").slideToggle(1000); //切换
});
</script>

2.5.3 不改变元素的大小（淡入淡出效果）

fadeIn( speed ) 显示
fadeOut( speed ) 隐藏
fadeToggle( speed ) 等价于fadeIn+fadeOut动画
fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<script>
$("#btn2").click(function(){
    
$("div").fadeOut(1000); // 隐藏：淡出我的视线
});
$("#btn1").click(function(){
    
$("div").fadeIn(1000); // 显示：映入眼帘
});
$("#btn3").click(function(){
    
$("div").fadeToggle(1000); // 切换
});
$("#btn4").click(function(){
    
$("div").fadeTo(1000,0.5); // 1秒内变成50%的透明度
});
</script>

2.5.4 链

链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起；
例如：点击一次按钮，让div完成4个指定动作
\1. 背景变粉
\2. 字体变绿
\3. 收缩
\4. 拉伸

<style>
div{
    
width: 200px;
height: 200px;
background-color: black;
color:white;
font-size: 3em;
}
</style>
<body>
<button>试试</button>
<div>hello</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
    
$("div").css("backgroundcolor","pink").css("color","green").slideUp(1000).slideDown(1000);
});
</script>
</body>

2.6 DOM和CSS的操作

2.6.1 属性函数

attr( “属性” ); 获得元素的属性值
attr( “属性” , “新值” ); 修改元素的属性值
attr( 样式参数 ) ：样式参数可以写成json格式

<body>
<button id="btn1">点我试试</button>
<hr>
<img src="img/1.jpg" title="大图" width="300">
<script src="js/jquery-3.4.1.min.js">

最低0.47元/天解锁文章

Big_BlueCat

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JAVA学习笔记—前端学习笔记（二）—JQ、ES6、Bootstrap

四、jQuery基础1.jQuery介绍jQuery由美国人John Resig（约翰·莱西格）于2006年创建jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装它的设计思想是write less,do more实现隔行变色效果，JavaScript要循环加判断，而jQuery只需一句关键代码$("tr:even").css("background-color","#ccc");1.1 jQuery能做什么?访问和操作DOM元素控制页面样式
复制链接

扫一扫