jQuery2

最新推荐文章于 2024-11-16 23:03:00 发布

月色真美2.0

最新推荐文章于 2024-11-16 23:03:00 发布

阅读量38

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/csw2971379840/article/details/134914788

版权

第一章
1.1 jQuery简介
什么是Jquery?

jQuery的本质就是JavaScript

只是将JavaScript的某些方法封装成一个库，

极大简化了原生JavaScript开发。

（潜台词：JS怎么用，Jquery就怎么用，只是把JS的代码简化了）

什么是库? lib

“库”--->（library--文库，图书馆）--> 将一些相关函数方法进行封装以便使用。

类似于jar包。

Jquery的优势：

1.轻量级，jquery库的大小仅仅几十kb

2.强大的选择器

（用更精简的代码即可获取指定的html元素，

摈弃了之前通过document.getElement等方法，并支持批量操作元素）

3.浏览器的兼容性，能兼容大部分市面上的浏览器

4.等等...

jQuery的版本：

主要分为1.x.x 2.x.x 3.x.x

jQuery的三个版本功能几乎相同，主要是浏览器的兼容性不同，

随着版本的升高，jQuery逐步放弃了对老旧浏览器的兼容

1.2 引入jQuery
就理解为引入的一个外部的JS 这个外部的JS就是Jquery

如下：

然后再另外的script标签中就可以既使用JS代码也可以使用Jquery代码

如何引用：

1.下载jquery的js文件但是Hbuiler内置了如何操作：

A.选中js文件夹

B.右键创建一个js文件

C.在下方选中jquery1.x 然后重命名即可

D.不要去动里面的代码

2.在script标签中引入刚刚下载的jquery文件

3.设置语法提示库

右下角选择jquery xxx

4.测试

通过alert($) ; 如何正确弹窗就说明OK了反之失败

凡是在控制台看到了这一行代码：$ is not defined

就表示Jquery没有引入成功

Jquery的压缩版：

在开发中：会经常看见xxxx.min.xx格式的文件

看到了这个min就理解为压缩版即可。

就是去除了空格、换行、注释等，让占据空间变小而已。

没有min关键字的就是未压缩版

了解即可。

压缩版理解为上线版项目都上线了，希望项目的体积越小。

未压缩版理解为开发版项目还没有上线，我随时需要对代码进行修改

// 1.引入js的路径有问题或忘记引入jquery

// 2.顺序问题,要先引入jquery 再写相关的代码 script的顺序问题

// 3.不要在引入的jquery的script标签内部写代码

1.3 jQuery魔力
//魔力1---体现代码的简化

//分别用JS和Jquery来将页面中的h1标签的内容修改为你好

//实现

// document.getElementsByTagName("h1")[0].innerText = "你好";

//jquery实现暂时先将$("h1") 理解为获取所有的h1标签

// $("h1").text("你好");

<h1>hello js</h1>

</script>

//魔力2---批量操作元素的简化

//分别用JS和Jquery来将页面中所有的h1标签的内容修改为你好

//JS实现

// var h1 = document.getElementsByTagName("h1");

// for (let i = 0; i < h1.length; i++) {
// h1[i].innerText = "你好";

// }

//jquery实现暂时先将$("h1") 理解为获取所有的h1标签

$("h1").text("你好");

</script>

1.4 jQuery常见方法
<input type="text" id="a1" value="123" />

<h3>这是一个h3标签</h3>

<p style="color: red;">这是p标签</p>

//暂时先将$("xx") 理解为是获取xx元素且暂时理解为它是jquery对象

//暂时将 document.getElementByXxx 理解为JS对象

//注意: js对象无法使用Juqery的相关用法 Juqery对象也无法使用JS的相关用法

//Jquery中常见方法如下:

// val() text() html() css() attr() prop()

//将input组件的值修改

// document.getElementById("a1").value = "你好";

// $("input").val("鸟");

//注意事项: js的value是属性 jquery的val是方法

//val使用场景:只能修改表单元素且拥有value值的组件

//例如文本框密码框但是像h1标签 span标签就无法使用该方法

//val的2种用法:

//1.取值:

// var str = $("input").val();

// alert(str);

//2.赋值

// $("input").val("~~~");

//注意事项: js的innerText是属性 jquery的text是方法

//text使用场景:只能修改非表单元素

//例如h1标签 span标签但是像文本框密码框就无法使用该方法

//text的2种用法:

//1.取值:

// var str = $("h3").text();

// alert(str);

//2.赋值

// $("h3").text("!!!");

//注意事项: js的innerHtml是属性 jquery的html是方法

//html使用场景:只能修改非表单元素

//例如h1标签 span标签但是像文本框密码框就无法使用该方法

//html和text的区别是:前者会将html标签识别后者只会解析成文本

//html的2种用法:

//1.取值:

// var str = $("h3").html();

// alert(str);

//2.赋值

// $("h3").html("!!!");

//注意事项: js的style.xxx是属性 jquery的css是方法

//css使用场景:修改或获取HTML元素的CSS的样式

//css的2种用法:

//1.取值:

// var str = $("p").css("color");

// alert(str);

// 2.赋值

// $("p").css("color" , "yellow");

//attr使用场景:修改或获取HTML元素的属性该属性的值不为true或false

//常见的属性A类(等于一个具体的值):id class name type src href

//attr的2种用法:

//1.取值:

// var str = $("input").attr("id");

// alert(str);

// 2.赋值

// $("input").attr("id" , "aaa");

// $("button").attr("disabled","disabled");//没问题

//但是你会发现无法通过attr将其修改为可以使用

//prop使用场景:修改或获取HTML元素的属性该属性的值为true或false

//常见的属性B类(等于一个true或false):disable readonly checked

// var str = $("button").prop("disabled");

// alert(str);

$("button").prop("disabled",false);

</script>

1.5 其他知识
<script src="js/jquery.js">

</script>

//了解即可只要你保证你的js代码放在HTML最下方就可以不用写它

//文档就绪函数意义: 将HTML加载完毕之后再执行

// $(function(){
// //代码~~

// });

//看到上面的代码就需要知道他是文档就绪函数

</script>

// jquery对象：

// $(“xxx”)函数会返回一个对象，这个对象被称为jQuery对象。

// 例如刚刚所学习的css(),html()等都是jQuery对象的专属方法。

// dom对象：就是JS通过document对象获取的对象

// 例如document.getElementById();

// js对象无法使用Juqery的相关用法 Juqery对象也无法使用JS的相关用法

//js对象和jquery对象的区别:

// 下表列出了dom对象和jQuery对象进行一些操作的对比

// 1.原生JavaScript都是通过更改属性来实现

// 2.jQuery对象都是通过调用方法来实现

// 3.JavaScript是单独操作--如需批量操作需要借助for循环

// 4.jQuery是批量操作--如需单独设置，就确保其只有一个元素

</script>

//jqury对象的名字是: $

//jqury对象的名字是: jQuery

alert($==jQuery);//true

$("aa");

jQuery("aa");

//上述两行代码的意义一样,都表示获取aa元素

</script>

第二章
2.1 复习css选择器
<head>

<style>

CSS选择器：方便获取HTML的元素

1.标签选择器：直接通过标签名即可获取元素

表示将所有的p标签都设置为红色

p{
color: red;

}

2.类(class)选择器：语法：.xxx 表示获取class为xxx的元素

.a{
font-size: 20px;

}

3.id选择器：语法：#xxx 表示获取id为xxx的元素注意：确保id在本网页的唯一性

#b{
font-size: 120px;

}

4.群组选择器：语法：xxx,xxx,xxx 通过,分割将所有选择器进行统一操作

例如下面的写法表示：获取id为b class为a的 p标签

#b,.a,p{
font-size: 120px;

}

5.后代选择器：语法：父子通过空格获取父下面的所有的子元素包括孙子...

.a1 li{
color: red;

}

6.子代选择器：语法：父>子通过大于号获取父下面的子元素只能获取儿子

#aaa>.a{
color: red;

}

</style>

</head>

<body>

<hr>

</ul>

<span class="a">我是儿子a</span>

<span class="b">我是儿子b

<span class="a">我是孙子a</span>

</span>

</body>

2.2 jQuery对象讲解
<head>

$( function(){
let p = $("p").text();

console.log(p);//不会报错,但是无法得到理想值

} );

</script>

</head>

<body>

<p>我是p标签</p>

$("p").text("~~~")

//$(xxx) 的相关概念

//jquery中最常见的函数. 有2个作用:

//1. 作为元素选择器来获取元素.(修改元素。)

// 只需要要css选择器通过字符串的形式作为参数传递进行即可

// 例如$("p") 表示获取所有的p标签

// 例如$(".p") 表示获取所有class为p的元素

//2. 预加载函数（文档就绪函数）先将HTML加载完成再来执行我用法:将function作为参数传递即可

//如果可以保证js代码在HTML下方. 就可以不用该函数

</script>

</body>

2.3 jQuery自创选择器
<span>111</span>

//jquery不仅可以使用CSS选择器也有自带的选择器

// :eq(xxx)选择器表示获取第xxx个 0表示第一个

// $("span:eq(4)").text("~~~")

// :lt(xxx)选择器表示获取小于xxx的元素 0表示第一个

// $("span:lt(4)").text("~~~")

// :gt(xxx)选择器表示获取大于xxx的元素 0表示第一个

// $("span:gt(2)").text("~~~")

// :not选择器--> 表示获取除了指定位置外的其他元素

// $("span:not(:gt(2))").text("~~~");

</script>

<head>

<style>

div{
width: 100px;

height: 100px;

float: left;

margin-left: 20px;

}

</style>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

//:even选择器获取下标为偶数

$("div:even").css("background-color","Red");

//:odd选择器获取下标为为奇数

$("div:odd").css("background-color","blue");

//:first选择器获取下标为0

$("div:first").css("background-color","yellow");

//:last选择器获取最后一个

$("div:last").css("background-color","pink");

</script>

</body>

2.4 盒子变色案例
<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

//div的特点: 默认高根据内容来默认宽 :默认100% 所以块级元素 div hr p

//div

//在页面上绘制5个div 宽高各位100px 排成一行

setInterval(function(){

if( $("div:eq(2)").css("background-color") =="rgb(255, 0, 0)" ){
$("div:eq(2)").css("background-color" , "yellow");

$("div:not(:eq(2))").css("background-color" , "red");

}else{
$("div:eq(2)").css("background-color" , "red");

$("div:not(:eq(2))").css("background-color" , "yellow");

}

},1000);

</script>

2.5 隔行变色案例
<table border="1px" style="width: 500px;">

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

$("tr:odd").css("background-color","yellow");

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

$("tr:first").css("background-color","Red");

$("tr:last").css("background-color","pink");

</script>

第三章
3.1 使用jQuery操作dom元素
<div>

</div>

//dom : 文档对象模型就是HTML元素

//js中如何操作DOM节点

// document.write("<p>我是p标签</p>");

//缺点:无法在指定的位置生成元素

//$() 函数的2个用法:

//用法1:放入一个字符串(选择器)表示获取元素例如$("p") $("#abc") $(".del")

//用法2:放入一个函数，表示文档就绪函数例如 $(function(){代码...})

//用法3:如下所示

//jquery创建节点的方法如下：

//1.创建节点语法如下:

// $("xxxxx"); xxx表示你要创建的dom元素例如 $("<p>我是p标签<p>");

//此时仅仅是创建了节点.理解为是孤儿节点. 需要将其插入到某个节点中.

//例如放入body标签中方法div标签中等等.

//插入方法1:append() 表示插入到指定元素内部的尾端.

//语法: $("aa").append("bb") 表示将bb插入到aa内部的尾端

//需求如下:

//在div的尾端插入一个值为555的p标签

//1.创建一个值为555的p标签

// let a = $("<p>555<p>");

// //调用方法即可

// $("div").append(a);

//插入方法2:prepend() 表示插入到指定元素内部的首端.

//语法: $("aa").prepend("bb") 表示将bb插入到aa内部的首端

//需求如下:

//在div的首端插入一个值为000的p标签

// //1.创建一个值为000的p标签

// let a = $("<p>000<p>");

// //调用方法即可

// $("div").prepend(a);

//插入方法3:after() 表示插入到指定元素的后面. 兄弟关系

//语法: $("aa").after("bb") 表示将bb插入到aa的后面

//需求如下:

//在111的后面插入一个1.5 1.5 1.5

//1.创建一个值为000的p标签

// let a = $("<p>1.5 1.5 1.5<p>");

//调用方法即可

// $("p:eq(0)").after(a);

//插入方法4:before() 表示插入到指定元素的前面. 兄弟关系

//语法: $("aa").before("bb") 表示将bb插入到aa的前面

//需求如下:

//在333的前面插入一个2.5 2.5 2.5

//1.创建一个值为2.5 2.5 2.5的p标签

// let a = $("<p>2.5 2.5 2.5<p>");

//调用方法即可

// $("p:eq(2)").before(a);

//上述的方法可以实现在任意位置创建新的节点.

//下述的方法可以实现删除任意位置的节点:

//方法1: remove()

//语法如下: $("xx").remove(); 将xx元素彻底删除不仅删除了值而且删除了标签

//需求如下: 将444的p标签删除

// $("p:eq(3)").remove();

//方法2: empty() 清空

//语法如下: $("xx").empty(); 将xx元素删除值但是不删除标签

//需求如下: 将444的p标签删除

// $("p:eq(3)").empty();

//克隆节点

//语法: $("xxx").clone(); 将xxx元素复制一份

//注意事项:上一步仅仅只是复制此时理解为孤儿节点. 任然需要通过append prepend after before进行粘贴

//例如:将111复制一份到444的后面

let a = $("p:eq(0)").clone();

$("p:eq(3)").after(a);

</script>

3.2 克隆盒子案例
<button>按钮</button>

//需求如下:点击按钮,实现按钮的复制.1-2-4-8-16-32-64

$("button").click(function(){
// alert(123);

let a = $("button:eq(0)").clone(true);

$("button").after(a);

});

//备注:clone仅仅是复制了样式如果想要复制功能只需要在clone()加上一个true

</script>

3.3 show和hide方法
<button>按钮</button> <br>

//$("xx").hide();隐藏XX元素

//$("xx").show();显示XX元素

//$("xx").toggle();来回切换：显示或隐藏XX元素

$("button").click(function(){

// if($("img").css("display")=="inline"){
// $("img").hide();

// }else{
// $("img").show();

// }

$("img").toggle();

});

</script>

3.4 addClass和removeClass方法
<head>

<style>

.a{
font-size: 50px;

}

.b{
color: red;

}

.c{
background-color: aqua;

}

</style>

</head>

<body>

//$("xx").addClass("a");给元素添加类名为a

//$("xx").removeClass("aa);给元素移除类名为a

// $("p").addClass("a");

// $("p").addClass("b");

// $("p").addClass("c");

//jquery对象的特点: 调用任意方法的返回值依然是它本身

$("p").addClass("a").addClass("b").addClass("c").click(function(){
alert(123);

}).mouseover(function(){
alert(567)

}).removeClass("c");

</script>

</body>

3.5 获取当前元素
<button>按钮1</button>

//$("xx").index();返回当前元素在兄弟中下标

$("button").click(function(){
// $(this);获取当前的元素

alert( $(this).index() )

});

</script>

3.6 简单的轮播图
<head>

<style>

img{
width: 400px;

height: 150px;

}

li{
float: left;

margin-left: 30px;

color: pink;

}

ul{
position: absolute;

top: 100px;

left: 0;

}

div{
position: relative;

width: 400px;

margin: auto;

}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

$("li").mouseover(function(){
//获取当前li标签的下标

let index = $(this).index();

$("img").attr("src","img/"+index+".jpg");

indexImg = index;

$("li").css("color","pink");

$("li:eq("+index+")").css("color","red");

})

var indexImg = 0;

setInterval(function(){
indexImg++;

if (indexImg==6) {
indexImg = 0;

}

$("img").attr("src","img/" + indexImg +".jpg");

$("li").css("color","pink");

$("li:eq("+indexImg+")").css("color","red");

},2000)

</script>

</body>

3.7 each方法
<p></p>

<p></p>

//each方法的语法: $("xx").each( function(){ 代码体 } );

//遍历xx元素.每遍历一次就执行一次代码体.

//这种写法较为局限但是也很重要

// $("p").text("你好");

var arr = ["这是第1条新闻","这是第2条新闻","这是第3条新闻","这是第4条新闻","这是第5条新闻"]

$("p").each(function(){
$(this).text( arr[$(this).index()] );

});

</script>

3.8 LoL选项卡案例
<head>

<style>

div{
width:400px;

height: 300px;

background-color: pink;

margin: auto;

}

ul{
list-style: none;

}

li{
float: left;

margin-left: 20px;

font-size: 20px;

}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

//暂时模拟去数据库拿数据

let arr = [

["这是第1条综合数据~~~~~~~~~~","这是第2条综合数据~~~~~~~~~~","这是第3条综合数据~~~~~~~~~~","这是第4条综合数据~~~~~~~~~~","这是第5条综合数据~~~~~~~~~~","这是第6条综合数据~~~~~~~~~~"],

["这是第1条公告数据~~~~~~~~~~","这是第2条公告数据~~~~~~~~~~","这是第3条公告数据~~~~~~~~~~","这是第4条公告数据~~~~~~~~~~","这是第5条公告数据~~~~~~~~~~","这是第6条公告数据~~~~~~~~~~"],

["这是第1条赛事数据~~~~~~~~~~","这是第2条赛事数据~~~~~~~~~~","这是第3条赛事数据~~~~~~~~~~","这是第4条赛事数据~~~~~~~~~~","这是第5条赛事数据~~~~~~~~~~","这是第6条赛事数据~~~~~~~~~~"],

["这是第1条攻略数据~~~~~~~~~~","这是第2条攻略数据~~~~~~~~~~","这是第3条攻略数据~~~~~~~~~~","这是第4条攻略数据~~~~~~~~~~","这是第5条攻略数据~~~~~~~~~~","这是第6条攻略数据~~~~~~~~~~"],

["这是第1条社区数据~~~~~~~~~~","这是第2条社区数据~~~~~~~~~~","这是第3条社区数据~~~~~~~~~~","这是第4条社区数据~~~~~~~~~~","这是第5条社区数据~~~~~~~~~~","这是第6条社区数据~~~~~~~~~~"]

];

$("li").mouseover(function(){

//将所有的颜色都还原

$("li").css("color" , "black");

//悬停在哪里就将li标签文字颜色改成蓝色

$(this).css("color" , "blue");

//将li标签对应的所有新闻展示出来

//获取li标签的下标

let index = $(this).index();

let a_index = 0;

$("a").each(function(){

//注意index方法返回的是当前元素在兄弟节点的下标

//由于a标签的兄弟不仅仅只有a还有ul标签和br标签

// 所以这里的值不为012345 而是一堆可能没规律的数

//解决方式:在外面加一个变量负责计数

// let i = $(this).index();

// console.log(i);

$(this).text ( arr[index][ a_index++ ] ) ;

});

</script>

</body>

3.9 学生表格的crud
<html>

<head>

<style>

td{
width: 400px;

height: 30px;

}

input{
width: 100px;

}

</style>

</head>

<body>

<Tr>

</Tr>

</table>

<br>

编号:<input type="text" id="id" /><br>

姓名:<input type="text" id="name" /><br>

年龄:<input type="text" id="age" /><br>

</div>

$("#show_hide").click(function(){
//xx元素的显示或隐藏通过show 或hide方法来实现

//缺点:需要利用2个方法,且需要判断是显示还是隐藏

//toggle自动的进行显示和隐藏的切换

$("table").toggle();

});

//很多学生通过数组来存储. 1个学生拥有多个属性肯定通过obj对象来实现

//总结就是:声明一个数组,数组内部由多个obj对象实现

//obj对象别名:在js中我们一般习惯性的将对象称为json对象 {"key" : "value"}

//不管JSON对象的属性是什么类型统一使用字符串类型(暂时不说为什么，因为是规范)

var students = [

{
"id" : "1001",

"name": "李四",

"age" : "20"

{
"id" : "1002",

"name": "王五",

"age" : "22"

{
"id" : "1003",

"name": "赵六",

"age" : "23"

{
"id" : "1004",

"name": "张三",

"age" : "18"

}

];

//遍历学生然后输出到表格内部渲染数据

for(let i = 0 ;i<students.length;i++){
$("table").append( $("<tr><td class='db'>" +students[i].id+"</td><td class='db'>" +students[i].name+"</td><td class='db'>" +students[i].age+"</td><td><a class='del' href='#'>删除</a></td></tr>") )

}

$("#add").click(function(){
//思路:点击添加学生的超链接显示一个新增学生的表单. 但是由于表单内部的元素较多.不方便使用append方法

//所以:提前创建一个表单.通过显示或隐藏

$("#add_student_form").toggle();

})

$("#add_btn").click(function(){
$("table").append( $("<tr><td class='db'>" + $("#id").val() +"</td><td class='db'>" + $("#name").val() +"</td><td class='db'>" + $("#age").val() +"</td><td><a class='del' href='#'>删除</a></td></tr>") )

$("#id").val("");$("#name").val("");$("#age").val("");

$("#add_student_form").hide();

$(".del").click(function(){
$(this).parent().parent().remove();

})

$(".db").click(function(){
//先存好值

let val1 = $(this).text();

console.log(val1)

//将td内部的值替换成一个input组件

$(this).html("<input class='update' type='text' >");

//自动获得焦点备注:这里没有像往常一样还在内部写了一个funtion,因为这里的需求就是获取焦点

//此时焦点在文本框的首段需要改成尾端

$(".update").focus().val(val1);