1+X Web 前端开发考证 | 详解jQuery基础
jQuery是web前端初级考试的一个必考知识?虽然jQuery有点老,但是jQuery还是有他的作用的:
- JavaScript框架库:就是一个普通的js文件,封装了很多的函数,封装了很多兼容的代码
- jQuery是JavaScript框架库中的一种
- jQuery的好处:写的少,做的多,链式编程,隐式迭代等…
- jQuery可以解决js兼容的问题
体验 jQuery
例如我们要做一个页面加载事件,用javascript实现如下
<script>
window.onload=function () {
document.getElementById("btn").onclick=function () {
var divObj=document.getElementById("dv");
divObj.style.width="200px";
divObj.style.height="100px";
divObj.style.backgroundColor="red";
} ;
};
</script>
而用jQuery只需下面简单一行就可以实现:
<script src="jquery-1.12.2.js"></script>
<script>
//页面加载后的一个事件
$(function () {
$("#btn").click(function () {
$("#dv").css({
"width":"200px","height":"100px","backgroundColor":"green"});
});
});
</script>
jQuery中的顶级对象
- DOM中的顶级对象:
docuemnt—页面中的顶级对象(docuemnt点出来的是DOM中的属性和方法) - BOM中的顶级对象:
window----浏览器中的顶级对象(window点出来的是浏览器中的属性和方法) - jQuery的顶级对象:jQuery----$
$点出来的是jQuery中的方法
页面的加载事件
// 用js:
window.onload=function () {
console.log("hello,特立独行的鱼儿");
};
// 用jq:
$(window).load(function () {
console.log("hello,特立独行的鱼儿");
});
DOM对象和jQuery对象实现互转
- DOM对象转---->jQuery对象: $(DOM的对象)----->jQuery对象
- jQuery对象---->DOM对象: 1. $(“DOM对象”)[0]---->DOM对象; 2. $(“DOM对象”).get(0)—DOM对象
jQuery中的选择器 (重要)
DOM中获取元素的方式:
- document.getElementById(“id的值”);根据id获取元素,一个
- document.getElementsByTagName(“标签的名字”);根据标签的名字获取元素,多个
- document.getElementsByName(“name属性的值”);根据name属性的值获取元素,多个
- document.getElementsByClassName(“类样式的名字”);根据的是类样式的名字来获取元素,多个
jQuery获取元素的方式:通过各种选择器来获取元素
- 根据id来获取—>id选择器 ---->$("#id的值");一个
- 根据标签的名字来获取—标签选择器—>$(“标签的名字”);多个
- 根据类样式的名字获取—>类选择器—>$(".类样式的名字");多个
id选择器 实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 200px;
background-color: yellow;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
//点击按钮,设置层中的显示内容为:这是一个层,同时设置这个层的背景颜色(id选择器)
//页面加载的事件
$(function () {
//获取按钮--根据id选择器获取,调用点击事件的方法
$("#btn").click(function () {
//设置div中的显示内容
$("#dv").text("这是一个有颜色的div");//相当于DOM中的innerText或者是textContent
$("#dv").css("backgroundColor","yellow");//设置元素的样式
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>
标签选择器 实例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="jquery-1.12.2.js">script>
<script>
//点击按钮,设置多个p标签中显示内容为:我是特立独行的鱼儿(标签选择器)
//页面的加载事件
$(function () {
//获取按钮,调用点击事件,获取所有的p,设置内容
$("#btn").click(function () {
//获取所有的p--->标签选择器
$("p").text("我是特立独行的鱼儿");
});
});
script>
head>
<body>
<input type="button" value="设置内容" id="btn"/>
<p>我是特立独行的鱼儿p>
<p>我是特立独行的李子p>
<p>我是特立独行的bugp>
<p>bug太招人讨厌了p>
<p>快乐码字不秃头p>
body>
html>
类选择器 实例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.cls{
background-color: pink;
}
style>
<script src="jquery-1.12.2.js">script>
<script>
//点击按钮,设置页面上应用cls类样式的元素的背景颜色(类选择器)
//页面加载的事件
$(function () {
//获取按钮,调用点击事件,获取所有应用了cls类样式的元素
$("#btn").click(function () {
//类选择器来获取元素
$(".cls").css("backgroundColor","red");
});
});
script>
head>
<body>
<input type="button" value="显示效果" id="btn"/>
<span class="cls">这是一个spanspan>
<p class="cls">这是一个pp>
body>
html>
标签+类样式的选择器 实例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.list{
background-color: red;
}
style>
<script src="jquery-1.12.2.js">script>
<script>
//点击按钮设置页面上应用cls类样式li标签的背景颜色
//页面加载的事件
$(function () {
//获取按钮,注册点击事件
$("#btn").click(function () {
//获取应用cls类样式的li标签
//标签+类样式的选择器
$("li.list").css("backgroundColor","yellow");
});
});
script>
head>
<body>
<input type="button" value="设置样式" id="btn"/>
<ul>
<li class="list">李子li>
<li>李李li>
<li>老李li>
<li class="list">华园李li>
<li>小李li>
ul>
body>
html>
多条件选择器 实例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
width: 200px;
height: 100px;
background-color: blue;
}
style>
<script src="jquery-1.12.2.js">script>
<script>
//点击按钮,设置页面中的span标签,li标签,div标签的背景颜色
$(function () {
//通过多条件选择器获取元素,统一设置背景颜色
$("#btn").click(function () {
$("span,p,li,div").css("backgroundColor","yellow");
});
});
script>
head>
<body>
<input type="button" value="显示效果" id="btn"/>
<span>这是一个span标签span>
<p>我是李子p>
<ul>
<li>李子li>
<li>李李li>
<li>老李li>
<li>华园李li>
<li>小李li>
ul>
<div>div>
body>
html>
层次选择器 实例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="jquery-1.12.2.js">script>
<script>
$(function () {
//获取div中的相关元素
$("#btn").click(function () {
//获取的是div中所有的p标签元素
//$("#dv p").css("backgroundColor","red");
//获取的是div中直接的子元素
//$("#dv>p").css("backgroundColor","red");
//获取的是div后面的第一个p标签元素
//$("#dv+p").css("backgroundColor","red");
//获取的是div后面所有直接的兄弟元素p标签元素
//$("#dv~p").css("backgroundColor","red");
});
});
script>
head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv">
<p>这是div中的第一个p标签p>
<ul>
<li>这是第一个li标签li>
<li><p>这是第二个li中的一个p标签p>li>
<li>这是第三个li标签li>
ul>
<p>这是div中的第二个p标签p>
div>
<p>这是div后面的第一个p标签p>
<p>这是div后面的第二个p标签p>
<p>这是div后面的第三个p标签p>
body>
html>
隔行变色案例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
ul{
list-style-type: none;
width: 200px;
position: absolute;
left: 500px;
}
ul li{
margin-top: 10px;
cursor: pointer;
text-align: center;
font-size: 20px;
}
style>
<script src="jquery-1.12.2.js">script>
<script>
$(function () {
$("#btn").click(function () {
//偶数的li
$("#myname>li:even").css("backgroundColor","yellow");//偶数的li
$("#myname>li:odd").css("backgroundColor","red");//奇数的li
});
});
script>
head>
<body>
<input type="button" value="隔行变色" id="btn"/>
<ul id="myname">
<li>李子li>
<li>李李li>
<li>老李li>
<li>华园李li>
<li>小李li>
<li>李子2li>
<li>李李2li>
<li>老李2li>
<li>华园李2li>
<li>小李2li>
ul>
body>
html>
索引选择器:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
ul{
list-style-type: none;
width: 200px;
position: absolute;
left: 500px;
}
ul li{
margin-top: 10px;
cursor: pointer;
text-align: center;
font-size: 20px;
}
style>
<script src="jquery-1.12.2.js">script>
<script>
$(function () {
$("#btn").click(function () {
//获取ul中的索引为4的li标签元素
//$("#myname>li:eq(4)").css("backgroundColor","red");
//获取ul中的索引大于4的所有的li标签元素
//$("#myname>li:gt(4)").css("backgroundColor","red");
//获取ul中的索引小于4的所有的li标签元素
//$("#myname>li:lt(4)").css("backgroundColor","red");
});
});
script>
head>
<body>
<input type="button" value="隔行变色" id="btn"/>
<ul id="myname">
<li>李子li>
<li>李李li>
<li>老李li>
<li>华园李li>
<li>小李li>
<li>李子2li>
<li>李李2li>
<li>老李2li>
<li>华园李2li>
<li>小李2li>
ul>
body>
html>
jQuery中常见的方法
.html()方法,设置标签中间显示其他标签及内容,类似于innerHTML.text()方法,设置标签中间显示的文本内容,类似于innerText.val()方法.设置input标签中value的值,类似于value.css()方法,.设置元素的样式,类似于style
jQuery中css样式操作
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="jquery-1.12.2.js">script>
<script>
//页面加载
$(function () {
$("#btn").click(function () {
// 第一种设置元素样式的代码方式:
$("ul>li").css("backgroundColor","yellow");
$("ul>li").css("fontSize","50px");
$("ul>li").css("fontFamily","全新硬笔行书简");
$("ul>li").css("color","blue");
//第二种设置元素样式的代码方式:链式编程
$("ul>li").css("backgroundColor","yellow").css("fontSize","50px").css("fontFamily","全新硬笔行书简").css("color","blue");
//第三种设置元素样式的代码方式:键值对
$("ul>li").css({
"backgroundColor":"yellow","fontSize":"50px","fontFamily":"全新硬笔行书简","color":"blue"});
});
});
script>
head>
<body>
<input type="button" value="显示效果" id="btn"/>
<ul>
<li>李子li>
<li>李李li>
<li>老李li>
<li>华园李li>
<li>小李li>
ul>
body>
html>
jQuery中操作类样式
.css()
- .css(“属性”,“属性值”);
- .css(“属性”,“属性值”).css(“属性”,“属性值”);
- .css({“属性”:“属性值”,“属性”:“属性值”});
addClass()
- addClass(“类样式名字”);添加一个类样式
- addClass(“类样式名字1 类样式名字2”);
- removeClass()
- removeClass(“类样式名字”);移除类样式
- removeClass();移除的是当前元素中所有的类样式
- hasClass();判断当前元素是否应用了某个类样式
- toggleClass();切换元素的类样式的
实例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
width: 200px;
height: 100px;
background-color: red;
}
.cls{
background-color: green;
}
.cls2{
border: 3px solid yellow;
}
style>
<script src="jquery-1.12.2.js">script>
<script>
$(function () {
//获取按钮,点击按钮,为div添加一个类样式
$("#btn").click(function () {
//$("#dv").addClass("cls");//在addClass方法中类样式的名字前面没有点(.)
//$("#dv").addClass("cls").addClass("cls2");
//另一种写法,addClass添加样式的时候.多个类样式的名字中间用空格隔开
$("#dv").addClass("cls cls2");
});
$("#btn2").click(function () {
//移除一个元素的类样式
//$("#dv").removeClass("cls");
//移除div的所有的类样式,removeClass方法中什么也不写移除的是当前元素的所有的类样式
$("#dv").removeClass();
});
//点击第三个按钮查询这个div是否应用了cls类样式
$("#btn3").click(function () {
var result=$("#dv").hasClass("cls");
console.log(result);
});
});
script>
head>
<body>
<input type="button" value="显示效果" id="btn" />
<input type="button" value="移除类样式" id="btn2" />
<input type="button" value="检测元素是否应用了类样式" id="btn3"/>
<div id="dv">div>
body>
html>
jQuery中获取兄弟元素
.next();获取的是当前元素的下一个兄弟元素.nextAll();获取的是当前元素的后面的所有的兄弟元素.prev();获取的是当前元素的前一个兄弟元素.prevAll();获取的是当前元素的前面的所有的兄弟元素.siblings();获取的是当前元素的所有的兄弟元素(自己除外)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="jquery-1.12.2.min.js">script>
<script>
$(function () {
//获取ul中所有的li,为每个li注册鼠标进入的事件,当前元素获取到,对当前元素的兄弟元素进行操作
$("#uu>li").mouseenter(function () {
//.next();获取的是当前元素的下一个兄弟元素
//$(this).next().css("backgroundColor","green");
//.nextAll();获取的是当前元素的后面的所有的兄弟元素
//$(this).nextAll().css("backgroundColor","green");
//.prev();获取的是当前元素的前一个兄弟元素
//$(this).prev().css("backgroundColor","green");
//.prevAll();获取的是当前元素的前面的所有的兄弟元素
//$(this).prevAll().css("backgroundColor","green");
//.siblings();获取的是当前元素的所有的兄弟元素(自己除外)
$(this).siblings().css("backgroundColor","green");
});
});
script>
head>
<body>
<ul id="uu">
<li>李子li>
<li>李李li>
<li>老李li>
<li>华园李li>
<li>小李li>
ul>
body>
html>
jQuery中常见动画方法
.hide(): 隐藏
hide方法中可以写参数:
参数类型:
- 数字类型:1000表示的是毫秒 —1秒
- 字符串类型: “slow” “normal” “fast”
.show(): 显示(参数同上)slideUp(): 滑入(参数同上)slideDown(): 滑出(参数同上)slideToggle(): 切换(参数同上)fadeIn(): 淡入fadeOut(): 淡出fadeToggle(): 切换fadeTo(): 透明度变化
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
width: 200px;
height: 100px;
background-color: green;
}
style>
<script src="jquery-1.12.2.js">script>
<script>
$(function () {
//点击按钮 隐藏div
$("#btnHide").click(function () {
//$("#dv").hide();//隐藏
//hide方法中可以写参数:参数类型:1.数字类型,2字符串类型
//1数字类型:1000表示的是毫秒 ---1秒
//2字符串类型: "slow" "normal" "fast"
$("#dv").hide(1000);
//$("#dv").hide("normal");
});
$("#btnShow").click(function () {
//$("#dv").show(1000);
$("#dv").show("fast");
});
$("#btn1").click(function () {
$("#dv").slideUp(1000);
});
$("#btn2").click(function () {
$("#dv").slideDown(1000);
});
$("#btn3").click(function () {
$("#dv").slideToggle(1000);
});
$("#btn4").click(function () {
//一秒钟 透明度达到0.3
$("#dv").fadeTo(1000,0);
});
});
script>
head>
<body>
<input type="button" value="隐藏" id="btnHide"/>
<input type="button" value="显示" id="btnShow"/>
<input type="button" value="滑入" id="btn1"/>
<input type="button" value="滑出" id="btn2"/>
<input type="button" value="切换" id="btn3"/>
<input type="button" value="透明度变化" id="btn3"/>
<div id="dv">div>
body>
html>
jQuery中创建动态元素
jQuery中创建元素的方式:
- .$(“标签的代码”)
- .对象.html(“标签的代码”);
实例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
script>
<script src="jquery-1.12.2.js">script>
<script>
//需求:点击按钮,在div中创建一个超链接
$(function () {
var i=0;
$("#btn").click(function () {
i++;
//创建元素
var aObj=$("百度"+i+"");
//把元素添加到div中
// $("#dv").append(aObj);//把超链接追加到div中
//把元素插入到某个元素的前面
//$("#dv").prepend(aObj);
//把元素添加到当前元素的后面(兄弟元素来添加)
//$("#dv").after(aObj);
//把元素添加到当前元素的前面(兄弟元素来添加)
//$("#dv").before(aObj);
});
});
script>
head>
<body>
<input type="button" value="创建元素" id="btn"/>
<div id="dv">div>
body>
html>
考点知识回顾:
一. 1+X Web前端中级必考 | PHP 技术与应用
二. 1+X Web前端等级考证 | 详解jQuery基础
三. 1+X Web前端等级考证 | 深入浅出MySQL数据库
四. 1+X Web前端等级考证 | Web中级12月最新模拟题
…
1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷2) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷2) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷3) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷3) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷4) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷4) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷5) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷5) 附答案
有时间会持续更新关于1+X 方面的~~