jQuery实际是一个封装好的JS库,简化方便我们获取和操作DOM
入口函数
$(function(){
... // 此处是页面DOM加载完成的入口
})
$(document).ready(function(){
... // 此处页面DOM加载完成的入口
})
- 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源完成,jQuery帮我们完成了封装。
- 相当于原生JS的DOMContentLoaded
- 不同于原生JS load事件是等页面文档、外部的JS文件、css文件、图片加载完毕后才会执行内部代码。
- 更推荐标红的方式
jQuery 的顶级对象$
$是jQuery的别称,在代码中可以使用jQuery代替$,通常都直接使用$
$是jQuery的顶级对象,相当于JS中的window,把元素利用$包装成jQuery对象,就可以调用jQuery的方法。
jQuery对象和DOM对象
1、用原生JS获取来的对象就是DOM对象
2、jQuery 方法获取的元素是jQuery对象
3、jQuery对象的本质是:利用$对DOM对象包装后产生的对象(伪数组形式储存)
4、jQuery对象只能用JQuery方法 DOM对象只能用DOM放法 但是他们是可以相互转换的
DOM对象转换成jQuery对象:$(DOM对象)
$('div')
jQuery 对象转换为DOM对象(两种方式)
$('div')[index] index 是索引值
$('div').get(index) index 是索引值
<style>
#von{
width: 200px;
height: 200px;
background: #ff3355;
}
</style>
<div id="von"></div>
<script>
$(function () {
let von = document.querySelector('#von')
$('#von')[0].style.border = '4px solid #000000'
$('#von').get(0).style.background = '#999999'
$(von).css({
width:600
})
})
</script>
jQuery 基础选择器
名称 | 用法 | 描述 |
ID选择 | $("#id") | 获取指定的ID元素 |
全选选择器 | $('*') | 匹配所有元素 |
类选择器 | $('.box') | 获取同一类class的元素 |
标签选择器 | $('span') | 获取同一类标签的所有元素 |
并集选择器 | $('div,p,li') | 选取多个元素 |
交集选择器 | $('li.current') | 交集元素 同时拥有 |
子代选择器 | $('ul>li') | >获取直接子元素,不会再向下获取 |
后代选择器 | $("ul li") | 使用空格,获取后代下所有指定元素 |
隐式迭代
遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。
简单理解:给匹配到的元素进行循环遍历,执行相应的方法,而不用我们进行循环方便我们调用
例如页面中有很多li 我们获取到进行一次操作 所有的li都会发生
$('li').css('color','blue')
jQuery 筛选选择器
语法 | 用法 | 描述 |
:first | $('li:first') | 获取第一个li元素 |
:last | $('li:last') | 获取最后一个li元素 |
:eq(index) | $('li:eq(2)') | 获取到的li元素中,选择索引号2的元素, 索引号index 从0开始 |
:odd | $('li:odd') | 获取到li元素中,选择索引号为奇数的元素 |
:even | $('li:even') | 获取到li元素中,选择索引号为偶数的元素 |
jQuery 节点选择器
语法 | 用法 | 说明 |
parent() | $("li").parent | 查找父级 |
children(selector) | $("ul").children("li") | 相当于$("ul>li") 最近一级(亲儿子) |
find(selector) | $("ul").find("li") | 相当于$("ul li") 后代选择器 |
siblings(selector) | $(".first").siblings("li") | 查找兄弟节点(参数不写就是全部的兄弟),不包括自己本身 |
nextAll([expr]) | $(".first").nextAll() | 查找当前元素之后的所有同辈元素 |
prevtAll([expr]) | $(".last").prevtAll() | 查找当前元素之前的所有同辈元素 |
hasClass(class) | $("div").hasClass("proteced") | 检查当前的元素是否含有某个特定的类,如果有返回true |
eq(index) | $("li").eq(2) | 相当于 $("li:eq(2)") index从0开始 |
一些小案例(核心代码)分享
导航下拉
鼠标移入下滑显示 移出上滑隐藏
$(function () {
$('.nav-nei li').mouseenter(function () {
$(this).children('ul').stop().slideDown(200)
})
$('.nav-nei li').mouseleave(function () {
$(this).children('ul').stop().slideUp(200)
})
})
按照标签 切换内容/图片
jQuery得到当前元素的索引号 $(this).index()
$('.left li').mouseenter(function () {
// 处理点击标签时 样式的切换 为当前点击的添加激活样式 去除其他的
$(this).addClass('currend').siblings().removeClass('currend')
// 得到当前元素的索引号
let index = $(this).index()
// 标签和内容是一一对应的 一个标签对应一个内容 根据索引值进行操作
$('.right li').eq(index).show().siblings().hide()
})
对比原生的JS:
/* 导航显示 */
var lis1 = document.querySelector(".nav-nei").children
console.log(lis1)
for(var i =0;i<lis1.length;i++){
lis1[i].onmousemove = function(){
this.children[1].style.display = "block"
}
lis1[i].onmouseout = function(){
this.children[1].style.display = "none"
}
}
/* 标签切换 */
var tabs = document.querySelector(".tab").querySelectorAll("li"),
contant = document.querySelector(".contant").querySelectorAll(".item");
for(var i = 0;i<tabs.length;i++){
tabs[i].setAttribute("index",i) // 给上层按钮 加上索引号
tabs[i].onclick = function(){
for(var i = 0;i<tabs.length;i++){
tabs[i].className = "" // 点击后先把所有选中样式全部去掉
}
this.className = "currend" // 在单独给自己加上
for(var i = 0;i<contant.length;i++){
contant[i].style.display = "none"
}
// 这里直接用I 的话 它加到 5 了 所以娶不到
contant[this.getAttribute("index")].style.display = "block"
}
}