本文介绍了jQuery的基础知识，包括jQuery的选择器机制、链式调用、元素转换、属性操作和事件绑定。讲解了如何通过CSS选择器获取DOM元素，使用$.fn方法，以及如何绑定和触发事件。同时还提供了选项卡和鼠标跟随的实践案例，帮助理解jQuery在实际开发中的应用。
01 . jQuery的认识
-jQuery是一个其前端的方法库
-jQuery的三个优点：
- 强大的选择器机制
- 优质的隐式迭代
- 无所不能的链式调用
-jQuery向全局暴露两个对象来通过我们调用它的方法
- jquery
- $
/*
使用jquery的时候 需要把jquery的插件引入
jquery向全局暴露两个关键字 jquery $
当使用jquery方法的时候 可以用这两个关键字来调用
$.方法名() || jquery.方法名()
jquery方法分类：
【1】jquery本身(集合)的方法 jquery() || $() || jquery集合.方法名()
【2】jquery原型方法 jquery.方法名() || $.方法名()
jquery中的选择 按照css选择器来进行选择
通过jquery选择器的方法 返回 的值 不是一个dom元素 而是一个jquery集合
jquery集合 不能使用js原生的方法和属性
dom元素 不能使用jquery的方法
jquery集合 与 dom元素的转换：
【1】jquery集合转化为dom元素：通过jQuery 索引值得到dom元素
【2】dom元素 改变为jquery集合： $(dom元素) || jquery(dom元素)
*/
let box = $(".box"); // jquery的集合
let box1 = document.querySelector(".box"); // dom元素
// console.log(box);
// console.log(box.innerHTML);
// console.log(box1.innerHTML);
// box.css('background','pink');
// box1.css('backgoround','pink');
// console.log(box[0]);
console.log($(box1));
$(box1).css("color", "#fff");
02 .jQuery的选择器
- 获取页面中 dom 元素的方式
- jquery() || $()
- jQuery 的选择器再获取页面中的元素的时候，都是有多少获取多少
- 注意点：
- 用jquery获取到的元素不能使用 js原生的方法
- 用js元素获取到的方法不能使用 jquery的方法
- jquery返回的都是元素集合
- 如果想要得到某个元素 需要用索引获取
- 当在jquery元素集合中使用索引去获取之后就变成了js 原生对象，就不能使用jquery的方法了
- 获取元素
- 根据
id获取元素：$('#id名') - 根据
class获取元素：$('.class名') - 根据标签名获取：
$('标签名') - 选择器也可以使用
$('input[type=checkbox]') - 特殊选择器
$('li:odd')获取索引为奇数的 li$('li:even')获取索引为偶数的 li$('li:first')获取第一个元素$('li:last')获取最后一个元素$('li:eq(n)')准确的获取索引为几的元素
- 根据
<body>
<div id="box">
<span lang="it">1</span>
<span>2</span>
<span class="span1">3</span>
<span>4</span>
<span>5</span>
</div>
<input type="text" />
<input type="password" />
<input type="button" />
<script>
/*
$('.class名||#id名||标签名')
当通过jquery去选择元素的时候 无论有几个元素满足 这个择器的条件 那么返回值都是jquery集合
*/
// let box = $("div");
// console.log(box);
// let span = $("#box span:last-child");
// console.log(span);
// let input = $('input[type=text]');
// console.log(input);
// 获取box下面 span元素中元素索引为3的这个元素
// let spans = $('#box span:eq(3)');
// let spans = $('#box span:not(.span1)')
let spans = $('#box span:gt(2)')
// let spans = $('#box span:lang(it)')
console.log(spans);
</script>
</body>
03 .jquery 筛选器
- Query 的筛选器就是在选择器选择到一组元素以后 进行一些更详细的筛选
first()找到所有元素中的第一个last()找到所有元素中的最后一个next()找到某一个元素的下一个兄弟元素prev()找到某一个元素的上一个兄弟元素nextAll()找到某一个元素的后面的所有兄弟元素prevAll()找到某一个元素的前面的所有兄弟元素sibling()找到某元素的所有兄弟元素parent()找到某一个元素的父元素parents()找到某一个元素的所有结构父级，一直到 htmlfind()找到一组元素中的某一个
<body>
<div class="box">
<div class="aa">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li class="aa">7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</div>
<script>
let lis = $("ul li");
let firstLi = lis.first();
let lastLi = lis.last();
let box = $('.box');
// 找到这个集合中索引为 2这个元素
let li3 = lis.eq(2);
// console.log(firstLi.nextAll());
// console.log(lastLi.prevAll());
// console.log(firstLi.siblings());
// console.log(li3.siblings());
// console.log(firstLi.prev());
// 在jquery中 只要返回的是jquery集合 那么就可以继续调用jquery方法
// console.log(lis.last().prev());
/*
parent() 得到上一级的父元素
parents() 得到所有的父级元素
*/
// console.log(lis.parents());
// console.log(lis.parents().find(".box"));
console.log(box.find('.aa'));
</script>
</body>
04 .jquery的属性方法
<body>
<div class="box"></div>
<p class="box"></p>
<script>
// var box = document.querySelector('.box');
// box.setAttribute('index',1);
/*
dom属性 HTML属性：
【1】prop() 给jquery中 的元素添加 或者 获取属性（元素本身存在）
参数1：必填，元素的属性
参数2：选填，属性值，如果填写了参数2 的时候 表示添加或者修改这属性的属性值，如果没有填写参数2 的时候 表示获取这个属性的属性值
返回值：如果有一个参数 就返回这个参数对应的值，如果有两个参数 返回的就是一个额jQuery集合
【2】attr() 添加或者获取元素的属性 可以添加任意的属性（自定义的属性）
参数1：必填，元素的属性
参数2：选填，属性值，如果填写了参数2 的时候 表示添加或者修改这属性的属性值，如果没有填写参数2 的时候 表示获取这个属性的属性值
返回值：如果有一个参数 就返回这个参数对应的值，如果有两个参数 返回的就是一个额jQuery集合
【3】removeAttr(属性) 表示把这个jquery集合中元素的属性移出
*/
//返回jquery集合，这个集合中有两个元素
let box = $(".box");
// box.prop('index','1')
// let res = box.prop("id", "c");
// console.log(res);
// let res = box.prop('id');
// console.log(res);
// console.log(box.prop("id",3));
// 当使用一个jquery集合去调用某个方法的时候
// 其实就是用集合中的每一个元素去调用这个方法
// 集合中的每一个元素都会添加 id属性 和 index属性
// 这就是所谓的隐式迭代
box.attr("id", "123");
box.attr("index", "1");
// let res = box.attr("index");
// console.log(res);
// box.removeAttr("index");
</script>
</body>
05 .操作元素的类名
<body>
<div id="box" class="aa ee qq"></div>
<div class="aa"></div>
<div class="box"></div>
<script>
let box = $("div");
/*
【1】hasClass(class名) 判断这个jquery集合中是否存在这个指定的class名
当这个jquery集合中 有多个元素的时候 有其中一个元素有这个class名 就返回true
当集合中所有的元素都没有这个class名的时候 就返回false
返回值：布尔值
【2】addClass(class名) 表示给这个jquery集合中的每一个元素都添加指定的class名
返回值：原始的jquery集合
【3】removeClass(class名) 移出jquery集合中每一个元素的class名
返回值：原始的jquery集合
【4】toggleClass(class名) 切换jquery集合中元素的class名
如果这个元素存在这个class名就移出，如果不存在就添加
返回值：原始的jquery集合
*/
// let res = box.hasClass('box');
// let res = box.addClass("box");
// let res = box.removeClass('aa');
let res = box.toggleClass('box');
console.log(res);
</script>
</body>
06 .操作元素的内容
<body>
<div>
<span>我是已经存在的内容</span>
</div>
<div>wefkfnks</div>
<input type="text" value="45r435" />
<script>
/*
【1】html() innerHTML 获取内容 或者添加内容
没有参数的是表示获取
返回值 为元素的内容
当这个jquery集合中有多个元素的时候 只能得到第一个元素的内容
当这个函数有参数 ，表示给元素设置内容
返回值：jquery集合（原始）
当这个jquery集合中有多个元素的时候 给所有元素都设置内容
【2】text() innerText 只获取元素的文本内容 还可以设置
当没有参数的时候 表示获取
返回值：元素的文本内容
当这个jquery集合中有多个元素的时候 会获取到所有元素的文本内容
当有参数的时候 表示设置
返回值：原始的jquery集合
当这个jquery集合中有多个元素的时候 给所有元素都设置内容
【3】val() 获取内容由value来决定了哪些元素的内容 也可以设置内容
没有参数就是获取
有参数的时候就是设置
*/
let div = $("div");
// let res = div.html();
// let res = div.html("<p>我是jq添加的内容</p>");
// let res = div.text();
// let res = div.text('<p>我是jq添加的内容</p>')
let inp = $("input");
// let res = div.val();
let res = inp.val("1111");
console.log(res);
</script>
</body>
07 .操作元素的样式
<body>
<div style="width: 200px;"></div>
<div style="width: 100px;"></div>
<script>
/*
css() 获取或者设置 元素的样式
必须填写参数：
当只有一个参数的时候
这个参数为字符串的是 表示获取 返回值：属性的属性值
当jquery集合中有多个元素的是 表示获取第一个元素的样式
当这个参数为一个对象的时候表示设置 返回值：原始的jquery集合
当jquery集合中有多个元素的时候 表示给所有元素都设置样式
当有两个参数的时候： 表示设置 返回值：原始的jquery集合
*/
let box = $("div");
// let res = box.css("width", "200px")
// .css("height", "200px")
// .css('background','pink')
let res = box.css({
height: "200px",
background: "pink",
});
let res1 = box.css('width');
console.log(res1);
</script>
</body>
08 .绑定事件
<div class="box">
<div>
<button class="active">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
</div>
<input type="button" value="点击" />
<span>13213</span>
</div>
<script>
// let btn = $("button");
// 【1】jquery集合.on('事件类型',事件处理函数)
// 给这个集合绑定 表示给集合中的每一个元素都绑定
// btn.on("click", function () {
// $(this) 把dom元素转化为 jquery集合
// $(this).addClass('active') 给当前点击的这个元素添加class
// .siblings() 获取当前点击这个元素的所有兄弟元素
// .removeClass("active") 把所有的兄弟元素的active名移出
// $(this).addClass("active").siblings().removeClass("active");
// });
// 【2】事件委托的形式绑定事件
// jquery集合.on('事件类型','事件委托的元素',事件处理函数)
// let str = "button,input";
// $(".box").on("click", str, function (e) {
// // 事件处理函数中 this指向 真正点击的元素
// let e = window.event;
// console.log(e);
// });
// 【3】可以传递参数的绑定事件
// jquery集合.on(事件类型,参数,事件处理函数)
// 当第二个参数 给事件处理函数传递参数的时候 ，数据类型不能为字符串
// 如果第二个参数为字符串会把这个当成事件委托的形式去处理
let btn = $("button");
// btn.on("click", [1, 2, 3, 4], function (e) {
// console.log(e);
// });
// 【4】如果传递的参数就是一个字符串的时候
// 需要把参数为第三个位置
// 第二个位置 可以给一个 ''
btn.on("click", "", "我是参数", function (e) {
console.log(e);
});
// 主动触发 事件
btn.trigger('click');
</script>
</body>
jQuery1练习案例
01.选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
ol,
li {
list-style: none;
}
.box {
width: 600px;
height: 360px;
border: 10px solid pink;
margin: 30px auto;
display: flex;
flex-direction: column;
}
.box>ul {
height: 45px;
display: flex;
}
.box>ul>li {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background-color: skyblue;
font-size: 30px;
}
.box>ul>li.active {
background-color: orange;
}
.box>ol {
flex: 1;
position: relative;
}
.box>ol>li {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: purple;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
color: #fff;
display: none;
}
.box>ol>li.active {
display: flex;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<script src="./jquery/jquery.min.js"></script>
<script>
$("ul>li").click(function(){
$(this)
.siblings() // 自己的所有兄弟元素，就是当前ul下所有的li
.removeClass('active') // 移除类名
.end() // 让返回回到自己
.addClass("active") // 添加类名
.parent() // 找到父元素 ul
.next() // 下一个兄弟元素 ol
.children() // 所有的子元素
.removeClass("active") // 移除 active 类名
.eq($(this).index()) // 找到索引和自己对应的那一个
.addClass("active") // 添加 active 类名
})
</script>
</body>
</html>
02.鼠标跟随
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div.show {
width: 400px;
height: 150px;
border: 10px solid pink;
margin: 30px auto;
display: flex;
justify-content: space-evenly;
align-items: center;
position: relative;
}
img {
width: 100px;
height: 100px;
display: block;
}
.current {
width: 288px;
height: 180px;
position: absolute;
top: 0;
left: 0;
display: none;
}
.current>img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="show">
<img src="1.png" alt="">
<img src="2.png" alt="">
<img src="3.png" alt="">
<div class="current">
<img src="1.png" alt="">
</div>
</div>
<script src="./jquery/jquery.min.js"></script>
<script>
$(".show>img").hover(function(){
$(".current").fadeIn(200);
},function(){
$(".current").fadeOut(200);
});
$(".show>img").mousemove(function(e){
$(".current")
.css({
left:e.offsetX+$(this).position().left+15,
top:e.offsetY+$(this).position().top+15
})
.find("img")
.attr("src",$(this).attr("src"))
})
</script>
</body>
</html>
扫一扫
1169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
