1+X Web 前端开发考证 | 详解jQuery基础

科技2022-07-13 125

jQuery是web前端初级考试的一个必考知识?虽然jQuery有点老,但是jQuery还是有他的作用的:

JavaScript框架库:就是一个普通的js文件,封装了很多的函数,封装了很多兼容的代码jQuery是JavaScript框架库中的一种jQuery的好处:写的少,做的多,链式编程,隐式迭代等…jQuery可以解决js兼容的问题

体验 jQuery

例如我们要做一个页面加载事件,用javascript实现如下

而用jQuery只需下面简单一行就可以实现:

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>

标签选择器实例:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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>我是特立独行的bug</p> <p>bug太招人讨厌了</p> <p>快乐码字不秃头</p> </body> </html>

类选择器实例:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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">这是一个span</span> <p class="cls">这是一个p</p> </body> </html>

标签+类样式的选择器实例:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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>

多条件选择器实例:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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>

层次选择器实例:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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>

隔行变色案例:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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>李子2</li> <li>李李2</li> <li>老李2</li> <li>华园李2</li> <li>小李2</li> </ul> </body> </html>

索引选择器:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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>李子2</li> <li>李李2</li> <li>老李2</li> <li>华园李2</li> <li>小李2</li> </ul> </body> </html>

jQuery中常见的方法

.html()方法,设置标签中间显示其他标签及内容,类似于innerHTML.text()方法,设置标签中间显示的文本内容,类似于innerText.val()方法.设置input标签中value的值,类似于value.css()方法,.设置元素的样式,类似于style

jQuery中css样式操作

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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();切换元素的类样式的

实例:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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();获取的是当前元素的所有的兄弟元素(自己除外) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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(): 透明度变化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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(“标签的代码”); 实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> </script> <script src="jquery-1.12.2.js"></script> <script> //需求:点击按钮,在div中创建一个超链接 $(function () { var i=0; $("#btn").click(function () { i++; //创建元素 var aObj=$("<a href='http://www.baidu.com'>百度"+i+"</a>"); //把元素添加到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 方面的~~

Processed: 0.013, SQL: 8