目录
一：jQuery基本运用
[1.顶级符号](#1.顶级符号)
2.DOM对象和jQuery对象
3.jQuery对象和DOM对象相互转换
二：jQuery选择器
1.基本选择器:
2.层级选择器：
3.隐式迭代器：
4.筛选选择器：
5.选取父类元素
6.找兄弟元素：
7.排他思想
三：修改样式
一：jQuery基本运用
1.顶级符号$
html
复制代码
<body>
<div></div>
<script>
//第一种
$(function(){
alert(11)
});
jQuery(function(){
$('div').head();//$和jQuery可替换
jQuery('div').hide();//与上方效果相同
});
</script>
2.DOM对象和jQuery对象
html
复制代码
<body>
<div></div>
<span></span>
<script>
//1.DOM对象：用原生JS获取对象
var myDiv=document.querySelector("div");
var mySpan=document.querySelector('span');
console.dir(myDiv);
//jQuery对象只能用jQuery方法，DOM对象则使用原生JavaScript属性即方法
$('div');
$('span');
console.dir($('div'));
//3.jQuery对象只能使用jQuery方法，DOM对象则使用JavaScript属性及方法
myDiv.style.display='none';
//$('div').myDiv.style.display='none';是jQuery对象，不能用style和display
//myDiv.hide();myDiv是一个DOM对象，不能使用jQuery里面的hide方法
</script>
//jQuery对象本质是：利用$对DOM对象包装后产生的新对象(伪数组形式)
3.jQuery对象和DOM对象相互转换
html
复制代码
<script src="jquery_3.6.0.js"></script>
</head>
<body>
<video src='mov.mp4' muted></video>
<script>
//1.直接获取视频，得到就是jQuery对象
$('video');
//2.使用原生JS获取DOM对象
var myvideo=document.querySelector('video');
myvideo.play();
$('video')[0].play()
$('video').get(0).play()
</script>
二：jQuery选择器
1.基本选择器:
| 名称 |
用法 |
描述 |
| id选择器 |
$("#id") |
获取指定id元素 |
| 全选择器 |
$("*") |
匹配所有元素 |
| 类选择器 |
$(".class") |
获取同一类class元素 |
| 标签选择器 |
$("div") |
获取同一类标签元素 |
| 并集选择器 |
$("div.p.li") |
获取多个元素 |
| 交集选择器 |
$("li.current") |
交集元素 |
html
复制代码
<body>
<div>我是div</div>
<div class='nav'>我是nav</div>
<p>我是p</p>
<ol>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ol>
<ul>
<li>我是ul</li>
<li>我是ul</li>
<li>我是ul</li>
</ul>
<script>
$(function(){
$(".nav");
})
</script>
2.层级选择器：
| 名称 |
用法 |
描述 |
| 子代选择器 |
$("ul>li") |
使用>，获取儿级元素 |
| 后代选择器 |
$("ul li") |
使用空格，获取所有后代元素 |
html
复制代码
<body>
<div>我是div</div>
<div class='nav'>我是nav</div>
<p>我是p</p>
<ol>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ol>
<ul>
<li>我是ul</li>
<li>我是ul</li>
<li>我是ul</li>
</ul>
<script>
$(function(){
console.log($(".nav"));
console.log($("ul li"))
})
</script>
3.隐式迭代器：
html
复制代码
<body>
<div>哈哈哈</div>
<div>哈哈哈</div>
<div>哈哈哈</div>
<ul>
<li>近几年</li>
<li>近几年</li>
<li>近几年</li>
</ul>
<script>
//1.获取四个div元素
console.log($("div"));
//2.四个div设置背景颜色为粉色,类似于遍历
$("div").css("background","pink");
//隐式迭代类似于遍历
</script>
4.筛选选择器：
| 语法 |
用法 |
描述 |
| :frist |
$("li:first") |
获取第一个li元素 |
| :last |
$("li:last") |
获取最后一个li元素 |
| :eq(index) |
$("li:eq(2)") |
获取li元素中，索引为2的元素,索引从0开始 |
| :odd |
$("li:odd") |
获取li元素中，索引为奇数的元素 |
| :even |
$("li:even") |
获取li元素中索引为偶数的元素 |
html
复制代码
<body>
<ul>
<li>多个</li>
<li>多个</li>
</ul>
<ol>
<li>不对劲</li>
<li>不对劲</li>
</ol>
<script>
$(function(){
$("ul li:first").css("color","red");
$("ul li:eq(2)").css("color","blue");
$("ol li:odd").css("color","skyblue");
$("ol li:even").css("color","pink")
})
</script>
5.选取父类元素
| 语法 |
用法 |
说明 |
| parent() |
$("li").parent() |
查找父级 |
| children(selector) |
$("ul").children("li") |
相当于$("ul>li"),找最近一级 |
| find(selector) |
$("ul").find("li") |
相当于$("ul li")后代选择器 |
| siblings(selector) |
$(".first").sibling('li') |
查找兄弟节点，不包括自己 |
| nextAll([expr]) |
$(".first").nextAll() |
查找当前元素之后的所有同辈元素 |
| prevtAll([expr]) |
$(".last").prevAll() |
查找当前元素之前的所有同辈元素 |
| hasClass(class) |
$("div").hasClass('protected') |
检查当前元素是否含有某个特定的类，有则返回true |
| eq(index) |
$("li").eq(2) |
相当于$("li:eq(2)") index从0开始 |
html
复制代码
<body>
<div class='yeye'></div>
<div class="father">
<div class="son">儿子</div>
</div>
<div class="nav">
<p>屁</p>
<div>
<p>我是p</p>
</div>
</div>
<script>
$(function(){
//1.父parent()返回最近一级的父级元素
console.log($(".son").parent());
//2.子
//(1)亲儿子children
$(".nav").children("p").css("color","blue");
//(2)选里面所有的孩子，包括儿子和孙子
$(".nav").find("p").css("color","red");
})
</script>
</body>
6.找兄弟元素：
html
复制代码
<body>
<ol>
<li>我是li</li>
<li class="item">我是li</li>
<li>我是li</li>
</ol>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<div class="current">俺有current</div>
<div>暗示我</div>
<script>
$(function(){
//1.兄弟元素siblings除自身外的所有兄弟元素
$("ol .item").siblings("li").css("color","red");
//2.第n个元素
var index=2;
$("ul li:eq(2)").css("color","blue");
$("ul li").eq(3).css("color","green");
//3.判断是否有某个类名
console.log($("div:first").hasClass("current"));
console.log($("div:last").hasClass("current"));
})
7.排他思想
html
复制代码
<body>
<button>点我</button>
<button>点我</button>
<button>点我</button>
<button>点我</button>
<script>
$(function(){
//1.隐式迭代，给所有按钮都绑定事件
$("button").click(function(){
//2.当前元素变化的背景颜色
$(this).css("background",'pink');
//3.再改变其余兄弟背景颜色
$(this).siblings("button").css("background","black");
//链式编程将二者合二为一
//$("this").css("color",'red').siblings().css("color",'')
});
})
</script>
三：修改样式
html
复制代码
<style>
div{
width:200px;
height:200px;
background-color:pink;
}
</style>
</head>
<body>
<div></div>
<script>
//操作css方法
$(function(){
console.log($("div").css("width"));
$("div").css("width","300px");
$("div").css({
w<style>
div{
width:200px;
height:200px;
background-color:pink;
}
</style>
</head>
<body>
<div></div>
<script>
//操作css方法
$(function(){
console.log($("div").css("width"));
$("div").css("width","300px");
$("div").css({
width:400,
height:400,
backgroundColor:"red",
})
})
设置样式方法
| 添加类 |
$("DIV")ADDCLASS("CURRENT") |
| 移除类 |
$("div").removeClass("current") |
| 切换类 |
$("div").toggleClass("current") |
html
复制代码
<title>document</title>
<script src="jquery.2.2.js"></script>
<style>
div{
width:150px;
height:150px;
background-color:pink;
margin:100px auto;
}
.current{
background-color:red;
}
</style>
</head>
<body>
<div class='current'></div>
<script>
$(function(){
//1.添加类addClass()
$("div").click(function(){
$(this).addClass("current");
})
//2.删除类
$("div").click(function(){
$(this).removeClass("current");
})
//3.切换类
$("div").click(function(){
$(this).toggleClass("current");
})
})